diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 15aab603c..4b1164232 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -13,15 +13,14 @@ Here's what you can do to help: ### Snippet submission and Pull request guidelines - **DO NOT MODIFY THE README.md FILE!** Make changes to individual snippet files. You can optionally run `npm run build-list` to update the README.md file automatically, based on the changes you have made. -- **Snippet filenames** must correspond to the title of the snippet. For example, if your snippet is titled `### Awesome snippet` the filename should be `awesome-snippet.md`. - - Use `kebab-case`, not `snake_case`. +- **Snippet filenames** must correspond to the title of the snippet. For example, if your snippet is titled `### awesomeSnippet` the filename should be `awesomeSnippet.md`. + - Use `camelCase`, not `kebab-case` or `snake_case`. - Avoid capitalization of words, except if the whole word is capitalized (e.g. `URL` should be capitalized in the filename and the snippet title). - - If there are parentheses in the title, add them to the filename (e.g. `awesome-snippet-(extra-awesome).md` if your snippet's title is `Awesome snippet (extra awesome)`). -- **Snippet titles** should have only the first letter of the first word capitalized. Certain words can be in capitals (e.g. `URL`, `RGB`), but this is on a per-snippet basis. +- **Snippet titles** should have be the same as the name of the function that is present in the snippet. - All snippet titles must be prefixed with `###` and be at the very first line of your snippet. - Snippet titles must be unique (although if you cannot find a better title, just add some placeholder at the end of the filename and title and we will figure it out). - Follow snippet titles with an empty line. -- **Snippet descriptions** must be short and to the point. Try to explain *how* the snippet works and what Javascript features are used. Remember to include what functions you are using and why. +- **Snippet descriptions** must be short and to the point. Try to explain *what* the snippet does and *how* the snippet works and what Javascript features are used. Remember to include what functions you are using and why. - Follow snippet descriptions with an empty line. - **Snippet code** must be enclosed inside ` ```js ` and ` ``` `. - Remember to start your snippet's code on a new line below the opening backticks. diff --git a/README.md b/README.md index c9dd3b8b4..4cd0838cd 100644 --- a/README.md +++ b/README.md @@ -10,131 +10,216 @@ ## Table of Contents ### Array -* [Array difference](#array-difference) -* [Array intersection](#array-intersection) -* [Array pull (mutates array)](#array-pull-mutates-array) -* [Array remove](#array-remove) -* [Array sample](#array-sample) -* [Array symmetric difference](#array-symmetric-difference) -* [Array union](#array-union) -* [Array without](#array-without) -* [Array zip](#array-zip) -* [Average of array of numbers](#average-of-array-of-numbers) -* [Chunk array](#chunk-array) -* [Compact](#compact) -* [Count occurrences of a value in array](#count-occurrences-of-a-value-in-array) -* [Deep flatten array](#deep-flatten-array) -* [Drop elements in array](#drop-elements-in-array) -* [Filter out non unique values in an array](#filter-out-non-unique-values-in-an-array) -* [Flatten array up to depth](#flatten-array-up-to-depth) -* [Flatten array](#flatten-array) -* [Get max value from array](#get-max-value-from-array) -* [Get min value from array](#get-min-value-from-array) -* [Group by](#group-by) -* [Head of list](#head-of-list) -* [Initial of list](#initial-of-list) -* [Initialize array with range](#initialize-array-with-range) -* [Initialize array with values](#initialize-array-with-values) -* [Last of list](#last-of-list) -* [Median of array of numbers](#median-of-array-of-numbers) -* [Nth element of array](#nth-element-of-array) -* [Pick](#pick) -* [Shuffle array](#shuffle-array) -* [Similarity between arrays](#similarity-between-arrays) -* [Sum of array of numbers](#sum-of-array-of-numbers) -* [Tail of list](#tail-of-list) -* [Take every nth element](#take-every-nth-element) -* [Take right](#take-right) -* [Take](#take) -* [Unique values of array](#unique-values-of-array) +* [`arrayMax`](#arraymax) +* [`arrayMin`](#arraymin) +* [`chunk`](#chunk) +* [`compact`](#compact) +* [`countOccurrences`](#countoccurrences) +* [`deepFlatten`](#deepflatten) +* [`difference`](#difference) +* [`distinctValuesOfArray`](#distinctvaluesofarray) +* [`dropElements`](#dropelements) +* [`everyNth`](#everynth) +* [`filterNonUnique`](#filternonunique) +* [`flatten`](#flatten) +* [`flattenDepth`](#flattendepth) +* [`groupBy`](#groupby) +* [`head`](#head) +* [`initial`](#initial) +* [`initializeArrayWithRange`](#initializearraywithrange) +* [`initializeArrayWithValues`](#initializearraywithvalues) +* [`intersection`](#intersection) +* [`last`](#last) +* [`nthElement`](#nthelement) +* [`pick`](#pick) +* [`pull`](#pull) +* [`remove`](#remove) +* [`sample`](#sample) +* [`shuffle`](#shuffle) +* [`similarity`](#similarity) +* [`symmetricDifference`](#symmetricdifference) +* [`tail`](#tail) +* [`take`](#take) +* [`takeRight`](#takeright) +* [`union`](#union) +* [`without`](#without) +* [`zip`](#zip) ### Browser -* [Bottom visible](#bottom-visible) -* [Current URL](#current-url) -* [Element is visible in viewport](#element-is-visible-in-viewport) -* [Get scroll position](#get-scroll-position) -* [Redirect to URL](#redirect-to-url) -* [Scroll to top](#scroll-to-top) +* [`bottomVisible`](#bottomvisible) +* [`current-URL`](#current-url) +* [`elementIsVisibleInViewport`](#elementisvisibleinviewport) +* [`getScrollPosition`](#getscrollposition) +* [`getURLParameters`](#geturlparameters) +* [`redirect`](#redirect) +* [`scrollToTop`](#scrolltotop) ### Date -* [Convert to english date](#convert-to-english-date) -* [Get days difference between dates](#get-days-difference-between-dates) -* [JSON to date](#json-to-date) +* [`getDaysDiffBetweenDates`](#getdaysdiffbetweendates) +* [`JSONToDate`](#jsontodate) +* [`toEnglishDate`](#toenglishdate) ### Function -* [Chain asynchronous functions](#chain-asynchronous-functions) -* [Compose functions](#compose-functions) -* [Curry](#curry) -* [Log function name](#log-function-name) -* [Pipe functions](#pipe-functions) -* [Promisify](#promisify) -* [Run promises in series](#run-promises-in-series) -* [Sleep](#sleep) +* [`chainAsync`](#chainasync) +* [`compose`](#compose) +* [`curry`](#curry) +* [`functionName`](#functionname) +* [`pipe`](#pipe) +* [`promisify`](#promisify) +* [`runPromisesInSeries`](#runpromisesinseries) +* [`sleep`](#sleep) ### Math -* [Collatz algorithm](#collatz-algorithm) -* [Distance between two points](#distance-between-two-points) -* [Divisible by number](#divisible-by-number) -* [Even or odd number](#even-or-odd-number) -* [Factorial](#factorial) -* [Fibonacci array generator](#fibonacci-array-generator) -* [Greatest common divisor (GCD)](#greatest-common-divisor-gcd) -* [Hamming distance](#hamming-distance) -* [Least common multiple (LCM)](#least-common-multiple-lcm) -* [Percentile](#percentile) -* [Powerset](#powerset) -* [Random integer in range](#random-integer-in-range) -* [Random number in range](#random-number-in-range) -* [Round number to n digits](#round-number-to-n-digits) -* [Standard deviation](#standard-deviation) +* [`arrayAverage`](#arrayaverage) +* [`arraySum`](#arraysum) +* [`collatz`](#collatz) +* [`digitize`](#digitize) +* [`distance`](#distance) +* [`factorial`](#factorial) +* [`fibonacci`](#fibonacci) +* [`gcd`](#gcd) +* [`hammingDistance`](#hammingdistance) +* [`isDivisible`](#isdivisible) +* [`isEven`](#iseven) +* [`lcm`](#lcm) +* [`median`](#median) +* [`palindrome`](#palindrome) +* [`percentile`](#percentile) +* [`powerset`](#powerset) +* [`randomIntegerInRange`](#randomintegerinrange) +* [`randomNumberInRange`](#randomnumberinrange) +* [`round`](#round) +* [`standardDeviation`](#standarddeviation) ### Media -* [Speech synthesis (experimental)](#speech-synthesis-experimental) +* [`speechSynthesis`](#speechsynthesis) ### Node -* [Read file as array of lines](#read-file-as-array-of-lines) -* [Write JSON to file](#write-json-to-file) +* [`JSONToFile`](#jsontofile) +* [`readFileLines`](#readfilelines) ### Object -* [Clean JSON object](#clean-json-object) -* [Object from key value pairs](#object-from-key-value-pairs) -* [Object to key value pairs](#object-to-key-value-pairs) -* [Shallow clone object](#shallow-clone-object) +* [`cleanObj`](#cleanobj) +* [`objectFromPairs`](#objectfrompairs) +* [`objectToPairs`](#objecttopairs) +* [`shallowClone`](#shallowclone) ### String -* [Anagrams of string (with duplicates)](#anagrams-of-string-with-duplicates) -* [Capitalize first letter of every word](#capitalize-first-letter-of-every-word) -* [Capitalize first letter](#capitalize-first-letter) -* [Check for palindrome](#check-for-palindrome) -* [Convert string from camelcase](#convert-string-from-camelcase) -* [Convert string to camelcase](#convert-string-to-camelcase) -* [Reverse a string](#reverse-a-string) -* [Sort characters in string (alphabetical)](#sort-characters-in-string-alphabetical) -* [Truncate a string](#truncate-a-string) +* [`anagrams`](#anagrams) +* [`capitalize`](#capitalize) +* [`capitalizeEveryWord`](#capitalizeeveryword) +* [`escapeRegExp`](#escaperegexp) +* [`fromCamelCase`](#fromcamelcase) +* [`reverseString`](#reversestring) +* [`sortCharactersInString`](#sortcharactersinstring) +* [`toCamelCase`](#tocamelcase) +* [`truncateString`](#truncatestring) ### Utility -* [3 digit hexcode to 6 digit hexcode](#3-digit-hexcode-to-6-digit-hexcode) -* [Escape regular expression](#escape-regular-expression) -* [Get native type of value](#get-native-type-of-value) -* [Hexcode to RGB](#hexcode-to-rgb) -* [Is array](#is-array) -* [Is boolean](#is-boolean) -* [Is function](#is-function) -* [Is number](#is-number) -* [Is string](#is-string) -* [Is symbol](#is-symbol) -* [Measure time taken by function](#measure-time-taken-by-function) -* [Number to array of digits](#number-to-array-of-digits) -* [Ordinal suffix of number](#ordinal-suffix-of-number) -* [RGB to hexadecimal](#rgb-to-hexadecimal) -* [URL parameters](#url-parameters) -* [UUID generator](#uuid-generator) -* [Validate email](#validate-email) -* [Validate number](#validate-number) +* [`extendHex`](#extendhex) +* [`getType`](#gettype) +* [`hexToRGB`](#hextorgb) +* [`isArray`](#isarray) +* [`isBoolean`](#isboolean) +* [`isFunction`](#isfunction) +* [`isNumber`](#isnumber) +* [`isString`](#isstring) +* [`isSymbol`](#issymbol) +* [`RGBToHex`](#rgbtohex) +* [`timeTaken`](#timetaken) +* [`toOrdinalSuffix`](#toordinalsuffix) +* [`UUIDGenerator`](#uuidgenerator) +* [`validateEmail`](#validateemail) +* [`validateNumber`](#validatenumber) ## Array -### Array difference +### arrayMax + +Returns the maximum value in an array. + +Use `Math.max()` combined with the spread operator (`...`) to get the maximum value in the array. + +```js +const arrayMax = arr => Math.max(...arr); +// arrayMax([10, 1, 5]) -> 10 +``` + +[⬆ back to top](#table-of-contents) + +### arrayMin + +Returns the minimum value in an array. + +Use `Math.min()` combined with the spread operator (`...`) to get the minimum value in the array. + +```js +const arrayMin = arr => Math.min(...arr); +// arrayMin([10, 1, 5]) -> 1 +``` + +[⬆ back to top](#table-of-contents) + +### chunk + +Chunks an array into smaller arrays of a specified size. + +Use `Array.from()` to create a new array, that fits the number of chunks that will be produced. +Use `Array.slice()` to map each element of the new array to a chunk the length of `size`. +If the original array can't be split evenly, the final chunk will contain the remaining elements. + +```js +const chunk = (arr, size) => + Array.from({length: Math.ceil(arr.length / size)}, (v, i) => arr.slice(i * size, i * size + size)); +// chunk([1,2,3,4,5], 2) -> [[1,2],[3,4],[5]] +``` + +[⬆ back to top](#table-of-contents) + +### compact + +Removes falsey values from an array. + +Use `Array.filter()` to filter out falsey values (`false`, `null`, `0`, `""`, `undefined`, and `NaN`). + +```js +const compact = (arr) => arr.filter(Boolean); +// compact([0, 1, false, 2, '', 3, 'a', 'e'*23, NaN, 's', 34]) -> [ 1, 2, 3, 'a', 's', 34 ] +``` + +[⬆ back to top](#table-of-contents) + +### countOccurrences + +Counts the occurences of a value in an array. + +Use `Array.reduce()` to increment a counter each time you encounter the specific value inside the array. + +```js +const countOccurrences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0); +// countOccurrences([1,1,2,1,2,3], 1) -> 3 +``` + +[⬆ back to top](#table-of-contents) + +### deepFlatten + +Deep flattens an array. + +Use recursion. +Use `Array.concat()` with an empty array (`[]`) and the spread operator (`...`) to flatten an array. +Recursively flatten each element that is an array. + +```js +const deepFlatten = arr => [].concat(...arr.map(v => Array.isArray(v) ? deepFlatten(v) : v)); +// deepFlatten([1,[2],[[3],4],5]) -> [1,2,3,4,5] +``` + +[⬆ back to top](#table-of-contents) + +### difference + +Returns the difference between two arrays. Create a `Set` from `b`, then use `Array.filter()` on `a` to only keep values not contained in `b`. @@ -145,7 +230,168 @@ const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has [⬆ back to top](#table-of-contents) -### Array intersection +### distinctValuesOfArray + +Returns all the distinct values of an array. + +Use ES6 `Set` and the `...rest` operator to discard all duplicated values. + +```js +const distinctValuesOfArray = arr => [...new Set(arr)]; +// unique([1,2,2,3,4,4,5]) -> [1,2,3,4,5] +``` + +[⬆ back to top](#table-of-contents) + +### dropElements + +Removes elements in an array until the passed function returns `true`. Returns the remaining elements in the array. + +Loop through the array, using `Array.shift()` to drop the first element of the array until the returned value from the function is `true`. +Returns the remaining elements. + +```js +const dropElements = (arr, func) => { + while (arr.length > 0 && !func(arr[0])) arr.shift(); + return arr; +}; +// dropElements([1, 2, 3, 4], n => n >= 3) -> [3,4] +``` + +[⬆ back to top](#table-of-contents) + +### everyNth + +Returns every nth element in an array. + +Use `Array.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 === 0); +// everynth([1,2,3,4,5,6], 2) -> [ 1, 3, 5 ] +``` + +[⬆ back to top](#table-of-contents) + +### filterNonUnique + +Filters out the non-unique values in an array. + +Use `Array.filter()` for an array containing only the unique values. + +```js +const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i)); +// filterNonUnique([1,2,2,3,4,4,5]) -> [1,3,5] +``` + +[⬆ back to top](#table-of-contents) + +### flatten + +Flattens an array. + +Use `Array.reduce()` to get all elements inside the array and `concat()` to flatten them. + +```js +const flatten = arr => arr.reduce((a, v) => a.concat(v), []); +// flatten([1,[2],3,4]) -> [1,2,3,4] +``` + +[⬆ back to top](#table-of-contents) + +### flattenDepth + +Flattens an array up to the specified depth. + +Use recursion, decrementing `depth` by 1 for each level of depth. +Use `Array.reduce()` and `Array.concat()` to merge elements or arrays. +Base case, for `depth` equal to `1` stops recursion. +Omit the second element, `depth` to flatten only to a depth of `1` (single flatten). + +```js +const flattenDepth = (arr, depth = 1) => + depth != 1 ? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flattenDepth(v, depth - 1) : v), []) + : arr.reduce((a, v) => a.concat(v), []); +// flattenDepth([1,[2],[[[3],4],5]], 2) -> [1,2,[3],4,5] +``` + +[⬆ back to top](#table-of-contents) + +### groupBy + +Groups the element of an array based on the given function. + +Use `Array.map()` to map the values of an array to a function or property name. +Use `Array.reduce()` to create an object, where the keys are produced from the mapped results. + +```js +const groupBy = (arr, func) => + arr.map(typeof func === 'function' ? func : val => val[func]) + .reduce((acc, val, i) => { acc[val] = (acc[val] || []).concat(arr[i]); return acc; }, {}); +// groupBy([6.1, 4.2, 6.3], Math.floor) -> {4: [4.2], 6: [6.1, 6.3]} +// groupBy(['one', 'two', 'three'], 'length') -> {3: ['one', 'two'], 5: ['three']} +``` + +[⬆ back to top](#table-of-contents) + +### head + +Returns the head of a list. + +Use `arr[0]` to return the first element of the passed array. + +```js +const head = arr => arr[0]; +// head([1,2,3]) -> 1 +``` + +[⬆ back to top](#table-of-contents) + +### initial + +Returns all the elements of an array except the last one. + +Use `arr.slice(0,-1)`to return all but the last element of the array. + +```js +const initial = arr => arr.slice(0, -1); +// initial([1,2,3]) -> [1,2] +``` + +[⬆ back to top](#table-of-contents) + +### initializeArrayWithRange + +Initialized an array containing the numbers in the specified range. + +Use `Array(end-start)` to create an array of the desired length, `Array.map()` to fill with the desired values in a range. +You can omit `start` to use a default value of `0`. + +```js +const initializeArrayWithRange = (end, start = 0) => + Array.from({ length: end - start }).map((v, i) => i + start); +// initializeArrayRange(5) -> [0,1,2,3,4] +``` + +[⬆ back to top](#table-of-contents) + +### initializeArrayWithValues + +Initializes and fills an array with the specified values. + +Use `Array(n)` to create an array of the desired length, `fill(v)` to fill it with the desired values. +You can omit `value` to use a default value of `0`. + +```js +const initializeArrayWithValues = (n, value = 0) => Array(n).fill(value); +// initializeArray(5, 2) -> [2,2,2,2,2] +``` + +[⬆ back to top](#table-of-contents) + +### intersection + +Returns a list of elements that exist in both arrays. Create a `Set` from `b`, then use `Array.filter()` on `a` to only keep values contained in `b`. @@ -156,9 +402,54 @@ const intersection = (a, b) => { const s = new Set(b); return a.filter(x => s.ha [⬆ back to top](#table-of-contents) -### Array pull (mutates array) +### last -Use `Array.filter()` and `Array.includes()` to pull out the values that are not needed. +Returns the last element in an array. + +Use `arr.length - 1` to compute index of the last element of the given array and returning it. + +```js +const last = arr => arr[arr.length - 1]; +// last([1,2,3]) -> 3 +``` + +[⬆ back to top](#table-of-contents) + +### nthElement + +Returns the nth element of an array. + +Use `Array.slice()` to get an array containing the nth element at the first place. +If the index is out of bounds, return `[]`. +Omit the second argument, `n`, to get the first element of the array. + +```js +const nthElement = (arr, n=0) => (n>0? arr.slice(n,n+1) : arr.slice(n))[0]; +// nth(['a','b','c'],1) -> 'b' +// nth(['a','b','b']-2) -> 'a' +``` + +[⬆ back to top](#table-of-contents) + +### pick + +Picks the key-value pairs corresponding to the given keys from an object. + +Use `Array.reduce()` to convert the filtered/picked keys back to a object with the corresponding key-value pair if the key exist in the obj. + +```js +const pick = (obj, arr) => + arr.reduce((acc, curr) => (curr in obj && (acc[curr] = obj[curr]), acc), {}); +// pick({ 'a': 1, 'b': '2', 'c': 3 }, ['a', 'c']) -> { 'a': 1, 'c': 3 } +``` + +[⬆ back to top](#table-of-contents) + +### pull + +Mutates the original array to filter out the values specified. + +Use `Array.filter()` and `Array.includes()` to pull out the values that are not needed. Use `Array.length = 0` to mutate the passed in array by resetting it's length to zero and `Array.push()` to re-populate it with only the pulled values. ```js @@ -173,7 +464,9 @@ const pull = (arr, ...args) => { [⬆ back to top](#table-of-contents) -### Array remove +### remove + +Removes elements from an array for which the given function returns `false`. Use `Array.filter()` to find array elements that return truthy values and `Array.reduce()` to remove elements using `Array.splice()`. The `func` is invoked with three arguments (`value, index, array`). @@ -189,7 +482,9 @@ const remove = (arr, func) => [⬆ back to top](#table-of-contents) -### Array sample +### sample + +Returns a random element from an array. Use `Math.random()` to generate a random number, multiply it with `length` and round it of to the nearest whole number using `Math.floor()`. This method also works with strings. @@ -201,7 +496,35 @@ const sample = arr => arr[Math.floor(Math.random() * arr.length)]; [⬆ back to top](#table-of-contents) -### Array symmetric difference +### shuffle + +Randomizes the order of the values of an array. + +Use `Array.sort()` to reorder elements, using `Math.random()` in the comparator. + +```js +const shuffle = arr => arr.sort(() => Math.random() - 0.5); +// shuffle([1,2,3]) -> [2,3,1] +``` + +[⬆ back to top](#table-of-contents) + +### similarity + +Returns an array of elements that appear in both arrays. + +Use `filter()` to remove values that are not part of `values`, determined using `includes()`. + +```js +const similarity = (arr, values) => arr.filter(v => values.includes(v)); +// similarity([1,2,3], [1,2,4]) -> [1,2] +``` + +[⬆ back to top](#table-of-contents) + +### symmetricDifference + +Returns the symmetric difference between two arrays. Create a `Set` from each array, then use `Array.filter()` on each of them to only keep values not contained in the other. @@ -215,7 +538,51 @@ const symmetricDifference = (a, b) => { [⬆ back to top](#table-of-contents) -### Array union +### tail + +Returns all elements in an array except for the first one. + +Return `arr.slice(1)` if the array's `length` is more than `1`, otherwise return the whole array. + +```js +const tail = arr => arr.length > 1 ? arr.slice(1) : arr; +// tail([1,2,3]) -> [2,3] +// tail([1]) -> [1] +``` + +[⬆ back to top](#table-of-contents) + +### take + +Returns an array with n elements removed from the beggining. + +Use `Array.slice()` to create a slice of the array with `n` elements taken from the beginning. + +```js +const take = (arr, n = 1) => arr.slice(0, n); +// take([1, 2, 3], 5) -> [1, 2, 3] +// take([1, 2, 3], 0) -> [] +``` + +[⬆ back to top](#table-of-contents) + +### takeRight + +Returns an array with n elements removed from the end. + +Use `Array.slice()` to create a slice of the array with `n` elements taken from the end. + +```js +const takeRight = (arr, n = 1) => arr.slice(arr.length - n, arr.length); +// takeRight([1, 2, 3], 2) -> [ 2, 3 ] +// takeRight([1, 2, 3]) -> [3] +``` + +[⬆ back to top](#table-of-contents) + +### union + +Returns every element that exists in any of the two arrays once. Create a `Set` with all values of `a` and `b` and convert to an array. @@ -226,19 +593,22 @@ const union = (a, b) => Array.from(new Set([...a, ...b])); [⬆ back to top](#table-of-contents) -### Array without +### without + +Filters out the elements of an array, that have one of the specified values. Use `Array.filter()` to create an array excluding(using `!Array.includes()`) all given values. ```js const without = (arr, ...args) => arr.filter(v => !args.includes(v)); // without([2, 1, 2, 3], 1, 2) -> [3] -// without([2, 1, 2, 3, 4, 5, 5, 5, 3, 2, 7, 7], 3, 1, 5, 2) -> [ 4, 7, 7 ] ``` [⬆ back to top](#table-of-contents) -### Array zip +### zip + +Creates an array of elements, grouped based on the position in the original arrays. Use `Math.max.apply()` to get the longest array in the arguments. Creates an array with that length as return value and use `Array.from()` with a map-function to create an array of grouped elements. @@ -255,352 +625,12 @@ const zip = (...arrays) => { //zip(['a'], [1, 2], [true, false]); -> [['a', 1, true], [undefined, 2, false]] ``` -[⬆ back to top](#table-of-contents) - -### Average of array of numbers - -Use `Array.reduce()` to add each value to an accumulator, initialized with a value of `0`, divide by the `length` of the array. - -```js -const average = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length; -// average([1,2,3]) -> 2 -``` - -[⬆ back to top](#table-of-contents) - -### Chunk array - -Use `Array.from()` to create a new array, that fits the number of chunks that will be produced. -Use `Array.slice()` to map each element of the new array to a chunk the length of `size`. -If the original array can't be split evenly, the final chunk will contain the remaining elements. - -```js -const chunk = (arr, size) => - Array.from({length: Math.ceil(arr.length / size)}, (v, i) => arr.slice(i * size, i * size + size)); -// chunk([1,2,3,4,5], 2) -> [[1,2],[3,4],[5]] -``` - -[⬆ back to top](#table-of-contents) - -### Compact - -Use `Array.filter()` to filter out falsey values (`false`, `null`, `0`, `""`, `undefined`, and `NaN`). - -```js -const compact = (arr) => arr.filter(Boolean); -// compact([0, 1, false, 2, '', 3, 'a', 'e'*23, NaN, 's', 34]) -> [ 1, 2, 3, 'a', 's', 34 ] -``` - -[⬆ back to top](#table-of-contents) - -### Count occurrences of a value in array - -Use `Array.reduce()` to increment a counter each time you encounter the specific value inside the array. - -```js -const countOccurrences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0); -// countOccurrences([1,1,2,1,2,3], 1) -> 3 -``` - -[⬆ back to top](#table-of-contents) - -### Deep flatten array - -Use recursion. -Use `Array.concat()` with an empty array (`[]`) and the spread operator (`...`) to flatten an array. -Recursively flatten each element that is an array. - -```js -const deepFlatten = arr => [].concat(...arr.map(v => Array.isArray(v) ? deepFlatten(v) : v)); -// deepFlatten([1,[2],[[3],4],5]) -> [1,2,3,4,5] -``` - -[⬆ back to top](#table-of-contents) - -### Drop elements in array - -Loop through the array, using `Array.shift()` to drop the first element of the array until the returned value from the function is `true`. -Returns the remaining elements. - -```js -const dropElements = (arr, func) => { - while (arr.length > 0 && !func(arr[0])) arr.shift(); - return arr; -}; -// dropElements([1, 2, 3, 4], n => n >= 3) -> [3,4] -``` - -[⬆ back to top](#table-of-contents) - -### Filter out non-unique values in an array - -Use `Array.filter()` for an array containing only the unique values. - -```js -const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i)); -// filterNonUnique([1,2,2,3,4,4,5]) -> [1,3,5] -``` - -[⬆ back to top](#table-of-contents) - -### Flatten array up to depth - -Use recursion, decrementing `depth` by 1 for each level of depth. -Use `Array.reduce()` and `Array.concat()` to merge elements or arrays. -Base case, for `depth` equal to `1` stops recursion. -Omit the second element, `depth` to flatten only to a depth of `1` (single flatten). - -```js -const flattenDepth = (arr, depth = 1) => - depth != 1 ? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flattenDepth(v, depth - 1) : v), []) - : arr.reduce((a, v) => a.concat(v), []); -// flattenDepth([1,[2],[[[3],4],5]], 2) -> [1,2,[3],4,5] -``` - -[⬆ back to top](#table-of-contents) - -### Flatten array - -Use `Array.reduce()` to get all elements inside the array and `concat()` to flatten them. - -```js -const flatten = arr => arr.reduce((a, v) => a.concat(v), []); -// flatten([1,[2],3,4]) -> [1,2,3,4] -``` - -[⬆ back to top](#table-of-contents) - -### Get max value from array - -Use `Math.max()` combined with the spread operator (`...`) to get the maximum value in the array. - -```js -const arrayMax = arr => Math.max(...arr); -// arrayMax([10, 1, 5]) -> 10 -``` - -[⬆ back to top](#table-of-contents) - -### Get min value from array - -Use `Math.min()` combined with the spread operator (`...`) to get the minimum value in the array. - -```js -const arrayMin = arr => Math.min(...arr); -// arrayMin([10, 1, 5]) -> 1 -``` - -[⬆ back to top](#table-of-contents) - -### Group by - -Use `Array.map()` to map the values of an array to a function or property name. -Use `Array.reduce()` to create an object, where the keys are produced from the mapped results. - -```js -const groupBy = (arr, func) => - arr.map(typeof func === 'function' ? func : val => val[func]) - .reduce((acc, val, i) => { acc[val] = (acc[val] || []).concat(arr[i]); return acc; }, {}); -// groupBy([6.1, 4.2, 6.3], Math.floor) -> {4: [4.2], 6: [6.1, 6.3]} -// groupBy(['one', 'two', 'three'], 'length') -> {3: ['one', 'two'], 5: ['three']} -``` - -[⬆ back to top](#table-of-contents) - -### Head of list - -Use `arr[0]` to return the first element of the passed array. - -```js -const head = arr => arr[0]; -// head([1,2,3]) -> 1 -``` - -[⬆ back to top](#table-of-contents) - -### Initial of list - -Use `arr.slice(0,-1)`to return all but the last element of the array. - -```js -const initial = arr => arr.slice(0, -1); -// initial([1,2,3]) -> [1,2] -``` - -[⬆ back to top](#table-of-contents) - -### Initialize array with range - -Use `Array(end-start)` to create an array of the desired length, `Array.map()` to fill with the desired values in a range. -You can omit `start` to use a default value of `0`. - -```js -const initializeArrayRange = (end, start = 0) => - Array.from({ length: end - start }).map((v, i) => i + start); -// initializeArrayRange(5) -> [0,1,2,3,4] -``` - -[⬆ back to top](#table-of-contents) - -### Initialize array with values - -Use `Array(n)` to create an array of the desired length, `fill(v)` to fill it with the desired values. -You can omit `value` to use a default value of `0`. - -```js -const initializeArray = (n, value = 0) => Array(n).fill(value); -// initializeArray(5, 2) -> [2,2,2,2,2] -``` - -[⬆ back to top](#table-of-contents) - -### Last of list - -Use `arr.length - 1` to compute index of the last element of the given array and returning it. - -```js -const last = arr => arr[arr.length - 1]; -// last([1,2,3]) -> 3 -``` - -[⬆ back to top](#table-of-contents) - -### Median of array of numbers - -Find the middle of the array, use `Array.sort()` to sort the values. -Return the number at the midpoint if `length` is odd, otherwise the average of the two middle numbers. - -```js -const median = arr => { - const mid = Math.floor(arr.length / 2), nums = arr.sort((a, b) => a - b); - return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2; -}; -// median([5,6,50,1,-5]) -> 5 -// median([0,10,-2,7]) -> 3.5 -``` - -[⬆ back to top](#table-of-contents) - -### Nth element of array - -Use `Array.slice()` to get an array containing the nth element at the first place. -If the index is out of bounds, return `[]`. -Omit the second argument, `n`, to get the first element of the array. - -```js -const nth = (arr, n=0) => (n>0? arr.slice(n,n+1) : arr.slice(n))[0]; -// nth(['a','b','c'],1) -> 'b' -// nth(['a','b','b']-2) -> 'a' -``` - -[⬆ back to top](#table-of-contents) - -### Pick - -Use `Array.reduce()` to convert the filtered/picked keys back to a object with the corresponding key:value pair if the key exist in the obj. - -```js -const pick = (obj, arr) => - arr.reduce((acc, curr) => (curr in obj && (acc[curr] = obj[curr]), acc), {}); -// pick({ 'a': 1, 'b': '2', 'c': 3 }, ['a', 'c']) -> { 'a': 1, 'c': 3 } -// pick(object, ['a', 'c'])['a'] -> 1 -``` - -[⬆ back to top](#table-of-contents) - -### Shuffle array - -Use `Array.sort()` to reorder elements, using `Math.random()` in the comparator. - -```js -const shuffle = arr => arr.sort(() => Math.random() - 0.5); -// shuffle([1,2,3]) -> [2,3,1] -``` - -[⬆ back to top](#table-of-contents) - -### Similarity between arrays - -Use `filter()` to remove values that are not part of `values`, determined using `includes()`. - -```js -const similarity = (arr, values) => arr.filter(v => values.includes(v)); -// similarity([1,2,3], [1,2,4]) -> [1,2] -``` - -[⬆ back to top](#table-of-contents) - -### Sum of array of numbers - -Use `Array.reduce()` to add each value to an accumulator, initialized with a value of `0`. - -```js -const sum = arr => arr.reduce((acc, val) => acc + val, 0); -// sum([1,2,3,4]) -> 10 -``` - -[⬆ back to top](#table-of-contents) - -### Tail of list - -Return `arr.slice(1)` if the array's `length` is more than `1`, otherwise return the whole array. - -```js -const tail = arr => arr.length > 1 ? arr.slice(1) : arr; -// tail([1,2,3]) -> [2,3] -// tail([1]) -> [1] -``` - -[⬆ back to top](#table-of-contents) - -### Take every nth element - -Use `Array.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 === 0); -// everynth([1,2,3,4,5,6], 2) -> [ 1, 3, 5 ] -``` - -[⬆ back to top](#table-of-contents) - -### Take right - -Use `Array.slice()` to create a slice of the array with `n` elements taken from the end. - -```js -const takeRight = (arr, n = 1) => arr.slice(arr.length - n, arr.length); -// takeRight([1, 2, 3], 2) -> [ 2, 3 ] -// takeRight([1, 2, 3]) -> [3] -``` - -[⬆ back to top](#table-of-contents) - -### Take - -Use `Array.slice()` to create a slice of the array with `n` elements taken from the beginning. - -```js -const take = (arr, n = 1) => arr.slice(0, n); -// take([1, 2, 3], 5) -> [1, 2, 3] -// take([1, 2, 3], 0) -> [] -``` - -[⬆ back to top](#table-of-contents) - -### Unique values of array - -Use ES6 `Set` and the `...rest` operator to discard all duplicated values. - -```js -const unique = arr => [...new Set(arr)]; -// unique([1,2,2,3,4,4,5]) -> [1,2,3,4,5] -``` - [⬆ back to top](#table-of-contents) ## Browser -### Bottom visible +### bottomVisible + +Returns `true` if the bottom of the page is visible, `false` otherwise. Use `scrollY`, `scrollHeight` and `clientHeight` to determine if the bottom of the page is visible. @@ -612,18 +642,22 @@ const bottomVisible = () => [⬆ back to top](#table-of-contents) -### Current URL +### currentURL + +Returns the current URL. Use `window.location.href` to get current URL. ```js -const currentUrl = () => window.location.href; +const currentURL = () => window.location.href; // currentUrl() -> 'https://google.com' ``` [⬆ back to top](#table-of-contents) -### Element is visible in viewport +### elementIsVisibleInViewport + +Returns `true` if the element specified is visible in the viewport, `false` otherwise. Use `Element.getBoundingClientRect()` and the `window.inner(Width|Height)` values to determine if a given element is visible in the viewport. @@ -645,13 +679,15 @@ const elementIsVisibleInViewport = (el, partiallyVisible = false) => { [⬆ back to top](#table-of-contents) -### Get scroll position +### getScrollPosition + +Returns the scroll position of the current page. Use `pageXOffset` and `pageYOffset` if they are defined, otherwise `scrollLeft` and `scrollTop`. You can omit `el` to use a default value of `window`. ```js -const getScrollPos = (el = window) => +const getScrollPosition = (el = window) => ({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft, y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop}); // getScrollPos() -> {x: 0, y: 200} @@ -659,7 +695,26 @@ const getScrollPos = (el = window) => [⬆ back to top](#table-of-contents) -### Redirect to URL +### getURLParameters + +Returns an object containing the parameters of the current URL. + +Use `match()` with an appropriate regular expression to get all key-value pairs, `Array.reduce()` to map and combine them into a single object. +Pass `location.search` as the argument to apply to the current `url`. + +```js +const getURLParameters = url => + url.match(/([^?=&]+)(=([^&]*))/g).reduce( + (a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {} + ); +// getUrlParameters('http://url.com/page?name=Adam&surname=Smith') -> {name: 'Adam', surname: 'Smith'} +``` + +[⬆ back to top](#table-of-contents) + +### redirect + +Redirects to a specified URL. Use `window.location.href` or `window.location.replace()` to redirect to `url`. Pass a second argument to simulate a link click (`true` - default) or an HTTP redirect (`false`). @@ -672,7 +727,9 @@ const redirect = (url, asLink = true) => [⬆ back to top](#table-of-contents) -### Scroll to top +### scrollToTop + +Smooth-scrolls to the top of the page. Get distance from top using `document.documentElement.scrollTop` or `document.body.scrollTop`. Scroll by a fraction of the distance from top. Use `window.requestAnimationFrame()` to animate the scrolling. @@ -691,7 +748,38 @@ const scrollToTop = () => { [⬆ back to top](#table-of-contents) ## Date -### Convert to English date +### getDaysDiffBetweenDates + +Returns the difference (in days) between two dates. + +Calculate the difference (in days) between to `Date` objects. + +```js +const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24); +// getDaysDiffBetweenDates(new Date("2017-12-13"), new Date("2017-12-22")) -> 9 +``` + +[⬆ back to top](#table-of-contents) + +### JSONToDate + +Converts a JSON object to a date. + +Use `Date()`, to convert dates in JSON format to readable format (`dd/mm/yyyy`). + +```js +const JSONToDate = arr => { + const dt = new Date(parseInt(arr.toString().substr(6))); + return `${ dt.getDate() }/${ dt.getMonth() + 1 }/${ dt.getFullYear() }` +}; +// jsonToDate(/Date(1489525200000)/) -> "14/3/2017" +``` + +[⬆ back to top](#table-of-contents) + +### toEnglishDate + +Converts a date from American format to English format. Use `Date.toISOString()`, `split('T')` and `replace()` to convert a date from American format to English format. Throws an error if the passed time cannot be converted to a date. @@ -702,35 +790,12 @@ const toEnglishDate = (time) => // toEnglishDate('09/21/2010') -> '21/09/2010' ``` -[⬆ back to top](#table-of-contents) - -### Get days difference between dates - -Calculate the difference (in days) between to `Date` objects. - -```js -const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24); -// getDaysDiffBetweenDates(new Date("2017-12-13"), new Date("2017-12-22")) -> 9 -``` - -[⬆ back to top](#table-of-contents) - -### JSON to date - -Use `Date()`, to convert dates in JSON format to readable format (`dd/mm/yyyy`). - -```js -const jsonToDate = arr => { - const dt = new Date(parseInt(arr.toString().substr(6))); - return `${ dt.getDate() }/${ dt.getMonth() + 1 }/${ dt.getFullYear() }` -}; -// jsonToDate(/Date(1489525200000)/) -> "14/3/2017" -``` - [⬆ back to top](#table-of-contents) ## Function -### Chain asynchronous functions +### chainAsync + +Chains asynchronous functions. Loop through an array of functions containing asynchronous events, calling `next` when each asynchronous event has completed. @@ -747,7 +812,9 @@ chainAsync([ [⬆ back to top](#table-of-contents) -### Compose functions +### compose + +Performs right-to-left function composition. Use `Array.reduce()` to perform right-to-left function composition. The last (rightmost) function can accept one or more arguments; the remaining functions must be unary. @@ -764,7 +831,9 @@ multiplyAndAdd5(5, 2) -> 15 [⬆ back to top](#table-of-contents) -### Curry +### curry + +Curries a function. Use recursion. If the number of provided arguments (`args`) is sufficient, call the passed function `f`. @@ -782,7 +851,9 @@ const curry = (fn, arity = fn.length, ...args) => [⬆ back to top](#table-of-contents) -### Log function name +### functionName + +Logs the name of a function. Use `console.debug()` and the `name` property of the passed method to log the method's name to the `debug` channel of the console. @@ -793,13 +864,15 @@ const functionName = fn => (console.debug(fn.name), fn); [⬆ back to top](#table-of-contents) -### Pipe functions +### pipe + +Performs left-to-right function composition. Use `Array.reduce()` with the spread operator (`...`) to perform left-to-right function composition. The first (leftmost) function can accept one or more arguments; the remaining functions must be unary. ```js -const pipe = (...fns) => fns.reduce((f, g) => (...args) => g(f(...args))); +const pipeFunctions = (...fns) => fns.reduce((f, g) => (...args) => g(f(...args))); /* const add5 = x => x + 5 const multiply = (x, y) => x * y @@ -810,10 +883,12 @@ multiplyAndAdd5(5, 2) -> 15 [⬆ back to top](#table-of-contents) -### Promisify +### promisify -Use currying to return a function returning a `Promise` that calls the original function. -Use the `...rest` operator to pass in all the parameters. +Converts an asynchronous function to return a promise. + +Use currying to return a function returning a `Promise` that calls the original function. +Use the `...rest` operator to pass in all the parameters. *In Node 8+, you can use [`util.promisify`](https://nodejs.org/api/util.html#util_util_promisify_original)* @@ -830,19 +905,23 @@ const promisify = func => [⬆ back to top](#table-of-contents) -### Run promises in series +### runPromisesInSeries -Run an array of promises in series using `Array.reduce()` by creating a promise chain, where each promise returns the next promise when resolved. +Runs an array of promises in series. + +Use `Array.reduce()` to create a promise chain, where each promise returns the next promise when resolved. ```js -const series = ps => ps.reduce((p, next) => p.then(next), Promise.resolve()); +const runPromisesInSeries = ps => ps.reduce((p, next) => p.then(next), Promise.resolve()); // const delay = (d) => new Promise(r => setTimeout(r, d)) // series([() => delay(1000), () => delay(2000)]) -> executes each promise sequentially, taking a total of 3 seconds to complete ``` [⬆ back to top](#table-of-contents) -### Sleep +### sleep + +Delays the execution of an asynchronous function. Delay executing part of an `async` function, by putting it to sleep, returning a `Promise`. @@ -860,7 +939,35 @@ async function sleepyWork() { [⬆ back to top](#table-of-contents) ## Math -### Collatz algorithm +### arrayAverage + +Returns the average of an array of numbers. + +Use `Array.reduce()` to add each value to an accumulator, initialized with a value of `0`, divide by the `length` of the array. + +```js +const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length; +// average([1,2,3]) -> 2 +``` + +[⬆ back to top](#table-of-contents) + +### arraySum + +Returns the sum of an array of numbers. + +Use `Array.reduce()` to add each value to an accumulator, initialized with a value of `0`. + +```js +const arraySum = arr => arr.reduce((acc, val) => acc + val, 0); +// sum([1,2,3,4]) -> 10 +``` + +[⬆ back to top](#table-of-contents) + +### collatz + +Applies the Collatz algorithm. If `n` is even, return `n/2`. Otherwise return `3n+1`. @@ -872,7 +979,23 @@ const collatz = n => (n % 2 == 0) ? (n / 2) : (3 * n + 1); [⬆ back to top](#table-of-contents) -### Distance between two points +### digitize + +Converts a number to an array of digits. + +Convert the number to a string, using spread operators in ES6(`[...string]`) build an array. +Use `Array.map()` and `parseInt()` to transform each value to an integer. + +```js +const digitize = n => [...''+n].map(i => parseInt(i)); +// digitize(2334) -> [2, 3, 3, 4] +``` + +[⬆ back to top](#table-of-contents) + +### distance + +Returns the distance between two points. Use `Math.hypot()` to calculate the Euclidean distance between two points. @@ -883,30 +1006,9 @@ const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0); [⬆ back to top](#table-of-contents) -### Divisible by number +### factorial -Use the modulo operator (`%`) to check if the remainder is equal to `0`. - -```js -const isDivisible = (dividend, divisor) => dividend % divisor === 0; -// isDivisible(6,3) -> true -``` - -[⬆ back to top](#table-of-contents) - -### Even or odd number - -Checks whether a number is odd or even using the modulo (`%`) operator. -Returns `true` if the number is even, `false` if the number is odd. - -```js -const isEven = num => num % 2 === 0; -// isEven(3) -> false -``` - -[⬆ back to top](#table-of-contents) - -### Factorial +Calculates the factorial of a number. Use recursion. If `n` is less than or equal to `1`, return `1`. @@ -922,7 +1024,9 @@ const factorial = n => [⬆ back to top](#table-of-contents) -### Fibonacci array generator +### fibonacci + +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.reduce()` to add values into the array, using the sum of the last two values, except for the first two. @@ -935,7 +1039,9 @@ const fibonacci = n => [⬆ back to top](#table-of-contents) -### Greatest common divisor (GCD) +### gcd + +Calculates the greatest common divisor between two numbers. Use recursion. Base case is when `y` equals `0`. In this case, return `x`. @@ -948,7 +1054,9 @@ const gcd = (x, y) => !y ? x : gcd(y, x % y); [⬆ back to top](#table-of-contents) -### Hamming distance +### hammingDistance + +Calculates the Hamming distance between two values. Use XOR operator (`^`) to find the bit difference between the two numbers, convert to binary string using `toString(2)`. Count and return the number of `1`s in the string, using `match(/1/g)`. @@ -961,7 +1069,36 @@ const hammingDistance = (num1, num2) => [⬆ back to top](#table-of-contents) -### Least common multiple (LCM) +### isDivisible + +Checks if the first numeric argument is divisible by the second one. + +Use the modulo operator (`%`) to check if the remainder is equal to `0`. + +```js +const isDivisible = (dividend, divisor) => dividend % divisor === 0; +// isDivisible(6,3) -> true +``` + +[⬆ back to top](#table-of-contents) + +### isEven + +Returns `true` if the given number is even, `false` otherwise. + +Checks whether a number is odd or even using the modulo (`%`) operator. +Returns `true` if the number is even, `false` if the number is odd. + +```js +const isEven = num => num % 2 === 0; +// isEven(3) -> false +``` + +[⬆ back to top](#table-of-contents) + +### lcm + +Returns the least common multiple of two numbers. Use the greatest common divisor (GCD) formula and `Math.abs()` to determine the least common multiple. The GCD formula uses recursion. @@ -976,20 +1113,58 @@ const lcm = (x,y) => { [⬆ back to top](#table-of-contents) -### Percentile +### median -Use `Array.reduce()` to calculate how many numbers are below the value and how many are the same value and -apply the percentile formula. +Returns the median of an array of numbers. + +Find the middle of the array, use `Array.sort()` to sort the values. +Return the number at the midpoint if `length` is odd, otherwise the average of the two middle numbers. ```js -const percentile = (arr, val) => +const median = arr => { + const mid = Math.floor(arr.length / 2), nums = arr.sort((a, b) => a - b); + return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2; +}; +// median([5,6,50,1,-5]) -> 5 +// median([0,10,-2,7]) -> 3.5 +``` + +[⬆ back to top](#table-of-contents) + +### palindrome + +Returns `true` if the given string is a palindrome, `false` otherwise. + +Convert string `toLowerCase()` and use `replace()` to remove non-alphanumeric characters from it. +Then, `split('')` into individual characters, `reverse()`, `join('')` and compare to the original, unreversed string, after converting it `tolowerCase()`. + +```js +const palindrome = str => { + const s = str.toLowerCase().replace(/[\W_]/g,''); + return s === s.split('').reverse().join(''); +} +// palindrome('taco cat') -> true + ``` + +[⬆ back to top](#table-of-contents) + +### percentile + +Uses the percentile formula to calculate how many numbers in the given array are less or equal to the given value. + +Use `Array.reduce()` to calculate how many numbers are below the value and how many are the same value and apply the percentile formula. + +```js +const percentile = (arr, val) => 100 * arr.reduce((acc,v) => acc + (v < val ? 1 : 0) + (v === val ? 0.5 : 0), 0) / arr.length; // percentile([1,2,3,4,5,6,7,8,9,10], 6) -> 55 ``` [⬆ back to top](#table-of-contents) -### Powerset +### powerset + +Returns the powerset of a given array of numbers. Use `Array.reduce()` combined with `Array.map()` to iterate over elements and combine into an array containing all combinations. @@ -1001,7 +1176,9 @@ const powerset = arr => [⬆ back to top](#table-of-contents) -### Random integer in range +### randomIntegerInRange + +Returns a random integer in the specified range. Use `Math.random()` to generate a random number and map it to the desired range, using `Math.floor()` to make it an integer. @@ -1012,18 +1189,22 @@ const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min [⬆ back to top](#table-of-contents) -### Random number in range +### randomNumberInRange + +Returns a random number in the specified range. Use `Math.random()` to generate a random value, map it to the desired range using multiplication. ```js -const randomInRange = (min, max) => Math.random() * (max - min) + min; +const randomNumberInRange = (min, max) => Math.random() * (max - min) + min; // randomInRange(2,10) -> 6.0211363285087005 ``` [⬆ back to top](#table-of-contents) -### Round number to n digits +### round + +Rounds a number to a specified amount of digits. Use `Math.round()` and template literals to round the number to the specified number of digits. Omit the second argument, `decimals` to round to an integer. @@ -1035,7 +1216,9 @@ const round = (n, decimals=0) => Number(`${Math.round(`${n}e${decimals}`)}e-${de [⬆ back to top](#table-of-contents) -### Standard deviation +### standardDeviation + +Returns the standard deviation of an array of numbers. Use `Array.reduce()` to calculate the mean, variance and the sum of the variance of the values, the variance of the values, then determine the standard deviation. @@ -1056,7 +1239,9 @@ const standardDeviation = (arr, usePopulation = false) => { [⬆ back to top](#table-of-contents) ## Media -### Speech synthesis (experimental) +### speechSynthesis + +Performs speech synthesis (experimental). Use `SpeechSynthesisUtterance.voice` and `window.speechSynthesis.getVoices()` to convert a message to speech. Use `window.speechSynthesis.speak()` to play the message. @@ -1064,7 +1249,7 @@ Use `window.speechSynthesis.speak()` to play the message. Learn more about the [SpeechSynthesisUtterance interface of the Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance). ```js -const speak = message => { +const speechSynthesis = message => { const msg = new SpeechSynthesisUtterance(message); msg.voice = window.speechSynthesis.getVoices()[0]; window.speechSynthesis.speak(msg); @@ -1075,7 +1260,23 @@ const speak = message => { [⬆ back to top](#table-of-contents) ## Node -### Read file as array of lines +### JSONToFile + +Writes a JSON object to a file. + +Use `fs.writeFile()`, template literals and `JSON.stringify()` to write a `json` object to a `.json` file. + +```js +const fs = require('fs'); +const JSONToFile = (obj, filename) => fs.writeFile(`${filename}.json`, JSON.stringify(obj, null, 2)) +// jsonToFile({test: "is passed"}, 'testJsonFile') -> writes the object to 'testJsonFile.json' +``` + +[⬆ back to top](#table-of-contents) + +### readFileLines + +Returns an array of lines from the specified file. Use `readFileSync` function in `fs` node package to create a `Buffer` from a file. convert buffer to string using `toString(encoding)` function. @@ -1083,7 +1284,7 @@ creating an array from contents of file by `split`ing file content line by line( ```js const fs = require('fs'); -const readFileToArray = filename => fs.readFileSync(filename).toString('UTF8').split('\n'); +const readFileLines = filename => fs.readFileSync(filename).toString('UTF8').split('\n'); /* contents of test.txt : line1 @@ -1095,22 +1296,12 @@ const readFileToArray = filename => fs.readFileSync(filename).toString('UTF8').s */ ``` -[⬆ back to top](#table-of-contents) - -### Write JSON to file - -Use `fs.writeFile()`, template literals and `JSON.stringify()` to write a `json` object to a `.json` file. - -```js -const fs = require('fs'); -const jsonToFile = (obj, filename) => fs.writeFile(`${filename}.json`, JSON.stringify(obj, null, 2)) -// jsonToFile({test: "is passed"}, 'testJsonFile') -> writes the object to 'testJsonFile.json' -``` - [⬆ back to top](#table-of-contents) ## Object -### Clean JSON object +### cleanObj + +Removes any properties except the ones specified from a JSON object. Use `Object.keys()` method to loop over given json object and deleting keys that are not `include`d in given array. also if you give it a special key(`childIndicator`) it will search deeply inside it to apply function to inner objects too. @@ -1134,7 +1325,9 @@ const cleanObj = (obj, keysToKeep = [], childIndicator) => { [⬆ back to top](#table-of-contents) -### Object from key-value pairs +### objectFromPairs + +Creates an object from the given key-value pairs. Use `Array.reduce()` to create and combine key-value pairs. @@ -1145,7 +1338,9 @@ const objectFromPairs = arr => arr.reduce((a, v) => (a[v[0]] = v[1], a), {}); [⬆ back to top](#table-of-contents) -### Object to key-value pairs +### objectToPairs + +Creates an array of key-value pair arrays from an object. Use `Object.keys()` and `Array.map()` to iterate over the object's keys and produce an array with key-value pairs. @@ -1156,7 +1351,9 @@ const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]); [⬆ back to top](#table-of-contents) -### Shallow clone object +### shallowClone + +Creates a shallow clone of an object. Use `Object.assign()` and an empty object (`{}`) to create a shallow clone of the original. @@ -1172,7 +1369,9 @@ a === b -> false [⬆ back to top](#table-of-contents) ## String -### Anagrams of string (with duplicates) +### anagrams + +Generates all anagrams of a string (contains duplicates). Use recursion. For each letter in the given string, create all the partial anagrams for the rest of its letters. @@ -1190,18 +1389,9 @@ const anagrams = str => { [⬆ back to top](#table-of-contents) -### Capitalize first letter of every word +### Capitalize -Use `replace()` to match the first character of each word and `toUpperCase()` to capitalize it. - -```js -const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase()); -// capitalizeEveryWord('hello world!') -> 'Hello World!' -``` - -[⬆ back to top](#table-of-contents) - -### Capitalize first letter +Capitalizes the first letter of a string. Use destructuring and `toUpperCase()` to capitalize first letter, `...rest` to get array of characters after first letter and then `Array.join('')` to make it a string again. Omit the `lowerRest` parameter to keep the rest of the string intact, or set it to `true` to convert to lower case. @@ -1215,28 +1405,41 @@ const capitalize = ([first,...rest], lowerRest = false) => [⬆ back to top](#table-of-contents) -### Check for palindrome +### capitalizeEveryWord -Convert string `toLowerCase()` and use `replace()` to remove non-alphanumeric characters from it. -Then, `split('')` into individual characters, `reverse()`, `join('')` and compare to the original, unreversed string, after converting it `tolowerCase()`. +Capitalizes the first letter of every word in a string. + +Use `replace()` to match the first character of each word and `toUpperCase()` to capitalize it. ```js -const palindrome = str => { - const s = str.toLowerCase().replace(/[\W_]/g,''); - return s === s.split('').reverse().join(''); -} -// palindrome('taco cat') -> true - ``` +const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase()); +// capitalizeEveryWord('hello world!') -> 'Hello World!' +``` [⬆ back to top](#table-of-contents) -### Convert string from camelcase +### escapeRegExp -Use `replace()` to remove underscores, hyphens and spaces and convert words to camelcase. -Omit the scond argument to use a default separator of '_'. +Escapes a string to use in a regular expression. + +Use `replace()` to escape special characters. ```js -const fromCamelCase = (str, separator = '_') => +const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); +// escapeRegExp('(test)') -> \\(test\\) +``` + +[⬆ back to top](#table-of-contents) + +### fromCamelCase + +Converts a string from camelcase. + +Use `replace()` to remove underscores, hyphens and spaces and convert words to camelcase. +Omit the scond argument to use a default separator of `_`. + +```js +const fromCamelCase = (str, separator = '_') => str.replace(/([a-z\d])([A-Z])/g, '$1' + separator + '$2') .replace(/([A-Z]+)([A-Z][a-z\d]+)/g, '$1' + separator + '$2').toLowerCase(); // fromCamelCase('someDatabaseFieldName', ' ') -> 'some database field name' @@ -1246,22 +1449,9 @@ const fromCamelCase = (str, separator = '_') => [⬆ back to top](#table-of-contents) -### Convert string to camelcase +### reverseString -Use `replace()` to remove underscores, hyphens and spaces and convert words to camelcase. - -```js -const toCamelCase = str => - str.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2, offset) => p2 ? p2.toUpperCase() : p1.toLowerCase()); -// toCamelCase("some_database_field_name") -> 'someDatabaseFieldName' -// toCamelCase("Some label that needs to be camelized") -> 'someLabelThatNeedsToBeCamelized' -// toCamelCase("some-javascript-property") -> 'someJavascriptProperty' -// toCamelCase("some-mixed_string with spaces_underscores-and-hyphens") -> 'someMixedStringWithSpacesUnderscoresAndHyphens' -``` - -[⬆ back to top](#table-of-contents) - -### Reverse a string +Reverses a string. Use array destructuring and `Array.reverse()` to reverse the order of the characters in the string. Combine characters to get a string using `join('')`. @@ -1273,7 +1463,9 @@ const reverseString = str => [...str].reverse().join(''); [⬆ back to top](#table-of-contents) -### Sort characters in string (alphabetical) +### sortCharactersInString + +Alphabetically sorts the characters in a string. Split the string using `split('')`, `Array.sort()` utilizing `localeCompare()`, recombine using `join('')`. @@ -1285,13 +1477,32 @@ const sortCharactersInString = str => [⬆ back to top](#table-of-contents) -### Truncate a String +### toCamelCase + +Converts a string to camelcase. + +Use `replace()` to remove underscores, hyphens and spaces and convert words to camelcase. + +```js +const toCamelCase = str => + str.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2, offset) => p2 ? p2.toUpperCase() : p1.toLowerCase()); +// toCamelCase("some_database_field_name") -> 'someDatabaseFieldName' +// toCamelCase("Some label that needs to be camelized") -> 'someLabelThatNeedsToBeCamelized' +// toCamelCase("some-javascript-property") -> 'someJavascriptProperty' +// toCamelCase("some-mixed_string with spaces_underscores-and-hyphens") -> 'someMixedStringWithSpacesUnderscoresAndHyphens' +``` + +[⬆ back to top](#table-of-contents) + +### truncateString + +Truncates a string up to a specified length. Determine if the string's `length` is greater than `num`. Return the string truncated to the desired length, with `...` appended to the end or the original string. ```js -const truncate = (str, num) => +const truncateString = (str, num) => str.length > num ? str.slice(0, num > 3 ? num - 3 : num) + '...' : str; // truncate('boomerang', 7) -> 'boom...' ``` @@ -1299,31 +1510,24 @@ const truncate = (str, num) => [⬆ back to top](#table-of-contents) ## Utility -### 3-digit hexcode to 6-digit hexcode +### extendHex -Use `Array.map()`, `split()` and `Array.join()` to join the mapped array for converting a three-digit RGB notated hexadecimal color-code to the six-digit form. +Extends a 3-digit color code to a 6-digit color code. + +Use `Array.map()`, `split()` and `Array.join()` to join the mapped array for converting a 3-digit RGB notated hexadecimal color-code to the 6-digit form. `Array.slice()` is used to remove `#` from string start since it's added once. ```js -const convertHex = shortHex => - '#' + shortHex.slice(shortHex.startsWith('#') ? 1 : 0).split().map(x => x+x).join() +const extendHex = shortHex => + '#' + shortHex.slice(shortHex.startsWith('#') ? 1 : 0).split('').map(x => x+x).join('') // convertHex('#03f') -> '#0033ff' // convertHex('05a') -> '#0055aa' ``` [⬆ back to top](#table-of-contents) -### Escape regular expression +### getType -Use `replace()` to escape special characters. - -```js -const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); -// escapeRegExp('(test)') -> \\(test\\) -``` - -[⬆ back to top](#table-of-contents) - -### Get native type of value +Returns the native type of a value. Returns lower-cased constructor name of value, "undefined" or "null" if value is undefined or null @@ -1335,21 +1539,29 @@ const getType = v => [⬆ back to top](#table-of-contents) -### Hexcode to RGB +### hexToRGB -Use bitwise right-shift operator and mask bits with `&` (and) operator to convert a hexadecimal color code (prefixed with `#`) to a string with the RGB values. +Converts a colorcode to a `rgb()` string. + +Use bitwise right-shift operator and mask bits with `&` (and) operator to convert a hexadecimal color code (prefixed with `#`) to a string with the RGB values. In case it's a 3-digit-colorcode, do the same with the 6-digit-colorcode extended by the extendHex() function (ref. `extendHex` snippet) ```js const hexToRgb = hex => { - const h = parseInt(hex.slice(1), 16); - return `rgb(${h >> 16}, ${(h & 0x00ff00) >> 8}, ${h & 0x0000ff})`; -} + const extendHex = shortHex => + '#' + shortHex.slice(shortHex.startsWith('#') ? 1 : 0).split('').map(x => x+x).join(''); + return hex.slice(1).length==3 ? + `rgb(${parseInt(extendHex(hex).slice(1), 16) >> 16}, ${(parseInt(extendHex(hex).slice(1), 16) & 0x00ff00) >> 8}, ${parseInt(extendHex(hex).slice(1), 16) & 0x0000ff})`: + `rgb(${parseInt(hex.slice(1), 16) >> 16}, ${(parseInt(hex.slice(1), 16) & 0x00ff00) >> 8}, ${parseInt(hex.slice(1), 16) & 0x0000ff})`; +} // hexToRgb('#27ae60') -> 'rgb(39, 174, 96)' +// hexToRgb('#acd') -> 'rgb(170, 204, 221)' ``` [⬆ back to top](#table-of-contents) -### Is array +### isArray + +Checks if the given argument is an array. Use `Array.isArray()` to check if a value is classified as an array. @@ -1361,7 +1573,9 @@ const isArray = val => !!val && Array.isArray(val); [⬆ back to top](#table-of-contents) -### Is boolean +### isBoolean + +Checks if the given argument is a native boolean element. Use `typeof` to check if a value is classified as a boolean primitive. @@ -1373,7 +1587,9 @@ const isBoolean = val => typeof val === 'boolean'; [⬆ back to top](#table-of-contents) -### Is function +### isFunction + +Checks if the given argument is a function. Use `typeof` to check if a value is classified as a function primitive. @@ -1385,7 +1601,9 @@ const isFunction = val => val && typeof val === 'function'; [⬆ back to top](#table-of-contents) -### Is number +### isNumber + +Checks if the given argument is a number. Use `typeof` to check if a value is classified as a number primitive. @@ -1397,7 +1615,9 @@ const isNumber = val => typeof val === 'number'; [⬆ back to top](#table-of-contents) -### Is string +### isString + +Checks if the given argument is a string. Use `typeof` to check if a value is classified as a string primitive. @@ -1409,7 +1629,9 @@ const isString = val => typeof val === 'string'; [⬆ back to top](#table-of-contents) -### Is symbol +### isSymbol + +Checks if the given argument is a symbol. Use `typeof` to check if a value is classified as a symbol primitive. @@ -1421,16 +1643,29 @@ const isSymbol = val => typeof val === 'symbol'; [⬆ back to top](#table-of-contents) -### Measure time taken by function +### RGBToHex + +Converts the values of RGB components to a colorcode. + +Convert given RGB parameters to hexadecimal string using bitwise left-shift operator (`<<`) and `toString(16)`, then `padStart(6,'0')` to get a 6-digit hexadecimal value. + +```js +const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0'); +// rgbToHex(255, 165, 1) -> 'ffa501' +``` + +[⬆ back to top](#table-of-contents) + +### timeTaken + +Measures the time taken by a function to execute. Use `console.time()` and `console.timeEnd()` to measure the difference between the start and end times to determine how long the callback took to execute. ```js const timeTaken = callback => { - console.time('timeTaken'); - const r = callback(); - console.timeEnd('timeTaken'); - return r; + console.time('timeTaken'); const r = callback(); + console.timeEnd('timeTaken'); return r; }; // timeTaken(() => Math.pow(2, 10)) -> 1024 // (logged): timeTaken: 0.02099609375ms @@ -1438,19 +1673,9 @@ const timeTaken = callback => { [⬆ back to top](#table-of-contents) -### Number to array of digits +### toOrdinalSuffix -Convert the number to a string, using spread operators in ES6(`[...string]`) build an array. -Use `Array.map()` and `parseInt()` to transform each value to an integer. - -```js -const digitize = n => [...''+n].map(i => parseInt(i)); -// digitize(2334) -> [2, 3, 3, 4] -``` - -[⬆ back to top](#table-of-contents) - -### Ordinal suffix of number +Adds an ordinal suffix to a number. Use the modulo operator (`%`) to find values of single and tens digits. Find which ordinal pattern digits match. @@ -1468,38 +1693,14 @@ const toOrdinalSuffix = num => { [⬆ back to top](#table-of-contents) -### RGB to hexadecimal +### UUIDGenerator -Convert given RGB parameters to hexadecimal string using bitwise left-shift operator (`<<`) and `toString(16)`, then `padStart(6,'0')` to get a 6-digit hexadecimal value. - -```js -const rgbToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0'); -// rgbToHex(255, 165, 1) -> 'ffa501' -``` - -[⬆ back to top](#table-of-contents) - -### URL parameters - -Use `match()` with an appropriate regular expression to get all key-value pairs, `Array.reduce()` to map and combine them into a single object. -Pass `location.search` as the argument to apply to the current `url`. - -```js -const getUrlParameters = url => - url.match(/([^?=&]+)(=([^&]*))/g).reduce( - (a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {} - ); -// getUrlParameters('http://url.com/page?name=Adam&surname=Smith') -> {name: 'Adam', surname: 'Smith'} -``` - -[⬆ back to top](#table-of-contents) - -### UUID generator +Generates a UUID. Use `crypto` API to generate a UUID, compliant with [RFC4122](https://www.ietf.org/rfc/rfc4122.txt) version 4. ```js -const uuid = () => +const UUIDGenerator = () => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) ); @@ -1508,7 +1709,9 @@ const uuid = () => [⬆ back to top](#table-of-contents) -### Validate email +### validateEmail + +Returns `true` if the given string is a valid email, `false` otherwise. Use a regular expression to check if the email is valid. Returns `true` if email is valid, `false` if not. @@ -1521,7 +1724,9 @@ const validateEmail = str => [⬆ back to top](#table-of-contents) -### Validate number +### validateNumber + +Returns `true` if the given value is a number, `false` otherwise. Use `!isNaN` in combination with `parseFloat()` to check if the argument is a number. Use `isFinite()` to check if the number is finite. diff --git a/docs/favicon.png b/docs/favicon.png new file mode 100644 index 000000000..3a50a365c Binary files /dev/null and b/docs/favicon.png differ diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 000000000..e11294cd0 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,1048 @@ + + + + + + 30 seconds of code + + + + + + + + + + + + + +
+

 30 seconds of code

+ +
+
+ +

Array

+

arrayMax

+

Returns the maximum value in an array.

+

Use Math.max() combined with the spread operator (...) to get the maximum value in the array.

+
const arrayMax = arr => Math.max(...arr);
+// arrayMax([10, 1, 5]) -> 10
+
+

arrayMin

+

Returns the minimum value in an array.

+

Use Math.min() combined with the spread operator (...) to get the minimum value in the array.

+
const arrayMin = arr => Math.min(...arr);
+// arrayMin([10, 1, 5]) -> 1
+
+

chunk

+

Chunks an array into smaller arrays of a specified size.

+

Use Array.from() to create a new array, that fits the number of chunks that will be produced. +Use Array.slice() to map each element of the new array to a chunk the length of size. +If the original array can't be split evenly, the final chunk will contain the remaining elements.

+
const chunk = (arr, size) =>
+  Array.from({length: Math.ceil(arr.length / size)}, (v, i) => arr.slice(i * size, i * size + size));
+// chunk([1,2,3,4,5], 2) -> [[1,2],[3,4],[5]]
+
+

compact

+

Removes falsey values from an array.

+

Use Array.filter() to filter out falsey values (false, null, 0, "", undefined, and NaN).

+
const compact = (arr) => arr.filter(Boolean);
+// compact([0, 1, false, 2, '', 3, 'a', 'e'*23, NaN, 's', 34]) -> [ 1, 2, 3, 'a', 's', 34 ]
+
+

countOccurrences

+

Counts the occurences of a value in an array.

+

Use Array.reduce() to increment a counter each time you encounter the specific value inside the array.

+
const countOccurrences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);
+// countOccurrences([1,1,2,1,2,3], 1) -> 3
+
+

