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

minification for archive.html

Browse Source
This commit is contained in:
Stefan Feješ
2018-04-07 18:42:43 +02:00
parent 26664df5f4
commit a96ca3daf8
4 changed files with 72 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
docs/index.html
View File

@ -76,42 +76,39 @@
<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="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>
<div class="card fluid pick selected"><h3 id="get.md" class="section double-padded">get</h3><div class="section double-padded">
<p>Retrieve a set of properties indicated by the given selectors from an object.</p>
<p>Use <code>Array.map()</code> for each selector, <code>String.replace()</code> to replace square brackets with dots, <code>String.split('.')</code> to split each selector, <code>Array.filter()</code> to remove empty values and <code>Array.reduce()</code> to get the value indicated by it.</p>
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">get</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">from</span><span class="token punctuation">,</span> <span class="token operator">...</span>selectors<span class="token punctuation">)</span> <span class="token operator">=></span>
<span class="token punctuation">[</span><span class="token operator">...</span>selectors<span class="token punctuation">].</span><span class="token function">map</span><span class="token punctuation">(</span>s <span class="token operator">=></span>
s
<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/\[([^\[\]]*)\]/g</span><span class="token punctuation">,</span> <span class="token string">'.$1.'</span><span class="token punctuation">)
.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token punctuation">)
.</span><span class="token function">filter</span><span class="token punctuation">(</span>t <span class="token operator">=></span> t <span class="token operator">!==</span> <span class="token string">''</span><span class="token punctuation">)
.</span><span class="token function">reduce</span><span class="token punctuation">((</span>prev<span class="token punctuation">,</span> cur<span class="token punctuation">)</span> <span class="token operator">=></span> prev <span class="token operator">&amp;&amp;</span> prev<span class="token punctuation">[</span>cur<span class="token punctuation">],</span> <span class="token keyword">from</span><span class="token punctuation">)
);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> selector<span class="token punctuation">: {</span> to<span class="token punctuation">: {</span> val<span class="token punctuation">:</span> <span class="token string">'val to select'</span> <span class="token punctuation">} },</span> target<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> a<span class="token punctuation">:</span> <span class="token string">'test'</span> <span class="token punctuation">}] };</span>
<span class="token keyword">get</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">'selector.to.val'</span><span class="token punctuation">,</span> <span class="token string">'target[0]'</span><span class="token punctuation">,</span> <span class="token string">'target[2].a'</span><span class="token punctuation">);</span> <span class="token comment">// ['val to select', 1, 'test']</span>
</pre>
<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>
<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="todecimalmark.md" class="section double-padded">toDecimalMark</h3><div class="section double-padded">
<p>Use <code>toLocaleString()</code> to convert a float-point arithmetic to the <a href="https://en.wikipedia.org/wiki/Decimal_mark">Decimal mark</a> form. It makes a comma separated string from a number.</p>
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">toDecimalMark</span> <span class="token operator">=</span> num <span class="token operator">=></span> num<span class="token punctuation">.</span><span class="token function">toLocaleString</span><span class="token punctuation">(</span><span class="token string">'en-US'</span><span class="token punctuation">);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">toDecimalMark</span><span class="token punctuation">(</span><span class="token number">12305030388.9087</span><span class="token punctuation">);</span> <span class="token comment">// "12,305,030,388.909"</span>
</pre>
<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>
<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="tokebabcase.md" class="section double-padded">toKebabCase</h3><div class="section double-padded">
<p>Converts a string to kebab case.</p>
<p>Break the string into words and combine them adding <code>-</code> as a separator, using a regexp.</p>
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">toKebabCase</span> <span class="token operator">=</span> str <span class="token operator">=></span>
str <span class="token operator">&amp;&amp;</span>
str
<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g</span><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><span class="token function">toLowerCase</span><span class="token punctuation">())
.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'-'</span><span class="token punctuation">);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">toKebabCase</span><span class="token punctuation">(</span><span class="token string">'camelCase'</span><span class="token punctuation">);</span> <span class="token comment">// 'camel-case'</span>
<span class="token function">toKebabCase</span><span class="token punctuation">(</span><span class="token string">'some text'</span><span class="token punctuation">);</span> <span class="token comment">// 'some-text'</span>
<span class="token function">toKebabCase</span><span class="token punctuation">(</span><span class="token string">'some-mixed_string With spaces_underscores-and-hyphens'</span><span class="token punctuation">);</span> <span class="token comment">// 'some-mixed-string-with-spaces-underscores-and-hyphens'</span>
<span class="token function">toKebabCase</span><span class="token punctuation">(</span><span class="token string">'AllThe-small Things'</span><span class="token punctuation">);</span> <span class="token comment">// "all-the-small-things"</span>
<span class="token function">toKebabCase</span><span class="token punctuation">(</span><span class="token string">'IAmListeningToFMWhileLoadingDifferentURLOnMyBrowserAndAlsoEditingSomeXMLAndHTML'</span><span class="token punctuation">);</span> <span class="token comment">// "i-am-listening-to-fm-while-loading-different-url-on-my-browser-and-also-editing-xml-and-html"</span>
</pre>
<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div>
<br/>