Merge pull request #1 from Chalarangelo/master

scc

.github/PULL_REQUEST_TEMPLATE.md

@@ -6,6 +6,9 @@
 <!--- Describe your changes in detail -->
 **Resolves** #(issue number) <!--- Delete if not a issue fix-->
 
+<!--- Provide a link to the method your trying to [ADD] or [UPDATE] in the Description -->
+**Lodash[ACTION]** #100 -> https://lodash.com/docs/4.17.4#(method) <!--- Delete if not a Lodash[ADD OR UPDATE] -->
+
 ## What does your PR belong to?
 - [ ] Website
 - [ ] Snippets
@@ -17,6 +20,12 @@
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to change)
 
+## [Lodash Backlog](https://github.com/Chalarangelo/30-seconds-of-code/issues/100)
+<!--- Provide a link to the method your trying to [ADD] or [UPDATE] in the Description above -->
+<!--- Add the prefix [UPDATE: `method.md`] or [ADD: `method.md`] to the Title & Desciption -->
+- [ ] I added the prefix [UPDATE: `method.md`] or [ADD: `method.md`]
+- [ ] I have referenced the `method` to the lodash backlog.
+
 ## 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.

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 currentSnippet\.js
 *.md.temp.js
 .idea
+test.sh

.travis.yml

@@ -0,0 +1,17 @@
+language: node_js
+node_js:
+  - node
+before_install:
+  - npm install webber
+  - npm install builder
+  - npm install tagger
+script:
+  - npm run tagger
+  - npm run builder
+  - npm run webber
+after_success:
+  - chmod +x .travis/push.sh
+  - sudo .travis/push.sh
+env:
+  global:
+    - secure: Zqx82XiLeEuyZXNn3Dzv9Ll+UyldEpE1TjMO+BsUWcw3ZXkJDtROYpaH1reGKoHErCtS4SM0pzuRyLwehl3uFizKrvrC1g/SRdrKFr5YiUDeIssKrGtsHsfwHalkgQAw9OEkzKDKknWF++mPrMdQI8kF0wDKxSAaxqbZNKmXnNgEiToDh0cRE+B5mu5+0k/Lk0hZkSJszcK69xF+03ggq3Xx1uwf6u2L1QQApJyNKcCwp/cc3dCo0bXCtAsPdBO/78PphkNE9e9Mnz7+E3brr8foo70aAUrUoLb7+OAqhvRQl1icjMdSFsXpVCQdajqRA1AT3MBenD/7+JORx5Gt+VRSa8dvuvjuV1PFEBy8AEi8jH7XTtnfMCxYJwyr5m3rkkcMG+qqiGr/EDxrF07sM93QTqN8jcSA9shLaxhIEwujBUInGLLUEDo1mtDQYKF0sa0OrL4vzbcQf0FiANwzZ8Qh++p7WJ0eBgNMtWf33PZDuFOouN+vBxsIYeyh4WE+DMLw9+khKM5CsKpUm8CAPnCDhgBw3tC6G9H5aIhhmysDIlqai6rPS5OjzSyQf/JV8rI0tMS/swE4ydbeUixCTYhJF4puEjlfWAsi3raBSsWSde2IOj3hZ2mwruLc/fT2TY11BeqyOZ4jO/laR3g7oejrY+/cck/9weKrA8XWq3k=

.travis/push.sh

@@ -0,0 +1,20 @@
+#!/bin/sh
+
+setup_git() {
+  git config --global user.email "david10608@gmail.com"
+  git config --global user.name "Pl4gue"
+}
+
+commit_website_files() {
+  git checkout master
+  git add *
+  git commit --message "Travis build: $TRAVIS_BUILD_NUMBER"
+}
+
+upload_files() {
+  git push --force --quiet "https://${GH_TOKEN}@github.com/Chalarangelo/30-seconds-of-code.git" master > /dev/null 2>&1
+}
+
+setup_git
+commit_website_files
+upload_files

COLLABORATING.md