deepFlatten

+

Deep flattens an array.

+

Use recursion. +Use Array.concat() with an empty array ([]) and the spread operator (...) to flatten an array. +Recursively flatten each element that is an array.

+
const deepFlatten = arr => [].concat(...arr.map(v => Array.isArray(v) ? deepFlatten(v) : v));
+// deepFlatten([1,[2],[[3],4],5]) -> [1,2,3,4,5]
+
+

difference

+

Returns the difference between two arrays.

+

Create a Set from b, then use Array.filter() on a to only keep values not contained in b.

+
const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has(x)); };
+// difference([1,2,3], [1,2,4]) -> [3]
+
+

distinctValuesOfArray

+

Returns all the distinct values of an array.

+

Use ES6 Set and the ...rest operator to discard all duplicated values.

+
const distinctValuesOfArray = arr => [...new Set(arr)];
+// unique([1,2,2,3,4,4,5]) -> [1,2,3,4,5]
+
+

dropElements

+

Removes elements in an array until the passed function returns true. Returns the remaining elements in the array.

+

Loop through the array, using Array.shift() to drop the first element of the array until the returned value from the function is true. +Returns the remaining elements.

+
const dropElements = (arr, func) => {
+  while (arr.length > 0 && !func(arr[0])) arr.shift();
+  return arr;
+};
+// dropElements([1, 2, 3, 4], n => n >= 3) -> [3,4]
+
+

