## System font stack

```css
body {
  /* GitHub */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

  /* An alternative */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}
```

## Show animated underline on hover

```css
/* <span class="underline">Underline!</span> */

.underline {
  position: relative;
}

.underline::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -4px;
  background-color: black;
  opacity: 0;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.underline:hover::before {
  opacity: 1;
  left: 0;
  transform: scaleX(1);
}
```

## Add ellipsis to overflowing text

```css
.text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
```

## Center a webpage

```html
<body>
  <div id="page-wrap">
    
  </div>
</body>
```

```css
#page-wrap {
  width: 800px;
  margin: 0 auto;
}
```

## Make an image responsive

```css
img {
  max-width: 100%;
  height: auto;
}
```

## Indicate PDF links

This adds the text `(PDF)` after PDF links in the document:

```css
a[href$='.pdf']:after {
  content: '(PDF)';
}

/* Use data-size attribute if provided */
/* Adds `(PDF, <data-size>)` */
a[href$='.pdf'][data-size]:after {
  content: '(PDF, ' attr(data-size) ')';
}
```

## Common breakpoints

```plaintext
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px
```

## Misc

- `position: sticky` doesn't work if `overflow` of parent is set.

[Top]

System font stack

Show animated underline on hover

Add ellipsis to overflowing text

Center a webpage

Make an image responsive

Indicate PDF links

Common breakpoints

Misc

## Common array operations

[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)

```javascript
// Create an array
const arr = ['Chess', 'Go'] // or
const arr = new Array('Chess', 'Go') // or
const arr = 'Chess, Go'.split(', ')

// Get length of array
arr.length // 2

// Create a string from an array
const arr = ['Chess', 'Go']
arr.join(', ') // "Chess, Monopoly"
arr.toString() // "Chess,Monopoly"

// Get index of item in an array with indexOf()
const arr = ['Chess', 'Go']
arr.indexOf('Chess') // 0

// Check if array contains an item with includes()
const arr = ['Chess', 'Go']
arr.includes('Chess') // true
arr.includes('Monopoly') // false

// Add an item to end of array with push()
const arr = ['Chess', 'Go']
arr.push('Sudoku') // 3 (Returns new length)
arr // ["Chess", "Go", "Sudoku"]

// Add an item to start of array with unshift()
const arr = ['Chess', 'Go']
arr.unshift('Hex') // 3 (Returns new length)
arr // ["Hex", "Chess", "Go"]

// Remove an item from end of array with pop()
const arr = ['Chess', 'Go', 'Sudoku']
arr.pop() // Sudoku (Returns the removed item)
arr // ["Chess", "Go"]

// Remove an item from start of array with shift()
const arr = ['Chess', 'Go']
arr.shift() // Chess (Returns the removed item)
arr // ["Go"]

// Remove multiple items from end of array with splice(count)
const arr = ['Chess', 'Go', 'Hex', 'KenKen', 'Crossword']
arr.splice(-3)
// ["Hex", "KenKen", "Crossword"]
// Removes last 3 items and returns a new array with removed items only
arr // ["Chess", "Go"]

// Remove multiple items from start of array with splice(startIdx, count)
const arr = ['Chess', 'Go', 'Hex', 'KenKen', 'Crossword']
arr.splice(0, 3)
// ["Chess", "Go", "Hex"]
// Removes 3 items starting from index 0 and returns a new array with removed items only
arr // ["KenKen", "Crossword"]

// Replace multiple items in array with splice(startIdx, count, ...items)
const arr = ['Chess', 'Go', 'Monopoly', 'Hex']
arr.splice(-2, 2, 'KenKen', 'Crossword')
// ["Monopoly", "Hex"]
// Removes last 2 items and returns a new array with removed items only
arr // ["Chess", "Go", "KenKen", "Crossword"]

// Merge multiple arrays with concat()
const arr = ['Chess', 'Go']
arr.concat(['Hex', 'Sudoku'])
// ["Chess", "Go", "Hex", "Sudoku"] (Returns a new combined array)

// Reverse an array
arr.reverse() // Reverses array in-place
arr.concat().reverse() // Returns a new reversed clone
[...arr].reverse() // Returns a new reversed clone

// Iterate over an array with for...of
for (const game of arr) {
  console.log(game)
}

// Call a function on each element in array with forEach()
arr.forEach((game, idx) => {
  console.log(game, idx)
})

// Create shallow copy of array
const arr = ['Chess', 'Go']
const arrCopy = [...arr] // or
const arrCopy = Array.from(arr) // or
const arrCopy = arr.slice()

// Create deep copy of array
const arrDeepCopy = JSON.parse(JSON.stringify(arr)) // or
const arrDeepCopy = structuredClone(arr)

// Flatten an array with flat()
const arr = [0, [1, 3, 5], [2, 4, 6]]
arr.flat() // [0, 1, 3, 5, 2, 4, 6]
```

