Update snippet descriptions

This commit is contained in:
Isabelle Viktoria Maciohsek
2020-10-19 18:51:03 +03:00
parent f0fbe0c3e5
commit 5e8e6f51a3
36 changed files with 97 additions and 82 deletions

View File

@ -6,8 +6,8 @@ tags: browser,beginner
Creates an element from a string (without appending it to the document).
If the given string contains multiple elements, only the first one will be returned.
- Use `document.createElement()` to create a new element.
- Set its `innerHTML` to the string supplied as the argument.
- Use `Document.createElement()` to create a new element.
- Use `Element.innerHTML` to set its inner HTML to the string supplied as the argument.
- Use `ParentNode.firstElementChild` to return the element version of the string.
```js

View File

@ -7,7 +7,7 @@ Curries a function.
- Use recursion.
- If the number of provided arguments (`args`) is sufficient, call the passed function `fn`.
- Otherwise, return a curried function `fn` that expects the rest of the arguments.
- Otherwise, use `Function.prototype.bind()` to return a curried function `fn` that expects the rest of the arguments.
- If you want to curry a function that accepts a variable number of arguments (a variadic function, e.g. `Math.min()`), you can optionally pass the number of arguments to the second parameter `arity`.
```js
@ -18,4 +18,4 @@ const curry = (fn, arity = fn.length, ...args) =>
```js
curry(Math.pow)(2)(10); // 1024
curry(Math.min, 3)(10)(50)(2); // 2
```
```

View File

@ -3,9 +3,10 @@ title: dayOfYear
tags: date,beginner
---
Gets the day of the year from a `Date` object.
Gets the day of the year (number in the range 1-366) from a `Date` object.
- Use `new Date()` and `Date.prototype.getFullYear()` to get the first day of the year as a `Date` object, subtract it from the provided `date` and divide with the milliseconds in each day to get the result.
- Use `new Date()` and `Date.prototype.getFullYear()` to get the first day of the year as a `Date` object.
- Subtract the first day of the year from `date` and divide with the milliseconds in each day to get the result.
- Use `Math.floor()` to appropriately round the resulting day count to an integer.
```js
@ -15,4 +16,4 @@ const dayOfYear = date =>
```js
dayOfYear(new Date()); // 272
```
```

View File

@ -1,9 +1,9 @@
---
title: daysAgo
tags: date,intermediate
tags: date,beginner
---
Returns the date of `n` days ago from today as a string representation.
Calculates the date of `n` days ago from today as a string representation.
- Use `new Date()` to get the current date, `Math.abs()` and `Date.getDate()` to update the date accordingly and set to the result using `Date.setDate()`.
- Use `Date.prototype.toISOString()` to return a string in `yyyy-mm-dd` format.

View File

@ -3,7 +3,7 @@ title: daysFromNow
tags: date,beginner
---
Returns the date of `n` days from today as a string representation.
Calculates the date of `n` days from today as a string representation.
- Use `new Date()` to get the current date, `Math.abs()` and `Date.getDate()` to update the date accordingly and set to the result using `Date.setDate()`.
- Use `Date.prototype.toISOString()` to return a string in `yyyy-mm-dd` format.
@ -13,7 +13,7 @@ const daysFromNow = n => {
let d = new Date();
d.setDate(d.getDate() + Math.abs(n));
return d.toISOString().split('T')[0];
}
};
```
```js

View File

@ -7,7 +7,7 @@ Creates a debounced function that delays invoking the provided function until at
- Each time the debounced function is invoked, clear the current pending timeout with `clearTimeout()` and use `setTimeout()` to create a new timeout that delays invoking the function until at least `ms` milliseconds has elapsed.
- Use `Function.prototype.apply()` to apply the `this` context to the function and provide the necessary arguments.
- Omit the second argument, `ms`, to set the timeout at a default of 0 ms.
- Omit the second argument, `ms`, to set the timeout at a default of `0` ms.
```js
const debounce = (fn, ms = 0) => {

View File

@ -11,7 +11,7 @@ All promises returned during this time will return the same data.
- Create a new `Promise` and add its `resolve` and `reject` callbacks to the `pending` promises stack.
- When `setTimeout` is called, copy the current stack (as it can change between the provided function call and its resolution), clear it and call the provided function.
- When the provided function resolves/rejects, resolve/reject all promises in the stack (copied when the function was called) with the returned data.
- Omit the second argument, `ms`, to set the timeout at a default of 0 ms.
- Omit the second argument, `ms`, to set the timeout at a default of `0` ms.
```js
const debouncePromise = (fn, ms = 0) => {

View File

@ -21,8 +21,8 @@ const deepFreeze = obj => {
```js
'use strict';
const o = deepFreeze([1, [2, 3]]);
const val = deepFreeze([1, [2, 3]]);
o[0] = 3; // not allowed
o[1][0] = 4; // not allowed as well
val[0] = 3; // not allowed
val[1][0] = 4; // not allowed as well
```

View File

@ -3,11 +3,11 @@ title: deepGet
tags: object,intermediate
---
Returns the target value in a nested JSON object, based on the `keys` array.
Gets the target value in a nested JSON object, based on the `keys` array.
- Compare the keys you want in the nested JSON object as an `Array`.
- Use `Array.prototype.reduce()` to get value from nested JSON object one by one.
- If the key exists in object, return target value, otherwise, return `null`.
- Use `Array.prototype.reduce()` to get the values in the nested JSON object one by one.
- If the key exists in the object, return the target value, otherwise return `null`.
```js
const deepGet = (obj, keys) =>

View File

@ -5,7 +5,7 @@ tags: function,intermediate
Defers invoking a function until the current call stack has cleared.
- Use `setTimeout()` with a timeout of 1ms to add a new event to the browser event queue and allow the rendering engine to complete its work.
- Use `setTimeout()` with a timeout of `1` ms to add a new event to the event queue and allow the rendering engine to complete its work.
- Use the spread (`...`) operator to supply the function with an arbitrary number of arguments.
```js

View File

@ -3,13 +3,13 @@ title: delay
tags: function,intermediate
---
Invokes the provided function after `wait` milliseconds.
Invokes the provided function after `ms` milliseconds.
- Use `setTimeout()` to delay execution of `fn`.
- Use the spread (`...`) operator to supply the function with an arbitrary number of arguments.
```js
const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args);
const delay = (fn, ms, ...args) => setTimeout(fn, ms, ...args);
```
```js
@ -20,4 +20,4 @@ delay(
1000,
'later'
); // Logs 'later' after one second.
```
```

