Google analytics and some cleanup
This commit is contained in:
Angelos Chalaris
106
docs/index.html
106
docs/index.html
@ -1,6 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-117141635-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-117141635-1');
|
||||
</script>
|
||||
<link rel="stylesheet" href="./mini.css">
|
||||
<title>30 seconds of code</title>
|
||||
<meta charset="utf-8">
|
||||
@ -14,10 +22,11 @@
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
|
||||
<div id="splash">
|
||||
<h1 id="logo"><img src="https://30secondsofcode.org/favicon.png" alt="logo"> 30 seconds of code</h1>
|
||||
<p id="tagline">Curated collection of useful JavaScript snippets<br id="tagline-lg"/> that you can understand in 30 seconds or less.</p>
|
||||
<p id="doc-link"><a href="#" class="button">View collection</a></p>
|
||||
<p id="doc-link"><a href="./array" class="button">View collection</a></p>
|
||||
</div>
|
||||
<div id="in-numbers">
|
||||
<div class="container">
|
||||
@ -36,7 +45,7 @@
|
||||
</div>
|
||||
<div class="col-sm-3 no-padding" style="text-align: center">
|
||||
<svg version="1.1" width="24" height="24" viewBox="0 0 14 16" class="octicon octicon-star" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/></svg>
|
||||
<p><span id="star-count">19461</span><br/>stars</p>
|
||||
<p><span id="star-count">19462</span><br/>stars</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -62,47 +71,60 @@
|
||||
<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">Today's picks</h2>
|
||||
<p>Our sophisticated robot helpers pick new snippets from our collection daily, so that you can discover new snippets to enhance your projects:</p>
|
||||
<div id="pick-slider">
|
||||
<button class="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"><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="palindrome.md" class="section double-padded">palindrome</h3><div class="section double-padded">
|
||||
<p>Returns <code>true</code> if the given string is a palindrome, <code>false</code> otherwise.</p>
|
||||
<p>Convert string <code>String.toLowerCase()</code> and use <code>String.replace()</code> to remove non-alphanumeric characters from it.
|
||||
Then, <code>String.split('')</code> into individual characters, <code>Array.reverse()</code>, <code>String.join('')</code> and compare to the original, unreversed string, after converting it <code>String.tolowerCase()</code>.</p>
|
||||
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">palindrome</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> s <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">().</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/[\W_]/g</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">);</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
s <span class="token operator">===</span>
|
||||
s
|
||||
<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">reverse</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">palindrome</span><span class="token punctuation">(</span><span class="token string">'taco cat'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
||||
<div class="card fluid pick selected"><h3 id="rgbtohex.md" class="section double-padded">RGBToHex</h3><div class="section double-padded">
|
||||
<p>Converts the values of RGB components to a color code.</p>
|
||||
<p>Convert given RGB parameters to hexadecimal string using bitwise left-shift operator (<code><<</code>) and <code>toString(16)</code>, then <code>String.padStart(6,'0')</code> to get a 6-digit hexadecimal value.</p>
|
||||
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">RGBToHex</span> <span class="token operator">=</span> <span class="token punctuation">(</span>r<span class="token punctuation">,</span> g<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">((</span>r <span class="token operator"><<</span> <span class="token number">16</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token punctuation">(</span>g <span class="token operator"><<</span> <span class="token number">8</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">).</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">).</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token string">'0'</span><span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">RGBToHex</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">165</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">);</span> <span class="token comment">// 'ffa501'</span>
|
||||
</pre>
|
||||
<button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="samplesize.md" class="section double-padded">sampleSize</h3><div class="section double-padded">
|
||||
<p>Gets <code>n</code> random elements at unique keys from <code>array</code> up to the size of <code>array</code>.</p>
|
||||
<p>Shuffle the array using the <a href="https://github.com/chalarangelo/30-seconds-of-code#shuffle">Fisher-Yates algorithm</a>.
|
||||
Use <code>Array.slice()</code> to get the first <code>n</code> elements.
|
||||
Omit the second argument, <code>n</code> to get only one element at random from the array.</p>
|
||||
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">sampleSize</span> <span class="token operator">=</span> <span class="token punctuation">([</span><span class="token operator">...</span>arr<span class="token punctuation">],</span> n <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">let</span> m <span class="token operator">=</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
|
||||
<span class="token keyword">while</span> <span class="token punctuation">(</span>m<span class="token punctuation">) {</span>
|
||||
<span class="token keyword">const</span> i <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">()</span> <span class="token operator">*</span> m<span class="token operator">--</span><span class="token punctuation">);
|
||||
[</span>arr<span class="token punctuation">[</span>m<span class="token punctuation">],</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">],</span> arr<span class="token punctuation">[</span>m<span class="token punctuation">]];
|
||||
}</span>
|
||||
<span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> n<span class="token punctuation">);
|
||||
<button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="throttle.md" class="section double-padded">throttle</h3><div class="section double-padded">
|
||||
<p>Creates a throttled function that only invokes the provided function at most once per every <code>wait</code> milliseconds</p>
|
||||
<p>Use <code>setTimeout()</code> and <code>clearTimeout()</code> to throttle the given method, <code>fn</code>.
|
||||
Use <code>Function.apply()</code> to apply the <code>this</code> context to the function and provide the necessary <code>arguments</code>.
|
||||
Use <code>Date.now()</code> to keep track of the last time the throttled function was invoked.
|
||||
Omit the second argument, <code>wait</code>, to set the timeout at a default of 0 ms.</p>
|
||||
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">throttle</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fn<span class="token punctuation">,</span> wait<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">let</span> inThrottle<span class="token punctuation">,</span> lastFn<span class="token punctuation">,</span> lastTime<span class="token punctuation">;</span>
|
||||
<span class="token keyword">return function</span><span class="token punctuation">() {</span>
|
||||
<span class="token keyword">const</span> context <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">,</span>
|
||||
args <span class="token operator">=</span> arguments<span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>inThrottle<span class="token punctuation">) {</span>
|
||||
fn<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> args<span class="token punctuation">);</span>
|
||||
lastTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">();</span>
|
||||
inThrottle <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;
|
||||
}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">clearTimeout</span><span class="token punctuation">(</span>lastFn<span class="token punctuation">);</span>
|
||||
lastFn <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">() {</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">()</span> <span class="token operator">-</span> lastTime <span class="token operator">>=</span> wait<span class="token punctuation">) {</span>
|
||||
fn<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> args<span class="token punctuation">);</span>
|
||||
lastTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">();
|
||||
}
|
||||
},</span> wait <span class="token operator">-</span> <span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">()</span> <span class="token operator">-</span> lastTime<span class="token punctuation">));
|
||||
}
|
||||
};
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">sampleSize</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">3</span><span class="token punctuation">],</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [3,1]</span>
|
||||
<span class="token function">sampleSize</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">3</span><span class="token punctuation">],</span> <span class="token number">4</span><span class="token punctuation">);</span> <span class="token comment">// [2,3,1]</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js">window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'resize'</span><span class="token punctuation">,</span>
|
||||
<span class="token function">throttle</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>evt<span class="token punctuation">) {</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerWidth<span class="token punctuation">);</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerHeight<span class="token punctuation">);
|
||||
},</span> <span class="token number">250</span><span class="token punctuation">)
|
||||
);</span> <span class="token comment">// Will log the window dimensions at most every 250ms</span>
|
||||
</pre>
|
||||
<button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="spreadover.md" class="section double-padded">spreadOver</h3><div class="section double-padded">
|
||||
<p>Takes a variadic function and returns a closure that accepts an array of arguments to map to the inputs of the function.</p>
|
||||
<p>Use closures and the spread operator (<code>...</code>) to map the array of arguments to the inputs of the function.</p>
|
||||
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">spreadOver</span> <span class="token operator">=</span> fn <span class="token operator">=></span> argsArr <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>argsArr<span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> arrayMax <span class="token operator">=</span> <span class="token function">spreadOver</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span>max<span class="token punctuation">);</span>
|
||||
<span class="token function">arrayMax</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">3</span><span class="token punctuation">]);</span> <span class="token comment">// 3</span>
|
||||
<button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="tocurrency.md" class="section double-padded">toCurrency</h3><div class="section double-padded">
|
||||
<p>Take a number and return specified currency formatting.</p>
|
||||
<p>Use <code>Intl.NumberFormat</code> to enable country / currency sensitive formatting.</p>
|
||||
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">toCurrency</span> <span class="token operator">=</span> <span class="token punctuation">(</span>n<span class="token punctuation">,</span> curr<span class="token punctuation">,</span> LanguageFormat <span class="token operator">=</span> undefined<span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
Intl<span class="token punctuation">.</span><span class="token function">NumberFormat</span><span class="token punctuation">(</span>LanguageFormat<span class="token punctuation">, {</span> style<span class="token punctuation">:</span> <span class="token string">'currency'</span><span class="token punctuation">,</span> currency<span class="token punctuation">:</span> curr <span class="token punctuation">}).</span><span class="token function">format</span><span class="token punctuation">(</span>n<span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">toCurrency</span><span class="token punctuation">(</span><span class="token number">123456.789</span><span class="token punctuation">,</span> <span class="token string">'EUR'</span><span class="token punctuation">);</span> <span class="token comment">// €123,456.79 | currency: Euro | currencyLangFormat: Local</span>
|
||||
<span class="token function">toCurrency</span><span class="token punctuation">(</span><span class="token number">123456.789</span><span class="token punctuation">,</span> <span class="token string">'USD'</span><span class="token punctuation">,</span> <span class="token string">'en-us'</span><span class="token punctuation">);</span> <span class="token comment">// $123,456.79 | currency: US Dollar | currencyLangFormat: English (United States)</span>
|
||||
<span class="token function">toCurrency</span><span class="token punctuation">(</span><span class="token number">123456.789</span><span class="token punctuation">,</span> <span class="token string">'USD'</span><span class="token punctuation">,</span> <span class="token string">'fa'</span><span class="token punctuation">);</span> <span class="token comment">// ۱۲۳٬۴۵۶٫۷۹ $ | currency: US Dollar | currencyLangFormat: Farsi</span>
|
||||
<span class="token function">toCurrency</span><span class="token punctuation">(</span><span class="token number">322342436423.2435</span><span class="token punctuation">,</span> <span class="token string">'JPY'</span><span class="token punctuation">);</span> <span class="token comment">// ¥322,342,436,423 | currency: Japanese Yen | currencyLangFormat: Local</span>
|
||||
<span class="token function">toCurrency</span><span class="token punctuation">(</span><span class="token number">322342436423.2435</span><span class="token punctuation">,</span> <span class="token string">'JPY'</span><span class="token punctuation">,</span> <span class="token string">'fi'</span><span class="token punctuation">);</span> <span class="token comment">// 322 342 436 423 ¥ | currency: Japanese Yen | currencyLangFormat: Finnish</span>
|
||||
</pre>
|
||||
<button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div>
|
||||
<br/>
|
||||
@ -115,10 +137,10 @@ Omit the second argument, <code>n</code> to get only one element at random from
|
||||
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h2 class="index-section">Getting started</h2>
|
||||
<ul id="links">
|
||||
<li>If you are new to JavaScript, we suggest you start by taking a look at the <a href="#">Beginner's snippets</a></li>
|
||||
<li>If you want to level up tour JavaScript skills, check out the full <a href="#">Snippet collection</a></li>
|
||||
<li>If you want to see how the project was built and contribute, visit our <a href="#">Github repository</a></li>
|
||||
<li>If you want to check out some more complex snippets, you can visit the <a href="#">Archive</a></li>
|
||||
<li>If you are new to JavaScript, we suggest you start by taking a look at the <a href="./beginner">Beginner's snippets</a></li>
|
||||
<li>If you want to level up tour JavaScript skills, check out the full <a href="./array">Snippet collection</a></li>
|
||||
<li>If you want to see how the project was built and contribute, visit our <a href="https://github.com/Chalarangelo/30-seconds-of-code">Github repository</a></li>
|
||||
<li>If you want to check out some more complex snippets, you can visit the <a href="./archive">Archive</a></li>
|
||||
</ul><br/>
|
||||
</div>
|
||||
</div>
|
||||
@ -221,7 +243,7 @@ Omit the second argument, <code>n</code> to get only one element at random from
|
||||
<script>
|
||||
window.onload = function(){
|
||||
let counters = ['#snippet-count', '#contrib-count', '#commit-count', '#star-count'];
|
||||
let values = [295,113,3029,19461];
|
||||
let values = [295,113,3029,19462];
|
||||
let steps = [1,1,8,42];
|
||||
runCounter(counters[0],0,values[0],steps[0]);
|
||||
runCounter(counters[1],0,values[1],steps[1]);
|
||||
|
||||
Reference in New Issue
Block a user