## Higher order array methods

Higher order functions are functions that can take another function as their argument, return a function when executed, or both. Some useful higher order functions in JavaScript:

### `find()`

Find the first element in an array that passes the test specified by the provided function. If no such element is found, return `undefined`.

```javascript
const arr = [3, 5, 11, 13, 50, 21, 67]

arr.find((item) => item % 7 == 0) // 21
arr.find((item, idx) => arr[idx + 1] < item) // 50 (First element that is followed by a smaller value than itself)
arr.find((item) => item > 100) // undefined
```

### `map()`

Create a new array populated with the results of calling a provided function on every element in the calling array.

```javascript
const arr = [
  { lang: 'Python', ext: 'py' },
  { lang: 'JavaScript', ext: 'js' },
  { lang: 'Haskell', ext: 'hs' },
]

arr.map((item) => '.' + item.ext)
// Array [".py", ".js", ".hs"]
```

### `filter()`

Filter down a given array to just the elements that pass the test implemented by the provided function.

```javascript
const arr = [180, 600, 284, 583, 23, 56, 78]

arr.filter((num) => num % 2 == 0)
// Array [180, 600, 284, 56, 78]
```

### `every()`

Test whether **all the elements** in an array pass the test given by the provided function.

```javascript
const arr = ['Monkey', 'Metal', 'Mobile', 'Orange']

arr.every((item) => item.startsWith('M')) // false
arr.every((item) => item.length >= 5) // true
```

### `some()`

Test whether **at least one element** in an array passes the test given by the provided function.

```javascript
const arr = ['You', 'look', 'beautiful', 'reading', 'this']

arr.some((item) => item == 'beautiful') // true
arr.some((item) => item.includes("ugly") // false
```

### `reduce()`

Execute a callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element.
An initial value can be used as the first "return value of previous calculation", otherwise the first element of the array is used as initial value and iteration starts from the second element.

```javascript
// Calculate the sum of numbers in an array
const arr = [2, 3, 4, 5, 6]

const initialValue = 0 // optional, if omitted the value at index 0 (2) is used and iteration starts from 3, 4...
arr.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
)
// 20
```

## Utils

```javascript
// Copy string to clipboard
const copyToClipboard = (str) => navigator.clipboard.writeText(str)

// Capitalize a string
const capitalize = (str) => str.replace(/^\w/, (c) => c.toUpperCase())
// or
// str.charAt(0).toUpperCase() + str.slice(1);

// Reverse a string
const reverseString = (str) => [...str].reverse().join('')

// Get random item from an array
const getRandomItem = (arr) => arr[Math.floor(Math.random() * arr.length)]

// Get random number between min and max (inclusive)
const getRandomNumber = (min, max) =>
  Math.floor(Math.random() * (max - min + 1) + min)

// Get unique values from an array
const getUniqueValues = (arr) => [...new Set(arr)]

// Get sum of numbers in an array
const getSum = (arr) => arr.reduce((a, b) => a + b)

// Get average of numbers in an array
const getAverage = (arr) => arr.reduce((a, b) => a + b) / arr.length

// Get key from value in an object
function getKeyByValue(object, value) {
  return Object.keys(object).find((key) => object[key] === value)
}

// Sequence generator
const range = (start, stop, step) =>
  Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step)

range(0, 4, 1) // [0, 1, 2, 3, 4]
range(2, 9, 2) // [2, 4, 6, 8]
```

### Shuffle an array