everyNth

+

Returns every nth element in an array.

+

Use Array.filter() to create a new array that contains every nth element of a given array.

+
const everyNth = (arr, nth) => arr.filter((e, i) => i % nth === 0);
+// everynth([1,2,3,4,5,6], 2) -> [ 1, 3, 5 ]
+
+

filterNonUnique

+

Filters out the non-unique values in an array.

+

Use Array.filter() for an array containing only the unique values.

+
const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));
+// filterNonUnique([1,2,2,3,4,4,5]) -> [1,3,5]
+
+

flatten

+

Flattens an array.

+

Use Array.reduce() to get all elements inside the array and concat() to flatten them.

+
const flatten = arr => arr.reduce((a, v) => a.concat(v), []);
+// flatten([1,[2],3,4]) -> [1,2,3,4]
+
+

flattenDepth

+

Flattens an array up to the specified depth.

+

Use recursion, decrementing depth by 1 for each level of depth. +Use Array.reduce() and Array.concat() to merge elements or arrays. +Base case, for depth equal to 1 stops recursion. +Omit the second element, depth to flatten only to a depth of 1 (single flatten).

+
const flattenDepth = (arr, depth = 1) =>
+  depth != 1 ? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flattenDepth(v, depth - 1) : v), [])
+  : arr.reduce((a, v) => a.concat(v), []);
+// flattenDepth([1,[2],[[[3],4],5]], 2) -> [1,2,[3],4,5]
+
+

