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="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;

64
docs/index.html
View File

@ -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/>