[[\*](https://stackoverflow.com/a/12646864/16542541)]

```javascript
// Durstenfeld shuffle
// Shuffles array in-place
const shuffleArray = (arr) => {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    ;[arr[i], arr[j]] = [arr[j], arr[i]]
  }
}

// Simple shuffle (Not properly distributed and inefficient)
// arr.sort(() => 0.5 - Math.random())
```

### Format a date string

[[Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat), [toLocaleDateString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString)]

```javascript
const formatDate = (dateString) => {
  const options = {
    weekday: 'short',
    year: 'numeric',
    month: 'short',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
  }
  return new Intl.DateTimeFormat('en', options).format(dateString)
  // or
  // new Date(dateString).toLocaleDateString('en-US', options);
}

// Usage
formatDate('1987-07-27T12:34:56') // Mon, Jul 27, 1987, 12:34:56
```

### Format a number

[[Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)]

```javascript
const formatNumber = (number) => {
  const options = {
    notation: 'compact',
    compactDisplay: 'short',
  }
  return new Intl.NumberFormat('en', options).format(number)
}

// Usage
formatNumber(123456) // 123K
formatNumber(456789012) // 457M
```

### Convert seconds to HH:MM:SS

```javascript
const secToHHMMSS = (sec) => {
  let hours = Math.floor(sec / 3600)
  sec %= 3600
  let minutes = Math.floor(sec / 60)
  let seconds = Math.floor(sec % 60)

  hours = hours < 10 ? `0${hours}` : `${hours}`
  minutes = minutes < 10 ? `0${minutes}` : minutes
  seconds = seconds < 10 ? `0${seconds}` : seconds

  return `${hours}:${minutes}:${seconds}`
}
```

### Unix time to/from UTC

```javascript
function unixToUTC(unixTime) {
  return new Date(unixTime * 1000).toISOString()
}

function utcToUnix(utc) {
  return Math.floor(Date.parse(utc) / 1000)
}

// Usage
unixToUTC(1234567890) // 2009-02-13T23:31:30.000Z
utcToUnix('2009-02-13T23:31:30.000Z') // 1234567890
```

### Leap year checker

```javascript
const isLeap = year => ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)
// or
const isLeap = year => new Date(year, 1, 29).getDate() === 29 // checks if February has 29 days
```

### Padding a string

[[padStart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart), [padEnd](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd)]

```javascript
'abc'.padStart(10) // "       abc"
'abc'.padStart(10, 'foo') // "foofoofabc"
'abc'.padStart(6, '123465') // "123abc"
'abc'.padStart(8, '0') // "00000abc"

'abc'.padEnd(10) // "abc       "
'abc'.padEnd(10, 'foo') // "abcfoofoof"
'abc'.padEnd(6, '123456') // "abc123"
'abc'.padEnd(1) // "abc"
```

### Generate a random date between two dates

```javascript
function randomDate(start, end) {
  const first = new Date(start).getTime();
  const last = new Date(end).getTime();
  return new Date(first + Math.random() * (last - first)).toISOString().split('T')[0];
}

// Usage
randomDate('2010-04-08', '2025-12-04')
```

## Node.js/npm

```shell
# List all user installed packages
npm list -g --depth=0
```

## Redirect to another website

[[\*](https://css-tricks.com/redirect-web-page/)]

```html

<meta http-equiv="refresh" content="0; URL='http://new-website.com'" />
```

```javascript
// With JavaScript
window.location = 'http://new-website.com' // or one of these
window.location.href = 'http://new-website.com'
window.location.assign('http://new-website.com')
window.location.replace('http://new-website.com')
```

## Get location information from URL

```javascript
const url = new URL('https://example.org:3000/path/?q=keyword#id')
console.log(url)
/*
{
  href: "https://example.org:3000/path/?q=keyword#id",
  origin: "https://example.org:3000",
  protocol: "https:",
  host: "example.org:3000",
  hostname: "example.org",
  port: "3000",
  pathname: "/path/",
  search: "?q=keyword",
  hash: "#id",
  ...
}
*/

// To get the same information for current URL, you can also use `window.location`
```

## Bookmarklet template

```javascript
javascript:(() => {
  // code goes here
})();
```

## Misc

- The expression `(x = 5, "foo")` assigns `5` to `x` and evaluates to `foo`.
- You can write large numbers in JS using underscores like this: `1_000_000`. This is equivalent to `1000000` and is easier to look at.

JavaScript


## HTML5 document boilerplate

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>
```

## Disable autocomplete for `<input>`

```html
<input name="form" type="text" autocomplete="off" />
```

## HTML entities

- [Official list](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references)
- [HTML Glyphs - CSS-Tricks](https://css-tricks.com/snippets/html/glyphs/)
- [Chess symbols in Unicode](https://en.wikipedia.org/wiki/Chess_symbols_in_Unicode)
- • (`&bull;`), · (`&middot;`)
- ♣ (`&clubs;`), ♥ (`&hearts;`), ♠ (`&spades;`), ♦ (`&diams;`)
- ∞ (`&infin;`)
- ← (`&larr;`), → (`&rarr;`), ↑ (`&uarr;`), ↓ (`&darr;`)
- — (`&#8212;`)
