ectl.me

🗣 Unicode Inspector

Type something…

📊 CSV Viewer

📌 JSON → Table

📄 HTML → Markdown

📈 SQL Formatter

📝 YAML Validator

📄 XML Formatter

🎨 CSS Formatter / Minifier

📚 Readability Scorer

📅 Date Calculator

Days between two dates

→

Add / subtract days

🎨 Color Converter

📷 Aspect Ratio

×

📡 Bandwidth Calculator

at

💳 IBAN / Luhn Validator

📍 Roman Numerals

🔈 Text to Speech

Rate 1×

🌐 IP / DNS Lookup

🅐 ASCII Art

🍅 Pomodoro Timer

25:00

Focus

Sessions: 0

📝 Markdown Preview

Live

⌨ Typing Speed Test

WPM: — Acc: — 60s

💰 Meeting Cost Calculator

0:00:00

Total cost: $0.00

📐 Pixel ↔ Rem Converter

Base: px

px →

rem →

🎯 CSS Specificity Calculator

🔢 Counter / Tally Tracker

💹 Compound Interest Calculator

Principal ($) Annual Rate (%) Years Compounds / year

Monthly Contribution ($)

🔗 URL Parser

🔀 JSON Diff

JSON A (original)

JSON B (modified)

🖼 SVG Viewer

🌍 Timezone Converter

From To

📡 HTTP Status Codes Reference

Code	Name	Description
100	Continue	Server has received request headers; client should continue sending body.
101	Switching Protocols	Upgrading connection protocol as requested (e.g. WebSocket).
102	Processing	WebDAV: server has received and is processing the request.
103	Early Hints	Return some response headers before final HTTP message to preload resources.
200	OK	Standard success response.
201	Created	Request fulfilled and a new resource was created.
202	Accepted	Request has been accepted for processing but has not been completed.
204	No Content	Success with no response body.
206	Partial Content	Partial GET fulfilled; used for range requests.
207	Multi-Status	WebDAV: multiple status codes may apply.
301	Moved Permanently	Resource permanently moved to a new URL.
302	Found	Temporary redirect to a different URI.
303	See Other	Response is at a different URI; use GET to retrieve it (post/redirect/get).
304	Not Modified	Cached version is still valid; no need to retransmit.
307	Temporary Redirect	Like 302 but HTTP method must not change on redirect.
308	Permanent Redirect	Like 301 but HTTP method must not change on redirect.
400	Bad Request	Malformed request syntax or invalid parameters.
401	Unauthorized	Authentication required; credentials missing or invalid.
403	Forbidden	Server refuses to fulfil request; you lack permission.
404	Not Found	Requested resource does not exist.
405	Method Not Allowed	HTTP method not allowed for this endpoint.
408	Request Timeout	Client did not send a request within server's timeout window.
409	Conflict	Request conflicts with current state of the resource.
410	Gone	Resource permanently deleted; no forwarding address available.
413	Payload Too Large	Request body exceeds the server's size limit.
415	Unsupported Media Type	Content-Type of request is not supported.
418	I'm a Teapot	RFC 2324 April Fools — server is a teapot and refuses to brew coffee.
422	Unprocessable Entity	Validation error; request body is semantically incorrect.
429	Too Many Requests	Rate limiting: too many requests sent in a given window.
451	Unavailable For Legal Reasons	Resource unavailable due to legal restrictions.
500	Internal Server Error	Generic server-side error; no specific message.
501	Not Implemented	Server lacks the ability to fulfil the request.
502	Bad Gateway	Upstream server returned an invalid or unexpected response.
503	Service Unavailable	Server temporarily unable to handle requests (overloaded or maintenance).
504	Gateway Timeout	Upstream server did not respond in time.
505	HTTP Version Not Supported	HTTP version used in the request is not supported.
511	Network Authentication Required	Client must authenticate to gain network access (captive portal).

🐙 Git Commands Reference

