From 26664df5f46a2e2cc0dad315fdbfdf4a717b7c8d Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Sat, 7 Apr 2018 19:36:36 +0300
Subject: [PATCH] Optimized archive

---
 docs/archive.html                     |  3 +-
 docs/index.html                       | 64 ++++++++++++++-------------
 static-parts/archived-page-start.html |  5 ++-
 static-parts/beginner-page-start.html |  2 +-
 4 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/docs/archive.html b/docs/archive.html
index 694b28123..e841ac185 100644
--- a/docs/archive.html
+++ b/docs/archive.html
@@ -16,10 +16,11 @@
     <meta name="keywords" content="javascript, snippets, code, programming">
     <meta name="author" content="Stefan Feješ (ns.fejes.stefan@gmail.com)">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#111">
     <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:type" content="website" /><meta property="og:image" content="favicon.png">
-    <link rel="icon" type="image/png" href="favicon.png">
+    <link rel="icon" type="image/png" href="favicon.png"><link rel="manifest" href="manifest.json">
     <script>
       function scrollToTop(){
         const c = document.querySelector('html').scrollTop;
diff --git a/docs/index.html b/docs/index.html
index 22c9b9683..3fd8cfb4e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -76,38 +76,42 @@
       <div id="pick-slider">
         <button class="next" aria-label="next"><svg version="1.1" width="8" height="16" viewBox="0 0 8 16" class="octicon octicon-chevron-right" aria-hidden="true"><path fill-rule="evenodd" d="M7.5 8l-5 5L1 11.5 4.75 8 1 4.5 2.5 3l5 5z"/></svg></button>
       <button class="previous" aria-label="previous"><svg version="1.1" width="8" height="16" viewBox="0 0 8 16" class="octicon octicon-chevron-left" aria-hidden="true"><path fill-rule="evenodd" d="M6 3l1.5 1.5L3.75 8l3.75 3.5L6 13 1 8l5-5z"/></svg></button>
-      <div class="card fluid pick selected"><h3 id="reducewhich.md" class="section double-padded">reduceWhich</h3><div class="section double-padded">
-<p>Returns the minimum/maximum value of an array, after applying the provided function to set comparing rule.</p>
-<p>Use <code>Array.reduce()</code> in combination with the <code>comparator</code> function to get the appropriate element in the array.
-You can omit the second parameter, <code>comparator</code>, to use the default one that returns the minimum element in the array.</p>
-<pre class="language-js"><span class="token keyword">const</span> reduceWhich <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> <span class="token function-variable function">comparator</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">-</span> b<span class="token punctuation">)</span> <span class="token operator">=></span>
-  arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token function">comparator</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">>=</span> <span class="token number">0</span> <span class="token operator">?</span> b <span class="token punctuation">:</span> a<span class="token punctuation">));</span>
-</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">reduceWhich</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]);</span> <span class="token comment">// 1</span>
-<span class="token function">reduceWhich</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">], (</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> b <span class="token operator">-</span> a<span class="token punctuation">);</span> <span class="token comment">// 3</span>
-<span class="token function">reduceWhich</span><span class="token punctuation">(
-  [{</span> name<span class="token punctuation">:</span> <span class="token string">'Tom'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">12</span> <span class="token punctuation">}, {</span> name<span class="token punctuation">:</span> <span class="token string">'Jack'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">18</span> <span class="token punctuation">}, {</span> name<span class="token punctuation">:</span> <span class="token string">'Lucy'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">9</span> <span class="token punctuation">}],
-  (</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a<span class="token punctuation">.</span>age <span class="token operator">-</span> b<span class="token punctuation">.</span>age
-<span class="token punctuation">);</span> <span class="token comment">// {name: "Lucy", age: 9}</span>
+      <div class="card fluid pick selected"><h3 id="createelement.md" class="section double-padded">createElement</h3><div class="section double-padded">
+<p>Creates an element from a string (without appending it to the document).
+If the given string contains multiple elements, only the first one will be returned.</p>
+<p>Use <code>document.createElement()</code> to create a new element.
+Set its <code>innerHTML</code> to the string supplied as the argument.
+Use <code>ParentNode.firstElementChild</code> to return the element version of the string.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">createElement</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">);</span>
+  el<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> str<span class="token punctuation">;</span>
+  <span class="token keyword">return</span> el<span class="token punctuation">.</span>firstElementChild<span class="token punctuation">;
+};</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> el <span class="token operator">=</span> <span class="token function">createElement</span><span class="token punctuation">(</span>
+  <span class="token template-string"><span class="token string">`&lt;div class="container">
+    &lt;p>Hello!&lt;/p>
+  &lt;/div>`</span></span>
+<span class="token punctuation">);</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>el<span class="token punctuation">.</span>className<span class="token punctuation">);</span> <span class="token comment">// 'container'</span>
 </pre>