groupBy

+

Groups the element of an array based on the given function.

+

Use Array.map() to map the values of an array to a function or property name. +Use Array.reduce() to create an object, where the keys are produced from the mapped results.

+
const groupBy = (arr, func) =>
+  arr.map(typeof func === 'function' ? func : val => val[func])
+    .reduce((acc, val, i) => { acc[val] = (acc[val] || []).concat(arr[i]); return acc; }, {});
+// groupBy([6.1, 4.2, 6.3], Math.floor) -> {4: [4.2], 6: [6.1, 6.3]}
+// groupBy(['one', 'two', 'three'], 'length') -> {3: ['one', 'two'], 5: ['three']}
+
+

+

Returns the head of a list.

+

Use arr[0] to return the first element of the passed array.

+
const head = arr => arr[0];
+// head([1,2,3]) -> 1
+
+

initial

+

Returns all the elements of an array except the last one.

+

Use arr.slice(0,-1)to return all but the last element of the array.

+
const initial = arr => arr.slice(0, -1);
+// initial([1,2,3]) -> [1,2]
+
+

initializeArrayWithRange

+

Initialized an array containing the numbers in the specified range.

+

Use Array(end-start) to create an array of the desired length, Array.map() to fill with the desired values in a range. +You can omit start to use a default value of 0.

+
const initializeArrayWithRange = (end, start = 0) =>
+  Array.from({ length: end - start }).map((v, i) => i + start);
+// initializeArrayRange(5) -> [0,1,2,3,4]
+
+

initializeArrayWithValues

+

Initializes and fills an array with the specified values.

+

Use Array(n) to create an array of the desired length, fill(v) to fill it with the desired values. +You can omit value to use a default value of 0.

+
const initializeArrayWithValues = (n, value = 0) => Array(n).fill(value);
+// initializeArray(5, 2) -> [2,2,2,2,2]
+
+

intersection

+

Returns a list of elements that exist in both arrays.

+

Create a Set from b, then use Array.filter() on a to only keep values contained in b.

+
const intersection = (a, b) => { const s = new Set(b); return a.filter(x => s.has(x)); };
+// intersection([1,2,3], [4,3,2]) -> [2,3]
+
+

last

+

Returns the last element in an array.

+

Use arr.length - 1 to compute index of the last element of the given array and returning it.

+
const last = arr => arr[arr.length - 1];
+// last([1,2,3]) -> 3
+
+

nthElement

+

Returns the nth element of an array.

+

Use Array.slice() to get an array containing the nth element at the first place. +If the index is out of bounds, return []. +Omit the second argument, n, to get the first element of the array.

+
const nthElement = (arr, n=0) => (n>0? arr.slice(n,n+1) : arr.slice(n))[0];
+// nth(['a','b','c'],1) -> 'b'
+// nth(['a','b','b']-2) -> 'a'
+
+

pick

+

Picks the key-value pairs corresponding to the given keys from an object.

+

Use Array.reduce() to convert the filtered/picked keys back to a object with the corresponding key-value pair if the key exist in the obj.

+
const pick = (obj, arr) =>
+  arr.reduce((acc, curr) => (curr in obj && (acc[curr] = obj[curr]), acc), {});
+// pick({ 'a': 1, 'b': '2', 'c': 3 }, ['a', 'c']) -> { 'a': 1, 'c': 3 }
+
+

pull

+

Mutates the original array to filter out the values specified.

+

Use Array.filter() and Array.includes() to pull out the values that are not needed. +Use Array.length = 0 to mutate the passed in array by resetting it's length to zero and Array.push() to re-populate it with only the pulled values.

+
const pull = (arr, ...args) => {
+  let pulled = arr.filter((v, i) => !args.includes(v));
+  arr.length = 0; pulled.forEach(v => arr.push(v));
+};
+// let myArray = ['a', 'b', 'c', 'a', 'b', 'c'];
+// pull(myArray, 'a', 'c');
+// console.log(myArray) -> [ 'b', 'b' ]
+
+

remove

+

Removes elements from an array for which the given function returns false.

+

Use Array.filter() to find array elements that return truthy values and Array.reduce() to remove elements using Array.splice(). +The func is invoked with three arguments (value, index, array).

+
const remove = (arr, func) =>
+  Array.isArray(arr) ? arr.filter(func).reduce((acc, val) => {
+    arr.splice(arr.indexOf(val), 1); return acc.concat(val);
+    }, [])
+  : [];
+// remove([1, 2, 3, 4], n => n % 2 == 0) -> [2, 4]
+
+

sample

+

Returns a random element from an array.

+

Use Math.random() to generate a random number, multiply it with length and round it of to the nearest whole number using Math.floor(). +This method also works with strings.

+
const sample = arr => arr[Math.floor(Math.random() * arr.length)];
+// sample([3, 7, 9, 11]) -> 9
+
+

shuffle

+

Randomizes the order of the values of an array.

+

Use Array.sort() to reorder elements, using Math.random() in the comparator.

+
const shuffle = arr => arr.sort(() => Math.random() - 0.5);
+// shuffle([1,2,3]) -> [2,3,1]
+
+

similarity

+

Returns an array of elements that appear in both arrays.

+

Use filter() to remove values that are not part of values, determined using includes().

+
const similarity = (arr, values) => arr.filter(v => values.includes(v));
+// similarity([1,2,3], [1,2,4]) -> [1,2]
+
+

symmetricDifference

+

Returns the symmetric difference between two arrays.

+

Create a Set from each array, then use Array.filter() on each of them to only keep values not contained in the other.

+
const symmetricDifference = (a, b) => {
+  const sA = new Set(a), sB = new Set(b);
+  return [...a.filter(x => !sB.has(x)), ...b.filter(x => !sA.has(x))];
+}
+// symmetricDifference([1,2,3], [1,2,4]) -> [3,4]
+
+

tail

+

Returns all elements in an array except for the first one.

+

Return arr.slice(1) if the array's length is more than 1, otherwise return the whole array.

+
const tail = arr => arr.length > 1 ? arr.slice(1) : arr;
+// tail([1,2,3]) -> [2,3]
+// tail([1]) -> [1]
+
+

take

+

Returns an array with n elements removed from the beggining.

+

Use Array.slice() to create a slice of the array with n elements taken from the beginning.

+
const take = (arr, n = 1) => arr.slice(0, n);
+// take([1, 2, 3], 5) -> [1, 2, 3]
+// take([1, 2, 3], 0) -> []
+
+

takeRight

+

Returns an array with n elements removed from the end.

+

Use Array.slice() to create a slice of the array with n elements taken from the end.

+
const takeRight = (arr, n = 1) => arr.slice(arr.length - n, arr.length);
+// takeRight([1, 2, 3], 2) -> [ 2, 3 ]
+// takeRight([1, 2, 3]) -> [3]
+
+

union

+

Returns every element that exists in any of the two arrays once.

+

Create a Set with all values of a and b and convert to an array.

+
const union = (a, b) => Array.from(new Set([...a, ...b]));
+// union([1,2,3], [4,3,2]) -> [1,2,3,4]
+
+

without

+

Filters out the elements of an array, that have one of the specified values.

+

Use Array.filter() to create an array excluding(using !Array.includes()) all given values.

+
const without = (arr, ...args) => arr.filter(v => !args.includes(v));
+// without([2, 1, 2, 3], 1, 2) -> [3]
+
+

zip

+

Creates an array of elements, grouped based on the position in the original arrays.

+

Use Math.max.apply() to get the longest array in the arguments. +Creates an array with that length as return value and use Array.from() with a map-function to create an array of grouped elements. +If lengths of the argument-arrays vary, undefined is used where no value could be found.

+
const zip = (...arrays) => {
+  const maxLength = Math.max(...arrays.map(x => x.length));
+  return Array.from({length: maxLength}).map((_, i) => {
+   return Array.from({length: arrays.length}, (_, k) => arrays[k][i]);
+  })
+}
+//zip(['a', 'b'], [1, 2], [true, false]); -> [['a', 1, true], ['b', 2, false]]
+//zip(['a'], [1, 2], [true, false]); -> [['a', 1, true], [undefined, 2, false]]
+
+

Browser

+

bottomVisible

+

Returns true if the bottom of the page is visible, false otherwise.

+

Use scrollY, scrollHeight and clientHeight to determine if the bottom of the page is visible.

+
const bottomVisible = () =>
+  document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight || document.documentElement.clientHeight;
+// bottomVisible() -> true
+
+

currentURL

+

Returns the current URL.

+

Use window.location.href to get current URL.

+
const currentURL = () => window.location.href;
+// currentUrl() -> 'https://google.com'
+
+

elementIsVisibleInViewport

+

Returns true if the element specified is visible in the viewport, false otherwise.

+

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.

+
const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
+  const { top, left, bottom, right } = el.getBoundingClientRect();
+  return partiallyVisible
+    ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
+      ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
+    : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
+};
+// e.g. 100x100 viewport and a 10x10px element at position {top: -1, left: 0, bottom: 9, right: 10}
+// elementIsVisibleInViewport(el) -> false (not fully visible)
+// elementIsVisibleInViewport(el, true) -> true (partially visible)
+
+

getScrollPosition

+

Returns the scroll position of the current page.

+

Use pageXOffset and pageYOffset if they are defined, otherwise scrollLeft and scrollTop. +You can omit el to use a default value of window.

+
const getScrollPosition = (el = window) =>
+  ({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft,
+    y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop});
+// getScrollPos() -> {x: 0, y: 200}
+
+

getURLParameters

+

Returns an object containing the parameters of the current URL.

+

Use match() with an appropriate regular expression to get all key-value pairs, Array.reduce() to map and combine them into a single object. +Pass location.search as the argument to apply to the current url.

+
const getURLParameters = url =>
+  url.match(/([^?=&]+)(=([^&]*))/g).reduce(
+    (a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}
+  );
+// getUrlParameters('http://url.com/page?name=Adam&surname=Smith') -> {name: 'Adam', surname: 'Smith'}
+
+

redirect

+

Redirects to a specified URL.

+

Use window.location.href or window.location.replace() to redirect to url. +Pass a second argument to simulate a link click (true - default) or an HTTP redirect (false).

+
const redirect = (url, asLink = true) =>
+  asLink ? window.location.href = url : window.location.replace(url);
+// redirect('https://google.com')
+
+

scrollToTop

+

Smooth-scrolls to the top of the page.

+

Get distance from top using document.documentElement.scrollTop or document.body.scrollTop. +Scroll by a fraction of the distance from top. Use window.requestAnimationFrame() to animate the scrolling.

+
const scrollToTop = () => {
+  const c = document.documentElement.scrollTop || document.body.scrollTop;
+  if (c > 0) {
+    window.requestAnimationFrame(scrollToTop);
+    window.scrollTo(0, c - c / 8);
+  }
+};
+// scrollToTop()
+
+

Date

+

getDaysDiffBetweenDates

+

Returns the difference (in days) between two dates.

+

Calculate the difference (in days) between to Date objects.

+
const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24);
+// getDaysDiffBetweenDates(new Date("2017-12-13"), new Date("2017-12-22")) -> 9
+
+

JSONToDate

+

Converts a JSON object to a date.

+

Use Date(), to convert dates in JSON format to readable format (dd/mm/yyyy).

+
const JSONToDate = arr => {
+  const dt = new Date(parseInt(arr.toString().substr(6)));
+  return `${ dt.getDate() }/${ dt.getMonth() + 1 }/${ dt.getFullYear() }`
+};
+// jsonToDate(/Date(1489525200000)/) -> "14/3/2017"
+
+

toEnglishDate

+

Converts a date from American format to English format.

+

Use Date.toISOString(), split('T') and replace() to convert a date from American format to English format. +Throws an error if the passed time cannot be converted to a date.

+
const toEnglishDate  = (time) =>
+  {try{return new Date(time).toISOString().split('T')[0].replace(/-/g, '/')}catch(e){return}};
+// toEnglishDate('09/21/2010') -> '21/09/2010'
+
+

Function

+

chainAsync

+

Chains asynchronous functions.

+

Loop through an array of functions containing asynchronous events, calling next when each asynchronous event has completed.

+
const chainAsync = fns => { let curr = 0; const next = () => fns[curr++](next); next(); };
+/*
+chainAsync([
+  next => { console.log('0 seconds'); setTimeout(next, 1000); },
+  next => { console.log('1 second');  setTimeout(next, 1000); },
+  next => { console.log('2 seconds'); }
+])
+*/
+
+

compose

+

Performs right-to-left function composition.

+

Use Array.reduce() to perform right-to-left function composition. +The last (rightmost) function can accept one or more arguments; the remaining functions must be unary.

+
const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args)));
+/*
+const add5 = x => x + 5
+const multiply = (x, y) => x * y
+const multiplyAndAdd5 = compose(add5, multiply)
+multiplyAndAdd5(5, 2) -> 15
+*/
+
+

curry

+

Curries a function.

+

Use recursion. +If the number of provided arguments (args) is sufficient, call the passed function f. +Otherwise return a curried function f 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.

+
const curry = (fn, arity = fn.length, ...args) =>
+  arity <= args.length
+    ? fn(...args)
+    : curry.bind(null, fn, arity, ...args);
+// curry(Math.pow)(2)(10) -> 1024
+// curry(Math.min, 3)(10)(50)(2) -> 2
+
+

functionName

+

Logs the name of a function.

+

Use console.debug() and the name property of the passed method to log the method's name to the debug channel of the console.

+
const functionName = fn => (console.debug(fn.name), fn);
+// functionName(Math.max) -> max (logged in debug channel of console)
+
+

pipe

+

Performs left-to-right function composition.

+

Use Array.reduce() with the spread operator (...) to perform left-to-right function composition. +The first (leftmost) function can accept one or more arguments; the remaining functions must be unary.

+
const pipeFunctions = (...fns) => fns.reduce((f, g) => (...args) => g(f(...args)));
+/*
+const add5 = x => x + 5
+const multiply = (x, y) => x * y
+const multiplyAndAdd5 = pipe(multiply, add5)
+multiplyAndAdd5(5, 2) -> 15
+*/
+
+

promisify

+

Converts an asynchronous function to return a promise.

+

Use currying to return a function returning a Promise that calls the original function. +Use the ...rest operator to pass in all the parameters.

+

In Node 8+, you can use util.promisify

+
const promisify = func =>
+  (...args) =>
+    new Promise((resolve, reject) =>
+      func(...args, (err, result) =>
+        err ? reject(err) : resolve(result))
+    );
+// const delay = promisify((d, cb) => setTimeout(cb, d))
+// delay(2000).then(() => console.log('Hi!')) -> Promise resolves after 2s
+
+

runPromisesInSeries

+

Runs an array of promises in series.

+

Use Array.reduce() to create a promise chain, where each promise returns the next promise when resolved.

+
const runPromisesInSeries = ps => ps.reduce((p, next) => p.then(next), Promise.resolve());
+// const delay = (d) => new Promise(r => setTimeout(r, d))
+// series([() => delay(1000), () => delay(2000)]) -> executes each promise sequentially, taking a total of 3 seconds to complete
+
+

sleep

+

Delays the execution of an asynchronous function.

+

Delay executing part of an async function, by putting it to sleep, returning a Promise.

+
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+/*
+async function sleepyWork() {
+  console.log('I\'m going to sleep for 1 second.');
+  await sleep(1000);
+  console.log('I woke up after 1 second.');
+}
+*/
+
+

Math

+

arrayAverage

+

Returns the average of an array of numbers.

+

Use Array.reduce() to add each value to an accumulator, initialized with a value of 0, divide by the length of the array.

+
const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length;
+// average([1,2,3]) -> 2
+
+

arraySum

+

Returns the sum of an array of numbers.

+

Use Array.reduce() to add each value to an accumulator, initialized with a value of 0.

+
const arraySum = arr => arr.reduce((acc, val) => acc + val, 0);
+// sum([1,2,3,4]) -> 10
+
+

collatz

+

Applies the Collatz algorithm.

+

If n is even, return n/2. Otherwise return 3n+1.

+
const collatz = n => (n % 2 == 0) ? (n / 2) : (3 * n + 1);
+// collatz(8) --> 4
+// collatz(5) --> 16
+
+

digitize

+

Converts a number to an array of digits.

+