Command	Description
git init	Initialise a new Git repository in the current directory.
git clone <url>	Clone a remote repository to your local machine.
git status	Show working directory status (staged, unstaged, untracked files).
git add <file>	Stage a specific file for the next commit.
git add .	Stage all changes in the current directory.
git commit -m "msg"	Create a commit with the given message.
git commit --amend	Modify the most recent commit (message or staged content).
git log --oneline	Show compact commit history one line per commit.
git log --graph --all	Visualise branch history as an ASCII graph.
git diff	Show unstaged changes in the working directory.
git diff --staged	Show staged changes that will be in the next commit.
git branch	List local branches.
git branch <name>	Create a new branch without switching to it.
git branch -d <name>	Delete a branch (must be fully merged).
git checkout <branch>	Switch to an existing branch.
git checkout -b <name>	Create and immediately switch to a new branch.
git switch <branch>	Modern syntax to switch branches.
git switch -c <name>	Create and switch to a new branch (modern).
git merge <branch>	Merge named branch into the current branch.
git merge --no-ff <branch>	Force a merge commit even if fast-forward is possible.
git rebase <branch>	Reapply commits on top of another base branch.
git rebase -i HEAD~n	Interactive rebase to squash, reorder or edit last n commits.
git stash	Stash uncommitted changes to a temporary stack.
git stash pop	Apply the most recent stash and remove it from the stack.
git stash list	List all stashed changesets.
git pull	Fetch from remote and merge into current branch.
git pull --rebase	Fetch and rebase your commits on top instead of merging.
git push	Push commits to the tracked remote branch.
git push -u origin <branch>	Push and set upstream tracking for the branch.
git push --force-with-lease	Safe force push; fails if remote has commits you haven't seen.
git remote -v	Show all remotes and their URLs.
git remote add origin <url>	Add a remote named origin.
git reset HEAD~1	Undo last commit, keeping changes staged.
git reset --hard HEAD~1	Undo last commit and discard all changes (destructive).
git revert <commit>	Create a new commit that undoes a specific commit (safe for shared branches).
git cherry-pick <hash>	Apply a specific commit onto the current branch.
git tag <name>	Create a lightweight tag at the current commit.
git tag -a v1.0 -m "msg"	Create an annotated tag with a message.
git bisect start	Start binary search to find a bug-introducing commit.
git reflog	Show full history of HEAD; useful to recover lost commits.
git blame <file>	Show who last changed each line of a file.
git shortlog -sn	Show commit count summaries per author.
git clean -fd	Delete untracked files and directories from working tree.
git worktree add <path>	Check out a branch into a separate directory without cloning.

📦 CSS Flex & Grid Reference

Container properties:

display: flex	Enable flex layout on the container.
flex-direction: row \| column \| row-reverse \| column-reverse	Sets the main axis direction.
flex-wrap: nowrap \| wrap \| wrap-reverse	Whether items wrap onto multiple lines.
justify-content: flex-start \| center \| flex-end \| space-between \| space-around \| space-evenly	Alignment along main axis.
align-items: stretch \| flex-start \| center \| flex-end \| baseline	Alignment along the cross axis.
align-content	Pack multi-row flex lines; same values as justify-content.
gap: <row-gap> <col-gap>	Space between flex items.

Item properties:

flex: <grow> <shrink> <basis>	Shorthand — e.g. flex: 1 1 auto or flex: 0 0 200px.
flex-grow: 0 \| 1 \| n	How much item grows relative to its siblings.
flex-shrink: 1 \| 0 \| n	How much item shrinks. Set 0 to prevent shrinking.
flex-basis: auto \| <size>	Default size before space is distributed.
align-self; order	Override container alignment / visual order for a single item.

🔐 Password Strength

—

Entropy: —

🔑 Caesar / ROT13 Cipher

Shift:

♿ WCAG Colour Contrast Checker

Foreground

Background

The quick brown fox jumps over the lazy dog.

🌐 cURL Command Builder

-v (verbose) -s (silent) -k (insecure)

🧠 Brainfuck Interpreter

Tokens: > < + - . , [ ] — all other characters are comments

Program input (used by ,)

Step limit:

Output:

📖 Regex Cheat Sheet