View File

@ -1,11 +1,11 @@
---
title: detectDeviceType
tags: browser,intermediate
tags: browser,regexp,intermediate
---
Detects whether the website is being opened in a mobile device or a desktop/laptop.
Detects whether the page is being viewed on a mobile device or a desktop.
- Use a regular expression to test the `navigator.userAgent` property to figure out if the device is a mobile device or a desktop/laptop.
- Use a regular expression to test the `navigator.userAgent` property to figure out if the device is a mobile device or a desktop.
```js
const detectDeviceType = () =>
@ -16,4 +16,4 @@ const detectDeviceType = () =>
```js
detectDeviceType(); // "Mobile" or "Desktop"
```
```

View File

@ -1,11 +1,12 @@
---
title: difference
tags: array,math,beginner
tags: array,beginner
---
Returns the difference between two arrays.
Calculates the difference between two arrays, without filtering duplicate values.
- Create a `Set` from `b`, then use `Array.prototype.filter()` on `a` to only keep values not contained in `b`.
- Create a `Set` from `b` to get the unique values in `b`.
- Use `Array.prototype.filter()` on `a` to only keep values not contained in `b`, using `Set.prototype.has()`.
```js
const difference = (a, b) => {
@ -15,5 +16,5 @@ const difference = (a, b) => {
```
```js
difference([1, 2, 3], [1, 2, 4]); // [3]
difference([1, 2, 3, 3], [1, 2, 4]); // [3, 3]
```

View File

@ -6,11 +6,14 @@ tags: array,intermediate
Filters out all values from an array for which the comparator function does not return `true`.
- Use `Array.prototype.filter()` and `Array.prototype.findIndex()` to find the appropriate values.
- Omit the last argument, `comp`, to use a default strict equality comparator.
```js
const differenceWith = (arr, val, comp) => arr.filter(a => val.findIndex(b => comp(a, b)) === -1);
const differenceWith = (arr, val, comp = (a, b) => a === b) =>
arr.filter(a => val.findIndex(b => comp(a, b)) === -1);
```
```js
differenceWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0], (a, b) => Math.round(a) === Math.round(b)); // [1, 1.2]
differenceWith([1, 1.2, 1.3], [1, 1.3, 1.5]); // [1.2]
```

