andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Optimized archive

Browse Source
This commit is contained in:
Angelos Chalaris
2018-04-07 19:36:36 +03:00
parent 79d1cde71d
commit 26664df5f4
4 changed files with 40 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/archive.html
View File

@ -16,10 +16,11 @@
<meta name="keywords" content="javascript, snippets, code, programming"> <meta name="keywords" content="javascript, snippets, code, programming">
<meta name="author" content="Stefan Feješ (ns.fejes.stefan@gmail.com)"> <meta name="author" content="Stefan Feješ (ns.fejes.stefan@gmail.com)">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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: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"> <link rel="icon" type="image/png" href="favicon.png"><link rel="manifest" href="manifest.json">
<script> <script>
function scrollToTop(){ function scrollToTop(){
const c = document.querySelector('html').scrollTop; const c = document.querySelector('html').scrollTop;

64
docs/index.html
View File

@ -76,38 +76,42 @@
<div id="pick-slider"> <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="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> <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"> <div class="card fluid pick selected"><h3 id="createelement.md" class="section double-padded">createElement</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>Creates an element from a string (without appending it to the document).
<p>Use <code>Array.reduce()</code> in combination with the <code>comparator</code> function to get the appropriate element in the array. If the given string contains multiple elements, only the first one will be returned.</p>
You can omit the second parameter, <code>comparator</code>, to use the default one that returns the minimum element in the array.</p> <p>Use <code>document.createElement()</code> to create a new element.
<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> Set its <code>innerHTML</code> to the string supplied as the argument.
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> Use <code>ParentNode.firstElementChild</code> to return the element version of the string.</p>
</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> <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 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 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>
<span class="token function">reduceWhich</span><span class="token punctuation">( el<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> str<span class="token punctuation">;</span>
[{</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 class="token keyword">return</span> el<span class="token punctuation">.</span>firstElementChild<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>
<span class="token punctuation">);</span> <span class="token comment">// {name: "Lucy", age: 9}</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> </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"> <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>Returns all unique values of an array.</p> <p>Checks if the given argument is a symbol.</p>
<p>Use ES6 <code>Set</code> and the <code>...rest</code> operator to discard all duplicated values.</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">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 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">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> </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> </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"> <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>Creates an array of arrays, ungrouping the elements in an array produced by <a href="#zip">zip</a>.</p> <p>Smooth-scrolls to the top of the page.</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. <p>Get distance from top using <code>document.documentElement.scrollTop</code> or <code>document.body.scrollTop</code>.
Use <code>Array.reduce()</code> and <code>Array.forEach()</code> to map grouped values to individual arrays.</p> 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">unzip</span> <span class="token operator">=</span> arr <span class="token operator">=></span> <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>
arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">( <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>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> <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>
Array<span class="token punctuation">.</span><span class="token keyword">from</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>
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">)) 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><span class="token function">map</span><span class="token punctuation">(</span>x <span class="token operator">=></span> <span class="token punctuation">[]) }
);</span> };</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> </pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">scrollToTop</span><span class="token punctuation">();</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>
</pre> </pre>
<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div> <button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div>
<br/> <br/>

5
static-parts/archived-page-start.html
View File

@ -10,16 +10,17 @@
gtag('config', 'UA-117141635-1'); gtag('config', 'UA-117141635-1');
</script> </script>
<link rel="stylesheet" href="./mini.css"> <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 charset="utf-8">
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."> <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="keywords" content="javascript, snippets, code, programming">
<meta name="author" content="Stefan Feješ (ns.fejes.stefan@gmail.com)"> <meta name="author" content="Stefan Feješ (ns.fejes.stefan@gmail.com)">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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: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"> <link rel="icon" type="image/png" href="favicon.png"><link rel="manifest" href="manifest.json">
<script> <script>
function scrollToTop(){ function scrollToTop(){
const c = document.querySelector('html').scrollTop; const c = document.querySelector('html').scrollTop;

2
static-parts/beginner-page-start.html
View File

@ -93,7 +93,7 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"> <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/> <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>
</div> </div>