Token	Meaning	Example
.	Any character except newline	a.c → abc, aXc
^	Start of string / line	^hello → "hello world"
$	End of string / line	world$ → "hello world"
*	0 or more of preceding	ab* → a, ab, abb
+	1 or more of preceding	ab+ → ab, abb (not a)
?	0 or 1 of preceding (optional)	colou?r → color, colour
{n}	Exactly n repetitions	a{3} → aaa
{n,m}	Between n and m repetitions	a{2,4} → aa, aaa, aaaa
[abc]	Character class: a, b, or c	[aeiou] → vowels
[^abc]	Negated class: not a, b, or c	[^0-9] → non-digit
[a-z]	Character range	[A-Za-z] → any letter
(abc)	Capturing group	(foo)+ → foofoo
(?:abc)	Non-capturing group	(?:foo)+ → no capture
a\|b	Alternation: a or b	cat\|dog → cat, dog
\d	Any digit [0-9]	\d{4} → year
\D	Any non-digit	\D+ → letters/symbols
\w	Word character [a-zA-Z0-9_]	\w+ → identifier
\W	Non-word character	\W → spaces, punctuation
\s	Whitespace [ \t\n\r\f\v]	\s+ → spaces
\S	Non-whitespace	\S → any visible char
\b	Word boundary	\bcat\b → isolated "cat"
\B	Non-word boundary	\Bcat\B → cats in "catfish"
(?=...)	Positive lookahead	foo(?=bar) → foo in foobar
(?!...)	Negative lookahead	foo(?!bar) → foo not before bar
(?<=...)	Positive lookbehind	(?<=foo)bar → bar after foo
(?<!...)	Negative lookbehind	(?<!foo)bar → bar not after foo
(?<name>...)	Named capturing group	(?<year>\d{4})
\n, \t	Newline, tab	line1\nline2
*? +? ??	Lazy/non-greedy quantifiers	<.*?> → first tag only
g i m s u y	Flags: global, case-insensitive, multiline, dotAll, unicode, sticky	/foo/gi

📚 JavaScript Array & String Methods

Method	Description	Returns
Array Methods
.push(...items)	Adds items to the end of an array.	new length
.pop()	Removes and returns the last element.	removed item
.shift()	Removes and returns the first element.	removed item
.unshift(...items)	Adds items to the beginning of an array.	new length
.map(fn)	Creates a new array by calling fn on each element.	new Array
.filter(fn)	Creates a new array with elements that pass fn test.	new Array
.reduce(fn, init)	Reduces array to a single value using fn(acc, cur).	any
.find(fn)	Returns the first element where fn returns true.	item \| undefined
.findIndex(fn)	Returns the index of the first matching element.	number
.some(fn)	Returns true if at least one element passes fn.	boolean
.every(fn)	Returns true if all elements pass fn.	boolean
.forEach(fn)	Executes fn for each element; no return value.	undefined
.includes(val)	Returns true if array contains val.	boolean
.indexOf(val)	Returns index of first occurrence, or -1.	number
.slice(start, end)	Returns a shallow copy of a portion of the array.	new Array
.splice(start, del, ...add)	Removes/replaces/inserts elements in place.	removed Array
.sort(compareFn)	Sorts array in place. Provide compareFn(a,b) for custom order.	sorted Array
.reverse()	Reverses array in place.	Array ref
.flat(depth)	Flattens nested arrays up to depth levels deep.	new Array
.flatMap(fn)	map() then flatten one level deep.	new Array
.concat(...arrs)	Merges arrays into a new array.	new Array
.join(sep)	Joins all elements into a string with separator.	string
.fill(val, start, end)	Fills elements from start to end with val.	Array ref
Array.from(iterable)	Creates array from array-like or iterable (e.g. NodeList, Set).	new Array
Array.isArray(val)	Returns true if val is an Array.	boolean
[...new Set(arr)]	Deduplicate an array — spread a Set into a new array.	new Array
String Methods
.split(sep)	Splits string into an array on sep.	string[]
.slice(start, end)	Extracts substring from start to end (negatives count from end).	string
.substring(start, end)	Like slice but no negative indices.	string
.includes(str)	Returns true if string contains str.	boolean
.startsWith(str)	Returns true if string starts with str.	boolean
.endsWith(str)	Returns true if string ends with str.	boolean
.indexOf(str)	Returns index of first occurrence, or -1.	number
.replace(find, rep)	Replaces first match; pass regex with /g for all.	string
.replaceAll(find, rep)	Replaces all string occurrences (ES2021).	string
.trim()	Removes leading and trailing whitespace.	string
.trimStart() / .trimEnd()	Removes whitespace from start or end only.	string
.padStart(len, char)	Pads string at start to reach length len.	string
.padEnd(len, char)	Pads string at end to reach length len.	string
.repeat(n)	Returns string repeated n times.	string
.toUpperCase() / .toLowerCase()	Changes string case.	string
.match(regex)	Returns matches; with /g returns all matches as array.	Array \| null
.matchAll(regex)	Returns iterator of all regex matches (use /g flag).	Iterator
.at(index)	Returns char at index; negatives count from end (-1 = last).	string
.charCodeAt(i) / .codePointAt(i)	Returns char code / Unicode code point at index i.	number