-<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="uniqueelements.md" class="section double-padded">uniqueElements</h3><div class="section double-padded">
-<p>Returns all unique values of an array.</p>
-<p>Use ES6 <code>Set</code> and the <code>...rest</code> operator to discard all duplicated values.</p>
-<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">uniqueElements</span> <span class="token operator">=</span> arr <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr<span class="token punctuation">)];</span>
-</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">uniqueElements</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]);</span> <span class="token comment">// [1,2,3,4,5]</span>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="issymbol.md" class="section double-padded">isSymbol</h3><div class="section double-padded">
+<p>Checks if the given argument is a symbol.</p>
+<p>Use <code>typeof</code> to check if a value is classified as a symbol primitive.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isSymbol</span> <span class="token operator">=</span> val <span class="token operator">=></span> <span class="token keyword">typeof</span> val <span class="token operator">===</span> <span class="token string">'symbol'</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isSymbol</span><span class="token punctuation">(</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'x'</span><span class="token punctuation">));</span> <span class="token comment">// true</span>
 </pre>
-<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="unzip.md" class="section double-padded">unzip</h3><div class="section double-padded">
-<p>Creates an array of arrays, ungrouping the elements in an array produced by <a href="#zip">zip</a>.</p>
-<p>Use <code>Math.max.apply()</code> to get the longest subarray in the array, <code>Array.map()</code> to make each element an array.
-Use <code>Array.reduce()</code> and <code>Array.forEach()</code> to map grouped values to individual arrays.</p>
-<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">unzip</span> <span class="token operator">=</span> arr <span class="token operator">=></span>
-  arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(
-    (</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>val<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">((</span>v<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> acc<span class="token punctuation">[</span>i<span class="token punctuation">].</span><span class="token function">push</span><span class="token punctuation">(</span>v<span class="token punctuation">)),</span> acc<span class="token punctuation">),</span>
-    Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">({</span>
-      length<span class="token punctuation">:</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>x <span class="token operator">=></span> x<span class="token punctuation">.</span>length<span class="token punctuation">))
-    }).</span><span class="token function">map</span><span class="token punctuation">(</span>x <span class="token operator">=></span> <span class="token punctuation">[])
-  );</span>
-</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">unzip</span><span class="token punctuation">([[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">], [</span><span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">]]);</span> <span class="token comment">//[['a', 'b'], [1, 2], [true, false]]</span>
-<span class="token function">unzip</span><span class="token punctuation">([[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">], [</span><span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]]);</span> <span class="token comment">//[['a', 'b'], [1, 2], [true]]</span>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="scrolltotop.md" class="section double-padded">scrollToTop</h3><div class="section double-padded">
+<p>Smooth-scrolls to the top of the page.</p>
+<p>Get distance from top using <code>document.documentElement.scrollTop</code> or <code>document.body.scrollTop</code>.
+Scroll by a fraction of the distance from the top. Use <code>window.requestAnimationFrame()</code> to animate the scrolling.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">scrollToTop</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> c <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop <span class="token operator">||</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span>
+  <span class="token keyword">if</span> <span class="token punctuation">(</span>c <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">) {</span>
+    window<span class="token punctuation">.</span><span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span>scrollToTop<span class="token punctuation">);</span>
+    window<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> c <span class="token operator">-</span> c <span class="token operator">/</span> <span class="token number">8</span><span class="token punctuation">);
+  }
+};</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">scrollToTop</span><span class="token punctuation">();</span>
 </pre>
 <button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div>
       <br/>
diff --git a/static-parts/archived-page-start.html b/static-parts/archived-page-start.html
index 213214776..e3dcce82d 100644
--- a/static-parts/archived-page-start.html
+++ b/static-parts/archived-page-start.html
@@ -10,16 +10,17 @@
       gtag('config', 'UA-117141635-1');
     </script>
     <link rel="stylesheet" href="./mini.css">
-    <title>Snippets for Beginners - 30 seconds of code</title>
+    <title>Snippets Archive - 30 seconds of code</title>
     <meta charset="utf-8">
     <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="Stefan Feješ (ns.fejes.stefan@gmail.com)">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#111">
     <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:type" content="website" /><meta property="og:image" content="favicon.png">
-    <link rel="icon" type="image/png" href="favicon.png">
+    <link rel="icon" type="image/png" href="favicon.png"><link rel="manifest" href="manifest.json">
     <script>
       function scrollToTop(){
         const c = document.querySelector('html').scrollTop;
diff --git a/static-parts/beginner-page-start.html b/static-parts/beginner-page-start.html
index f89861f7e..2d73a27bd 100644
--- a/static-parts/beginner-page-start.html
+++ b/static-parts/beginner-page-start.html
@@ -93,7 +93,7 @@
     <div class="container">
       <div class="row">
         <div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
-            <h2 class="index-section">Beginner snippets</h2>
+            <h2 class="index-section">Snippets for Beginners</h2>
             <p style="text-align: justify">The following section is aimed towards individuals who are at the start of their web developer journey. Each snippet in the next section is simple yet very educational for newcomers. This section is by no means a complete resource for learning modern JavaScript. However, it is enough to grasp some common concepts and use cases. We also strongly recommend checking out <a href="https://developer.mozilla.org/bm/docs/Web/JavaScript">MDN web docs</a> as a learning resource.</p><br/>
         </div>
       </div>