@@ -0,0 +1,24 @@
+# Collaborator team rules and guidelines for community moderation
+
+**As a contributor/member of the community, remember that you can always open issues about moderation and problems with how community moderation is done. We are always open to constructive criticism and feedback!**
+
+## Responsibilities of a collaborator
+
+As a member of the team that manages **30 seconds of code**, you have the following responsibilities:
+
+- **Be part of the conversation in the issue tracker.** That includes (but is not limited to) helping out new members, discussing new features and explaining decisions to people.
+- **Review pull requests.** You do not have to read through all of the pull requests and review them, but taking the time each day to review a few can help a great deal.
+- **Be civil and polite.** If you are about to lose your temper, take a step back and go do something else. We want our interactions with the community to be polite, so that more people can join the project and contribute in any way they can. Remember to always thank contributors for their help, even if it's minor changes or changes that did not make it into the project. This way we can reward and encourage people to keep being part of the community.
+- **Contribute when you want, moderate when you can.** If you have a lot on your plate outside of this project, it's alright. It's better to take a break for a few days rather than hastily deal with issues and pull requests that might break things.
+
+## Guidelines for merging pull requests and making changes to the project
+
+- **[Usual guidelines](https://github.com/Chalarangelo/30-seconds-of-code/blob/master/CONTRIBUTING.md) apply.** Make sure to follow them, like everybody else.
+- **For a pull request to be considered ready to merge, there should be at least 2 (preferrably 3) reviews approving it for merge.** There are, however, certain exceptions:
+  - **If a pull request only fixes typos**, there is no need to wait for a second reviewer (unless you are not absolutely certain these were not typos in the first place).
+  - **If a pull request only clarifies a snippet's description or enforces the styleguide for an existng snippet**, you might be able to merge it without getting a second reviewer to review it, but only if you are absolutely certain about it.
+  - **Make sure pull requests pass the Travis CI build**, otherwise try and find out what's wrong and inform the author of the pull request.
+  - **Changes to build scripts, guidelines and things that might break the processes we have in place need to be reviewed by [@Chalarangelo](https://github.com/Chalarangelo)** (this is temporary, but we need a baseline to make sure we break as few things as possible in the beginning).
+- **After merging a pull request, make sure to check for untagged snippets and tag them appropriately.** Try to keep all snippets tagged, so that the list and website are up to date.
+- **If you make changes or additions to existing snippets or if you want to add you own snippets, you will go through the pull request process that everyone else goes.** Exceptions apply similarly to the ones mentioned above about merging pull requests (i.e. typos, description clarification and the way script and build process changes are handled). Pull requests suggested by collaborators should be reviewed by at least two other collaborators to be considered ready to merge.
+- **Pull requests that are inactive for over a week should be closed or put on hold.**

CONTRIBUTING.md

@@ -12,7 +12,7 @@ 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.
+- **DO NOT MODIFY THE README.md FILE!** Make changes to individual snippet files. You can optionally run `npm run builder` 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 `### 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).

README.md

@@ -1,6 +1,6 @@
 ![Logo](/logo.png)
 
-# 30 seconds of code [![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/30-seconds-of-code/Lobby)
+# 30 seconds of code [![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/30-seconds-of-code/Lobby) [![Travis Build](https://travis-ci.org/Chalarangelo/30-seconds-of-code.svg?branch=master)](https://travis-ci.org/Chalarangelo/30-seconds-of-code)
 > Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.
 
 - Use <kbd>Ctrl</kbd> + <kbd>F</kbd> or <kbd>command</kbd> + <kbd>F</kbd> to search for a snippet.
@@ -11,6 +11,7 @@
 ## Table of Contents
 
 ### Array
+* [`arrayGcd`](#arraygcd)
 * [`arrayMax`](#arraymax)
 * [`arrayMin`](#arraymin)
 * [`chunk`](#chunk)
@@ -51,6 +52,7 @@
 * [`union`](#union)
 * [`without`](#without)
 * [`zip`](#zip)
+* [`zipObject`](#zipobject)
 
 ### Browser
 * [`arrayToHtmlList`](#arraytohtmllist)
@@ -59,6 +61,7 @@
 * [`elementIsVisibleInViewport`](#elementisvisibleinviewport)
 * [`getScrollPosition`](#getscrollposition)
 * [`getURLParameters`](#geturlparameters)
+* [`httpsRedirect`](#httpsredirect)
 * [`redirect`](#redirect)
 * [`scrollToTop`](#scrolltotop)
 
@@ -80,6 +83,7 @@
 ### Math
 * [`arrayAverage`](#arrayaverage)
 * [`arraySum`](#arraysum)
+* [`clampNumber`](#clampnumber)
 * [`collatz`](#collatz)
 * [`digitize`](#digitize)
 * [`distance`](#distance)
@@ -87,6 +91,7 @@
 * [`fibonacci`](#fibonacci)
 * [`gcd`](#gcd)
 * [`hammingDistance`](#hammingdistance)
+* [`inRange`](#inrange)
 * [`isArmstrongNumber`](#isarmstrongnumber)
 * [`isDivisible`](#isdivisible)
 * [`isEven`](#iseven)
@@ -96,6 +101,7 @@
 * [`palindrome`](#palindrome)
 * [`percentile`](#percentile)
 * [`powerset`](#powerset)
+* [`primes`](#primes)
 * [`randomIntegerInRange`](#randomintegerinrange)
 * [`randomNumberInRange`](#randomnumberinrange)
 * [`round`](#round)
@@ -151,6 +157,23 @@
 
 ## Array
 
+### arrayGcd
+
+Calculates the greatest common denominator (gcd) of an array of numbers.
+
+Use `Array.reduce()` and the `gcd` formula (uses recursion) to calculate the greatest common denominator of an array of numbers.
+
+```js
+const arrayGcd = arr =>{
+  const gcd = (x, y) => !y ? x : gcd(y, x % y);
+  return arr.reduce((a,b) => gcd(a,b));
+}
+// arrayGcd([1,2,3,4,5]) -> 1
+// arrayGcd([4,8,12]) -> 4
+```
+
+[⬆ back to top](#table-of-contents)
+
 ### arrayMax
 
 Returns the maximum value in an array.
@@ -532,8 +555,10 @@ _(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.toString().split(',').includes(v));
+  let argState = Array.isArray(args[0]) ? args[0] : args;
-  arr.length = 0; pulled.forEach(v => arr.push(v));
+  let pulled = arr.filter((v, i) => !argState.includes(v));
+  arr.length = 0; 
+  pulled.forEach(v => arr.push(v));
 };
 
 // let myArray1 = ['a', 'b', 'c', 'a', 'b', 'c'];
@@ -764,6 +789,20 @@ const zip = (...arrays) => {
 //zip(['a'], [1, 2], [true, false]); -> [['a', 1, true], [undefined, 2, false]]
 ```
 
+[⬆ back to top](#table-of-contents)
+
+### zipObject
+
+Given an array of valid property identifiers and an array of values, return an object associating the properties to the values.
+
+Since an object can have undefined values but not undefined property pointers, the array of properties is used to decide the structure of the resulting object using `Array.reduce()`.
+
+```js
+const zipObject = ( props, values ) => props.reduce( ( obj, prop, index ) => ( obj[prop] = values[index], obj ), {} )
+// zipObject(['a','b','c'], [1,2]) -> {a: 1, b: 2, c: undefined}
+// zipObject(['a','b'], [1,2,3]) -> {a: 1, b: 2}
+```
+
 [⬆ back to top](#table-of-contents)
 ## Browser
 
@@ -864,6 +903,20 @@ const getURLParameters = url =>
 
 [⬆ back to top](#table-of-contents)
 
+### httpsRedirect
+
+Redirects the page to HTTPS if its currently in HTTP. Also, pressing the back button doesn't take it back to the HTTP page as its replaced in the history.
+
+Use `location.protocol` to get the protocol currently being used. If it's not HTTPS, use `location.replace()` to replace the existing page with the HTTPS version of the page. Use `location.href` to get the full address, split it with `String.split()` and remove the protocol part of the URL.  
+
+```js
+const httpsRedirect = () => {
+  if(location.protocol !== "https:") location.replace("https://" + location.href.split("//")[1]);
+}
+```
+
+[⬆ back to top](#table-of-contents)
+
 ### redirect
 
 Redirects to a specified URL.
@@ -1117,6 +1170,26 @@ const arraySum = arr => arr.reduce((acc, val) => acc + val, 0);
 
 [⬆ back to top](#table-of-contents)
 
+### clampNumber
+
+Clamps `num` within the inclusive `lower` and `upper` bounds.
+
+If `lower` is greater than `upper`, swap them. 
+If `num` falls within the range, return `num`. 
+Otherwise return the nearest number in the range.
+
+```js
+const clampNumber = (num, lower, upper) => {
+  if(lower > upper) upper = [lower, lower = upper][0];
+  return (num>=lower && num<=upper) ? num : ((num < lower) ? lower : upper) 
+}
+// clampNumber(2, 3, 5) -> 3
+// clampNumber(1, -1, -5) -> -1
+// clampNumber(3, 2, 4) -> 3
+```
+
+[⬆ back to top](#table-of-contents)
+
 ### collatz
 
 Applies the Collatz algorithm.
@@ -1185,7 +1258,7 @@ Use `Array.reduce()` to add values into the array, using the sum of the last two
 
 ```js
 const fibonacci = n =>
-  Array(n).fill(0).reduce((acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i), []);
+  Array.from({ length: n}).map(v => 0).reduce((acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i), []);
 // fibonacci(5) -> [0,1,1,2,3]
 ```
 
@@ -1221,6 +1294,26 @@ const hammingDistance = (num1, num2) =>
 
 [⬆ back to top](#table-of-contents)
 
+### inRange
+
+Checks if the given number falls in the given range. 
+
+Use arithmetic comparison to check if the given number is in the specified range.
+If the second parameter, `end`, is not specified, the reange is considered to be from `0` to `start`.
+
+```js
+const inRange = (n, start, end=null) => {
+  if(end && start > end) end = [start, start=end][0];
+  return (end == null) ? (n>=0 && n<start) : (n>=start && n<end);
+}
+// inRange(3, 2, 5) -> true
+// inRange(3, 4) -> true
+// inRange(2, 3, 5) -> false
+// inrange(3, 2) -> false
+```
+
+[⬆ back to top](#table-of-contents)
+
 ### isArmstrongNumber
 
 Checks if the given number is an armstrong number or not.
@@ -1362,6 +1455,25 @@ const powerset = arr =>
 
 [⬆ back to top](#table-of-contents)
 
+### primes 
+
+Generates primes up to a given number, using the Sieve of Eratosthenes.
+
+Generate an array from `2` to the given number. Use `Array.filter()` to filter out the values divisible by any number from `2` to the square root of the provided number.
+
+```js
+const primes = num => {
+  let arr =  Array.from({length:num-1}).map((x,i)=> i+2), 
+    sqroot  = Math.floor(Math.sqrt(num)),
+    numsTillSqroot  = Array.from({length:sqroot-1}).map((x,i)=> i+2);
+  numsTillSqroot.forEach(x => arr = arr.filter(y => ((y%x)!==0)||(y==x)));
+  return arr; 
+}
+// primes(10) -> [2,3,5,7] 
+```
+
+[⬆ back to top](#table-of-contents)
+
 ### randomIntegerInRange
 
 Returns a random integer in the specified range.
@@ -1549,7 +1661,7 @@ const orderBy = (arr, props, orders) =>
   arr.sort((a, b) =>
     props.reduce((acc, prop, i) => {
       if (acc === 0) {
-        const [p1, p2] = orders[i] === 'asc' ? [a[prop], b[prop]] : [b[prop], a[prop]];
+        const [p1, p2] = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]];
         acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
       }
       return acc;

docs/index.html

@@ -8,24 +8,11 @@
     <meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
     <meta name="keywords" content="javascript, snippets, code, programming">
     <meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta property="og:title" content="30 seconds of code">
-    <meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
+    <meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."/>
-    <meta property="og:type" content="website" /><meta property="og:image" content="favicon.png">
+    <meta property="og:type" content="website"/><meta property="og:image" content="favicon.png">
     <link rel="icon" type="image/png" href="favicon.png">
-    <style>
-      html, * { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; }
-      code, pre, kbd, code *, pre *, kbd * { font-family: 'Inconsolata', Menlo, Consolas, monospace; }
-      code, kbd { font-size: 1em; }
-      code { transform: scale(1); } /* Deals with the issue described in #243 */
-      pre { font-size: 1rem; border: 0.0625rem solid var(--secondary-border-color); border-radius: var(--universal-border-radius);}
-      .group{position:relative;margin-top:2em;margin-bottom:-1em}
-      .search{font-size:14px;margin-top:-.1em;display:block;width:100%;border:none;border-bottom:1px solid var(--nav-link-color)}
-      .search:focus{outline:none}
-      label#search-label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;left:5px;top:10px}
-      .search:focus ~ label#search-label,.search:valid ~ label#search-label{top:-20px;font-size:14px;color:var(--nav-link-color)}
-      label#menu-toggle { width: 3.4375rem;}
-    </style>
     <link rel="stylesheet" href="prism.css">
   </head>
   <script>
@@ -36,16 +23,16 @@
     }
   </script>
   <body>
-    <a href="https://github.com/Chalarangelo/30-seconds-of-code" class="github-corner" aria-label="View source on Github"><svg width="90" height="90" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+    <a href="https://github.com/Chalarangelo/30-seconds-of-code" class="github-corner" aria-label="View source on Github"><svg width="90" height="90" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
-    <header style="height: 5.5rem;">
+    <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>
+      <h1 class="logo" href="https://github.com/Chalarangelo/30-seconds-of-code"><img src="favicon.png" style="height:4rem"/><span id="title">&nbsp;30 seconds of code</span>
-        <small 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.</small>
+        <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
       </h1>
-      <label for="doc-drawer-checkbox" class="button drawer-toggle" style="position: absolute; left: 0; top: 0;width: 3.4375rem;"></label>
+      <label for="doc-drawer-checkbox" class="button drawer-toggle" id="menu-toggle"></label>
     </header>
-    <div class="row" style="height: calc(100vh - 5.875rem);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">
+        <nav class="col-md-4 col-lg-3" style="border-top:0">
           <div class="group">
           <input class="search" type="text" id="searchInput" onkeyup="search(this)">
           <span class="highlight"></span>
@@ -55,7 +42,8 @@
           <label for="doc-drawer-checkbox" class="button drawer-close"></label>
 
 <h3>Array
-</h3><a class="sublink-1" href="#arraymax">arrayMax</a>
+</h3><a class="sublink-1" href="#arraygcd">arrayGcd</a>
+<a class="sublink-1" href="#arraymax">arrayMax</a>
 <a class="sublink-1" href="#arraymin">arrayMin</a>
 <a class="sublink-1" href="#chunk">chunk</a>
 <a class="sublink-1" href="#compact">compact</a>
@@ -95,6 +83,7 @@
 <a class="sublink-1" href="#union">union</a>
 <a class="sublink-1" href="#without">without</a>
 <a class="sublink-1" href="#zip">zip</a>
+<a class="sublink-1" href="#zipobject">zipObject</a>
 
 <h3>Browser
 </h3><a class="sublink-1" href="#arraytohtmllist">arrayToHtmlList</a>
@@ -103,6 +92,7 @@
 <a class="sublink-1" href="#elementisvisibleinviewport">elementIsVisibleInViewport</a>
 <a class="sublink-1" href="#getscrollposition">getScrollPosition</a>
 <a class="sublink-1" href="#geturlparameters">getURLParameters</a>
+<a class="sublink-1" href="#httpsredirect">httpsRedirect</a>
 <a class="sublink-1" href="#redirect">redirect</a>
 <a class="sublink-1" href="#scrolltotop">scrollToTop</a>
 
@@ -124,6 +114,7 @@
 <h3>Math
 </h3><a class="sublink-1" href="#arrayaverage">arrayAverage</a>
 <a class="sublink-1" href="#arraysum">arraySum</a>
+<a class="sublink-1" href="#clampnumber">clampNumber</a>
 <a class="sublink-1" href="#collatz">collatz</a>
 <a class="sublink-1" href="#digitize">digitize</a>
 <a class="sublink-1" href="#distance">distance</a>
@@ -131,6 +122,7 @@
 <a class="sublink-1" href="#fibonacci">fibonacci</a>
 <a class="sublink-1" href="#gcd">gcd</a>
 <a class="sublink-1" href="#hammingdistance">hammingDistance</a>
+<a class="sublink-1" href="#inrange">inRange</a>
 <a class="sublink-1" href="#isarmstrongnumber">isArmstrongNumber</a>
 <a class="sublink-1" href="#isdivisible">isDivisible</a>
 <a class="sublink-1" href="#iseven">isEven</a>
@@ -140,6 +132,7 @@
 <a class="sublink-1" href="#palindrome">palindrome</a>
 <a class="sublink-1" href="#percentile">percentile</a>
 <a class="sublink-1" href="#powerset">powerset</a>
+<a class="sublink-1" href="#primes">primes</a>
 <a class="sublink-1" href="#randomintegerinrange">randomIntegerInRange</a>
 <a class="sublink-1" href="#randomnumberinrange">randomNumberInRange</a>
 <a class="sublink-1" href="#round">round</a>
@@ -193,8 +186,18 @@
 <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;"><a id="top">&nbsp;</a><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:#eceef2"><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">
+<div class="card fluid"><div class="section double-padded"><h3 id="arraygcd">arrayGcd</h3></div><div class="section double-padded">
+<p>Calculates the greatest common denominator (gcd) of an array of numbers.</p>
+<p>Use <code>Array.reduce()</code> and the <code>gcd</code> formula (uses recursion) to calculate the greatest common denominator of an array of numbers.</p>
+<pre><code class="language-js">const arrayGcd = arr =&gt;{
+  const gcd = (x, y) =&gt; !y ? x : gcd(y, x % y);
+  return arr.reduce((a,b) =&gt; gcd(a,b));
+}
+// arrayGcd([1,2,3,4,5]) -&gt; 1
+// arrayGcd([4,8,12]) -&gt; 4
+</code></pre>
+</div></div><br/><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>
 <pre><code class="language-js">const arrayMax = arr =&gt; Math.max(...arr);
@@ -388,8 +391,10 @@ Omit the second argument, <code>n</code>, to get the first element of the array.
 Use <code>Array.length = 0</code> to mutate the passed in array by resetting it's length to zero and <code>Array.push()</code> to re-populate it with only the pulled values.</p>
 <p><em>(For a snippet that does not mutate the original array see <a href="#without"><code>without</code></a>)</em></p>
 <pre><code class="language-js">const pull = (arr, ...args) =&gt; {
-  let pulled = arr.filter((v, i) =&gt; !args.toString().split(',').includes(v));
+  let argState = Array.isArray(args[0]) ? args[0] : args;
-  arr.length = 0; pulled.forEach(v =&gt; arr.push(v));
+  let pulled = arr.filter((v, i) =&gt; !argState.includes(v));
+  arr.length = 0; 
+  pulled.forEach(v =&gt; arr.push(v));
 };
 
 // let myArray1 = ['a', 'b', 'c', 'a', 'b', 'c'];
@@ -527,7 +532,14 @@ If lengths of the argument-arrays vary, <code>undefined</code> is used where no
 //zip(['a', 'b'], [1, 2], [true, false]); -&gt; [['a', 1, true], ['b', 2, false]]
 //zip(['a'], [1, 2], [true, false]); -&gt; [['a', 1, true], [undefined, 2, false]]
 </code></pre>
-</div></div><br/><h2 style="text-align:center;">Browser</h2>
+</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="zipobject">zipObject</h3></div><div class="section double-padded">
+<p>Given an array of valid property identifiers and an array of values, return an object associating the properties to the values.</p>
+<p>Since an object can have undefined values but not undefined property pointers, the array of properties is used to decide the structure of the resulting object using <code>Array.reduce()</code>.</p>
+<pre><code class="language-js">const zipObject = ( props, values ) =&gt; props.reduce( ( obj, prop, index ) =&gt; ( obj[prop] = values[index], obj ), {} )
+// zipObject(['a','b','c'], [1,2]) -&gt; {a: 1, b: 2, c: undefined}
+// zipObject(['a','b'], [1,2,3]) -&gt; {a: 1, b: 2}
+</code></pre>
+</div></div><br/><h2 style="text-align:center">Browser</h2>
 <div class="card fluid"><div class="section double-padded"><h3 id="arraytohtmllist">arrayToHtmlList</h3></div><div class="section double-padded">
 <p>Converts the given array elements into <code>&lt;li&gt;</code> tags and appends them to the list of the given id.</p>
 <p>Use <code>Array.map()</code> and <code>document.querySelector()</code> to create a list of html tags.</p>
@@ -583,6 +595,13 @@ Pass <code>location.search</code> as the argument to apply to the current <code>
   );
 // getURLParameters('http://url.com/page?name=Adam&amp;surname=Smith') -&gt; {name: 'Adam', surname: 'Smith'}
 </code></pre>
+</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="httpsredirect">httpsRedirect</h3></div><div class="section double-padded">
+<p>Redirects the page to HTTPS if its currently in HTTP. Also, pressing the back button doesn't take it back to the HTTP page as its replaced in the history.</p>
+<p>Use <code>location.protocol</code> to get the protocol currently being used. If it's not HTTPS, use <code>location.replace()</code> to replace the existing page with the HTTPS version of the page. Use <code>location.href</code> to get the full address, split it with <code>String.split()</code> and remove the protocol part of the URL.</p>
+<pre><code class="language-js">const httpsRedirect = () =&gt; {
+  if(location.protocol !== &quot;https:&quot;) location.replace(&quot;https://&quot; + location.href.split(&quot;//&quot;)[1]);
+}
+</code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="redirect">redirect</h3></div><div class="section double-padded">
 <p>Redirects to a specified URL.</p>
 <p>Use <code>window.location.href</code> or <code>window.location.replace()</code> to redirect to <code>url</code>.
@@ -604,7 +623,7 @@ Scroll by a fraction of the distance from top. Use <code>window.requestAnimation
 };
 // scrollToTop()
 </code></pre>
-</div></div><br/><h2 style="text-align:center;">Date</h2>
+</div></div><br/><h2 style="text-align:center">Date</h2>
 <div class="card fluid"><div class="section double-padded"><h3 id="getdaysdiffbetweendates">getDaysDiffBetweenDates</h3></div><div class="section double-padded">
 <p>Returns the difference (in days) between two dates.</p>
 <p>Calculate the difference (in days) between to <code>Date</code> objects.</p>
@@ -628,7 +647,7 @@ Throws an error if the passed time cannot be converted to a date.</p>
   {try{return new Date(time).toISOString().split('T')[0].replace(/-/g, '/')}catch(e){return}};
 // toEnglishDate('09/21/2010') -&gt; '21/09/2010'
 </code></pre>
-</div></div><br/><h2 style="text-align:center;">Function</h2>
+</div></div><br/><h2 style="text-align:center">Function</h2>
 <div class="card fluid"><div class="section double-padded"><h3 id="chainasync">chainAsync</h3></div><div class="section double-padded">
 <p>Chains asynchronous functions.</p>
 <p>Loop through an array of functions containing asynchronous events, calling <code>next</code> when each asynchronous event has completed.</p>
@@ -717,7 +736,7 @@ async function sleepyWork() {
 }
 */
 </code></pre>
-</div></div><br/><h2 style="text-align:center;">Math</h2>
+</div></div><br/><h2 style="text-align:center">Math</h2>
 <div class="card fluid"><div class="section double-padded"><h3 id="arrayaverage">arrayAverage</h3></div><div class="section double-padded">
 <p>Returns the average of an array of numbers.</p>
 <p>Use <code>Array.reduce()</code> to add each value to an accumulator, initialized with a value of <code>0</code>, divide by the <code>length</code> of the array.</p>
@@ -730,6 +749,19 @@ async function sleepyWork() {
 <pre><code class="language-js">const arraySum = arr =&gt; arr.reduce((acc, val) =&gt; acc + val, 0);
 // arraySum([1,2,3,4]) -&gt; 10
 </code></pre>
+</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="clampnumber">clampNumber</h3></div><div class="section double-padded">
+<p>Clamps <code>num</code> within the inclusive <code>lower</code> and <code>upper</code> bounds.</p>
+<p>If <code>lower</code> is greater than <code>upper</code>, swap them.
+If <code>num</code> falls within the range, return <code>num</code>.
+Otherwise return the nearest number in the range.</p>
+<pre><code class="language-js">const clampNumber = (num, lower, upper) =&gt; {
+  if(lower &gt; upper) upper = [lower, lower = upper][0];
+  return (num&gt;=lower &amp;&amp; num&lt;=upper) ? num : ((num &lt; lower) ? lower : upper) 
+}
+// clampNumber(2, 3, 5) -&gt; 3
+// clampNumber(1, -1, -5) -&gt; -1
+// clampNumber(3, 2, 4) -&gt; 3
+</code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="collatz">collatz</h3></div><div class="section double-padded">
 <p>Applies the Collatz algorithm.</p>
 <p>If <code>n</code> is even, return <code>n/2</code>. Otherwise  return <code>3n+1</code>.</p>
@@ -766,7 +798,7 @@ Throws an exception if <code>n</code> is a negative number.</p>
 <p>Create an empty array of the specific length, initializing the first two values (<code>0</code> and <code>1</code>).
 Use <code>Array.reduce()</code> to add values into the array, using the sum of the last two values, except for the first two.</p>
 <pre><code class="language-js">const fibonacci = n =&gt;
-  Array(n).fill(0).reduce((acc, val, i) =&gt; acc.concat(i &gt; 1 ? acc[i - 1] + acc[i - 2] : i), []);
+  Array.from({ length: n}).map(v =&gt; 0).reduce((acc, val, i) =&gt; acc.concat(i &gt; 1 ? acc[i - 1] + acc[i - 2] : i), []);
 // fibonacci(5) -&gt; [0,1,1,2,3]
 </code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="gcd">gcd</h3></div><div class="section double-padded">
@@ -785,6 +817,19 @@ Count and return the number of <code>1</code>s in the string, using <code>match(
   ((num1 ^ num2).toString(2).match(/1/g) || '').length;
 // hammingDistance(2,3) -&gt; 1
 </code></pre>
+</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="inrange">inRange</h3></div><div class="section double-padded">
+<p>Checks if the given number falls in the given range.</p>
+<p>Use arithmetic comparison to check if the given number is in the specified range.
+If the second parameter, <code>end</code>, is not specified, the reange is considered to be from <code>0</code> to <code>start</code>.</p>
+<pre><code class="language-js">const inRange = (n, start, end=null) =&gt; {
+  if(end &amp;&amp; start &gt; end) end = [start, start=end][0];
+  return (end == null) ? (n&gt;=0 &amp;&amp; n&lt;start) : (n&gt;=start &amp;&amp; n&lt;end);
+}
+// inRange(3, 2, 5) -&gt; true
+// inRange(3, 4) -&gt; true
+// inRange(2, 3, 5) -&gt; false
+// inrange(3, 2) -&gt; false
+</code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="isarmstrongnumber">isArmstrongNumber</h3></div><div class="section double-padded">
 <p>Checks if the given number is an armstrong number or not.</p>
 <p>Convert the given number into array of digits. Use <code>Math.pow()</code> to get the appropriate power for each digit and sum them up. If the sum is equal to the number itself, return <code>true</code> otherwise <code>false</code>.</p>
@@ -863,6 +908,18 @@ Then, <code>split('')</code> into individual characters, <code>reverse()</code>,
   arr.reduce((a, v) =&gt; a.concat(a.map(r =&gt; [v].concat(r))), [[]]);
 // powerset([1,2]) -&gt; [[], [1], [2], [2,1]]
 </code></pre>
+</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="primes">primes</h3></div><div class="section double-padded">
+<p>Generates primes up to a given number, using the Sieve of Eratosthenes.</p>
+<p>Generate an array from <code>2</code> to the given number. Use <code>Array.filter()</code> to filter out the values divisible by any number from <code>2</code> to the square root of the provided number.</p>
+<pre><code class="language-js">const primes = num =&gt; {
+  let arr =  Array.from({length:num-1}).map((x,i)=&gt; i+2), 
+    sqroot  = Math.floor(Math.sqrt(num)),
+    numsTillSqroot  = Array.from({length:sqroot-1}).map((x,i)=&gt; i+2);
+  numsTillSqroot.forEach(x =&gt; arr = arr.filter(y =&gt; ((y%x)!==0)||(y==x)));
+  return arr; 
+}
+// primes(10) -&gt; [2,3,5,7] 
+</code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="randomintegerinrange">randomIntegerInRange</h3></div><div class="section double-padded">
 <p>Returns a random integer in the specified range.</p>
 <p>Use <code>Math.random()</code> to generate a random number and map it to the desired range, using <code>Math.floor()</code> to make it an integer.</p>
@@ -897,7 +954,7 @@ You can omit the second argument to get the sample standard deviation or set it
 // standardDeviation([10,2,38,23,38,23,21]) -&gt; 13.284434142114991 (sample)
 // standardDeviation([10,2,38,23,38,23,21], true) -&gt; 12.29899614287479 (population)
 </code></pre>
-</div></div><br/><h2 style="text-align:center;">Media</h2>
+</div></div><br/><h2 style="text-align:center">Media</h2>
 <div class="card fluid"><div class="section double-padded"><h3 id="speechsynthesis">speechSynthesis</h3></div><div class="section double-padded">
 <p>Performs speech synthesis (experimental).</p>
 <p>Use <code>SpeechSynthesisUtterance.voice</code> and <code>window.speechSynthesis.getVoices()</code> to convert a message to speech.
@@ -910,7 +967,7 @@ Use <code>window.speechSynthesis.speak()</code> to play the message.</p>
 };
 // speechSynthesis('Hello, World') -&gt; plays the message
 </code></pre>
-</div></div><br/><h2 style="text-align:center;">Node</h2>
+</div></div><br/><h2 style="text-align:center">Node</h2>
 <div class="card fluid"><div class="section double-padded"><h3 id="jsontofile">JSONToFile</h3></div><div class="section double-padded">
 <p>Writes a JSON object to a file.</p>
 <p>Use <code>fs.writeFile()</code>, template literals and <code>JSON.stringify()</code> to write a <code>json</code> object to a <code>.json</code> file.</p>
@@ -935,7 +992,7 @@ let arr = readFileLines('test.txt')
 console.log(arr) // -&gt; ['line1', 'line2', 'line3']
 */
 </code></pre>
-</div></div><br/><h2 style="text-align:center;">Object</h2>
+</div></div><br/><h2 style="text-align:center">Object</h2>
 <div class="card fluid"><div class="section double-padded"><h3 id="cleanobj">cleanObj</h3></div><div class="section double-padded">
 <p>Removes any properties except the ones specified from a JSON object.</p>
 <p>Use <code>Object.keys()</code> method to loop over given json object and deleting keys that are not <code>include</code>d in given array.
@@ -975,7 +1032,7 @@ If no orders array is passed it sort by 'asc' by default.</p>
   arr.sort((a, b) =&gt;
     props.reduce((acc, prop, i) =&gt; {
       if (acc === 0) {
-        const [p1, p2] = orders[i] === 'asc' ? [a[prop], b[prop]] : [b[prop], a[prop]];
+        const [p1, p2] = orders &amp;&amp; orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]];
         acc = p1 &gt; p2 ? 1 : p1 &lt; p2 ? -1 : 0;
       }
       return acc;
@@ -1013,7 +1070,7 @@ a === b -&gt; false
 <pre><code class="language-js">const truthCheckCollection = (collection, pre) =&gt; (collection.every(obj =&gt; obj[pre]));
 // truthCheckCollection([{&quot;user&quot;: &quot;Tinky-Winky&quot;, &quot;sex&quot;: &quot;male&quot;}, {&quot;user&quot;: &quot;Dipsy&quot;, &quot;sex&quot;: &quot;male&quot;}], &quot;sex&quot;) -&gt; true
 </code></pre>
-</div></div><br/><h2 style="text-align:center;">String</h2>
+</div></div><br/><h2 style="text-align:center">String</h2>
 <div class="card fluid"><div class="section double-padded"><h3 id="anagrams">anagrams</h3></div><div class="section double-padded">
 <p>Generates all anagrams of a string (contains duplicates).</p>
 <p>Use recursion.
@@ -1106,7 +1163,7 @@ Return the string truncated to the desired length, with <code>...</code> appende
   str.length &gt; num ? str.slice(0, num &gt; 3 ? num - 3 : num) + '...' : str;
 // truncateString('boomerang', 7) -&gt; 'boom...'
 </code></pre>
-</div></div><br/><h2 style="text-align:center;">Utility</h2>
+</div></div><br/><h2 style="text-align:center">Utility</h2>
 <div class="card fluid"><div class="section double-padded"><h3 id="coalesce">coalesce</h3></div><div class="section double-padded">
 <p>Returns the first non-null/undefined argument.</p>
 <p>Use <code>Array.find()</code> to return the first non <code>null</code>/<code>undefined</code> argument.</p>
@@ -1253,8 +1310,8 @@ Use <code>Number()</code> to check if the coercion holds.</p>
 </code></pre>
 </div></div><br/>
         <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>.<br/>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br/>Built with the <a href="https://minicss.org">mini.css framwork</a>.</p>
+          <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>.<br/>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br/>Built with the <a href="https://minicss.org">mini.css framework</a>.</p>
-          <a href="#top"><p style="display: inline-block;float: right;padding-right: 2em;">Back to top</p></a>
+          <a href="#top"><span style="display:inline-block;float:right;padding-right:2em">Back to top</span></a>
         </footer>
       </main>
     </div>

docs/mini/flavor.scss

@@ -85,6 +85,9 @@ $button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#
 $button-large-margin:  var(#{$universal-margin-var});
 @include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
 
+
+$_drawer-right: false;
+
 @import 'navigation';
 @import 'contextual';
 
@@ -103,3 +106,58 @@ $mark-tag-name:                 'tag';       // Class name, padding and border r
 $mark-tag-padding:      calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
 $mark-tag-border-radius:        1em;
 @include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
+
+// Website-specific styles
+
+html, * { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; }
+code, pre, kbd, code *, pre *, kbd * { font-family: 'Inconsolata', Menlo, Consolas, monospace; }
+code, kbd { font-size: 1em; }
+code { transform: scale(1); } /* Deals with the issue described in #243 */
+pre { font-size: 1rem; border: 0.0625rem solid var(--secondary-border-color); border-radius: var(--universal-border-radius);}
+.group{position:relative;margin-top:2em;margin-bottom:-1em}
+.search{font-size:14px;margin-top:-.1em;display:block;width:100%;border:none;border-bottom:1px solid var(--nav-link-color)}
+.search:focus{outline:none}
+label#search-label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;left:5px;top:10px}
+.search:focus ~ label#search-label,.search:valid ~ label#search-label{top:-20px;font-size:14px;color:var(--nav-link-color)}
+label#menu-toggle { width: 3.4375rem;}
+
+header h1.logo {
+  margin-top: -0.8rem;
+  text-align:center;
+  a {
+  text-decoration:none;
+  color: #111;
+  }
+}
+
+header #title {
+  position:relative;
+  top: -1rem;
+  @media screen and (max-width: 500px) { font-size: 1rem; display: block }
+}
+
+header h1 small {
+  display:block;
+  font-size: 0.875rem;
+  font-style: italic;
+  color: #888;
+  margin-top: -0.8rem;
+  @media screen and (max-width: 768px) { font-size: 0.75rem; }
+  @media screen and (max-width: 600px) { font-size: 0.625rem; }
+  @media screen and (max-width: 500px) { font-size: 0.5rem; margin-top: -1.2rem; }
+}
+
+label#menu-toggle {
+  position: absolute;
+  left: 0.5rem;
+  top: 0.5rem;
+  width: 3.4375rem;
+}
+
+.card {
+  box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.25);
+}
+
+main {
+  padding: 0;
+}

package.json

@@ -1,11 +1,16 @@
 {
   "dependencies": {
+    "builder": "^3.2.3",
     "concurrently": "^3.5.1",
     "fs-extra": "^4.0.2",
+    "html-minifier": "^3.5.7",
     "live-server": "^1.2.0",
     "markdown-it": "^8.4.0",
+    "node-sass": "^4.7.2",
     "nodemon": "^1.12.1",
-    "semistandard": "^11.0.0"
+    "semistandard": "^11.0.0",
+    "tagger": "^0.1.2",
+    "webber": "0.0.1"
   },
   "name": "30-seconds-of-code",
   "description": "A collection of useful Javascript snippets.",

scripts/web-script.js

@@ -1,10 +1,11 @@
 /*
-  This is the builder script that generates the README file.
+  This is the web builder script that generates the README file.
-  Run using `npm run builder`.
+  Run using `npm run webber`.
 */
 // Load modules
 const fs = require('fs-extra'), path = require('path'), chalk = require('chalk'),
-  md = require('markdown-it')();
+  md = require('markdown-it')(), minify = require('html-minifier').minify;
+// Compile the mini.css framework and custom CSS styles, using `node-sass`.
 const sass = require('node-sass');
   sass.render({
     file: path.join('docs','mini','flavor.scss'),
@@ -75,7 +76,7 @@ try {
       output += md.render(`[${taggedSnippet[0]}](#${taggedSnippet[0].toLowerCase()})\n`).replace(/<p>/g,'').replace(/<\/p>/g,'').replace(/<a/g,'<a class="sublink-1"');
     output += '\n';
   }
-  output += `</nav><main class="col-sm-12 col-md-8 col-lg-9" style="height: 100%;overflow-y: auto; background: #eee;">`;
+  output += `</nav><main class="col-sm-12 col-md-8 col-lg-9" style="height: 100%;overflow-y: auto; background: #eceef2;">`;
   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))){
@@ -85,6 +86,23 @@ try {
   }
   // Add the ending static part
   output += `\n${endPart+'\n'}`;
+  // Minify output
+  output = minify(output, {
+    collapseBooleanAttributes: true,
+    collapseWhitespace: false,
+    decodeEntities: false,
+    minifyCSS: true,
+    minifyJS: true,
+    keepClosingSlash: true,
+    processConditionalComments: true,
+    removeAttributeQuotes: false,
+    removeComments: true,
+    removeEmptyAttributes: false,
+    removeOptionalTags: false,
+    removeScriptTypeAttributes: false,
+    removeStyleLinkTypeAttributes: false,
+    trimCustomFragments: true,
+  });
   // Write to the index.html file
   fs.writeFileSync(path.join(docsPath,'index.html'), output);
 }

snippets/clampNumber.md

@@ -0,0 +1,17 @@
+### clampNumber
+
+Clamps `num` within the inclusive `lower` and `upper` bounds.
+
+If `lower` is greater than `upper`, swap them. 
+If `num` falls within the range, return `num`. 
+Otherwise return the nearest number in the range.
+
+```js
+const clampNumber = (num, lower, upper) => {
+  if(lower > upper) upper = [lower, lower = upper][0];
+  return (num>=lower && num<=upper) ? num : ((num < lower) ? lower : upper) 
+}
+// clampNumber(2, 3, 5) -> 3
+// clampNumber(1, -1, -5) -> -1
+// clampNumber(3, 2, 4) -> 3
+```

snippets/fibonacci.md

@@ -7,6 +7,6 @@ Use `Array.reduce()` to add values into the array, using the sum of the last two
 
 ```js
 const fibonacci = n =>
-  Array(n).fill(0).reduce((acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i), []);
+  Array.from({ length: n}).map(v => 0).reduce((acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i), []);
 // fibonacci(5) -> [0,1,1,2,3]
 ```

snippets/httpsRedirect.md

@@ -0,0 +1,11 @@
+### httpsRedirect
+
+Redirects the page to HTTPS if its currently in HTTP. Also, pressing the back button doesn't take it back to the HTTP page as its replaced in the history.
+
+Use `location.protocol` to get the protocol currently being used. If it's not HTTPS, use `location.replace()` to replace the existing page with the HTTPS version of the page. Use `location.href` to get the full address, split it with `String.split()` and remove the protocol part of the URL.  
+
+```js
+const httpsRedirect = () => {
+  if(location.protocol !== "https:") location.replace("https://" + location.href.split("//")[1]);
+}
+```

snippets/inRange.md

@@ -0,0 +1,17 @@
+### inRange
+
+Checks if the given number falls in the given range. 
+
+Use arithmetic comparison to check if the given number is in the specified range.
+If the second parameter, `end`, is not specified, the reange is considered to be from `0` to `start`.
+
+```js
+const inRange = (n, start, end=null) => {
+  if(end && start > end) end = [start, start=end][0];
+  return (end == null) ? (n>=0 && n<start) : (n>=start && n<end);
+}
+// inRange(3, 2, 5) -> true
+// inRange(3, 4) -> true
+// inRange(2, 3, 5) -> false
+// inrange(3, 2) -> false
+```

snippets/orderBy.md

@@ -10,7 +10,7 @@ const orderBy = (arr, props, orders) =>
   arr.sort((a, b) =>
     props.reduce((acc, prop, i) => {
       if (acc === 0) {
-        const [p1, p2] = orders[i] === 'asc' ? [a[prop], b[prop]] : [b[prop], a[prop]];
+        const [p1, p2] = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]];
         acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
       }
       return acc;

snippets/pull.md

@@ -9,8 +9,10 @@ _(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.toString().split(',').includes(v));
+  let argState = Array.isArray(args[0]) ? args[0] : args;
-  arr.length = 0; pulled.forEach(v => arr.push(v));
+  let pulled = arr.filter((v, i) => !argState.includes(v));
+  arr.length = 0; 
+  pulled.forEach(v => arr.push(v));
 };
 
 // let myArray1 = ['a', 'b', 'c', 'a', 'b', 'c'];

snippets/zipObject.md

@@ -0,0 +1,11 @@
+### zipObject
+
+Given an array of valid property identifiers and an array of values, return an object associating the properties to the values.
+
+Since an object can have undefined values but not undefined property pointers, the array of properties is used to decide the structure of the resulting object using `Array.reduce()`.
+
+```js
+const zipObject = ( props, values ) => props.reduce( ( obj, prop, index ) => ( obj[prop] = values[index], obj ), {} )
+// zipObject(['a','b','c'], [1,2]) -> {a: 1, b: 2, c: undefined}
+// zipObject(['a','b'], [1,2,3]) -> {a: 1, b: 2}
+```

static-parts/README-start.md

@@ -1,6 +1,6 @@
 ![Logo](/logo.png)
 
-# 30 seconds of code [![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/30-seconds-of-code/Lobby)
+# 30 seconds of code [![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/30-seconds-of-code/Lobby) [![Travis Build](https://travis-ci.org/Chalarangelo/30-seconds-of-code.svg?branch=master)](https://travis-ci.org/Chalarangelo/30-seconds-of-code)
 > Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.
 
 - Use <kbd>Ctrl</kbd> + <kbd>F</kbd> or <kbd>command</kbd> + <kbd>F</kbd> to search for a snippet.

static-parts/index-end.html

@@ -1,6 +1,6 @@
         <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>.<br/>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br/>Built with the <a href="https://minicss.org">mini.css framwork</a>.</p>
+          <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>.<br/>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br/>Built with the <a href="https://minicss.org">mini.css framework</a>.</p>
-          <a href="#top"><p style="display: inline-block;float: right;padding-right: 2em;">Back to top</p></a>
+          <a href="#top"><span style="display: inline-block;float: right;padding-right: 2em;">Back to top</span></a>
         </footer>
       </main>
     </div>

static-parts/index-start.html

@@ -13,19 +13,6 @@
     <meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
     <meta property="og:type" content="website" /><meta property="og:image" content="favicon.png">
     <link rel="icon" type="image/png" href="favicon.png">
-    <style>
-      html, * { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; }
-      code, pre, kbd, code *, pre *, kbd * { font-family: 'Inconsolata', Menlo, Consolas, monospace; }
-      code, kbd { font-size: 1em; }
-      code { transform: scale(1); } /* Deals with the issue described in #243 */
-      pre { font-size: 1rem; border: 0.0625rem solid var(--secondary-border-color); border-radius: var(--universal-border-radius);}
-      .group{position:relative;margin-top:2em;margin-bottom:-1em}
-      .search{font-size:14px;margin-top:-.1em;display:block;width:100%;border:none;border-bottom:1px solid var(--nav-link-color)}
-      .search:focus{outline:none}
-      label#search-label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;left:5px;top:10px}
-      .search:focus ~ label#search-label,.search:valid ~ label#search-label{top:-20px;font-size:14px;color:var(--nav-link-color)}
-      label#menu-toggle { width: 3.4375rem;}
-    </style>
     <link rel="stylesheet" href="prism.css">
   </head>
   <script>
@@ -38,10 +25,10 @@
   <body>
     <a href="https://github.com/Chalarangelo/30-seconds-of-code" class="github-corner" aria-label="View source on Github"><svg width="90" height="90" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
     <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>
+      <h1 class="logo" href="https://github.com/Chalarangelo/30-seconds-of-code"><img src="favicon.png" style="height: 4rem;"/><span id="title">&nbsp;30 seconds of code</span>
-        <small 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.</small>
+        <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
       </h1>
-      <label for="doc-drawer-checkbox" class="button drawer-toggle" style="position: absolute; left: 0; top: 0;width: 3.4375rem;"></label>
+      <label for="doc-drawer-checkbox" class="button drawer-toggle" id="menu-toggle"></label>
     </header>
     <div class="row" style="height: calc(100vh - 5.875rem);overflow: hidden;">
       <input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">

tag_database

@@ -1,5 +1,6 @@
 anagrams:string
 arrayAverage:math
+arrayGcd:array
 arrayMax:array
 arrayMin:array
 arraySum:math
@@ -9,6 +10,7 @@ capitalize:string
 capitalizeEveryWord:string
 chainAsync:function
 chunk:array
+clampNumber:math
 cleanObj:object
 coalesce:utility
 coalesceFactory:utility
@@ -47,10 +49,12 @@ groupBy:array
 hammingDistance:math
 head:array
 hexToRGB:utility
+httpsRedirect:browser
 initial:array
 initialize2DArray:array
 initializeArrayWithRange:array
 initializeArrayWithValues:array
+inRange:math
 intersection:array
 isArmstrongNumber:math
 isArray:utility
@@ -77,6 +81,7 @@ percentile:math
 pick:array
 pipe:function
 powerset:math
+primes:math
 promisify:function
 pull:array
 pullAtIndex:array
@@ -117,3 +122,4 @@ validateEmail:utility
 validateNumber:utility
 without:array
 zip:array
+zipObject:array

travis.log

@@ -0,0 +1,87 @@
+Command line:
+"travis encrypt --add"
+
+
+   ________                                 __
+  /        |                               /  |
+  ########/ ______    ______    __     __  ##/    _______
+     ## |  /      \  /      \  /  \   /  | /  |  /       |
+     ## | /######  | ######  | ##  \ /##/  ## | /#######/
+     ## | ## |  ##/  /    ## |  ##  /##/   ## | ##      \
+     ## | ## |      /####### |   ## ##/    ## |  ######  |
+     ## | ## |      ##    ## |    ###/     ## | /     ##/
+     ##/  ##/        #######/      #/      ##/  #######/
+
+     TRajectory Analyzer and VISualizer  -  Open-source freeware under GNU GPL v3
+
+     Copyright (c) Martin Brehm      (2009-2015)
+                   Martin Thomas     (2012-2015)
+                   Barbara Kirchner  (2009-2015)
+                   University of Leipzig / University of Bonn.
+
+     http://www.travis-analyzer.de
+
+     Please cite:
+     M. Brehm and B. Kirchner, J. Chem. Inf. Model. 2011, 51 (8), pp 2007-2023.
+
+     There is absolutely no warranty on any results obtained from TRAVIS.
+
+  #  Running on pl4gue at Thu Dec 21 11:44:39 2017 (PID 25714).
+  #  Running in /home/pl4gue/Programming/30-seconds-of-code
+  #  Source code version: Nov 07 2015.
+  #  Compiled at Nov 17 2015 23:12:21.
+  #  Compiler version: 5.2.1 20151028
+  #  Target platform: Linux
+  #  Compile flags: DEBUG_ARRAYS 
+  #  Machine: int=4b, long=8b, addr=8b, 0xA0B0C0D0=D0,C0,B0,A0.
+  #  User home: /home/pl4gue
+  #  Exe path: /usr/bin/travis
+  #  Input is redirected, Output to terminal
+
+ >>> Please use a color scheme with dark background or specify "-nocolor"! <<<
+
+    No configuration file found.
+    Writing default configuration to /home/pl4gue/.travis.conf ...
+
+Unknown parameter: "encrypt".
+
+    List of supported command line options:
+
+      -p <file>       Loads position data from the specified trajectory file.
+                      The file format may be *.xyz, *.pdb, *.lmp (Lammps), HISTORY (DLPOLY), or *.prmtop/*.mdcrd (Amber).
+      -i <file>       Reads input from the specified text file.
+
+      -config <file>  Load the specified configuration file.
+      -stream         Treats input trajectory as a stream (e.g. named pipe): No fseek, etc.
+      -showconf       Shows a tree structure of the configuration file.
+      -writeconf      Writes the default configuration file, including all defines values.
+
+      -verbose        Show detailed information about what's going on.
+      -nocolor        Executes TRAVIS in monochrome mode.
+      -dimcolor       Uses dim instead of bright colors.
+
+      -credits        Display a list of persons who contributed to TRAVIS.
+      -help, -?       Shows this help.
+
+    If only one argument is specified, it is assumed to be the name of a trajectory file.
+    If argument is specified at all, TRAVIS asks for the trajectory file to open.
+
+
+    Note: To show a list of all persons who contributed to TRAVIS,
+          please add "-credits" to your command line arguments, or set the
+          variable "SHOWCREDITS" to "TRUE" in your travis.conf file.
+
+    Source code from other projects used in TRAVIS:
+      - lmfit     from Joachim Wuttke
+      - kiss_fft  from Mark Borgerding
+      - voro++    from Chris Rycroft
+
+    http://www.travis-analyzer.de
+
+    Please cite:
+
+  * "TRAVIS - A Free Analyzer and Visualizer for Monte Carlo and Molecular Dynamics Trajectories",
+    M. Brehm, B. Kirchner; J. Chem. Inf. Model. 2011, 51 (8), pp 2007-2023.
+
+*** The End ***
+