🐧 Linux / Unix Commands Reference

Command	Description
ls -lah	List files in long format, human-readable sizes, include hidden.
cd <path>	Change current directory.
pwd	Print working directory (current path).
mkdir -p <dir>	Create directory and all parent directories with -p.
rm -rf <dir>	Remove directory and contents recursively. Use with caution.
cp -r src dest	Copy files or directories recursively.
mv src dest	Move or rename a file or directory.
cat <file>	Print file contents to standard output.
less <file>	View file with scrollable pager. Press q to quit.
head -n 20 <file>	Show first 20 lines of a file.
tail -f <file>	Follow file in real-time (e.g. logs). Ctrl+C to stop.
grep -rn "text" .	Recursively search for text in files, showing line numbers.
find . -name "*.js"	Find files matching a pattern under current directory.
wc -l <file>	Count lines in a file.
sort <file>	Sort lines alphabetically. Use -n for numeric, -r for reverse.
uniq -c	Remove duplicate lines (pipe from sort). -c shows count.
awk '{print $1}' <file>	Print first field of each line (default delimiter: whitespace).
sed 's/old/new/g' <file>	Substitute all occurrences of "old" with "new" in a file.
chmod 755 <file>	Change file permissions. 755 = rwxr-xr-x.
chown user:group <file>	Change file owner and group.
ps aux \| grep <name>	List processes, filter by name.
kill -9 <pid>	Force-kill process by PID.
top / htop	Interactive process viewer. htop is enhanced version.
df -h	Show disk usage, human-readable.
du -sh <dir>	Show disk usage of a directory.
free -h	Show memory usage (RAM / swap).
ping -c 4 <host>	Send 4 ICMP packets to a host.
curl -I <url>	Fetch HTTP headers only.
ssh user@host	Connect to a remote host via SSH.
scp src user@host:dest	Copy files to/from remote host via SSH.
tar -czf out.tar.gz <dir>	Create a gzip-compressed tarball.
tar -xzf <file.tar.gz>	Extract a gzip tarball.
echo $VAR	Print the value of an environment variable.
export KEY=value	Set and export an environment variable.
crontab -e	Edit scheduled cron jobs for the current user.
journalctl -u <service>	View systemd service logs.
systemctl status <service>	Check if a systemd service is running.
lsof -i :<port>	List process listening on a specific port.
nc -zv <host> <port>	Test if a TCP port on a host is open (netcat).

⌨️ VS Code & Browser Keyboard Shortcuts

