diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 000000000..940c318b4 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,20 @@ + + + + +## Description + +**Resolves** #(issue number) + +## Types of changes +- [ ] Bug fix (non-breaking change which fixes an issue) +- [ ] New feature (non-breaking change which adds functionality) +- [ ] Breaking change (fix or feature that would cause existing functionality to change) + +## Checklist: + +- [ ] My code follows the code style of this project. +- [ ] My change requires a change to the documentation. +- [ ] I have updated the documentation accordingly. +- [ ] I have checked that there isn't any PR doing the same +- [ ] I have read the **CONTRIBUTING** document. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 4b1164232..ac39ceccc 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -24,7 +24,7 @@ Here's what you can do to help: - 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. - - Use ES6 notation to define your function. For example `const myFunction = arg1, arg2 => { }`. + - Use ES6 notation to define your function. For example `const myFunction = ( arg1, arg2 ) => { }`. - Try to keep your snippets' code short and to the point. Use modern techniques and features. Make sure to test your code before submitting. - All snippets must be followed by one (more if necessary) test case after the code, on a new line, in the form of a comment, along with the expected output. The syntax for this is `myFunction('testInput') -> 'testOutput'`. Use multiline comments only if necessary. - Try to make your function name unique, so that it does not conflict with existing snippets. @@ -57,7 +57,7 @@ Here's what you can do to help: - Use `()` if your function takes no arguments. - Use `_` if an argument inside some function (e.g. `Array.reduce()`) is not used anywhere in your code. - Specify default parameters for arguments, if necessary. It is preferred to put default parameters last unless you have pretty good reason not to. -- If your snippet's function takes variadic arguments, use `..args` (although in certain cases, it might be needed to use a different name). +- If your snippet's function takes variadic arguments, use `...args` (although in certain cases, it might be needed to use a different name). - If your snippet function's body is a single statement, omit the `return` keyword and use an expression instead. - Always use soft tabs (2 spaces), never hard tabs. - Omit curly braces (`{` and `}`) whenever possible. diff --git a/README.md b/README.md index c4a6765d3..c13cf2fad 100644 --- a/README.md +++ b/README.md @@ -110,6 +110,7 @@ * [`anagrams`](#anagrams) * [`capitalize`](#capitalize) * [`capitalizeEveryWord`](#capitalizeeveryword) +* [`countVowels`](#countvowels) * [`escapeRegExp`](#escaperegexp) * [`fromCamelCase`](#fromcamelcase) * [`reverseString`](#reversestring) @@ -251,12 +252,12 @@ const distinctValuesOfArray = arr => [...new Set(arr)]; 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`. +Loop through the array, using `Array.slice()` 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(); + while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1); return arr; }; // dropElements([1, 2, 3, 4], n => n >= 3) -> [3,4] @@ -1452,6 +1453,21 @@ const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperC [⬆ back to top](#table-of-contents) +### countVowels + +Retuns `number` of vowels in provided string. + +Use a regular expression to count number of vowels `(A, E, I, O, U)` in a `string`. + +```js +const countVowels = str => + return (str.match(/[aeiou]/ig) || []).length; +// countVowels('foobar') -> 3 +// countVowels('gym') -> 0 +``` + +[⬆ back to top](#table-of-contents) + ### escapeRegExp Escapes a string to use in a regular expression. diff --git a/docs/index.html b/docs/index.html index 7c2e08821..d0c93846e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -22,11 +22,13 @@ -
-

 30 seconds of code

+
+

 30 seconds of code + Curated collection of useful Javascript snippets that you can understand in 30 seconds or less. +

-
+

Array

+
 

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.

@@ -884,6 +887,14 @@ Omit the lowerRest parameter to keep the rest of the string intact, 
const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());
 // capitalizeEveryWord('hello world!') -> 'Hello World!'
+

countVowels

+

Retuns number of vowels in provided string.

+

Use a regular expression to count number of vowels (A, E, I, O, U) in a string.

