Merge branch 'master' into add-pullAtIndex

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,20 @@
+<!--- Provide a general summary of your changes in the Title above -->
+
+<!--- Add the prefix [FIX: #(issue number)] or [FEATURE] to the Title -->
+
+## Description
+<!--- Describe your changes in detail -->
+**Resolves** #(issue number) <!--- Delete if not a issue fix-->
+
+## 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:
+<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
+- [ ] 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.

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.

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.

docs/index.html

@@ -22,11 +22,13 @@
     <link rel="stylesheet" href="prism.css">
   </head>
   <body>
-    <header>
-      <h1 class="logo" style="margin-top: -1rem; text-align:center;"><a style="text-decoration:none;color:black" href="https://github.com/Chalarangelo/30-seconds-of-code"><img src="favicon.png" style="height: 4rem;"/><span style="position:relative; top: -1rem;">&nbsp;30 seconds of code</span></a></h1>
+    <header style="height: 5.5rem;">
+      <h1 class="logo" style="margin-top: -0.8rem; text-align:center;"><a style="text-decoration:none;color:black" href="https://github.com/Chalarangelo/30-seconds-of-code"><img src="favicon.png" style="height: 4rem;"/><span style="position:relative; top: -1rem;">&nbsp;30 seconds of code</span></a>
+        <span style="display:block; font-size: 1rem; font-style: italic; color: grey; margin-top: -0.8rem">Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.</span>
+      </h1>
       <label for="doc-drawer-checkbox" class="button drawer-toggle" style="position: absolute; right: 0; top: 0;"></label>
     </header>
-    <div class="row" style="height: calc(100vh - 3.5625rem);overflow: hidden;">
+    <div class="row" style="height: calc(100vh - 5.875rem);overflow: hidden;">
       <input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
         <nav class="col-md-4 col-lg-3" style="border-top: 0">
           <label for="doc-drawer-checkbox" class="button drawer-close"></label>
@@ -133,6 +135,7 @@
 </h3><a class="sublink-1" href="#anagrams">anagrams</a>
 <a class="sublink-1" href="#capitalize">capitalize</a>
 <a class="sublink-1" href="#capitalizeeveryword">capitalizeEveryWord</a>
+<a class="sublink-1" href="#countvowels">countVowels</a>
 <a class="sublink-1" href="#escaperegexp">escapeRegExp</a>
 <a class="sublink-1" href="#fromcamelcase">fromCamelCase</a>
 <a class="sublink-1" href="#reversestring">reverseString</a>
@@ -159,7 +162,7 @@
 <a class="sublink-1" href="#validateemail">validateEmail</a>
 <a class="sublink-1" href="#validatenumber">validateNumber</a>
 
-</nav><main class="col-sm-12 col-md-8 col-lg-9" style="height: 100%;overflow-y: auto; background: #eee;"><h2 style="text-align:center;">Array</h2>
+</nav><main class="col-sm-12 col-md-8 col-lg-9" style="height: 100%;overflow-y: auto; background: #eee;"><a id="top">&nbsp;</a><h2 style="text-align:center;">Array</h2>
 <div class="card fluid"><div class="section double-padded"><h3 id="arraymax">arrayMax</h3></div><div class="section double-padded">
 <p>Returns the maximum value in an array.</p>
 <p>Use <code>Math.max()</code> combined with the spread operator (<code>...</code>) to get the maximum value in the array.</p>
@@ -884,6 +887,14 @@ Omit the <code>lowerRest</code> parameter to keep the rest of the string intact,
 <pre><code class="language-js">const capitalizeEveryWord = str =&gt; str.replace(/\b[a-z]/g, char =&gt; char.toUpperCase());
 // capitalizeEveryWord('hello world!') -&gt; 'Hello World!'
 </code></pre>
+</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="countvowels">countVowels</h3></div><div class="section double-padded">
+<p>Retuns <code>number</code> of vowels in provided string.</p>
+<p>Use a regular expression to count number of vowels <code>(A, E, I, O, U)</code> in a <code>string</code>.</p>
+<pre><code class="language-js">const countVowels = str =&gt;
+  return (str.match(/[aeiou]/ig) || []).length;
+// countVowels('foobar') -&gt; 3
+// countVowels('gym') -&gt; 0
+</code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="escaperegexp">escapeRegExp</h3></div><div class="section double-padded">
 <p>Escapes a string to use in a regular expression.</p>
 <p>Use <code>replace()</code> to escape special characters.</p>
@@ -1072,7 +1083,10 @@ Use <code>Number()</code> to check if the coercion holds.</p>
 // validateNumber('10') -&gt; true
 </code></pre>
 </div></div><br/>
-        <footer><p><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br/>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.</p></footer>
+        <footer>
+          <p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br/>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.</p>
+          <a href="#top"><p style="display: inline-block;float: right;padding-right: 2em;">Back to top</p></a>
+        </footer>
       </main>
     </div>
     <script src="prism.js"></script>

scripts/web-script.js

@@ -60,6 +60,7 @@ try {
     output += '\n';
   }
   output += `</nav><main class="col-sm-12 col-md-8 col-lg-9" style="height: 100%;overflow-y: auto; background: #eee;">`;
+  output += `<a id="top">&nbsp;</a>`;
   // 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(/<h2>/g,'<h2 style="text-align:center;">');

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
 ```

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
+```

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]
+```

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]

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) -> []
+```

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]
+  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]
 ```

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

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));

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' ]
+```

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'
 ```

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'
+```

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]