Shortcut (macOS / Win)	Action	Context
VS Code – Editor
⌘P / Ctrl+P	Quick open file	VS Code
⌘⇧P / Ctrl+Shift+P	Command Palette	VS Code
⌘/ / Ctrl+/	Toggle line comment	VS Code
⌥↑ / Alt+↑	Move line up	VS Code
⌥⇧↓ / Alt+Shift+↓	Copy line down	VS Code
⌘D / Ctrl+D	Select next occurrence of word	VS Code
⌘⇧K / Ctrl+Shift+K	Delete current line	VS Code
⌘F / Ctrl+F	Find in file	VS Code
⌘⇧F / Ctrl+Shift+F	Find across all files	VS Code
F12	Go to definition	VS Code
⌥F12 / Alt+F12	Peek definition inline	VS Code
⌘⇧\ / Ctrl+Shift+\	Jump to matching bracket	VS Code
⌘K ⌘F / Ctrl+K Ctrl+F	Format selected code	VS Code
⌥⌘[ / Ctrl+Shift+[	Fold code block	VS Code
⌘K Z / Ctrl+K Z	Zen / distraction-free mode	VS Code
⌘⇧E / Ctrl+Shift+E	Explorer panel	VS Code
⌃` / Ctrl+`	Toggle integrated terminal	VS Code
Browser DevTools
F12 / ⌘⌥I	Open DevTools	Browser
⌘⇧C / Ctrl+Shift+C	Inspect element mode	Browser
⌘⇧J / Ctrl+Shift+J	Open Console panel directly	Browser
⌘R / Ctrl+R	Reload page	Browser
⌘⇧R / Ctrl+Shift+R	Hard reload (bypass cache)	Browser
⌘L / Ctrl+L	Focus address bar	Browser
⌘T / Ctrl+T	Open new tab	Browser
⌘W / Ctrl+W	Close current tab	Browser
Universal
⌘Z / Ctrl+Z	Undo	Universal
⌘⇧Z / Ctrl+Y	Redo	Universal
⌘A / Ctrl+A	Select all	Universal
⌘⇧S / Ctrl+Shift+S	Save as	Universal

🔢 ASCII / Decimal / Hex / Binary Table

Printable ASCII characters (32–126)

Char	Dec	Hex	Oct	Binary	HTML

🔷 TypeScript Cheat Sheet

Syntax	Description	Example
Primitive Types
string	Text values	let name: string = "Alice"
number	All numeric values (int and float)	let age: number = 30
boolean	true or false	let active: boolean = true
null / undefined	Absence of value / uninitialized	let x: null = null
symbol	Unique identifiers	const id: symbol = Symbol('id')
bigint	Arbitrary precision integers	let big: bigint = 9007199n
Special Types
any	Opts out of type checking (avoid when possible)	let x: any = getData()
unknown	Safer version of any — must narrow before use	let val: unknown = fetch()
never	Value that never occurs (e.g. throw, infinite loop)	function error(): never { throw... }
void	Function with no meaningful return	function log(): void { ... }
Collections & Structures
T[]	Array of type T	let nums: number[] = [1,2,3]
Array<T>	Generic array syntax (identical to T[])	let strs: Array<string>
[T, U]	Tuple: fixed-length array with specific types	let pair: [string, number]
Record<K, V>	Object with keys K and values V	Record<string, number>
{ key: T }	Object type literal	{name: string; age: number}
Composite Types
T \| U	Union: value can be T or U	string \| number
T & U	Intersection: value must satisfy both T and U	A & B
T extends U ? X : Y	Conditional type	T extends string ? true : false
Type Utilities
Partial<T>	Makes all properties of T optional	Partial<User>
Required<T>	Makes all properties required	Required<Config>
Readonly<T>	Makes all properties read-only	Readonly<User>
Pick<T, K>	Pick only properties K from T	Pick<User,'id'\|'name'>
Omit<T, K>	Remove properties K from T	Omit<User,'password'>
ReturnType<T>	Infer return type of function T	ReturnType<typeof fn>
Parameters<T>	Extract parameter types as a tuple	Parameters<typeof fn>
keyof T	Union of property name strings in type T	keyof { a:1; b:2 } → 'a'\|'b'
typeof x	Get type of a value (runtime shape as type)	type Cfg = typeof config
Interfaces & Classes
interface	Define a contract; can be extended/merged	interface User { id: number }
type alias	Name any type; cannot be re-opened	type Status = 'on'\|'off'
enum	Named constants (prefer const enum for trees)	enum Dir { Up, Down }
as const	Infer narrowest literal types (immutable)	const dir = 'up' as const
public / private / protected	Class member access modifiers	private name: string
readonly	Property cannot be reassigned after construction	readonly id: string

✨ CSS Animations & Transforms Reference

Property / Function	Values / Description
Transitions
transition	Shorthand: property duration timing-function delay. E.g. transition: all .3s ease
transition-property	Which CSS properties to animate. Use 'all' or comma-separated list.
transition-duration	Duration: 0.3s, 300ms, 1s
transition-timing-function	ease · ease-in · ease-out · ease-in-out · linear · cubic-bezier(x1,y1,x2,y2) · steps(n)
Keyframe Animations
@keyframes name {}	Define animation steps: from {}, to {} or percentage-based 0% to 100%.
animation-name	Reference a @keyframes name
animation-duration	How long one cycle takes: 1s, 500ms
animation-iteration-count	1 · 3 · infinite
animation-direction	normal · reverse · alternate · alternate-reverse
animation-fill-mode	none · forwards · backwards · both — what state to hold after animation
animation-play-state	running · paused — toggle on hover/active
animation (shorthand)	animation: name duration timing-fn delay iterations direction fill-mode. E.g. spin 1s linear infinite
Transform Functions
translate(x, y)	Move element. translateX(n) / translateY(n) / translate3d(x,y,z)
scale(x, y)	Scale element. scale(1.5) grows 50%. scaleX, scaleY, scale3d
rotate(deg)	Rotate element. rotate(45deg). rotateX/Y/Z for 3D.
skew(x, y)	Skew element by angle. skewX / skewY
matrix(a,b,c,d,e,f)	Combine all 2D transforms into a 2x3 matrix.
perspective(n)	Set vanishing point depth for 3D children. perspective: 800px on parent.
transform-origin	Point around which transforms are applied. Default: 50% 50%.
will-change: transform	Hint browser to optimise for upcoming transform. Use sparingly.
offset-path / motion-path	Animate element along an SVG path using offset-distance.

🔷 JSON → TypeScript Interface Generator

JSON Input

TypeScript Interface

🍪 Cookie String Parser

🎨 CSS Named Colours Reference

📨 HTTP Headers Reference

Header	Description & Notes
Request Headers
Accept	Media types client can process. E.g. text/html, application/json, /
Accept-Encoding	Compression algorithms accepted: gzip, deflate, br (Brotli)
Accept-Language	Preferred natural languages. E.g. en-US,en;q=0.9
Authorization	Credentials: Bearer <token>, Basic base64(user:pass), Digest
Cache-Control	Request: no-cache, no-store, max-age=0, max-stale, min-fresh
Connection	Control keep-alive: keep-alive \| close
Content-Length	Byte length of request body. Required for POST/PUT with body.
Content-Type	Media type of body: application/json, multipart/form-data, text/plain
Cookie	Stored cookies sent to server. Semicolon-separated name=value pairs.
Host	Domain and optional port. Required in HTTP/1.1: example.com:8080
If-Match	Conditional request: proceed only if resource ETag matches.
If-Modified-Since	Fetch only if modified since this date. Server returns 304 otherwise.
If-None-Match	Fetch only if ETag has changed. Common for cache validation.
Origin	Origin of cross-origin request. Set by browser on CORS requests.
Range	Request partial resource: bytes=0-1023
Referer	Previous page URL (intentional typo in spec). Note: intentionally misspelled.
User-Agent	Browser/client identifier string. E.g. Mozilla/5.0 (Windows NT 10.0…)
X-Requested-With	Ajax indicator. jQuery sets: XMLHttpRequest
X-Forwarded-For	IP of original client when behind proxy: client, proxy1, proxy2
Response Headers
Access-Control-Allow-Origin	CORS: which origins allowed. * for public, or specific origin.
Access-Control-Allow-Methods	CORS: allowed HTTP methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers	CORS: allowed request headers during preflight
Cache-Control	Response: no-store, no-cache, max-age=3600, s-maxage, must-revalidate, public, private, immutable
Content-Encoding	Applied compression: gzip, br, deflate, identity
Content-Security-Policy	CSP: restrict resource origins. E.g. default-src 'self'; img-src *
ETag	Resource version identifier for cache validation. "686897696a7c876b7e"
Expires	Absolute expiry date/time. Superseded by Cache-Control: max-age.
Last-Modified	When resource was last changed. Used with If-Modified-Since.
Location	Redirect URL for 3xx responses, or created resource URI for 201
Retry-After	Seconds to wait before re-requesting (429/503 rate-limit/maintenance)
Server	Server software info: nginx/1.22.0, Apache/2.4.54 (best hidden in prod)
Set-Cookie	Set cookie: name=val; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=3600
Strict-Transport-Security	HSTS: max-age=31536000; includeSubDomains; preload — force HTTPS
Transfer-Encoding	chunked \| identity. Used when content length is unknown upfront.
Vary	Cache key variety: Vary: Accept-Encoding, Cookie, Accept-Language
WWW-Authenticate	Auth challenge on 401: Basic realm="My App", Bearer realm="api"
X-Content-Type-Options	nosniff — prevents MIME-type sniffing. Security best-practice.
X-Frame-Options	Clickjacking protection: DENY \| SAMEORIGIN. Superseded by CSP frame-ancestors.
X-XSS-Protection	Legacy XSS filter: 1; mode=block. Now deprecated in favour of CSP.

🎯 CSS Selectors Reference

Selector	Selects	Example
Basic Selectors
*	Every element	* { box-sizing:border-box }
element	Elements of that tag type	p { margin:0 }
.class	Elements with that class	.btn { padding:8px }
#id	Element with that unique ID	#header { position:sticky }
[attr]	Elements with the attribute present	[hidden]
[attr=val]	Exact attribute value match	[type="text"]
[attr^=val]	Attribute value starts with	[href^="https"]
[attr$=val]	Attribute value ends with	[src$=".png"]
[attr*=val]	Attribute value contains substring	[class*="grid"]
Combinators
A B	B descendant of A (any depth)	nav a
A > B	B direct child of A	ul > li
A + B	B immediately after A (adjacent sibling)	h2 + p
A ~ B	Any B sibling after A (general sibling)	h2 ~ p
A, B	Match both A and B	h1, h2, h3
Pseudo-classes
:hover	Mouse over element	a:hover
:focus	Element has keyboard focus	input:focus
:focus-visible	Focus via keyboard only (not click)	:focus-visible
:active	Currently being activated (clicked)	button:active
:visited	Visited links (limited styling for security)	a:visited
:checked	Checked checkboxes, radios, or options	input:checked
:disabled / :enabled	Disabled / enabled form elements	input:disabled
:empty	Element with no children	p:empty
:not(selector)	Elements not matching selector	li:not(.active)
:is(…)	Match any of the given selectors	:is(h1,h2,h3)
:where(…)	Like :is() but zero specificity	:where(header, footer)
:has(…)	Parent if child matches (new!)	div:has(img)
:nth-child(n)	nth child. 2n=even, 2n+1=odd	tr:nth-child(even)
:first-child / :last-child	First or last child element	li:first-child
:only-child	The only child of its parent	span:only-child
:first-of-type / :last-of-type	First or last of a given element type	p:first-of-type
Pseudo-elements
::before	Inserts content before element's content	p::before { content:'→' }
::after	Inserts content after element's content	li::after { content:'.' }
::placeholder	Placeholder text in input/textarea	input::placeholder
::selection	Text selected by user	::selection { background:#ffd700 }
::first-line / ::first-letter	First line or first letter of a block	p::first-letter { font-size:2em }

😊 Emoji Quick Reference

Click any emoji to copy it to clipboard.

🔤 Web Font Stack Reference

Category	Stack	Preview
System UI	system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif	The quick brown fox
Geometric Sans	Futura, "Century Gothic", "Trebuchet MS", sans-serif	The quick brown fox
Humanist Sans	Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif	The quick brown fox
Old-Style Serif	"Book Antiqua", Palatino, "Palatino Linotype", serif	The quick brown fox
Transitional Serif	Cambria, "Hoefler Text", Utopia, "Liberation Serif", Georgia, serif	The quick brown fox
Modern Serif	"Didot", "Bodoni MT", "Apple Garamond", serif	The quick brown fox
Clarendon Slab	"Rockwell", "Courier Bold", Courier, Georgia, serif	The quick brown fox
Monospace (code)	ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "Courier New", monospace	const x = 42;
Monospace (terminal)	Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", monospace	$ git status
Condensed Sans	"Arial Narrow", "Franklin Gothic Condensed", sans-serif	The quick brown fox
Rounded Sans	"Varela Round", "Nunito", "M PLUS Rounded 1c", sans-serif	The quick brown fox
Emoji	"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji"	😀 🎉 🚀 ❤️
Math	"STIX Two Math", "Latin Modern Math", KaTeX_Main, serif	f(x) = ∫∑∞

⚛️ React Hooks Quick Reference

Hook	Purpose	Signature / Notes
State & Lifecycle
useState	Declare reactive state in a component	const [val, setVal] = useState(init)
useReducer	Complex state logic with a reducer pattern	const [state, dispatch] = useReducer(reducer, init)
useEffect	Side effects: data fetching, subscriptions, DOM mutations	useEffect(() => { ... return cleanup }, [deps])
useLayoutEffect	Like useEffect but fires synchronously after DOM mutations	Same signature as useEffect
useInsertionEffect	Inject styles before DOM mutations (CSS-in-JS libs)	React 18+. Fires before layout effects.
Refs
useRef	Mutable ref that persists without triggering re-render	const ref = useRef(null); ref.current
useImperativeHandle	Expose imperative methods from forwardRef components	useImperativeHandle(ref, () => ({ focus }))
Context & Memoisation
useContext	Consume a React context without wrapping in Consumer	const theme = useContext(ThemeCtx)
useMemo	Cache expensive computation result until deps change	const result = useMemo(() => compute(a, b), [a, b])
useCallback	Cache a function reference until deps change	const fn = useCallback(() => doThing(), [deps])
Transitions & Deferred Updates (React 18+)
useTransition	Mark state updates as non-urgent (keeps UI responsive)	const [isPending, startTransition] = useTransition()
useDeferredValue	Defer re-rendering of a value (like debounce)	const deferred = useDeferredValue(value)
Advanced
useId	Stable unique ID per component (avoid hydration mismatches)	const id = useId() // ':r0:'
useDebugValue	Show a label in React DevTools for custom hooks	useDebugValue(isOnline ? 'Online' : 'Offline')
useSyncExternalStore	Subscribe to external stores (Redux, Zustand, etc.)	useSyncExternalStore(subscribe, getSnapshot)
useOptimistic	Show optimistic UI before server confirms action	React 19+. const [opt, addOpt] = useOptimistic(state, fn)

🏗 Semantic HTML5 Elements

Element	Description
Page Structure
<header>	Introductory content or navigational aids for its nearest section ancestor
<nav>	Links that navigate within the site or page; primary or secondary navigation
<main>	Dominant content of the <body>. Only one per page; skip-nav target
<article>	Self-contained composition: blog post, news story, user comment
<section>	Thematic grouping with typically a heading. Not for styling only (use div).
<aside>	Tangentially related content: sidebars, pull quotes, advertising
<footer>	Footer for nearest section ancestor: author info, copyright, links
<address>	Contact information for nearest article or body ancestor
Text Content
<figure><figcaption>	Self-contained content (image, code, table) with optional caption
<blockquote>	Extended quotation from another source; cite attribute for URL
<cite>	Title of a work: book, paper, website, song
<time>	Dates and times. datetime attribute: 2024-01-15 or PT2H30M
<mark>	Highlighted / marked text for reference or search results
<abbr>	Abbreviation or acronym with title attribute for full expansion
<dfn>	The defining instance of a term
<kbd>	Keyboard input. E.g. Press <kbd>Ctrl</kbd>+<kbd>S</kbd>
<samp>	Sample output from a program or computer system
<var>	Mathematical variable or programming identifier
<details><summary>	Disclosure widget: collapsed content with a clickable summary
<dialog>	Modal or non-modal dialog box; use .showModal() / .close()
<output>	Result of a calculation or user action; linked to inputs with for attribute

display: grid	Enable grid layout on the container.
grid-template-columns: 200px 1fr 2fr	Define column track sizes. fr = fractional unit.
grid-template-rows	Define row track sizes.
repeat(3, 1fr)	Repeat a track pattern N times.
minmax(150px, 1fr)	Track size between a min and max.
auto-fill / auto-fit	Automatically fill available space with as many tracks as possible.
grid-template-areas	Assign names to regions of the grid using a visual ASCII map.
gap: 16px 12px	Row and column gaps between tracks.
place-items: center	Shorthand for align-items + justify-items.

grid-column: 1 / 3	Span from column line 1 to 3 (occupies 2 columns).
grid-column: span 2	Span 2 columns without specifying start line.
grid-row: 1 / span 2	Start at row 1 and span 2 rows.
grid-area: header	Assign item to a named area defined in grid-template-areas.
place-self: start end	Shorthand for align-self + justify-self on the item.

ectl.me

✎ Quick Capture

App is locked

🔑 Add / Edit Entry