minification for beginner.html
This commit is contained in:
Stefan Feješ
@ -76,39 +76,71 @@
|
||||
<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="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">&&</span> prev<span class="token punctuation">[</span>cur<span class="token punctuation">],</span> <span class="token keyword">from</span><span class="token punctuation">)
|
||||
<div class="card fluid pick selected"><h3 id="binomialcoefficient.md" class="section double-padded">binomialCoefficient</h3><div class="section double-padded">
|
||||
<p>Evaluates the binomial coefficient of two integers <code>n</code> and <code>k</code>.</p>
|
||||
<p>Use <code>Number.isNaN()</code> to check if any of the two values is <code>NaN</code>.
|
||||
Check if <code>k</code> is less than <code>0</code>, greater than or equal to <code>n</code>, equal to <code>1</code> or <code>n - 1</code> and return the appropriate result.
|
||||
Check if <code>n - k</code> is less than <code>k</code> and switch their values accordingly.
|
||||
Loop from <code>2</code> through <code>k</code> and calculate the binomial coefficient.
|
||||
Use <code>Math.round()</code> to account for rounding errors in the calculation.</p>
|
||||
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">binomialCoefficient</span> <span class="token operator">=</span> <span class="token punctuation">(</span>n<span class="token punctuation">,</span> k<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>Number<span class="token punctuation">.</span><span class="token function">isNaN</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span> <span class="token operator">||</span> Number<span class="token punctuation">.</span><span class="token function">isNaN</span><span class="token punctuation">(</span>k<span class="token punctuation">))</span> <span class="token keyword">return</span> <span class="token number">NaN</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>k <span class="token operator"><</span> <span class="token number">0</span> <span class="token operator">||</span> k <span class="token operator">></span> n<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>k <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">||</span> k <span class="token operator">===</span> n<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>k <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">||</span> k <span class="token operator">===</span> n <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> n<span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>n <span class="token operator">-</span> k <span class="token operator"><</span> k<span class="token punctuation">)</span> k <span class="token operator">=</span> n <span class="token operator">-</span> k<span class="token punctuation">;</span>
|
||||
<span class="token keyword">let</span> res <span class="token operator">=</span> n<span class="token punctuation">;</span>
|
||||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> j <span class="token operator"><=</span> k<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> res <span class="token operator">*=</span> <span class="token punctuation">(</span>n <span class="token operator">-</span> j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">/</span> j<span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>res<span class="token punctuation">);
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">binomialCoefficient</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// 28</span>
|
||||
</pre>
|
||||
<button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="istravisci.md" class="section double-padded">isTravisCI</h3><div class="section double-padded">
|
||||
<p>Checks if the current environment is <a href="https://travis-ci.org/">Travis CI</a>.</p>
|
||||
<p>Checks if the current environment has the <code>TRAVIS</code> and <code>CI</code> environment variables (<a href="https://docs.travis-ci.com/user/environment-variables/#Default-Environment-Variables">reference</a>).</p>
|
||||
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isTravisCI</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token string">'TRAVIS'</span> <span class="token keyword">in</span> process<span class="token punctuation">.</span>env <span class="token operator">&&</span> <span class="token string">'CI'</span> <span class="token keyword">in</span> process<span class="token punctuation">.</span>env<span class="token punctuation">;</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isTravisCI</span><span class="token punctuation">();</span> <span class="token comment">// true (if code is running on Travis CI)</span>
|
||||
</pre>
|
||||
<button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="runasync.md" class="section double-padded">runAsync</h3><div class="section double-padded">
|
||||
<p>Runs a function in a separate thread by using a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Web Worker</a>, allowing long running functions to not block the UI.</p>
|
||||
<p>Create a new <code>Worker</code> using a <code>Blob</code> object URL, the contents of which should be the stringified version of the supplied function.
|
||||
Immediately post the return value of calling the function back.
|
||||
Return a promise, listening for <code>onmessage</code> and <code>onerror</code> events and resolving the data posted back from the worker, or throwing an error.</p>
|
||||
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">runAsync</span> <span class="token operator">=</span> fn <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> worker <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Worker</span><span class="token punctuation">(</span>
|
||||
URL<span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">([</span><span class="token template-string"><span class="token string">`postMessage((</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>fn<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)());`</span></span><span class="token punctuation">]), {</span>
|
||||
type<span class="token punctuation">:</span> <span class="token string">'application/javascript; charset=utf-8'</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">📋 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">📋 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">&&</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>
|
||||
<span class="token keyword">return new</span> <span class="token class-name">Promise</span><span class="token punctuation">((</span>res<span class="token punctuation">,</span> rej<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
worker<span class="token punctuation">.</span><span class="token function-variable function">onmessage</span> <span class="token operator">=</span> <span class="token punctuation">({</span> data <span class="token punctuation">})</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token function">res</span><span class="token punctuation">(</span>data<span class="token punctuation">),</span> worker<span class="token punctuation">.</span><span class="token function">terminate</span><span class="token punctuation">();
|
||||
};</span>
|
||||
worker<span class="token punctuation">.</span><span class="token function-variable function">onerror</span> <span class="token operator">=</span> err <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token function">rej</span><span class="token punctuation">(</span>err<span class="token punctuation">),</span> worker<span class="token punctuation">.</span><span class="token function">terminate</span><span class="token punctuation">();
|
||||
};
|
||||
});
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">longRunningFunction</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">let</span> result <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">1000</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">) {</span>
|
||||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator"><</span> <span class="token number">700</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">) {</span>
|
||||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> k <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> k <span class="token operator"><</span> <span class="token number">300</span><span class="token punctuation">;</span> k<span class="token operator">++</span><span class="token punctuation">) {</span>
|
||||
result <span class="token operator">=</span> result <span class="token operator">+</span> i <span class="token operator">+</span> j <span class="token operator">+</span> k<span class="token punctuation">;
|
||||
}
|
||||
}
|
||||
}</span>
|
||||
<span class="token keyword">return</span> result<span class="token punctuation">;
|
||||
};</span>
|
||||
<span class="token comment">/*
|
||||
NOTE: Since the function is running in a different context, closures are not supported.
|
||||
The function supplied to `runAsync` gets stringified, so everything becomes literal.
|
||||
All variables and functions must be defined inside.
|
||||
*/</span>
|
||||
<span class="token function">runAsync</span><span class="token punctuation">(</span>longRunningFunction<span class="token punctuation">).</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">);</span> <span class="token comment">// 209685000000</span>
|
||||
<span class="token function">runAsync</span><span class="token punctuation">(()</span> <span class="token operator">=></span> <span class="token number">10</span> <span class="token operator">**</span> <span class="token number">3</span><span class="token punctuation">).</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">);</span> <span class="token comment">// 1000</span>
|
||||
<span class="token keyword">let</span> outsideVariable <span class="token operator">=</span> <span class="token number">50</span><span class="token punctuation">;</span>
|
||||
<span class="token function">runAsync</span><span class="token punctuation">(()</span> <span class="token operator">=></span> <span class="token keyword">typeof</span> outsideVariable<span class="token punctuation">).</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">);</span> <span class="token comment">// 'undefined'</span>
|
||||
</pre>
|
||||
<button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div>
|
||||
<br/>
|
||||
|
||||
Reference in New Issue
Block a user