Developer cheat sheets 17 reference cards and 337 copyable lines for CSS, JavaScript, TypeScript, git, bash and HTTP. Search everything at once, click a row to copy it, or open a sheet for the full grouped reference.
One-dimensional layout along a main axis.
display: flexCreates a block-level flex container. display: inline-flexFlex container that flows inline. flex-direction: row | row-reverse | column | column-reverseSets the main axis direction. flex-wrap: nowrap | wrap | wrap-reverseAllows items to flow onto new lines. flex-flow: column wrapShorthand for flex-direction + flex-wrap. justify-content: flex-start | center | space-between | space-around | space-evenlyDistributes items along the main axis. align-items: stretch | center | flex-start | flex-end | baselineAligns items on the cross axis. align-content: center | space-betweenAligns wrapped lines as a block. Needs flex-wrap: wrap.
All 17 entries Two-dimensional layout with rows and columns.
display: grid | inline-gridCreates a grid container. grid-template-columns: repeat(3, 1fr)Three equal-width columns. repeat(auto-fit, minmax(200px, 1fr))Responsive columns without media queries. grid-template-rows: auto 1fr autoHeader / content / footer row sizing. grid-template-areas: "nav main"Name regions and place items by name. grid-auto-rows: minmax(120px, auto)Sizing for implicitly created rows. grid-auto-flow: row | column | denseHow auto-placed items fill the grid. gap: 1remGutter between rows and columns.
All 18 entries Combinators, pseudo-classes and modern selector syntax.
A BDescendant: any B inside A. A > BDirect child only. A + BAdjacent sibling immediately after A. A ~ BAny following sibling. [data-state="open"]Exact attribute value match. [href^="https"]Starts with. [src$=".svg"]Ends with. [class*="btn"]Contains substring.
All 23 entries CSS-first configuration and modern utilities.
@import "tailwindcss";Single entry, replaces the three v3 directives. @theme { --color-brand: oklch(0.62 0.19 256); }Define design tokens as CSS variables. @theme inline { --color-bg: var(--background); }Inline values when a token points at another variable. @custom-variant dark (&:where(.dark, .dark *));Class-based dark mode. @utility card { ... }Register a custom utility (replaces @layer utilities). @source inline("bg-red-500");Safelist classes built at runtime. @reference "../styles.css";Required before @apply in other stylesheets. size-10width + height in one utility.
All 17 entries Character classes, quantifiers, groups and lookaround.
\d \DDigit / non-digit. \w \WWord character [A-Za-z0-9_] / its negation. \s \SWhitespace / non-whitespace. [a-z0-9_-]Custom character class. [^abc]Negated character class. .Any character except newline (unless /s). ^ $Start and end of string, or of line with /m. \b \BWord boundary / non-boundary.
All 23 entries Modern array and object methods worth remembering.
Array.from({ length: n }, (_, i) => i)Range of n numbers. Array.of(1, 2, 3)Array from arguments, no length quirk. [...new Set(arr)]Deduplicate values. structuredClone(arr)Deep copy, including nested objects. arr.at(-1)Last item without length math. arr.findLast(fn) / findLastIndex(fn)Search from the end. arr.includes(x)Membership test, handles NaN. arr.flatMap(fn)Map then flatten one level.
All 18 entries Combinators, cancellation and error handling.
await Promise.all([a, b])All results, rejects on first failure. await Promise.allSettled([a, b])Every outcome as {status, value|reason}. await Promise.race([a, timeout])First settled promise wins. await Promise.any([a, b])First fulfilled, ignores rejections. const c = new AbortController()Create a cancellation token. fetch(url, { signal: c.signal })Abortable request. AbortSignal.timeout(5000)Auto-aborting signal after 5s. err.name === 'AbortError'Distinguish cancellation from failure.
All 15 entries Utility types, narrowing and generics syntax.
Partial<T> / Required<T>All properties optional / required. Pick<T, "a" | "b"> / Omit<T, "id">Select or drop properties. Record<string, number>Object type with uniform values. Readonly<T>Shallow immutable version of T. ReturnType<typeof fn>Infer a function return type. Parameters<typeof fn>Tuple of a function parameter types. Awaited<T>Unwrap a promise type. NonNullable<T>Remove null and undefined.
All 20 entries Branching, rewriting history and getting unstuck.
git switch -c featureCreate and switch to a new branch. git switch -Jump back to the previous branch. git branch -m old newRename a branch. git branch --merged | xargs git branch -dClean up merged branches. git add -pStage changes hunk by hunk. git restore --staged <file>Unstage without losing changes. git restore <file>Discard local changes to a file. git stash push -m "wip"Shelve work in progress.
All 21 entries Pipes, expansion and text processing one-liners.
find . -name "*.ts" -not -path "*/node_modules/*"Recursive file search with exclusions. du -sh * | sort -hDirectory sizes, largest last. ln -s target linkCreate a symlink. tar -czf out.tgz dir/Create a gzipped archive. grep -rn "TODO" srcRecursive search with line numbers. rg -l "pattern"ripgrep: list matching files, respects .gitignore. sed -i 's/old/new/g' fileIn-place find and replace. awk '{ print $2 }'Print the second whitespace column.
All 21 entries Dependency commands and semver ranges.
npm ciClean reproducible install from the lockfile. npm i -D vitestAdd a dev dependency. npm i pkg@latestInstall a specific dist-tag. npm dedupeFlatten duplicated transitive versions. npm ls pkgShow who depends on a package. npm outdatedCompare installed vs latest versions. npm audit --omit=devVulnerabilities in production deps only. npx pkgRun a package binary without installing.
All 20 entries What each response code actually means.
200 OKStandard success with a body. 201 CreatedResource created, include a Location header. 202 AcceptedQueued for asynchronous processing. 204 No ContentSuccess with an empty body. 206 Partial ContentRange request satisfied. 301 Moved PermanentlyPermanent, may downgrade POST to GET. 302 FoundTemporary, may downgrade POST to GET. 304 Not ModifiedCache is still valid.
All 21 entries Caching, CORS and security headers.
Cache-Control: no-storeNever cache, for private or sensitive responses. Cache-Control: public, max-age=31536000, immutableFor hashed static assets. Cache-Control: s-maxage=60, stale-while-revalidate=300CDN caching with background refresh. ETag / If-None-MatchRevalidate and get a 304 when unchanged. Vary: Accept-EncodingCache separately per listed request header. Access-Control-Allow-Origin: https://site.comAllowed origin, echo when using credentials. Access-Control-Allow-Methods: GET, POSTMethods allowed on preflight. Access-Control-Allow-Headers: Content-TypeCustom request headers allowed.
All 18 entries Escapes, punctuation, arrows and symbols.
&& < >< and > " 'Double and single quote Non-breaking space    En and em width spaces  Thin space ­Soft hyphen, breaks only when needed — –Long dash and short dash
All 24 entries KeyboardEvent values for shortcuts and handlers.
event.key === 'Enter'code: Enter · legacy keyCode 13 event.key === 'Escape'code: Escape · legacy keyCode 27 event.key === ' 'code: Space · legacy keyCode 32 event.key === 'Tab'code: Tab · legacy keyCode 9 event.key === 'Backspace'code: Backspace · legacy keyCode 8 event.key === 'Delete'code: Delete · legacy keyCode 46 event.key === 'ArrowUp'code: ArrowUp · legacy keyCode 38 event.key === 'ArrowDown'code: ArrowDown · legacy keyCode 40
All 19 entries ARIA, focus management and WCAG thresholds.
aria-label="Close"Names an icon-only control. aria-labelledby="id"Name from visible text elsewhere. aria-describedby="hint-id"Extra description, read after the name. alt=""Correct for purely decorative images. aria-expanded="false"Disclosure and menu button state. aria-current="page"Marks the active nav item. aria-pressed / aria-selectedToggle buttons and tabs. aria-invalid + aria-errormessageField validation feedback.
All 22 entries CommonMark syntax plus GitHub flavoured extras.
# H1 ## H2 ### H3Headings, one H1 per document. **bold** *italic* ~~strike~~Inline emphasis. > quoteBlockquote, nest with >>. ---Horizontal rule. Two trailing spacesHard line break inside a paragraph. - itemUnordered list. 1. itemOrdered list, numbers auto-correct. - [ ] todo / - [x] doneTask list.
All 20 entries