Convert the number to a string, using spread operators in ES6([...string]) build an array. +Use Array.map() and parseInt() to transform each value to an integer.

+
const digitize = n => [...''+n].map(i => parseInt(i));
+// digitize(2334) -> [2, 3, 3, 4]
+
+

distance

+

Returns the distance between two points.

+

Use Math.hypot() to calculate the Euclidean distance between two points.

+
const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);
+// distance(1,1, 2,3) -> 2.23606797749979
+
+

factorial

+

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.

+
const factorial = n =>
+  n < 0 ? (() => { throw new TypeError('Negative numbers are not allowed!') })()
+  : n <= 1 ? 1 : n * factorial(n - 1);
+// factorial(6) -> 720
+
+

fibonacci

+

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.reduce() to add values into the array, using the sum of the last two values, except for the first two.

+
const fibonacci = n =>
+  Array(n).fill(0).reduce((acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i), []);
+// fibonacci(5) -> [0,1,1,2,3]
+
+

gcd

+

Calculates the greatest common divisor between two numbers.

+

Use recursion. +Base case is when y equals 0. In this case, return x. +Otherwise, return the GCD of y and the remainder of the division x/y.

+
const gcd = (x, y) => !y ? x : gcd(y, x % y);
+// gcd (8, 36) -> 4
+
+

hammingDistance

+

Calculates the Hamming distance between two values.

+

Use XOR operator (^) to find the bit difference between the two numbers, convert to binary string using toString(2). +Count and return the number of 1s in the string, using match(/1/g).

+
const hammingDistance = (num1, num2) =>
+  ((num1 ^ num2).toString(2).match(/1/g) || '').length;
+// hammingDistance(2,3) -> 1
+
+

isDivisible

+

Checks if the first numeric argument is divisible by the second one.

+

Use the modulo operator (%) to check if the remainder is equal to 0.

+
const isDivisible = (dividend, divisor) => dividend % divisor === 0;
+// isDivisible(6,3) -> true
+
+

isEven

+

Returns true if the given number is even, false otherwise.

+

Checks whether a number is odd or even using the modulo (%) operator. +Returns true if the number is even, false if the number is odd.

+
const isEven = num => num % 2 === 0;
+// isEven(3) -> false
+
+

lcm

+

Returns the least common multiple of two numbers.

+

Use the greatest common divisor (GCD) formula and Math.abs() to determine the least common multiple. +The GCD formula uses recursion.

+
const lcm = (x,y) => {
+  const gcd = (x, y) => !y ? x : gcd(y, x % y);
+  return Math.abs(x*y)/(gcd(x,y));
+};
+// lcm(12,7) -> 84
+
+

median

+

Returns the median of an array of numbers.

+

Find the middle of the array, use Array.sort() to sort the values. +Return the number at the midpoint if length is odd, otherwise the average of the two middle numbers.

+
const median = arr => {
+  const mid = Math.floor(arr.length / 2), nums = arr.sort((a, b) => a - b);
+  return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
+};
+// median([5,6,50,1,-5]) -> 5
+// median([0,10,-2,7]) -> 3.5
+
+

palindrome

+

Returns true if the given string is a palindrome, false otherwise.

+

Convert string toLowerCase() and use replace() to remove non-alphanumeric characters from it. +Then, split('') into individual characters, reverse(), join('') and compare to the original, unreversed string, after converting it tolowerCase().

+
const palindrome = str => {
+  const s = str.toLowerCase().replace(/[\W_]/g,'');
+  return s === s.split('').reverse().join('');
+}
+// palindrome('taco cat') -> true
+
+

percentile

+

Uses the percentile formula to calculate how many numbers in the given array are less or equal to the given value.

+

Use Array.reduce() to calculate how many numbers are below the value and how many are the same value and apply the percentile formula.

+
const percentile = (arr, val) =>
+  100 * arr.reduce((acc,v) => acc + (v < val ? 1 : 0) + (v === val ? 0.5 : 0), 0) / arr.length;
+// percentile([1,2,3,4,5,6,7,8,9,10], 6) -> 55
+
+

powerset

+

Returns the powerset of a given array of numbers.

+

Use Array.reduce() combined with Array.map() to iterate over elements and combine into an array containing all combinations.

+
const powerset = arr =>
+  arr.reduce((a, v) => a.concat(a.map(r => [v].concat(r))), [[]]);
+// powerset([1,2]) -> [[], [1], [2], [2,1]]
+
+

randomIntegerInRange

+

Returns a random integer in the specified range.

+

Use Math.random() to generate a random number and map it to the desired range, using Math.floor() to make it an integer.

+
const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+// randomIntegerInRange(0, 5) -> 2
+
+

randomNumberInRange

+

Returns a random number in the specified range.

+

Use Math.random() to generate a random value, map it to the desired range using multiplication.

+
const randomNumberInRange = (min, max) => Math.random() * (max - min) + min;
+// randomInRange(2,10) -> 6.0211363285087005
+
+

round

+

Rounds a number to a specified amount of digits.

+

Use Math.round() and template literals to round the number to the specified number of digits. +Omit the second argument, decimals to round to an integer.

+
const round = (n, decimals=0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);
+// round(1.005, 2) -> 1.01
+
+

standardDeviation

+

Returns the standard deviation of an array of numbers.

+

Use Array.reduce() to calculate the mean, variance and the sum of the variance of the values, the variance of the values, then +determine the standard deviation. +You can omit the second argument to get the sample standard deviation or set it to true to get the population standard deviation.

+
const standardDeviation = (arr, usePopulation = false) => {
+  const mean = arr.reduce((acc, val) => acc + val, 0) / arr.length;
+  return Math.sqrt(
+    arr.reduce((acc, val) => acc.concat(Math.pow(val - mean, 2)), [])
+       .reduce((acc, val) => acc + val, 0) / (arr.length - (usePopulation ? 0 : 1))
+  );
+};
+// standardDeviation([10,2,38,23,38,23,21]) -> 13.284434142114991 (sample)
+// standardDeviation([10,2,38,23,38,23,21], true) -> 12.29899614287479 (population)
+
+

Media

+

speechSynthesis

+

Performs speech synthesis (experimental).

+

Use SpeechSynthesisUtterance.voice and window.speechSynthesis.getVoices() to convert a message to speech. +Use window.speechSynthesis.speak() to play the message.

+

Learn more about the SpeechSynthesisUtterance interface of the Web Speech API.

+
const speechSynthesis = message => {
+  const msg = new SpeechSynthesisUtterance(message);
+  msg.voice = window.speechSynthesis.getVoices()[0];
+  window.speechSynthesis.speak(msg);
+};
+// speak('Hello, World') -> plays the message
+
+

Node

+

JSONToFile

+

Writes a JSON object to a file.

+

Use fs.writeFile(), template literals and JSON.stringify() to write a json object to a .json file.

+
const fs = require('fs');
+const JSONToFile = (obj, filename) => fs.writeFile(`${filename}.json`, JSON.stringify(obj, null, 2))
+// jsonToFile({test: "is passed"}, 'testJsonFile') -> writes the object to 'testJsonFile.json'
+
+

readFileLines

+

Returns an array of lines from the specified file.

+

Use readFileSync function in fs node package to create a Buffer from a file. +convert buffer to string using toString(encoding) function. +creating an array from contents of file by spliting file content line by line(each \n).

+
const fs = require('fs');
+const readFileLines = filename => fs.readFileSync(filename).toString('UTF8').split('\n');
+/*
+contents of test.txt :
+  line1
+  line2
+  line3
+  ___________________________
+let arr = readFileToArray('test.txt')
+console.log(arr) // -> ['line1', 'line2', 'line3']
+*/
+
+

Object

+

cleanObj

+

Removes any properties except the ones specified from a JSON object.

+

Use Object.keys() method to loop over given json object and deleting keys that are not included in given array. +also if you give it a special key(childIndicator) it will search deeply inside it to apply function to inner objects too.

+
const cleanObj = (obj, keysToKeep = [], childIndicator) => {
+  Object.keys(obj).forEach(key => {
+    if (key === childIndicator) {
+      cleanObj(obj[key], keysToKeep, childIndicator);
+    } else if (!keysToKeep.includes(key)) {
+      delete obj[key];
+    }
+  })
+}
+/*
+  testObj = {a: 1, b: 2, children: {a: 1, b: 2}}
+  cleanObj(testObj, ["a"],"children")
+  console.log(testObj)// { a: 1, children : { a: 1}}
+*/
+
+

objectFromPairs

+

Creates an object from the given key-value pairs.

+

Use Array.reduce() to create and combine key-value pairs.

+
const objectFromPairs = arr => arr.reduce((a, v) => (a[v[0]] = v[1], a), {});
+// objectFromPairs([['a',1],['b',2]]) -> {a: 1, b: 2}
+
+

objectToPairs

+

Creates an array of key-value pair arrays from an object.

+

Use Object.keys() and Array.map() to iterate over the object's keys and produce an array with key-value pairs.

+
const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]);
+// objectToPairs({a: 1, b: 2}) -> [['a',1],['b',2]])
+
+

shallowClone

+

Creates a shallow clone of an object.

+

Use Object.assign() and an empty object ({}) to create a shallow clone of the original.

+
const shallowClone = obj => Object.assign({}, obj);
+/*
+const a = { x: true, y: 1 };
+const b = shallowClone(a);
+a === b -> false
+*/
+
+

String

+

anagrams

+

Generates all anagrams of a string (contains duplicates).

+

Use recursion. +For each letter in the given string, create all the partial anagrams for the rest of its letters. +Use Array.map() to combine the letter with each partial anagram, then Array.reduce() to combine all anagrams in one array. +Base cases are for string length equal to 2 or 1.

+
const anagrams = str => {
+  if (str.length <= 2) return str.length === 2 ? [str, str[1] + str[0]] : [str];
+  return str.split('').reduce((acc, letter, i) =>
+    acc.concat(anagrams(str.slice(0, i) + str.slice(i + 1)).map(val => letter + val)), []);
+};
+// anagrams('abc') -> ['abc','acb','bac','bca','cab','cba']
+
+

Capitalize

+

Capitalizes the first letter of a string.

+

Use destructuring and toUpperCase() to capitalize first letter, ...rest to get array of characters after first letter and then Array.join('') to make it a string again. +Omit the lowerRest parameter to keep the rest of the string intact, or set it to true to convert to lower case.

+
const capitalize = ([first,...rest], lowerRest = false) =>
+  first.toUpperCase() + (lowerRest ? rest.join('').toLowerCase() : rest.join(''));
+// capitalize('myName') -> 'MyName'
+// capitalize('myName', true) -> 'Myname'
+
+

capitalizeEveryWord

+

Capitalizes the first letter of every word in a string.

+

Use replace() to match the first character of each word and toUpperCase() to capitalize it.

+
const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());
+// capitalizeEveryWord('hello world!') -> 'Hello World!'
+
+

escapeRegExp

+

Escapes a string to use in a regular expression.

+

Use replace() to escape special characters.

+
const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+// escapeRegExp('(test)') -> \\(test\\)
+
+

fromCamelCase

+

Converts a string from camelcase.

+

Use replace() to remove underscores, hyphens and spaces and convert words to camelcase. +Omit the scond argument to use a default separator of _.

+
const fromCamelCase = (str, separator = '_') =>
+  str.replace(/([a-z\d])([A-Z])/g, '$1' + separator + '$2')
+    .replace(/([A-Z]+)([A-Z][a-z\d]+)/g, '$1' + separator + '$2').toLowerCase();
+// fromCamelCase('someDatabaseFieldName', ' ') -> 'some database field name'
+// fromCamelCase('someLabelThatNeedsToBeCamelized', '-') -> 'some-label-that-needs-to-be-camelized'
+// fromCamelCase('someJavascriptProperty', '_') -> 'some_javascript_property'
+
+

reverseString

+

Reverses a string.

+

Use array destructuring and Array.reverse() to reverse the order of the characters in the string. +Combine characters to get a string using join('').

+
const reverseString = str => [...str].reverse().join('');
+// reverseString('foobar') -> 'raboof'
+
+

sortCharactersInString

+

Alphabetically sorts the characters in a string.

+

Split the string using split(''), Array.sort() utilizing localeCompare(), recombine using join('').

+
const sortCharactersInString = str =>
+  str.split('').sort((a, b) => a.localeCompare(b)).join('');
+// sortCharactersInString('cabbage') -> 'aabbceg'
+
+

toCamelCase

+

Converts a string to camelcase.

+

Use replace() to remove underscores, hyphens and spaces and convert words to camelcase.

+
const toCamelCase = str =>
+  str.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2, offset) =>  p2 ? p2.toUpperCase() : p1.toLowerCase());
+// toCamelCase("some_database_field_name") -> 'someDatabaseFieldName'
+// toCamelCase("Some label that needs to be camelized") -> 'someLabelThatNeedsToBeCamelized'
+// toCamelCase("some-javascript-property") -> 'someJavascriptProperty'
+// toCamelCase("some-mixed_string with spaces_underscores-and-hyphens") -> 'someMixedStringWithSpacesUnderscoresAndHyphens'
+
+

truncateString

+

Truncates a string up to a specified length.

+

Determine if the string's length is greater than num. +Return the string truncated to the desired length, with ... appended to the end or the original string.

+
const truncateString = (str, num) =>
+  str.length > num ? str.slice(0, num > 3 ? num - 3 : num) + '...' : str;
+// truncate('boomerang', 7) -> 'boom...'
+
+

Utility

+

extendHex

+

Extends a 3-digit color code to a 6-digit color code.

+

Use Array.map(), split() and Array.join() to join the mapped array for converting a 3-digit RGB notated hexadecimal color-code to the 6-digit form. +Array.slice() is used to remove # from string start since it's added once.

+
const extendHex = shortHex =>
+  '#' + shortHex.slice(shortHex.startsWith('#') ? 1 : 0).split('').map(x => x+x).join('')
+// convertHex('#03f') -> '#0033ff'
+// convertHex('05a') -> '#0055aa'
+
+

getType

+

Returns the native type of a value.

+

Returns lower-cased constructor name of value, "undefined" or "null" if value is undefined or null

+
const getType = v =>
+  v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();
+// getType(new Set([1,2,3])) -> "set"
+
+

hexToRGB

+

Converts a colorcode to a rgb() string.

+

Use bitwise right-shift operator and mask bits with & (and) operator to convert a hexadecimal color code (prefixed with #) to a string with the RGB values. In case it's a 3-digit-colorcode, do the same with the 6-digit-colorcode extended by the extendHex() function (ref. extendHex snippet)

+
const hexToRgb = hex => {
+  const extendHex = shortHex =>
+    '#' + shortHex.slice(shortHex.startsWith('#') ? 1 : 0).split('').map(x => x+x).join('');
+  return hex.slice(1).length==3 ?
+  `rgb(${parseInt(extendHex(hex).slice(1), 16) >> 16}, ${(parseInt(extendHex(hex).slice(1), 16) & 0x00ff00) >> 8}, ${parseInt(extendHex(hex).slice(1), 16) & 0x0000ff})`:
+  `rgb(${parseInt(hex.slice(1), 16) >> 16}, ${(parseInt(hex.slice(1), 16) & 0x00ff00) >> 8}, ${parseInt(hex.slice(1), 16) & 0x0000ff})`;
+}
+// hexToRgb('#27ae60') -> 'rgb(39, 174, 96)'
+// hexToRgb('#acd') -> 'rgb(170, 204, 221)'
+
+

isArray

+

Checks if the given argument is an array.

+

Use Array.isArray() to check if a value is classified as an array.

+
const isArray = val => !!val && Array.isArray(val);
+// isArray(null) -> false
+// isArray([1]) -> true
+
+

isBoolean

+

Checks if the given argument is a native boolean element.

+

Use typeof to check if a value is classified as a boolean primitive.

+
const isBoolean = val => typeof val === 'boolean';
+// isBoolean(null) -> false
+// isBoolean(false) -> true
+
+

isFunction

+

Checks if the given argument is a function.

+

Use typeof to check if a value is classified as a function primitive.

+
const isFunction = val => val && typeof val === 'function';
+// isFunction('x') -> false
+// isFunction(x => x) -> true
+
+

isNumber

+

Checks if the given argument is a number.

+

Use typeof to check if a value is classified as a number primitive.

+
const isNumber = val => typeof val === 'number';
+// isNumber('1') -> false
+// isNumber(1) -> true
+
+

isString

+

Checks if the given argument is a string.

+

Use typeof to check if a value is classified as a string primitive.

+
const isString = val => typeof val === 'string';
+// isString(10) -> false
+// isString('10') -> true
+
+

isSymbol

+

Checks if the given argument is a symbol.

+

Use typeof to check if a value is classified as a symbol primitive.

+
const isSymbol = val => typeof val === 'symbol';
+// isSymbol('x') -> false
+// isSymbol(Symbol('x')) -> true
+
+

RGBToHex

+

Converts the values of RGB components to a colorcode.

+

Convert given RGB parameters to hexadecimal string using bitwise left-shift operator (<<) and toString(16), then padStart(6,'0') to get a 6-digit hexadecimal value.

+
const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
+// rgbToHex(255, 165, 1) -> 'ffa501'
+
+

timeTaken

+

Measures the time taken by a function to execute.

+

Use console.time() and console.timeEnd() to measure the difference between the start and end times to determine how long the callback took to execute.

+
const timeTaken = callback => {
+  console.time('timeTaken');  const r = callback();
+  console.timeEnd('timeTaken');  return r;
+};
+// timeTaken(() => Math.pow(2, 10)) -> 1024
+// (logged): timeTaken: 0.02099609375ms
+
+

toOrdinalSuffix

+

Adds an ordinal suffix to a number.

+

Use the modulo operator (%) to find values of single and tens digits. +Find which ordinal pattern digits match. +If digit is found in teens pattern, use teens ordinal.

+
const toOrdinalSuffix = num => {
+  const int = parseInt(num), digits = [(int % 10), (int % 100)],
+    ordinals = ['st', 'nd', 'rd', 'th'], oPattern = [1, 2, 3, 4],
+    tPattern = [11, 12, 13, 14, 15, 16, 17, 18, 19];
+  return oPattern.includes(digits[0]) && !tPattern.includes(digits[1]) ? int + ordinals[digits[0] - 1] : int + ordinals[3];
+};
+// toOrdinalSuffix("123") -> "123rd"
+
+

UUIDGenerator

+

Generates a UUID.

+

Use crypto API to generate a UUID, compliant with RFC4122 version 4.

+
const UUIDGenerator = () =>
+  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+  );
+// uuid() -> '7982fcfe-5721-4632-bede-6000885be57d'
+
+

validateEmail

+

Returns true if the given string is a valid email, false otherwise.

+

Use a regular expression to check if the email is valid. +Returns true if email is valid, false if not.

+
const validateEmail = str =>
+  /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(str);
+// validateEmail(mymail@gmail.com) -> true
+
+

validateNumber

+

Returns true if the given value is a number, false otherwise.

+

Use !isNaN in combination with parseFloat() to check if the argument is a number. +Use isFinite() to check if the number is finite. +Use Number() to check if the coercion holds.

+
const validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n;
+// validateNumber('10') -> true
+
+