static-parts/index-end.html

@@ -1,4 +1,7 @@
-        <footer><p><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br/>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.</p></footer>
+        <footer>
+          <p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br/>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.</p>
+          <a href="#top"><p style="display: inline-block;float: right;padding-right: 2em;">Back to top</p></a>
+        </footer>
       </main>
     </div>
     <script src="prism.js"></script>

static-parts/index-start.html

@@ -22,11 +22,13 @@
     <link rel="stylesheet" href="prism.css">
   </head>
   <body>
-    <header>
-      <h1 class="logo" style="margin-top: -1rem; text-align:center;"><a style="text-decoration:none;color:black" href="https://github.com/Chalarangelo/30-seconds-of-code"><img src="favicon.png" style="height: 4rem;"/><span style="position:relative; top: -1rem;">&nbsp;30 seconds of code</span></a></h1>
+    <header style="height: 5.5rem;">
+      <h1 class="logo" style="margin-top: -0.8rem; text-align:center;"><a style="text-decoration:none;color:black" href="https://github.com/Chalarangelo/30-seconds-of-code"><img src="favicon.png" style="height: 4rem;"/><span style="position:relative; top: -1rem;">&nbsp;30 seconds of code</span></a>
+        <span style="display:block; font-size: 1rem; font-style: italic; color: grey; margin-top: -0.8rem">Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.</span>
+      </h1>
       <label for="doc-drawer-checkbox" class="button drawer-toggle" style="position: absolute; right: 0; top: 0;"></label>
     </header>
-    <div class="row" style="height: calc(100vh - 3.5625rem);overflow: hidden;">
+    <div class="row" style="height: calc(100vh - 5.875rem);overflow: hidden;">
       <input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
         <nav class="col-md-4 col-lg-3" style="border-top: 0">
           <label for="doc-drawer-checkbox" class="button drawer-close"></label>

tag_database

@@ -15,6 +15,7 @@ collatz:math
 compact:array
 compose:function
 countOccurrences:array
+countVowels:string
 currentURL:browser
 curry:function
 deepFlatten:array
@@ -72,6 +73,7 @@ powerset:math
 promisify:function
 pull:array
 pullAtIndex:array
+pullAll:array
 randomIntegerInRange:math
 randomNumberInRange:math
 readFileLines:node