+
const countVowels = str =>
+  return (str.match(/[aeiou]/ig) || []).length;
+// countVowels('foobar') -> 3
+// countVowels('gym') -> 0
+

escapeRegExp

Escapes a string to use in a regular expression.

Use replace() to escape special characters.

@@ -1072,9 +1083,12 @@ Use Number() to check if the coercion holds.

// validateNumber('10') -> true

- +
-
+
diff --git a/scripts/web-script.js b/scripts/web-script.js index edc221de3..27e84fcc4 100644 --- a/scripts/web-script.js +++ b/scripts/web-script.js @@ -60,6 +60,7 @@ try { output += '\n'; } output += `
`; + output += ` `; // 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,'

'); diff --git a/snippets/bottomVisible.md b/snippets/bottomVisible.md index 8e655db45..adac44881 100644 --- a/snippets/bottomVisible.md +++ b/snippets/bottomVisible.md @@ -6,6 +6,6 @@ Use `scrollY`, `scrollHeight` and `clientHeight` to determine if the bottom of t ```js const bottomVisible = () => - document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight || document.documentElement.clientHeight; + document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight); // bottomVisible() -> true ``` diff --git a/snippets/countVowels.md b/snippets/countVowels.md new file mode 100644 index 000000000..bf1f536fc --- /dev/null +++ b/snippets/countVowels.md @@ -0,0 +1,11 @@ +### countVowels + +Retuns `number` of vowels in provided string. + +Use a regular expression to count number of vowels `(A, E, I, O, U)` in a `string`. + +```js +const countVowels = str => (str.match(/[aeiou]/ig) || []).length; +// countVowels('foobar') -> 3 +// countVowels('gym') -> 0 +``` diff --git a/snippets/differenceWith.md b/snippets/differenceWith.md new file mode 100644 index 000000000..ba4aac0ec --- /dev/null +++ b/snippets/differenceWith.md @@ -0,0 +1,10 @@ +### differenceWith + +Filters out all values from an array for which the comparator function does not return `true`. + +Use `Array.filter()` and `Array.find()` to find the appropriate values. + +```js +const differenceWith = (arr, val, comp) => arr.filter(a => !val.find(b => comp(a, b))) +// differenceWith([1, 1.2, 1.5, 3], [1.9, 3], (a,b) => Math.round(a) == Math.round(b)) -> [1, 1.2] +``` diff --git a/snippets/dropElements.md b/snippets/dropElements.md index 34138eb93..adc81d79d 100644 --- a/snippets/dropElements.md +++ b/snippets/dropElements.md @@ -2,12 +2,12 @@ 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`. +Loop through the array, using `Array.slice()` 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(); + while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1); return arr; }; // dropElements([1, 2, 3, 4], n => n >= 3) -> [3,4] diff --git a/snippets/dropRight.md b/snippets/dropRight.md new file mode 100644 index 000000000..d1a56d764 --- /dev/null +++ b/snippets/dropRight.md @@ -0,0 +1,12 @@ +### dropRight + +Returns a new array with `n` elements removed from the right + +Check if `n` is shorter than the given array and use `Array.slice()` to slice it accordingly or return an empty array. + +```js +const dropRight = (arr, n = 1) => n < arr.length ? arr.slice(0, arr.length - n) : [] +//dropRight([1,2,3]) -> [1,2] +//dropRight([1,2,3], 2) -> [1] +//dropRight([1,2,3], 42) -> [] +``` diff --git a/snippets/initializeArrayWithRange.md b/snippets/initializeArrayWithRange.md index 75dbc8adf..c3ef5a0a0 100644 --- a/snippets/initializeArrayWithRange.md +++ b/snippets/initializeArrayWithRange.md @@ -1,12 +1,13 @@ ### initializeArrayWithRange -Initializes an array containing the numbers in the specified range. +Initializes an array containing the numbers in the specified range where `start` and `end` are inclusive. -Use `Array(end-start)` to create an array of the desired length, `Array.map()` to fill with the desired values in a range. +Use `Array((end + 1) - 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); -// initializeArrayWithRange(5) -> [0,1,2,3,4] +const initializeArrayWithRange = (end, start = 0) => + Array.from({ length: (end + 1) - start }).map((v, i) => i + start); +// initializeArrayWithRange(5) -> [0,1,2,3,4,5] +// initializeArrayWithRange(7, 3) -> [3,4,5,6,7] ``` diff --git a/snippets/median.md b/snippets/median.md index fd8ca3d7c..c7eea609c 100644 --- a/snippets/median.md +++ b/snippets/median.md @@ -7,7 +7,7 @@ Return the number at the midpoint if `length` is odd, otherwise the average of t ```js const median = arr => { - const mid = Math.floor(arr.length / 2), nums = arr.sort((a, b) => a - b); + 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 diff --git a/snippets/pull.md b/snippets/pull.md index 4913c5082..42efe6c1b 100644 --- a/snippets/pull.md +++ b/snippets/pull.md @@ -5,6 +5,8 @@ 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. +_(For a snippet that does not mutate the original array see [`without`](#without))_ + ```js const pull = (arr, ...args) => { let pulled = arr.filter((v, i) => !args.includes(v)); diff --git a/snippets/pullAll.md b/snippets/pullAll.md new file mode 100644 index 000000000..ab8bf2285 --- /dev/null +++ b/snippets/pullAll.md @@ -0,0 +1,16 @@ +### pullAll + +Mutates the original array to filter out the values specified (accepts an array of values). + +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 +const pullAll = (arr, pullArr) => { + let pulled = arr.filter((v, i) => !pullArr.includes(v)); + arr.length = 0; pulled.forEach(v => arr.push(v)); +} +// let myArray = ['a', 'b', 'c', 'a', 'b', 'c']; +// pullAll(myArray, ['a', 'c']); +// console.log(myArray) -> [ 'b', 'b' ] +``` diff --git a/snippets/reverseString.md b/snippets/reverseString.md index a76c506db..5564a5897 100644 --- a/snippets/reverseString.md +++ b/snippets/reverseString.md @@ -2,10 +2,10 @@ Reverses a string. -Use array destructuring and `Array.reverse()` to reverse the order of the characters in the string. +Use `split('')` and `Array.reverse()` to reverse the order of the characters in the string. Combine characters to get a string using `join('')`. ```js -const reverseString = str => [...str].reverse().join(''); +const reverseString = str => str.split('').reverse().join(''); // reverseString('foobar') -> 'raboof' ``` diff --git a/snippets/select.md b/snippets/select.md new file mode 100644 index 000000000..6f60f4d95 --- /dev/null +++ b/snippets/select.md @@ -0,0 +1,13 @@ +### select + +Retrieve a property that indicated by the selector from object. + +If property not exists returns `undefined`. + +```js +const select = (from, selector) => + selector.split('.').reduce((prev, cur) => prev && prev[cur], from); + +// const obj = {selector: {to: {val: 'val to select'}}}; +// select(obj, 'selector.to.val'); -> 'val to select' +``` diff --git a/snippets/without.md b/snippets/without.md index 70f2a20aa..532ec26d9 100644 --- a/snippets/without.md +++ b/snippets/without.md @@ -4,6 +4,8 @@ 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. +_(For a snippet that mutates the original array see [`pull`](#pull))_ + ```js const without = (arr, ...args) => arr.filter(v => !args.includes(v)); // without([2, 1, 2, 3], 1, 2) -> [3] diff --git a/static-parts/index-end.html b/static-parts/index-end.html index 1dd086328..6ea0075e4 100644 --- a/static-parts/index-end.html +++ b/static-parts/index-end.html @@ -1,6 +1,9 @@ - +

- + diff --git a/static-parts/index-start.html b/static-parts/index-start.html index 0aeee1e31..fd9fdc1f8 100644 --- a/static-parts/index-start.html +++ b/static-parts/index-start.html @@ -22,11 +22,13 @@ -
-

 30 seconds of code

+
+

 30 seconds of code + Curated collection of useful Javascript snippets that you can understand in 30 seconds or less. +

-
+