+ +
+
+ + + diff --git a/docs/prism.css b/docs/prism.css new file mode 100644 index 000000000..82bd16940 --- /dev/null +++ b/docs/prism.css @@ -0,0 +1,140 @@ +/* PrismJS 1.9.0 +http://prismjs.com/download.html?themes=prism&languages=clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ + +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #a67f59; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + diff --git a/docs/prism.js b/docs/prism.js new file mode 100644 index 000000000..7a6f93675 --- /dev/null +++ b/docs/prism.js @@ -0,0 +1,5 @@ +/* PrismJS 1.9.0 +http://prismjs.com/download.html?themes=prism&languages=clike+javascript */ +var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof r?new r(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof s)){h.lastIndex=0;var _=h.exec(w),P=1;if(!_&&m&&b!=t.length-1){if(h.lastIndex=k,_=h.exec(e),!_)break;for(var A=_.index+(d?_[1].length:0),j=_.index+_[0].length,x=b,O=k,N=t.length;N>x&&(j>O||!t[x].type&&!t[x-1].greedy);++x)O+=t[x].length,A>=O&&(++b,k=O);if(t[b]instanceof s||t[x-1].greedy)continue;P=x-b,w=e.slice(k,O),_.index-=k}if(_){d&&(p=_[1].length);var A=_.index+p,_=_[0].slice(p),j=A+_.length,S=w.slice(0,A),C=w.slice(j),M=[b,P];S&&(++b,k+=S.length,M.push(S));var E=new s(g,f?n.tokenize(_,f):_,y,_,m);if(M.push(E),C&&M.push(C),Array.prototype.splice.apply(t,M),1!=P&&n.matchGrammar(e,t,r,b,k,!0,g),i)break}else if(i)break}}}}},tokenize:function(e,t){var r=[e],a=t.rest;if(a){for(var l in a)t[l]=a[l];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var r=n.hooks.all;r[e]=r[e]||[],r[e].push(t)},run:function(e,t){var r=n.hooks.all[e];if(r&&r.length)for(var a,l=0;a=r[l++];)a(t)}}},r=n.Token=function(e,t,n,r,a){this.type=e,this.content=t,this.alias=n,this.length=0|(r||"").length,this.greedy=!!a};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return r.stringify(n,t,e)}).join("");var l={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o=Object.keys(l.attributes).map(function(e){return e+'="'+(l.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+l.tag+' class="'+l.classes.join(" ")+'"'+(o?" "+o:"")+">"+l.content+""},!_self.document)return _self.addEventListener?(n.disableWorkerMessageHandler||_self.addEventListener("message",function(e){var t=JSON.parse(e.data),r=t.language,a=t.code,l=t.immediateClose;_self.postMessage(n.highlight(a,n.languages[r],r)),l&&_self.close()},!1),_self.Prism):_self.Prism;var a=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return a&&(n.filename=a.src,n.manual||a.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); +Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(?:true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/}; +Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+(?:[Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript",greedy:!0}}),Prism.languages.js=Prism.languages.javascript; diff --git a/package-lock.json b/package-lock.json index 4344c4b9b..6f628179a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -65,6 +65,16 @@ "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz", "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4=" }, + "ansi-regex": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz", + "integrity": "sha1-DY6UaWej2BQ/k+JOKYUl/BsiNfk=" + }, + "ansi-styles": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz", + "integrity": "sha1-6uy/Zs1waIJ2Cy9GkVgrj1XXp94=" + }, "anymatch": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.2.tgz", @@ -450,6 +460,7 @@ "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-3.5.1.tgz", "integrity": "sha512-689HrwGw8Rbk1xtV9C4dY6TPJAvIYZbRbnKSAtfJ7tHqICFGoZ0PCWYjxfmerRyxBG0o3sbG3pe7N8vqPwIHuQ==", "requires": { + "chalk": "0.5.1", "commander": "2.6.0", "date-fns": "1.29.0", "lodash": "4.17.4", @@ -457,6 +468,27 @@ "spawn-command": "0.0.2-1", "supports-color": "3.2.3", "tree-kill": "1.2.0" + }, + "dependencies": { + "chalk": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz", + "integrity": "sha1-Zjs6ZItotV0EaQ1JFnqoN4WPIXQ=", + "requires": { + "ansi-styles": "1.1.0", + "escape-string-regexp": "1.0.5", + "has-ansi": "0.1.0", + "strip-ansi": "0.3.0", + "supports-color": "0.2.0" + }, + "dependencies": { + "supports-color": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz", + "integrity": "sha1-2S3iaU6z9nMjlz1649i1W0wiGQo=" + } + } + } } }, "configstore": { @@ -1353,6 +1385,14 @@ "function-bind": "1.1.1" } }, + "has-ansi": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz", + "integrity": "sha1-hPJlqujA5qiKEtcCKJS3VoiUxi4=", + "requires": { + "ansi-regex": "0.2.1" + } + }, "has-flag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", @@ -2854,6 +2894,14 @@ "safe-buffer": "5.1.1" } }, + "strip-ansi": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz", + "integrity": "sha1-JfSOoiynkYfzF0pNuHWTR7sSYiA=", + "requires": { + "ansi-regex": "0.2.1" + } + }, "strip-bom": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", diff --git a/package.json b/package.json index 4c6d5f82e..ae03a1343 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "builder": "node ./scripts/build-script.js", "linter": "node ./scripts/lint-script.js", "tagger": "node ./scripts/tag-script.js", + "webber": "node ./scripts/web-script.js", "start": "concurrently --kill-others \"nodemon -e js,md -i README.md -x \\\"npm run build-list\\\"\" \"live-server ./build\"" }, "repository": { diff --git a/scripts/build-script.js b/scripts/build-script.js index 05514ae78..95275492a 100644 --- a/scripts/build-script.js +++ b/scripts/build-script.js @@ -55,7 +55,7 @@ try { for(let tag of [...new Set(Object.entries(tagDbData).map(t => t[1]))].filter(v => v).sort((a,b) => a.localeCompare(b))){ output +=`### ${capitalize(tag, true)}\n`; for(let taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag)) - output += `* [${taggedSnippet[0][0].toUpperCase() + taggedSnippet[0].replace(/-/g,' ').slice(1)}](#${taggedSnippet[0].replace(/\(/g,'').replace(/\)/g,'').toLowerCase()})\n` + output += `* [\`${taggedSnippet[0]}\`](#${taggedSnippet[0].toLowerCase()})\n` output += '\n'; } // Loop over tags and snippets to create the list of snippets diff --git a/scripts/web-script.js b/scripts/web-script.js new file mode 100644 index 000000000..edc221de3 --- /dev/null +++ b/scripts/web-script.js @@ -0,0 +1,81 @@ +/* + This is the builder script that generates the README file. + Run using `npm run builder`. +*/ +// Load modules +const fs = require('fs-extra'), path = require('path'), chalk = require('chalk'), + md = require('markdown-it')(); +// Set variables for paths +const snippetsPath = './snippets', staticPartsPath = './static-parts', docsPath = './docs'; +// Set variables for script +let snippets = {}, startPart = '', endPart = '', output = '', tagDbData = {}; +// Load helper functions (these are from existing snippets in 30 seconds of code!) +const objectFromPairs = arr => arr.reduce((a, v) => (a[v[0]] = v[1], a), {}); +const capitalize = (str, lowerRest = false) => str.slice(0, 1).toUpperCase() + (lowerRest ? str.slice(1).toLowerCase() : str.slice(1)); +// Start the timer of the script +console.time('Builder'); +// Synchronously read all snippets and sort them as necessary (case-insensitive) +try { + let snippetFilenames = fs.readdirSync(snippetsPath); + snippetFilenames.sort((a, b) => { + a = a.toLowerCase(); + b = b.toLowerCase(); + if (a < b) return -1; + if (a > b) return 1; + return 0; + }); + // Store the data read from each snippet in the appropriate object + for(let snippet of snippetFilenames) snippets[snippet] = fs.readFileSync(path.join(snippetsPath,snippet),'utf8'); +} +catch (err){ // Handle errors (hopefully not!) + console.log(`${chalk.red('ERROR!')} During snippet loading: ${err}`); + process.exit(1); +} +// Load static parts for the index.html file +try { + startPart = fs.readFileSync(path.join(staticPartsPath,'index-start.html'),'utf8'); + endPart = fs.readFileSync(path.join(staticPartsPath,'index-end.html'),'utf8'); +} +catch (err){ // Handle errors (hopefully not!) + console.log(`${chalk.red('ERROR!')} During static part loading: ${err}`); + process.exit(1); +} +// Load tag data from the database +try { + tagDbData = objectFromPairs(fs.readFileSync('tag_database','utf8').split('\n').slice(0,-1).map(v => v.split(':').slice(0,2))); +} +catch (err){ // Handle errors (hopefully not!) + console.log(`${chalk.red('ERROR!')} During tag database loading: ${err}`); + process.exit(1); +} +// Create the output for the index.html file +try { + // Add the start static part + output += `${startPart+'\n'}`; + // Loop over tags and snippets to create the table of contents + for(let tag of [...new Set(Object.entries(tagDbData).map(t => t[1]))].filter(v => v).sort((a,b) => a.localeCompare(b))){ + output +=`

`+md.render(`${capitalize(tag, true)}\n`).replace(/

/g,'').replace(/<\/p>/g,'')+`

`; + for(let taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag)) + output += md.render(`[${taggedSnippet[0]}](#${taggedSnippet[0].toLowerCase()})\n`).replace(/

/g,'').replace(/<\/p>/g,'').replace(/

`; + // Loop over tags and snippets to create the list of snippets + for(let tag of [...new Set(Object.entries(tagDbData).map(t => t[1]))].filter(v => v).sort((a,b) => a.localeCompare(b))){ + output +=md.render(`## ${capitalize(tag, true)}\n`).replace(/

/g,'

'); + for(let taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag)) + output += '
' + md.render(`\n${snippets[taggedSnippet[0]+'.md']}`).replace(/

/g,'

') + '

'; + } + // Add the ending static part + output += `\n${endPart+'\n'}`; + // Write to the index.html file + fs.writeFileSync(path.join(docsPath,'index.html'), output); +} +catch (err){ // Handle errors (hopefully not!) + console.log(`${chalk.red('ERROR!')} During index.html generation: ${err}`); + process.exit(1); +} +// Log a success message +console.log(`${chalk.green('SUCCESS!')} index.html file generated!`); +// Log the time taken +console.timeEnd('Builder'); diff --git a/snippet-template.md b/snippet-template.md index 83e820965..63d6665d8 100644 --- a/snippet-template.md +++ b/snippet-template.md @@ -1,4 +1,6 @@ -### Snippet title +### functionName + +Explain briefly what the snippet does. Explain briefly how the snippet works. diff --git a/snippets/json-to-date.md b/snippets/JSONToDate.md similarity index 78% rename from snippets/json-to-date.md rename to snippets/JSONToDate.md index c1a260927..ce3ceebdb 100644 --- a/snippets/json-to-date.md +++ b/snippets/JSONToDate.md @@ -1,9 +1,11 @@ -### JSON to date +### JSONToDate + +Converts a JSON object to a date. Use `Date()`, to convert dates in JSON format to readable format (`dd/mm/yyyy`). ```js -const jsonToDate = arr => { +const JSONToDate = arr => { const dt = new Date(parseInt(arr.toString().substr(6))); return `${ dt.getDate() }/${ dt.getMonth() + 1 }/${ dt.getFullYear() }` }; diff --git a/snippets/json-to-file.md b/snippets/JSONToFile.md similarity index 71% rename from snippets/json-to-file.md rename to snippets/JSONToFile.md index 587e5f0f1..f7f0990a1 100644 --- a/snippets/json-to-file.md +++ b/snippets/JSONToFile.md @@ -1,9 +1,11 @@ -### Write JSON to file +### JSONToFile + +Writes a JSON object to a file. Use `fs.writeFile()`, template literals and `JSON.stringify()` to write a `json` object to a `.json` file. ```js const fs = require('fs'); -const jsonToFile = (obj, filename) => fs.writeFile(`${filename}.json`, JSON.stringify(obj, null, 2)) +const JSONToFile = (obj, filename) => fs.writeFile(`${filename}.json`, JSON.stringify(obj, null, 2)) // jsonToFile({test: "is passed"}, 'testJsonFile') -> writes the object to 'testJsonFile.json' ``` diff --git a/snippets/RGB-to-hexadecimal.md b/snippets/RGBToHex.md similarity index 64% rename from snippets/RGB-to-hexadecimal.md rename to snippets/RGBToHex.md index 2b29c9d2a..23dce9ec4 100644 --- a/snippets/RGB-to-hexadecimal.md +++ b/snippets/RGBToHex.md @@ -1,8 +1,10 @@ -### RGB to hexadecimal +### RGBToHex + +Converts the values of RGB components to a colorcode. Convert given RGB parameters to hexadecimal string using bitwise left-shift operator (`<<`) and `toString(16)`, then `padStart(6,'0')` to get a 6-digit hexadecimal value. ```js -const rgbToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0'); +const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0'); // rgbToHex(255, 165, 1) -> 'ffa501' ``` diff --git a/snippets/UUID-generator.md b/snippets/UUIDGenerator.md similarity index 83% rename from snippets/UUID-generator.md rename to snippets/UUIDGenerator.md index 90dd9c78a..9fe3343f2 100644 --- a/snippets/UUID-generator.md +++ b/snippets/UUIDGenerator.md @@ -1,9 +1,11 @@ -### UUID generator +### UUIDGenerator + +Generates a UUID. Use `crypto` API to generate a UUID, compliant with [RFC4122](https://www.ietf.org/rfc/rfc4122.txt) version 4. ```js -const uuidGenerator = () => +const UUIDGenerator = () => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) ); diff --git a/snippets/anagrams.md b/snippets/anagrams.md index bbc2e3dfb..b89194564 100644 --- a/snippets/anagrams.md +++ b/snippets/anagrams.md @@ -1,4 +1,6 @@ -### Anagrams of string (with duplicates) +### anagrams + +Generates all anagrams of a string (contains duplicates). Use recursion. For each letter in the given string, create all the partial anagrams for the rest of its letters. diff --git a/snippets/average.md b/snippets/arrayAverage.md similarity index 53% rename from snippets/average.md rename to snippets/arrayAverage.md index 73ae7bc39..8fe610f2d 100644 --- a/snippets/average.md +++ b/snippets/arrayAverage.md @@ -1,8 +1,10 @@ -### Average of array of numbers +### arrayAverage + +Returns the average of an array of numbers. Use `Array.reduce()` to add each value to an accumulator, initialized with a value of `0`, divide by the `length` of the array. ```js -const average = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length; +const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length; // average([1,2,3]) -> 2 ``` diff --git a/snippets/get-max.md b/snippets/arrayMax.md similarity index 77% rename from snippets/get-max.md rename to snippets/arrayMax.md index 2e724a3e2..0c0022996 100644 --- a/snippets/get-max.md +++ b/snippets/arrayMax.md @@ -1,4 +1,6 @@ -### Get max value from array +### arrayMax + +Returns the maximum value in an array. Use `Math.max()` combined with the spread operator (`...`) to get the maximum value in the array. diff --git a/snippets/get-min.md b/snippets/arrayMin.md similarity index 77% rename from snippets/get-min.md rename to snippets/arrayMin.md index 8775b6b72..5bdd95559 100644 --- a/snippets/get-min.md +++ b/snippets/arrayMin.md @@ -1,4 +1,6 @@ -### Get min value from array +### arrayMin + +Returns the minimum value in an array. Use `Math.min()` combined with the spread operator (`...`) to get the minimum value in the array. diff --git a/snippets/sum-array-numbers.md b/snippets/arraySum.md similarity index 51% rename from snippets/sum-array-numbers.md rename to snippets/arraySum.md index a6187b3dc..9c07695db 100644 --- a/snippets/sum-array-numbers.md +++ b/snippets/arraySum.md @@ -1,8 +1,10 @@ -### Sum of array of numbers +### arraySum + +Returns the sum of an array of numbers. Use `Array.reduce()` to add each value to an accumulator, initialized with a value of `0`. ```js -const sumArrayNumbers = arr => arr.reduce((acc, val) => acc + val, 0); +const arraySum = arr => arr.reduce((acc, val) => acc + val, 0); // sum([1,2,3,4]) -> 10 ``` diff --git a/snippets/bottom-visible.md b/snippets/bottomVisible.md similarity index 77% rename from snippets/bottom-visible.md rename to snippets/bottomVisible.md index 797b0eb00..8e655db45 100644 --- a/snippets/bottom-visible.md +++ b/snippets/bottomVisible.md @@ -1,4 +1,6 @@ -### Bottom visible +### bottomVisible + +Returns `true` if the bottom of the page is visible, `false` otherwise. Use `scrollY`, `scrollHeight` and `clientHeight` to determine if the bottom of the page is visible. diff --git a/snippets/capitalize.md b/snippets/capitalize.md index edbb04b02..f29c933d2 100644 --- a/snippets/capitalize.md +++ b/snippets/capitalize.md @@ -1,4 +1,6 @@ -### Capitalize first letter +### Capitalize + +Capitalizes the first letter of a string. Use destructuring and `toUpperCase()` to capitalize first letter, `...rest` to get array of characters after first letter and then `Array.join('')` to make it a string again. Omit the `lowerRest` parameter to keep the rest of the string intact, or set it to `true` to convert to lower case. diff --git a/snippets/capitalize-every-word.md b/snippets/capitalizeEveryWord.md similarity index 75% rename from snippets/capitalize-every-word.md rename to snippets/capitalizeEveryWord.md index 4a1f5c1ab..bfaaf00b6 100644 --- a/snippets/capitalize-every-word.md +++ b/snippets/capitalizeEveryWord.md @@ -1,4 +1,6 @@ -### Capitalize first letter of every word +### capitalizeEveryWord + +Capitalizes the first letter of every word in a string. Use `replace()` to match the first character of each word and `toUpperCase()` to capitalize it. diff --git a/snippets/chain-async.md b/snippets/chainAsync.md similarity index 89% rename from snippets/chain-async.md rename to snippets/chainAsync.md index 8aec5d186..66fb8a6ab 100644 --- a/snippets/chain-async.md +++ b/snippets/chainAsync.md @@ -1,4 +1,6 @@ -### Chain asynchronous functions +### chainAsync + +Chains asynchronous functions. Loop through an array of functions containing asynchronous events, calling `next` when each asynchronous event has completed. diff --git a/snippets/chunk.md b/snippets/chunk.md index ba3e5e42e..8ad2c3ced 100644 --- a/snippets/chunk.md +++ b/snippets/chunk.md @@ -1,4 +1,6 @@ -### Chunk array +### chunk + +Chunks an array into smaller arrays of a specified size. Use `Array.from()` to create a new array, that fits the number of chunks that will be produced. Use `Array.slice()` to map each element of the new array to a chunk the length of `size`. diff --git a/snippets/clean-obj.md b/snippets/cleanObj.md similarity index 88% rename from snippets/clean-obj.md rename to snippets/cleanObj.md index 241f6ce09..34e443a41 100644 --- a/snippets/clean-obj.md +++ b/snippets/cleanObj.md @@ -1,4 +1,6 @@ -### Clean JSON object +### cleanObj + +Removes any properties except the ones specified from a JSON object. Use `Object.keys()` method to loop over given json object and deleting keys that are not `include`d in given array. also if you give it a special key(`childIndicator`) it will search deeply inside it to apply function to inner objects too. diff --git a/snippets/collatz.md b/snippets/collatz.md index 61614e5e0..b3d277658 100644 --- a/snippets/collatz.md +++ b/snippets/collatz.md @@ -1,4 +1,6 @@ -### Collatz algorithm +### collatz + +Applies the Collatz algorithm. If `n` is even, return `n/2`. Otherwise return `3n+1`. diff --git a/snippets/compact.md b/snippets/compact.md index 121d79bae..c63796719 100644 --- a/snippets/compact.md +++ b/snippets/compact.md @@ -1,4 +1,6 @@ -### Compact +### compact + +Removes falsey values from an array. Use `Array.filter()` to filter out falsey values (`false`, `null`, `0`, `""`, `undefined`, and `NaN`). diff --git a/snippets/compose.md b/snippets/compose.md index 4c7248930..f6b1ce2ea 100644 --- a/snippets/compose.md +++ b/snippets/compose.md @@ -1,4 +1,6 @@ -### Compose functions +### compose + +Performs right-to-left function composition. Use `Array.reduce()` to perform right-to-left function composition. The last (rightmost) function can accept one or more arguments; the remaining functions must be unary. diff --git a/snippets/count-occurrences.md b/snippets/countOccurrences.md similarity index 78% rename from snippets/count-occurrences.md rename to snippets/countOccurrences.md index f4a0dc210..be28947f0 100644 --- a/snippets/count-occurrences.md +++ b/snippets/countOccurrences.md @@ -1,4 +1,6 @@ -### Count occurrences of a value in array +### countOccurrences + +Counts the occurences of a value in an array. Use `Array.reduce()` to increment a counter each time you encounter the specific value inside the array. diff --git a/snippets/current-URL.md b/snippets/current-URL.md index 3a549d219..a6482a689 100644 --- a/snippets/current-URL.md +++ b/snippets/current-URL.md @@ -1,8 +1,10 @@ -### Current URL +### currentURL + +Returns the current URL. Use `window.location.href` to get current URL. ```js -const currentUrl = () => window.location.href; +const currentURL = () => window.location.href; // currentUrl() -> 'https://google.com' ``` diff --git a/snippets/curry.md b/snippets/curry.md index bbee4086c..50473509e 100644 --- a/snippets/curry.md +++ b/snippets/curry.md @@ -1,4 +1,6 @@ -### Curry +### curry + +Curries a function. Use recursion. If the number of provided arguments (`args`) is sufficient, call the passed function `f`. diff --git a/snippets/deep-flatten.md b/snippets/deepFlatten.md similarity index 88% rename from snippets/deep-flatten.md rename to snippets/deepFlatten.md index 8e9497d33..c6f29fb9b 100644 --- a/snippets/deep-flatten.md +++ b/snippets/deepFlatten.md @@ -1,4 +1,6 @@ -### Deep flatten array +### deepFlatten + +Deep flattens an array. Use recursion. Use `Array.concat()` with an empty array (`[]`) and the spread operator (`...`) to flatten an array. diff --git a/snippets/difference.md b/snippets/difference.md index defd82d6f..e78a73340 100644 --- a/snippets/difference.md +++ b/snippets/difference.md @@ -1,4 +1,6 @@ -### Array difference +### difference + +Returns the difference between two arrays. Create a `Set` from `b`, then use `Array.filter()` on `a` to only keep values not contained in `b`. diff --git a/snippets/digitalize.md b/snippets/digitize.md similarity index 79% rename from snippets/digitalize.md rename to snippets/digitize.md index 3d8a3c0e0..f856c8369 100644 --- a/snippets/digitalize.md +++ b/snippets/digitize.md @@ -1,7 +1,9 @@ -### Number to array of digits +### digitize + +Converts a number to an array of digits. Convert the number to a string, using spread operators in ES6(`[...string]`) build an array. -Use `Array.map()` and `parseInt()` to transform each value to an integer. +Use `Array.map()` and `parseInt()` to transform each value to an integer. ```js const digitize = n => [...''+n].map(i => parseInt(i)); diff --git a/snippets/distance.md b/snippets/distance.md index 33eea1615..5595ef188 100644 --- a/snippets/distance.md +++ b/snippets/distance.md @@ -1,4 +1,6 @@ -### Distance between two points +### distance + +Returns the distance between two points. Use `Math.hypot()` to calculate the Euclidean distance between two points. diff --git a/snippets/unique-values-of-array.md b/snippets/distinctValuesOfArray.md similarity index 50% rename from snippets/unique-values-of-array.md rename to snippets/distinctValuesOfArray.md index 0383731bc..5b5b8e5e0 100644 --- a/snippets/unique-values-of-array.md +++ b/snippets/distinctValuesOfArray.md @@ -1,8 +1,10 @@ -### Unique values of array +### distinctValuesOfArray + +Returns all the distinct values of an array. Use ES6 `Set` and the `...rest` operator to discard all duplicated values. ```js -const uniqueValuesOfArray = arr => [...new Set(arr)]; +const distinctValuesOfArray = arr => [...new Set(arr)]; // unique([1,2,2,3,4,4,5]) -> [1,2,3,4,5] ``` diff --git a/snippets/drop-elements.md b/snippets/dropElements.md similarity index 69% rename from snippets/drop-elements.md rename to snippets/dropElements.md index 236c5ab56..34138eb93 100644 --- a/snippets/drop-elements.md +++ b/snippets/dropElements.md @@ -1,6 +1,8 @@ -### Drop elements in array +### dropElements -Loop through the array, using `Array.shift()` to drop the first element of the array until the returned value from the function is `true`. +Removes elements in an array until the passed function returns `true`. Returns the remaining elements in the array. + +Loop through the array, using `Array.shift()` to drop the first element of the array until the returned value from the function is `true`. Returns the remaining elements. ```js diff --git a/snippets/element-is-visible-in-viewport.md b/snippets/elementIsVisibleInViewport.md similarity index 88% rename from snippets/element-is-visible-in-viewport.md rename to snippets/elementIsVisibleInViewport.md index 514aea5e6..4f52d6ad7 100644 --- a/snippets/element-is-visible-in-viewport.md +++ b/snippets/elementIsVisibleInViewport.md @@ -1,4 +1,6 @@ -### Element is visible in viewport +### elementIsVisibleInViewport + +Returns `true` if the element specified is visible in the viewport, `false` otherwise. Use `Element.getBoundingClientRect()` and the `window.inner(Width|Height)` values to determine if a given element is visible in the viewport. diff --git a/snippets/escape-reg-exp.md b/snippets/escapeRegExp.md similarity index 71% rename from snippets/escape-reg-exp.md rename to snippets/escapeRegExp.md index fb204a451..caed74069 100644 --- a/snippets/escape-reg-exp.md +++ b/snippets/escapeRegExp.md @@ -1,4 +1,6 @@ -### Escape regular expression +### escapeRegExp + +Escapes a string to use in a regular expression. Use `replace()` to escape special characters. diff --git a/snippets/every-nth.md b/snippets/everyNth.md similarity index 80% rename from snippets/every-nth.md rename to snippets/everyNth.md index 8fa385b7c..616052b80 100644 --- a/snippets/every-nth.md +++ b/snippets/everyNth.md @@ -1,4 +1,6 @@ -### Take every nth element +### everyNth + +Returns every nth element in an array. Use `Array.filter()` to create a new array that contains every nth element of a given array. diff --git a/snippets/extend-hex.md b/snippets/extendHex.md similarity index 50% rename from snippets/extend-hex.md rename to snippets/extendHex.md index 21f882963..994d592b3 100644 --- a/snippets/extend-hex.md +++ b/snippets/extendHex.md @@ -1,10 +1,12 @@ -### 3-digit hexcode to 6-digit hexcode +### extendHex -Use `Array.map()`, `split()` and `Array.join()` to join the mapped array for converting a three-digit RGB notated hexadecimal color-code to the six-digit form. +Extends a 3-digit color code to a 6-digit color code. + +Use `Array.map()`, `split()` and `Array.join()` to join the mapped array for converting a 3-digit RGB notated hexadecimal color-code to the 6-digit form. `Array.slice()` is used to remove `#` from string start since it's added once. ```js const extendHex = shortHex => - '#' + shortHex.slice(shortHex.startsWith('#') ? 1 : 0).split().map(x => x+x).join() + '#' + shortHex.slice(shortHex.startsWith('#') ? 1 : 0).split('').map(x => x+x).join('') // convertHex('#03f') -> '#0033ff' // convertHex('05a') -> '#0055aa' ``` diff --git a/snippets/factorial.md b/snippets/factorial.md index d881fe941..aaedd7520 100644 --- a/snippets/factorial.md +++ b/snippets/factorial.md @@ -1,4 +1,6 @@ -### Factorial +### factorial + +Calculates the factorial of a number. Use recursion. If `n` is less than or equal to `1`, return `1`. diff --git a/snippets/fibonacci.md b/snippets/fibonacci.md index 7f0d4c7d2..a669c344d 100644 --- a/snippets/fibonacci.md +++ b/snippets/fibonacci.md @@ -1,4 +1,6 @@ -### Fibonacci array generator +### fibonacci + +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.reduce()` to add values into the array, using the sum of the last two values, except for the first two. diff --git a/snippets/filter-non-unique.md b/snippets/filterNonUnique.md similarity index 75% rename from snippets/filter-non-unique.md rename to snippets/filterNonUnique.md index 86562feb4..059d79aa5 100644 --- a/snippets/filter-non-unique.md +++ b/snippets/filterNonUnique.md @@ -1,4 +1,6 @@ -### Filter out non-unique values in an array +### filterNonUnique + +Filters out the non-unique values in an array. Use `Array.filter()` for an array containing only the unique values. diff --git a/snippets/flatten.md b/snippets/flatten.md index d23f24611..69a492572 100644 --- a/snippets/flatten.md +++ b/snippets/flatten.md @@ -1,4 +1,6 @@ -### Flatten array +### flatten + +Flattens an array. Use `Array.reduce()` to get all elements inside the array and `concat()` to flatten them. diff --git a/snippets/flatten-depth.md b/snippets/flattenDepth.md similarity index 89% rename from snippets/flatten-depth.md rename to snippets/flattenDepth.md index b6e3805b6..c07b837ff 100644 --- a/snippets/flatten-depth.md +++ b/snippets/flattenDepth.md @@ -1,4 +1,6 @@ -### Flatten array up to depth +### flattenDepth + +Flattens an array up to the specified depth. Use recursion, decrementing `depth` by 1 for each level of depth. Use `Array.reduce()` and `Array.concat()` to merge elements or arrays. diff --git a/snippets/from-camel-case.md b/snippets/fromCamelCase.md similarity index 75% rename from snippets/from-camel-case.md rename to snippets/fromCamelCase.md index d9f2bacd6..e9c61f1ba 100644 --- a/snippets/from-camel-case.md +++ b/snippets/fromCamelCase.md @@ -1,10 +1,12 @@ -### Convert string from camelcase +### fromCamelCase + +Converts a string from camelcase. Use `replace()` to remove underscores, hyphens and spaces and convert words to camelcase. -Omit the scond argument to use a default separator of '_'. +Omit the scond argument to use a default separator of `_`. ```js -const fromCamelCase = (str, separator = '_') => +const fromCamelCase = (str, separator = '_') => str.replace(/([a-z\d])([A-Z])/g, '$1' + separator + '$2') .replace(/([A-Z]+)([A-Z][a-z\d]+)/g, '$1' + separator + '$2').toLowerCase(); // fromCamelCase('someDatabaseFieldName', ' ') -> 'some database field name' diff --git a/snippets/function-name.md b/snippets/functionName.md similarity index 85% rename from snippets/function-name.md rename to snippets/functionName.md index b449331f8..54603d39c 100644 --- a/snippets/function-name.md +++ b/snippets/functionName.md @@ -1,4 +1,6 @@ -### Log function name +### functionName + +Logs the name of a function. Use `console.debug()` and the `name` property of the passed method to log the method's name to the `debug` channel of the console. diff --git a/snippets/greatest-common-divisor.md b/snippets/gcd.md similarity index 61% rename from snippets/greatest-common-divisor.md rename to snippets/gcd.md index d4b2688ed..34fb21833 100644 --- a/snippets/greatest-common-divisor.md +++ b/snippets/gcd.md @@ -1,10 +1,12 @@ -### Greatest common divisor (GCD) +### gcd + +Calculates the greatest common divisor between two numbers. Use recursion. Base case is when `y` equals `0`. In this case, return `x`. Otherwise, return the GCD of `y` and the remainder of the division `x/y`. ```js -const greatestCommonDivisor = (x, y) => !y ? x : gcd(y, x % y); +const gcd = (x, y) => !y ? x : gcd(y, x % y); // gcd (8, 36) -> 4 ``` diff --git a/snippets/get-days-diff-between-dates.md b/snippets/getDaysDiffBetweenDates.md similarity index 76% rename from snippets/get-days-diff-between-dates.md rename to snippets/getDaysDiffBetweenDates.md index ae93ce79d..d69dea9a3 100644 --- a/snippets/get-days-diff-between-dates.md +++ b/snippets/getDaysDiffBetweenDates.md @@ -1,4 +1,6 @@ -### Get days difference between dates +### getDaysDiffBetweenDates + +Returns the difference (in days) between two dates. Calculate the difference (in days) between to `Date` objects. diff --git a/snippets/get-scroll-position.md b/snippets/getScrollPosition.md similarity index 84% rename from snippets/get-scroll-position.md rename to snippets/getScrollPosition.md index 0f99bc757..dee0da298 100644 --- a/snippets/get-scroll-position.md +++ b/snippets/getScrollPosition.md @@ -1,4 +1,6 @@ -### Get scroll position +### getScrollPosition + +Returns the scroll position of the current page. Use `pageXOffset` and `pageYOffset` if they are defined, otherwise `scrollLeft` and `scrollTop`. You can omit `el` to use a default value of `window`. diff --git a/snippets/get-type.md b/snippets/getType.md similarity index 84% rename from snippets/get-type.md rename to snippets/getType.md index 9e043a83e..3110871fb 100644 --- a/snippets/get-type.md +++ b/snippets/getType.md @@ -1,4 +1,6 @@ -### Get native type of value +### getType + +Returns the native type of a value. Returns lower-cased constructor name of value, "undefined" or "null" if value is undefined or null diff --git a/snippets/get-url-parameters.md b/snippets/getURLParameters.md similarity index 79% rename from snippets/get-url-parameters.md rename to snippets/getURLParameters.md index f78c774d8..c7b432d8a 100644 --- a/snippets/get-url-parameters.md +++ b/snippets/getURLParameters.md @@ -1,10 +1,12 @@ -### URL parameters +### getURLParameters + +Returns an object containing the parameters of the current URL. Use `match()` with an appropriate regular expression to get all key-value pairs, `Array.reduce()` to map and combine them into a single object. Pass `location.search` as the argument to apply to the current `url`. ```js -const getUrlParameters = url => +const getURLParameters = url => url.match(/([^?=&]+)(=([^&]*))/g).reduce( (a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {} ); diff --git a/snippets/group-by.md b/snippets/groupBy.md similarity index 87% rename from snippets/group-by.md rename to snippets/groupBy.md index ec8074ea2..d5b019498 100644 --- a/snippets/group-by.md +++ b/snippets/groupBy.md @@ -1,4 +1,6 @@ -### Group by +### groupBy + +Groups the element of an array based on the given function. Use `Array.map()` to map the values of an array to a function or property name. Use `Array.reduce()` to create an object, where the keys are produced from the mapped results. diff --git a/snippets/hamming-distance.md b/snippets/hammingDistance.md similarity index 81% rename from snippets/hamming-distance.md rename to snippets/hammingDistance.md index e524408a8..bdf3c575b 100644 --- a/snippets/hamming-distance.md +++ b/snippets/hammingDistance.md @@ -1,4 +1,6 @@ -### Hamming distance +### hammingDistance + +Calculates the Hamming distance between two values. Use XOR operator (`^`) to find the bit difference between the two numbers, convert to binary string using `toString(2)`. Count and return the number of `1`s in the string, using `match(/1/g)`. diff --git a/snippets/head.md b/snippets/head.md index c2e0d5a3a..ece926a50 100644 --- a/snippets/head.md +++ b/snippets/head.md @@ -1,4 +1,6 @@ -### Head of list +### head + +Returns the head of a list. Use `arr[0]` to return the first element of the passed array. diff --git a/snippets/hex-to-rgb.md b/snippets/hex-to-rgb.md deleted file mode 100644 index 2bb33480f..000000000 --- a/snippets/hex-to-rgb.md +++ /dev/null @@ -1,11 +0,0 @@ -### Hexcode to RGB - -Use bitwise right-shift operator and mask bits with `&` (and) operator to convert a hexadecimal color code (prefixed with `#`) to a string with the RGB values. - -```js -const hexToRgb = hex => { - const h = parseInt(hex.slice(1), 16); - return `rgb(${h >> 16}, ${(h & 0x00ff00) >> 8}, ${h & 0x0000ff})`; -} -// hexToRgb('#27ae60') -> 'rgb(39, 174, 96)' -``` diff --git a/snippets/hexToRGB.md b/snippets/hexToRGB.md new file mode 100644 index 000000000..e3118ecf3 --- /dev/null +++ b/snippets/hexToRGB.md @@ -0,0 +1,17 @@ +### hexToRGB + +Converts a colorcode to a `rgb()` string. + +Use bitwise right-shift operator and mask bits with `&` (and) operator to convert a hexadecimal color code (prefixed with `#`) to a string with the RGB values. In case it's a 3-digit-colorcode, do the same with the 6-digit-colorcode extended by the extendHex() function (ref. `extendHex` snippet) + +```js +const hexToRgb = hex => { + const extendHex = shortHex => + '#' + shortHex.slice(shortHex.startsWith('#') ? 1 : 0).split('').map(x => x+x).join(''); + return hex.slice(1).length==3 ? + `rgb(${parseInt(extendHex(hex).slice(1), 16) >> 16}, ${(parseInt(extendHex(hex).slice(1), 16) & 0x00ff00) >> 8}, ${parseInt(extendHex(hex).slice(1), 16) & 0x0000ff})`: + `rgb(${parseInt(hex.slice(1), 16) >> 16}, ${(parseInt(hex.slice(1), 16) & 0x00ff00) >> 8}, ${parseInt(hex.slice(1), 16) & 0x0000ff})`; +} +// hexToRgb('#27ae60') -> 'rgb(39, 174, 96)' +// hexToRgb('#acd') -> 'rgb(170, 204, 221)' +``` diff --git a/snippets/initial.md b/snippets/initial.md index 1f967f804..ad358b593 100644 --- a/snippets/initial.md +++ b/snippets/initial.md @@ -1,4 +1,6 @@ -### Initial of list +### initial + +Returns all the elements of an array except the last one. Use `arr.slice(0,-1)`to return all but the last element of the array. diff --git a/snippets/initialize-array-range.md b/snippets/initializeArrayWithRange.md similarity index 65% rename from snippets/initialize-array-range.md rename to snippets/initializeArrayWithRange.md index 082325699..0210314f3 100644 --- a/snippets/initialize-array-range.md +++ b/snippets/initializeArrayWithRange.md @@ -1,10 +1,12 @@ -### Initialize array with range +### initializeArrayWithRange + +Initialized an array containing the numbers in the specified range. Use `Array(end-start)` to create an array of the desired length, `Array.map()` to fill with the desired values in a range. You can omit `start` to use a default value of `0`. ```js -const initializeArrayRange = (end, start = 0) => +const initializeArrayWithRange = (end, start = 0) => Array.from({ length: end - start }).map((v, i) => i + start); // initializeArrayRange(5) -> [0,1,2,3,4] ``` diff --git a/snippets/initialize-array.md b/snippets/initializeArrayWithValues.md similarity index 55% rename from snippets/initialize-array.md rename to snippets/initializeArrayWithValues.md index d8a18110f..6c48d74a7 100644 --- a/snippets/initialize-array.md +++ b/snippets/initializeArrayWithValues.md @@ -1,9 +1,11 @@ -### Initialize array with values +### initializeArrayWithValues + +Initializes and fills an array with the specified values. Use `Array(n)` to create an array of the desired length, `fill(v)` to fill it with the desired values. You can omit `value` to use a default value of `0`. ```js -const initializeArray = (n, value = 0) => Array(n).fill(value); +const initializeArrayWithValues = (n, value = 0) => Array(n).fill(value); // initializeArray(5, 2) -> [2,2,2,2,2] ``` diff --git a/snippets/intersection.md b/snippets/intersection.md index 780ab1d85..1c367cd92 100644 --- a/snippets/intersection.md +++ b/snippets/intersection.md @@ -1,4 +1,6 @@ -### Array intersection +### intersection + +Returns a list of elements that exist in both arrays. Create a `Set` from `b`, then use `Array.filter()` on `a` to only keep values contained in `b`. diff --git a/snippets/is-array.md b/snippets/isArray.md similarity index 76% rename from snippets/is-array.md rename to snippets/isArray.md index 939cb086d..f6e410719 100644 --- a/snippets/is-array.md +++ b/snippets/isArray.md @@ -1,4 +1,6 @@ -### Is array +### isArray + +Checks if the given argument is an array. Use `Array.isArray()` to check if a value is classified as an array. diff --git a/snippets/is-boolean.md b/snippets/isBoolean.md similarity index 72% rename from snippets/is-boolean.md rename to snippets/isBoolean.md index 8625add35..ae402c5e4 100644 --- a/snippets/is-boolean.md +++ b/snippets/isBoolean.md @@ -1,4 +1,6 @@ -### Is boolean +### isBoolean + +Checks if the given argument is a native boolean element. Use `typeof` to check if a value is classified as a boolean primitive. diff --git a/snippets/is-divisible.md b/snippets/isDivisible.md similarity index 67% rename from snippets/is-divisible.md rename to snippets/isDivisible.md index 8bc182fed..5adad9453 100644 --- a/snippets/is-divisible.md +++ b/snippets/isDivisible.md @@ -1,4 +1,6 @@ -### Divisible by number +### isDivisible + +Checks if the first numeric argument is divisible by the second one. Use the modulo operator (`%`) to check if the remainder is equal to `0`. diff --git a/snippets/is-even.md b/snippets/isEven.md similarity index 73% rename from snippets/is-even.md rename to snippets/isEven.md index 24eb312e6..5dfcb414f 100644 --- a/snippets/is-even.md +++ b/snippets/isEven.md @@ -1,4 +1,6 @@ -### Even or odd number +### isEven + +Returns `true` if the given number is even, `false` otherwise. Checks whether a number is odd or even using the modulo (`%`) operator. Returns `true` if the number is even, `false` if the number is odd. diff --git a/snippets/is-function.md b/snippets/isFunction.md similarity index 77% rename from snippets/is-function.md rename to snippets/isFunction.md index d4247a512..af5960e00 100644 --- a/snippets/is-function.md +++ b/snippets/isFunction.md @@ -1,4 +1,6 @@ -### Is function +### isFunction + +Checks if the given argument is a function. Use `typeof` to check if a value is classified as a function primitive. diff --git a/snippets/is-number.md b/snippets/isNumber.md similarity index 76% rename from snippets/is-number.md rename to snippets/isNumber.md index a647b39ed..83b33bc11 100644 --- a/snippets/is-number.md +++ b/snippets/isNumber.md @@ -1,4 +1,6 @@ -### Is number +### isNumber + +Checks if the given argument is a number. Use `typeof` to check if a value is classified as a number primitive. diff --git a/snippets/is-string.md b/snippets/isString.md similarity index 76% rename from snippets/is-string.md rename to snippets/isString.md index 6721c59c6..775e050a4 100644 --- a/snippets/is-string.md +++ b/snippets/isString.md @@ -1,4 +1,6 @@ -### Is string +### isString + +Checks if the given argument is a string. Use `typeof` to check if a value is classified as a string primitive. diff --git a/snippets/is-symbol.md b/snippets/isSymbol.md similarity index 77% rename from snippets/is-symbol.md rename to snippets/isSymbol.md index 53d4ce67c..a4ec67dc8 100644 --- a/snippets/is-symbol.md +++ b/snippets/isSymbol.md @@ -1,4 +1,6 @@ -### Is symbol +### isSymbol + +Checks if the given argument is a symbol. Use `typeof` to check if a value is classified as a symbol primitive. diff --git a/snippets/last-of-list.md b/snippets/last.md similarity index 59% rename from snippets/last-of-list.md rename to snippets/last.md index 103c5872b..c72ef4a00 100644 --- a/snippets/last-of-list.md +++ b/snippets/last.md @@ -1,8 +1,10 @@ -### Last of list +### last + +Returns the last element in an array. Use `arr.length - 1` to compute index of the last element of the given array and returning it. ```js -const lastOfArray = arr => arr[arr.length - 1]; +const last = arr => arr[arr.length - 1]; // last([1,2,3]) -> 3 ``` diff --git a/snippets/least-common-multiple-(LCM).md b/snippets/lcm.md similarity index 75% rename from snippets/least-common-multiple-(LCM).md rename to snippets/lcm.md index f44dd59b0..73b9c43c8 100644 --- a/snippets/least-common-multiple-(LCM).md +++ b/snippets/lcm.md @@ -1,10 +1,12 @@ -### Least common multiple (LCM) +### lcm + +Returns the least common multiple of two numbers. Use the greatest common divisor (GCD) formula and `Math.abs()` to determine the least common multiple. The GCD formula uses recursion. ```js -const leastCommonMultiple = (x,y) => { +const lcm = (x,y) => { const gcd = (x, y) => !y ? x : gcd(y, x % y); return Math.abs(x*y)/(gcd(x,y)); }; diff --git a/snippets/median-array.md b/snippets/median.md similarity index 88% rename from snippets/median-array.md rename to snippets/median.md index 8113d51c6..fd8ca3d7c 100644 --- a/snippets/median-array.md +++ b/snippets/median.md @@ -1,4 +1,6 @@ -### Median of array of numbers +### median + +Returns the median of an array of numbers. Find the middle of the array, use `Array.sort()` to sort the values. Return the number at the midpoint if `length` is odd, otherwise the average of the two middle numbers. diff --git a/snippets/nth-element.md b/snippets/nthElement.md similarity index 86% rename from snippets/nth-element.md rename to snippets/nthElement.md index bb3d131f5..7e1799d24 100644 --- a/snippets/nth-element.md +++ b/snippets/nthElement.md @@ -1,4 +1,6 @@ -### Nth element of array +### nthElement + +Returns the nth element of an array. Use `Array.slice()` to get an array containing the nth element at the first place. If the index is out of bounds, return `[]`. diff --git a/snippets/object-from-pairs.md b/snippets/objectFromPairs.md similarity index 74% rename from snippets/object-from-pairs.md rename to snippets/objectFromPairs.md index cbb545c06..ebdacb92c 100644 --- a/snippets/object-from-pairs.md +++ b/snippets/objectFromPairs.md @@ -1,4 +1,6 @@ -### Object from key-value pairs +### objectFromPairs + +Creates an object from the given key-value pairs. Use `Array.reduce()` to create and combine key-value pairs. diff --git a/snippets/object-to-pairs.md b/snippets/objectToPairs.md similarity index 76% rename from snippets/object-to-pairs.md rename to snippets/objectToPairs.md index fb639e432..7a6079650 100644 --- a/snippets/object-to-pairs.md +++ b/snippets/objectToPairs.md @@ -1,4 +1,6 @@ -### Object to key-value pairs +### objectToPairs + +Creates an array of key-value pair arrays from an object. Use `Object.keys()` and `Array.map()` to iterate over the object's keys and produce an array with key-value pairs. diff --git a/snippets/palindrome.md b/snippets/palindrome.md index a22007688..cca1bb729 100644 --- a/snippets/palindrome.md +++ b/snippets/palindrome.md @@ -1,4 +1,6 @@ -### Check for palindrome +### palindrome + +Returns `true` if the given string is a palindrome, `false` otherwise. Convert string `toLowerCase()` and use `replace()` to remove non-alphanumeric characters from it. Then, `split('')` into individual characters, `reverse()`, `join('')` and compare to the original, unreversed string, after converting it `tolowerCase()`. diff --git a/snippets/percentile.md b/snippets/percentile.md index eb72b711c..7485494e2 100644 --- a/snippets/percentile.md +++ b/snippets/percentile.md @@ -1,10 +1,11 @@ -### Percentile +### percentile -Use `Array.reduce()` to calculate how many numbers are below the value and how many are the same value and -apply the percentile formula. +Uses the percentile formula to calculate how many numbers in the given array are less or equal to the given value. + +Use `Array.reduce()` to calculate how many numbers are below the value and how many are the same value and apply the percentile formula. ```js -const percentile = (arr, val) => +const percentile = (arr, val) => 100 * arr.reduce((acc,v) => acc + (v < val ? 1 : 0) + (v === val ? 0.5 : 0), 0) / arr.length; // percentile([1,2,3,4,5,6,7,8,9,10], 6) -> 55 ``` diff --git a/snippets/pick.md b/snippets/pick.md index 3689e4a28..b5f5101ea 100644 --- a/snippets/pick.md +++ b/snippets/pick.md @@ -1,10 +1,11 @@ -### Pick +### pick -Use `Array.reduce()` to convert the filtered/picked keys back to a object with the corresponding key:value pair if the key exist in the obj. +Picks the key-value pairs corresponding to the given keys from an object. + +Use `Array.reduce()` to convert the filtered/picked keys back to a object with the corresponding key-value pair if the key exist in the obj. ```js const pick = (obj, arr) => arr.reduce((acc, curr) => (curr in obj && (acc[curr] = obj[curr]), acc), {}); // pick({ 'a': 1, 'b': '2', 'c': 3 }, ['a', 'c']) -> { 'a': 1, 'c': 3 } -// pick(object, ['a', 'c'])['a'] -> 1 ``` diff --git a/snippets/pipe-functions.md b/snippets/pipe.md similarity index 88% rename from snippets/pipe-functions.md rename to snippets/pipe.md index 8ec3b1bd1..b01d5137e 100644 --- a/snippets/pipe-functions.md +++ b/snippets/pipe.md @@ -1,4 +1,6 @@ -### Pipe functions +### pipe + +Performs left-to-right function composition. Use `Array.reduce()` with the spread operator (`...`) to perform left-to-right function composition. The first (leftmost) function can accept one or more arguments; the remaining functions must be unary. diff --git a/snippets/powerset.md b/snippets/powerset.md index 73b71b645..09b233212 100644 --- a/snippets/powerset.md +++ b/snippets/powerset.md @@ -1,4 +1,6 @@ -### Powerset +### powerset + +Returns the powerset of a given array of numbers. Use `Array.reduce()` combined with `Array.map()` to iterate over elements and combine into an array containing all combinations. diff --git a/snippets/promisify.md b/snippets/promisify.md index bdedec054..80a7d48d0 100644 --- a/snippets/promisify.md +++ b/snippets/promisify.md @@ -1,7 +1,9 @@ -### Promisify +### promisify -Use currying to return a function returning a `Promise` that calls the original function. -Use the `...rest` operator to pass in all the parameters. +Converts an asynchronous function to return a promise. + +Use currying to return a function returning a `Promise` that calls the original function. +Use the `...rest` operator to pass in all the parameters. *In Node 8+, you can use [`util.promisify`](https://nodejs.org/api/util.html#util_util_promisify_original)* diff --git a/snippets/pull.md b/snippets/pull.md index d20e21c5e..4913c5082 100644 --- a/snippets/pull.md +++ b/snippets/pull.md @@ -1,6 +1,8 @@ -### Array pull (mutates array) +### pull -Use `Array.filter()` and `Array.includes()` to pull out the values that are not needed. +Mutates the original array to filter out the values specified. + +Use `Array.filter()` and `Array.includes()` to pull out the values that are not needed. Use `Array.length = 0` to mutate the passed in array by resetting it's length to zero and `Array.push()` to re-populate it with only the pulled values. ```js diff --git a/snippets/random-integer-in-range.md b/snippets/randomIntegerInRange.md similarity index 78% rename from snippets/random-integer-in-range.md rename to snippets/randomIntegerInRange.md index 78bb85ab0..2d35fd279 100644 --- a/snippets/random-integer-in-range.md +++ b/snippets/randomIntegerInRange.md @@ -1,4 +1,6 @@ -### Random integer in range +### randomIntegerInRange + +Returns a random integer in the specified range. Use `Math.random()` to generate a random number and map it to the desired range, using `Math.floor()` to make it an integer. diff --git a/snippets/random-number-in-range.md b/snippets/randomNumberInRange.md similarity index 76% rename from snippets/random-number-in-range.md rename to snippets/randomNumberInRange.md index 2ff50d332..e0e329cce 100644 --- a/snippets/random-number-in-range.md +++ b/snippets/randomNumberInRange.md @@ -1,4 +1,6 @@ -### Random number in range +### randomNumberInRange + +Returns a random number in the specified range. Use `Math.random()` to generate a random value, map it to the desired range using multiplication. diff --git a/snippets/read-file-to-array.md b/snippets/readFileLines.md similarity index 74% rename from snippets/read-file-to-array.md rename to snippets/readFileLines.md index c64b61c6f..f46735aed 100644 --- a/snippets/read-file-to-array.md +++ b/snippets/readFileLines.md @@ -1,4 +1,6 @@ -### Read file as array of lines +### readFileLines + +Returns an array of lines from the specified file. Use `readFileSync` function in `fs` node package to create a `Buffer` from a file. convert buffer to string using `toString(encoding)` function. @@ -6,7 +8,7 @@ creating an array from contents of file by `split`ing file content line by line( ```js const fs = require('fs'); -const readFileToArray = filename => fs.readFileSync(filename).toString('UTF8').split('\n'); +const readFileLines = filename => fs.readFileSync(filename).toString('UTF8').split('\n'); /* contents of test.txt : line1 diff --git a/snippets/redirect-to-URL.md b/snippets/redirect.md similarity index 88% rename from snippets/redirect-to-URL.md rename to snippets/redirect.md index dab1f775b..d98e2caf2 100644 --- a/snippets/redirect-to-URL.md +++ b/snippets/redirect.md @@ -1,4 +1,6 @@ -### Redirect to URL +### redirect + +Redirects to a specified URL. Use `window.location.href` or `window.location.replace()` to redirect to `url`. Pass a second argument to simulate a link click (`true` - default) or an HTTP redirect (`false`). diff --git a/snippets/remove.md b/snippets/remove.md index df2a83867..34b10aa24 100644 --- a/snippets/remove.md +++ b/snippets/remove.md @@ -1,4 +1,6 @@ -### Array remove +### remove + +Removes elements from an array for which the given function returns `false`. Use `Array.filter()` to find array elements that return truthy values and `Array.reduce()` to remove elements using `Array.splice()`. The `func` is invoked with three arguments (`value, index, array`). diff --git a/snippets/reverse-string.md b/snippets/reverseString.md similarity index 87% rename from snippets/reverse-string.md rename to snippets/reverseString.md index 172eab6b6..a76c506db 100644 --- a/snippets/reverse-string.md +++ b/snippets/reverseString.md @@ -1,4 +1,6 @@ -### Reverse a string +### reverseString + +Reverses a string. Use array destructuring and `Array.reverse()` to reverse the order of the characters in the string. Combine characters to get a string using `join('')`. diff --git a/snippets/round-number.md b/snippets/round.md similarity index 82% rename from snippets/round-number.md rename to snippets/round.md index a35308ce0..7675c734f 100644 --- a/snippets/round-number.md +++ b/snippets/round.md @@ -1,4 +1,6 @@ -### Round number to n digits +### round + +Rounds a number to a specified amount of digits. Use `Math.round()` and template literals to round the number to the specified number of digits. Omit the second argument, `decimals` to round to an integer. diff --git a/snippets/run-promises-in-series.md b/snippets/runPromisesInSeries.md similarity index 62% rename from snippets/run-promises-in-series.md rename to snippets/runPromisesInSeries.md index c078dff8d..affbae9fe 100644 --- a/snippets/run-promises-in-series.md +++ b/snippets/runPromisesInSeries.md @@ -1,6 +1,8 @@ -### Run promises in series +### runPromisesInSeries -Run an array of promises in series using `Array.reduce()` by creating a promise chain, where each promise returns the next promise when resolved. +Runs an array of promises in series. + +Use `Array.reduce()` to create a promise chain, where each promise returns the next promise when resolved. ```js const runPromisesInSeries = ps => ps.reduce((p, next) => p.then(next), Promise.resolve()); diff --git a/snippets/sample.md b/snippets/sample.md index 9de5c5ae0..241c43167 100644 --- a/snippets/sample.md +++ b/snippets/sample.md @@ -1,4 +1,6 @@ -### Array sample +### sample + +Returns a random element from an array. Use `Math.random()` to generate a random number, multiply it with `length` and round it of to the nearest whole number using `Math.floor()`. This method also works with strings. diff --git a/snippets/scroll-to-top.md b/snippets/scrollToTop.md similarity index 88% rename from snippets/scroll-to-top.md rename to snippets/scrollToTop.md index 19064a5d5..dc172f3ee 100644 --- a/snippets/scroll-to-top.md +++ b/snippets/scrollToTop.md @@ -1,4 +1,6 @@ -### Scroll to top +### scrollToTop + +Smooth-scrolls to the top of the page. Get distance from top using `document.documentElement.scrollTop` or `document.body.scrollTop`. Scroll by a fraction of the distance from top. Use `window.requestAnimationFrame()` to animate the scrolling. diff --git a/snippets/shallow-clone.md b/snippets/shallowClone.md similarity index 80% rename from snippets/shallow-clone.md rename to snippets/shallowClone.md index 456f38462..0a6c25d82 100644 --- a/snippets/shallow-clone.md +++ b/snippets/shallowClone.md @@ -1,4 +1,6 @@ -### Shallow clone object +### shallowClone + +Creates a shallow clone of an object. Use `Object.assign()` and an empty object (`{}`) to create a shallow clone of the original. diff --git a/snippets/shuffle-array.md b/snippets/shuffle.md similarity index 51% rename from snippets/shuffle-array.md rename to snippets/shuffle.md index 85065b40a..27d7fd783 100644 --- a/snippets/shuffle-array.md +++ b/snippets/shuffle.md @@ -1,8 +1,10 @@ -### Shuffle array +### shuffle + +Randomizes the order of the values of an array. Use `Array.sort()` to reorder elements, using `Math.random()` in the comparator. ```js -const shuffleArray = arr => arr.sort(() => Math.random() - 0.5); +const shuffle = arr => arr.sort(() => Math.random() - 0.5); // shuffle([1,2,3]) -> [2,3,1] ``` diff --git a/snippets/similarity.md b/snippets/similarity.md index 44f19b7bb..1a2cc7ccb 100644 --- a/snippets/similarity.md +++ b/snippets/similarity.md @@ -1,4 +1,6 @@ -### Similarity between arrays +### similarity + +Returns an array of elements that appear in both arrays. Use `filter()` to remove values that are not part of `values`, determined using `includes()`. diff --git a/snippets/sleep.md b/snippets/sleep.md index e2a58d0bd..66a45d2ff 100644 --- a/snippets/sleep.md +++ b/snippets/sleep.md @@ -1,4 +1,6 @@ -### Sleep +### sleep + +Delays the execution of an asynchronous function. Delay executing part of an `async` function, by putting it to sleep, returning a `Promise`. diff --git a/snippets/sort-characters-in-string-(alphabetical).md b/snippets/sortCharactersInString.md similarity index 77% rename from snippets/sort-characters-in-string-(alphabetical).md rename to snippets/sortCharactersInString.md index 9cf37ad77..79c7acc0f 100644 --- a/snippets/sort-characters-in-string-(alphabetical).md +++ b/snippets/sortCharactersInString.md @@ -1,4 +1,6 @@ -### Sort characters in string (alphabetical) +### sortCharactersInString + +Alphabetically sorts the characters in a string. Split the string using `split('')`, `Array.sort()` utilizing `localeCompare()`, recombine using `join('')`. diff --git a/snippets/speech-synthesis-(experimental).md b/snippets/speechSynthesis.md similarity index 89% rename from snippets/speech-synthesis-(experimental).md rename to snippets/speechSynthesis.md index 2bfbc9c75..954d41d35 100644 --- a/snippets/speech-synthesis-(experimental).md +++ b/snippets/speechSynthesis.md @@ -1,4 +1,6 @@ -### Speech synthesis (experimental) +### speechSynthesis + +Performs speech synthesis (experimental). Use `SpeechSynthesisUtterance.voice` and `window.speechSynthesis.getVoices()` to convert a message to speech. Use `window.speechSynthesis.speak()` to play the message. diff --git a/snippets/standard-deviation.md b/snippets/standardDeviation.md similarity index 90% rename from snippets/standard-deviation.md rename to snippets/standardDeviation.md index 5819579ad..51cf4a0dd 100644 --- a/snippets/standard-deviation.md +++ b/snippets/standardDeviation.md @@ -1,4 +1,6 @@ -### Standard deviation +### standardDeviation + +Returns the standard deviation of an array of numbers. Use `Array.reduce()` to calculate the mean, variance and the sum of the variance of the values, the variance of the values, then determine the standard deviation. diff --git a/snippets/symmetric-difference.md b/snippets/symmetricDifference.md similarity index 81% rename from snippets/symmetric-difference.md rename to snippets/symmetricDifference.md index 7d178cd15..a25bb52ef 100644 --- a/snippets/symmetric-difference.md +++ b/snippets/symmetricDifference.md @@ -1,4 +1,6 @@ -### Array symmetric difference +### symmetricDifference + +Returns the symmetric difference between two arrays. Create a `Set` from each array, then use `Array.filter()` on each of them to only keep values not contained in the other. diff --git a/snippets/tail-of-list.md b/snippets/tail.md similarity index 55% rename from snippets/tail-of-list.md rename to snippets/tail.md index f41e63982..781cd2c33 100644 --- a/snippets/tail-of-list.md +++ b/snippets/tail.md @@ -1,9 +1,11 @@ -### Tail of list +### tail + +Returns all elements in an array except for the first one. Return `arr.slice(1)` if the array's `length` is more than `1`, otherwise return the whole array. ```js -const tailOfList = arr => arr.length > 1 ? arr.slice(1) : arr; +const tail = arr => arr.length > 1 ? arr.slice(1) : arr; // tail([1,2,3]) -> [2,3] // tail([1]) -> [1] ``` diff --git a/snippets/take.md b/snippets/take.md index 44d6ff0bc..85802f6a8 100644 --- a/snippets/take.md +++ b/snippets/take.md @@ -1,4 +1,6 @@ -### Take +### take + +Returns an array with n elements removed from the beggining. Use `Array.slice()` to create a slice of the array with `n` elements taken from the beginning. diff --git a/snippets/take-right.md b/snippets/takeRight.md similarity index 77% rename from snippets/take-right.md rename to snippets/takeRight.md index 1e7c55766..a8fc0e114 100644 --- a/snippets/take-right.md +++ b/snippets/takeRight.md @@ -1,4 +1,6 @@ -### Take right +### takeRight + +Returns an array with n elements removed from the end. Use `Array.slice()` to create a slice of the array with `n` elements taken from the end. diff --git a/snippets/time-taken.md b/snippets/timeTaken.md similarity index 64% rename from snippets/time-taken.md rename to snippets/timeTaken.md index ca476ac71..2c7bc181f 100644 --- a/snippets/time-taken.md +++ b/snippets/timeTaken.md @@ -1,13 +1,13 @@ -### Measure time taken by function +### timeTaken + +Measures the time taken by a function to execute. Use `console.time()` and `console.timeEnd()` to measure the difference between the start and end times to determine how long the callback took to execute. ```js const timeTaken = callback => { - console.time('timeTaken'); - const r = callback(); - console.timeEnd('timeTaken'); - return r; + console.time('timeTaken'); const r = callback(); + console.timeEnd('timeTaken'); return r; }; // timeTaken(() => Math.pow(2, 10)) -> 1024 // (logged): timeTaken: 0.02099609375ms diff --git a/snippets/to-camel-case.md b/snippets/toCamelCase.md similarity index 88% rename from snippets/to-camel-case.md rename to snippets/toCamelCase.md index f59d213ae..47a984629 100644 --- a/snippets/to-camel-case.md +++ b/snippets/toCamelCase.md @@ -1,9 +1,11 @@ -### Convert string to camelcase +### toCamelCase + +Converts a string to camelcase. Use `replace()` to remove underscores, hyphens and spaces and convert words to camelcase. ```js -const toCamelCase = str => +const toCamelCase = str => str.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2, offset) => p2 ? p2.toUpperCase() : p1.toLowerCase()); // toCamelCase("some_database_field_name") -> 'someDatabaseFieldName' // toCamelCase("Some label that needs to be camelized") -> 'someLabelThatNeedsToBeCamelized' diff --git a/snippets/to-english-date.md b/snippets/toEnglishDate.md similarity index 82% rename from snippets/to-english-date.md rename to snippets/toEnglishDate.md index 01a93cdf5..5e3038b9d 100644 --- a/snippets/to-english-date.md +++ b/snippets/toEnglishDate.md @@ -1,4 +1,6 @@ -### Convert to English date +### toEnglishDate + +Converts a date from American format to English format. Use `Date.toISOString()`, `split('T')` and `replace()` to convert a date from American format to English format. Throws an error if the passed time cannot be converted to a date. diff --git a/snippets/to-ordinal-suffix.md b/snippets/toOrdinalSuffix.md similarity index 90% rename from snippets/to-ordinal-suffix.md rename to snippets/toOrdinalSuffix.md index d3166928b..482286056 100644 --- a/snippets/to-ordinal-suffix.md +++ b/snippets/toOrdinalSuffix.md @@ -1,4 +1,6 @@ -### Ordinal suffix of number +### toOrdinalSuffix + +Adds an ordinal suffix to a number. Use the modulo operator (`%`) to find values of single and tens digits. Find which ordinal pattern digits match. diff --git a/snippets/truncate-string.md b/snippets/truncateString.md similarity index 83% rename from snippets/truncate-string.md rename to snippets/truncateString.md index 4fb103895..ea5c00237 100644 --- a/snippets/truncate-string.md +++ b/snippets/truncateString.md @@ -1,4 +1,6 @@ -### Truncate a String +### truncateString + +Truncates a string up to a specified length. Determine if the string's `length` is greater than `num`. Return the string truncated to the desired length, with `...` appended to the end or the original string. diff --git a/snippets/union.md b/snippets/union.md index 6224227d1..27427a9aa 100644 --- a/snippets/union.md +++ b/snippets/union.md @@ -1,4 +1,6 @@ -### Array union +### union + +Returns every element that exists in any of the two arrays once. Create a `Set` with all values of `a` and `b` and convert to an array. diff --git a/snippets/validate-email.md b/snippets/validateEmail.md similarity index 79% rename from snippets/validate-email.md rename to snippets/validateEmail.md index e168ac22b..cb5588474 100644 --- a/snippets/validate-email.md +++ b/snippets/validateEmail.md @@ -1,4 +1,6 @@ -### Validate email +### validateEmail + +Returns `true` if the given string is a valid email, `false` otherwise. Use a regular expression to check if the email is valid. Returns `true` if email is valid, `false` if not. diff --git a/snippets/validate-number.md b/snippets/validateNumber.md similarity index 78% rename from snippets/validate-number.md rename to snippets/validateNumber.md index 60a037e3e..8874cfce2 100644 --- a/snippets/validate-number.md +++ b/snippets/validateNumber.md @@ -1,4 +1,6 @@ -### Validate number +### validateNumber + +Returns `true` if the given value is a number, `false` otherwise. Use `!isNaN` in combination with `parseFloat()` to check if the argument is a number. Use `isFinite()` to check if the number is finite. diff --git a/snippets/without.md b/snippets/without.md index b5b41aee8..70f2a20aa 100644 --- a/snippets/without.md +++ b/snippets/without.md @@ -1,9 +1,10 @@ -### Array without +### without + +Filters out the elements of an array, that have one of the specified values. Use `Array.filter()` to create an array excluding(using `!Array.includes()`) all given values. ```js const without = (arr, ...args) => arr.filter(v => !args.includes(v)); // without([2, 1, 2, 3], 1, 2) -> [3] -// without([2, 1, 2, 3, 4, 5, 5, 5, 3, 2, 7, 7], 3, 1, 5, 2) -> [ 4, 7, 7 ] ``` diff --git a/snippets/zip.md b/snippets/zip.md index 5c3193605..c9a720e8e 100644 --- a/snippets/zip.md +++ b/snippets/zip.md @@ -1,4 +1,6 @@ -### Array zip +### zip + +Creates an array of elements, grouped based on the position in the original arrays. Use `Math.max.apply()` to get the longest array in the arguments. Creates an array with that length as return value and use `Array.from()` with a map-function to create an array of grouped elements. diff --git a/static-parts/index-end.html b/static-parts/index-end.html new file mode 100644 index 000000000..1dd086328 --- /dev/null +++ b/static-parts/index-end.html @@ -0,0 +1,6 @@ +
+

+ + + + diff --git a/static-parts/index-start.html b/static-parts/index-start.html new file mode 100644 index 000000000..0aeee1e31 --- /dev/null +++ b/static-parts/index-start.html @@ -0,0 +1,33 @@ + + + + + + 30 seconds of code + + + + + + + + + + + + + +
+

 30 seconds of code

+ +
+
+ +