View File

@ -3,10 +3,11 @@ title: dig
tags: object,recursion,intermediate
---
Returns the target value in a nested JSON object, based on the given key.
Gets the target value in a nested JSON object, based on the given key.
- Use the `in` operator to check if `target` exists in `obj`.
- If found, return the value of `obj[target]`, otherwise use `Object.values(obj)` and `Array.prototype.reduce()` to recursively call `dig` on each nested object until the first matching key/value pair is found.
- If found, return the value of `obj[target]`.
- Otherwise use `Object.values(obj)` and `Array.prototype.reduce()` to recursively call `dig` on each nested object until the first matching key/value pair is found.
```js
const dig = (obj, target) =>
@ -28,4 +29,4 @@ const data = {
};
dig(data, 'level3'); // 'some data'
dig(data, 'level4'); // undefined
```
```

View File

@ -3,7 +3,7 @@ title: distance
tags: math,beginner
---
Returns the distance between two points.
Calculates the distance between two points.
- Use `Math.hypot()` to calculate the Euclidean distance between two points.
@ -12,5 +12,5 @@ const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);
```
```js
distance(1, 1, 2, 3); // 2.23606797749979
```
distance(1, 1, 2, 3); // ~2.2361
```

View File

@ -3,10 +3,11 @@ title: dropRightWhile
tags: array,intermediate
---
Removes elements from the end of an array until the passed function returns `true`. Returns the remaining elements in the array.
Removes elements from the end of an array until the passed function returns `true`.
Returns the remaining elements in the array.
- Loop through the array, using `Array.prototype.slice()` to drop the last element of the array until the returned value from the function is `true`.
- Returns the remaining elements.
- Loop through the array, using `Array.prototype.slice()` to drop the last element of the array until the value returned from `func` is `true`.
- Return the remaining elements.
```js
const dropRightWhile = (arr, func) => {

View File

@ -3,10 +3,11 @@ title: dropWhile
tags: array,intermediate
---
Removes elements in an array until the passed function returns `true`. Returns the remaining elements in the array.
Removes elements in an array until the passed function returns `true`.
Returns the remaining elements in the array.
- Loop through the array, using `Array.prototype.slice()` to drop the first element of the array until the returned value from the function is `true`.
- Returns the remaining elements.
- Loop through the array, using `Array.prototype.slice()` to drop the first element of the array until the value returned from `func` is `true`.
- Return the remaining elements.
```js
const dropWhile = (arr, func) => {

View File

@ -3,7 +3,7 @@ title: either
tags: function,logic,beginner
---
Returns `true` if at least one function returns `true` for a given set of arguments, `false` otherwise.
Checks if at least one function returns `true` for a given set of arguments.
- Use the logical or (`||`) operator on the result of calling the two functions with the supplied `args`.

View File

@ -3,9 +3,10 @@ title: elementContains
tags: browser,intermediate
---
Returns `true` if the `parent` element contains the `child` element, `false` otherwise.
Checks if the `parent` element contains the `child` element.
- Check that `parent` is not the same element as `child`, use `parent.contains(child)` to check if the `parent` element contains the `child` element.
- Check that `parent` is not the same element as `child`.
- Use `Node.contains()` to check if the `parent` element contains the `child` element.
```js
const elementContains = (parent, child) => parent !== child && parent.contains(child);
@ -14,4 +15,4 @@ const elementContains = (parent, child) => parent !== child && parent.contains(c
```js
elementContains(document.querySelector('head'), document.querySelector('title')); // true
elementContains(document.querySelector('body'), document.querySelector('body')); // false
```
```

View File

@ -1,11 +1,11 @@
---
title: elementIsFocused
tags: browser,intermediate
tags: browser,beginner
---
Returns `true` if the given element is focused, `false` otherwise.
Checks if the given element is focused.
- Use `document.activeElement` to determine if the given element is focused.
- Use `Document.activeElement` to determine if the given element is focused.
```js
const elementIsFocused = el => (el === document.activeElement);

View File

@ -1,12 +1,11 @@
---
title: elementIsVisibleInViewport
tags: browser,advanced
tags: browser,intermediate
---
Returns `true` if the element specified is visible in the viewport, `false` otherwise.
Checks if the element specified is visible in the viewport.
- Use `Element.getBoundingClientRect()` and the `window.inner(Width|Height)` values
- to determine if a given element is visible in the viewport.
- Use `Element.getBoundingClientRect()` and the `window.inner(Width|Height)` values to determine if a given element is visible in the viewport.
- Omit the second argument to determine if the element is entirely visible, or specify `true` to determine if it is partially visible.
```js

View File

@ -7,7 +7,8 @@ Performs a deep comparison between two values to determine if they are equivalen
- Check if the two values are identical, if they are both `Date` objects with the same time, using `Date.getTime()` or if they are both non-object values with an equivalent value (strict comparison).
- Check if only one value is `null` or `undefined` or if their prototypes differ.
- If none of the above conditions are met, use `Object.keys()` to check if both values have the same number of keys, then use `Array.prototype.every()` to check if every key in the first value exists in the second one and if they are equivalent by calling this method recursively.
- If none of the above conditions are met, use `Object.keys()` to check if both values have the same number of keys.
- Use `Array.prototype.every()` to check if every key in `a` exists in `b` and if they are equivalent by calling `equals()` recursively.
```js
const equals = (a, b) => {

View File

@ -5,7 +5,8 @@ tags: string,browser,regexp,intermediate
Escapes a string for use in HTML.
- Use `String.prototype.replace()` with a regexp that matches the characters that need to be escaped, using a callback function to replace each character instance with its associated escaped character using a dictionary (object).
- Use `String.prototype.replace()` with a regexp that matches the characters that need to be escaped.
- Use the callback function to replace each character instance with its associated escaped character using a dictionary (object).
```js
const escapeHTML = str =>
@ -23,5 +24,6 @@ const escapeHTML = str =>
```
```js
escapeHTML('<a href="#">Me & you</a>'); // '&lt;a href=&quot;#&quot;&gt;Me &amp; you&lt;/a&gt;'
escapeHTML('<a href="#">Me & you</a>');
// '&lt;a href=&quot;#&quot;&gt;Me &amp; you&lt;/a&gt;'
```

View File

@ -3,9 +3,9 @@ title: everyNth
tags: array,beginner
---
Returns every nth element in an array.
Returns every `nth` element in an array.
- Use `Array.prototype.filter()` to create a new array that contains every nth element of a given array.
- Use `Array.prototype.filter()` to create a new array that contains every `nth` element of a given array.
```js
const everyNth = (arr, nth) => arr.filter((e, i) => i % nth === nth - 1);

View File

@ -8,7 +8,7 @@ Calculates the factorial of a number.
- Use recursion.
- If `n` is less than or equal to `1`, return `1`.
- Otherwise, return the product of `n` and the factorial of `n - 1`.
- Throws an exception if `n` is a negative number.
- Throw a `TypeError` if `n` is a negative number.
```js
const factorial = n =>

View File

@ -8,7 +8,7 @@ Converts Fahrenheit to Celsius.
- Follows the conversion formula `C = (F - 32) * 5/9`.
```js
const fahrenheitToCelsius = degrees => ((degrees - 32) * 5) / 9;
const fahrenheitToCelsius = degrees => (degrees - 32) * 5 / 9;
```
```js

View File

@ -1,12 +1,12 @@
---
title: fibonacci
tags: math,beginner
tags: math,intermediate
---
Generates an array, containing the Fibonacci sequence, up until the nth term.
- Create an empty array of the specific length, initializing the first two values (`0` and `1`).
- Use `Array.prototype.reduce()` to add values into the array, using the sum of the last two values, except for the first two.
- Use `Array.from()` to create an empty array of the specific length, initializing the first two values (`0` and `1`).
- Use `Array.prototype.reduce()` and `Array.prototype.concat()` to add values into the array, using the sum of the last two values, except for the first two.
```js
const fibonacci = n =>

View File

@ -3,9 +3,9 @@ title: filterNonUnique
tags: array,beginner
---
Filters out the non-unique values in an array.
Returns an array with the non-unique values filtered out.
- Use `Array.prototype.filter()` for an array containing only the unique values.
- Use `Array.prototype.filter()` to create an array containing only the unique values.
```js
const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));

View File

@ -3,9 +3,9 @@ title: filterNonUniqueBy
tags: array,intermediate
---
Filters out the non-unique values in an array, based on a provided comparator function.
Returns an array with the non-unique values filtered out, based on a provided comparator function.
- Use `Array.prototype.filter()` and `Array.prototype.every()` for an array containing only the unique values, based on the comparator function, `fn`.
- Use `Array.prototype.filter()` and `Array.prototype.every()` to create an array containing only the unique values, based on the comparator function, `fn`.
- The comparator function takes four arguments: the values of the two elements being compared and their indexes.
```js

View File

@ -3,9 +3,10 @@ title: findKey
tags: object,intermediate
---
Returns the first key that satisfies the provided testing function. Otherwise `undefined` is returned.
Returns the first key that satisfies the provided testing function.
Otherwise `undefined` is returned.
- Use `Object.keys(obj)` to get all the properties of the object, `Array.prototype.find()` to test the provided function for each key-value pair.
- Use `Object.keys(obj)` to get all the properties of the object, `Array.prototype.find()` to test each key-value pair using `fn`.
- The callback receives three arguments - the value, the key and the object.
```js
@ -19,6 +20,6 @@ findKey(
fred: { age: 40, active: false },
pebbles: { age: 1, active: true }
},
o => o['active']
x => x['active']
); // 'barney'
```

View File

@ -5,7 +5,8 @@ tags: array,beginner
Returns the last element for which the provided function returns a truthy value.
- Use `Array.prototype.filter()` to remove elements for which `fn` returns falsy values, `Array.prototype.pop()` to get the last one.
- Use `Array.prototype.filter()` to remove elements for which `fn` returns falsy values.
- Use `Array.prototype.pop()` to get the last element in the filtered array.
```js
const findLast = (arr, fn) => arr.filter(fn).pop();

View File

@ -6,8 +6,9 @@ tags: array,intermediate
Returns the index of the last element for which the provided function returns a truthy value.
- Use `Array.prototype.map()` to map each element to an array with its index and value.
- Use `Array.prototype.filter()` to remove elements for which `fn` returns falsy values, `Array.prototype.pop()` to get the last one.
- `-1` is the default value when not found.
- Use `Array.prototype.filter()` to remove elements for which `fn` returns falsy values
- Use `Array.prototype.pop()` to get the last element in the filtered array.
- Return `-1` if there are no matching elements.
```js
const findLastIndex = (arr, fn) =>

View File

@ -6,7 +6,8 @@ tags: object,intermediate
Returns the last key that satisfies the provided testing function.
Otherwise `undefined` is returned.
- Use `Object.keys(obj)` to get all the properties of the object, `Array.prototype.reverse()` to reverse their order and `Array.prototype.find()` to test the provided function for each key-value pair.
- Use `Object.keys(obj)` to get all the properties of the object.
- Use `Array.prototype.reverse()` to reverse the order and `Array.prototype.find()` to test the provided function for each key-value pair.
- The callback receives three arguments - the value, the key and the object.
```js
@ -23,6 +24,6 @@ findLastKey(
fred: { age: 40, active: false },
pebbles: { age: 1, active: true }
},
o => o['active']
x => x['active']
); // 'pebbles'
```

View File

@ -1,14 +1,14 @@
---
title: flatten
tags: array,intermediate
tags: array,recursion,intermediate
---
Flattens an array up to the specified depth.
- Use recursion, decrementing `depth` by 1 for each level of depth.
- Use recursion, decrementing `depth` by `1` for each level of depth.
- Use `Array.prototype.reduce()` and `Array.prototype.concat()` to merge elements or arrays.
- Base case, for `depth` equal to `1` stops recursion.
- Omit the second argument, `depth` to flatten only to a depth of `1` (single flatten).
- Omit the second argument, `depth`, to flatten only to a depth of `1` (single flatten).
```js
const flatten = (arr, depth = 1) =>

View File

@ -1,9 +1,9 @@
---
title: flattenObject
tags: object,recursion,intermediate
tags: object,recursion,advanced
---
Flatten an object with the paths for keys.
Flattens an object with the paths for keys.
- Use recursion.
- Use `Object.keys(obj)` combined with `Array.prototype.reduce()` to convert every leaf node to a flattened path node.