About page
This commit is contained in:
Angelos Chalaris
128
docs/about.html
Normal file
128
docs/about.html
Normal file
@ -0,0 +1,128 @@
|
||||
<!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="./style.css">
|
||||
<title>About - 30 seconds of code</title>
|
||||
<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="keywords" content="javascript, snippets, code, programming">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo@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="https://30secondsofcode.org/logos/logo_512.png">
|
||||
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"
|
||||
class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; 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>
|
||||
<header>
|
||||
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo" /><span id="title"> 30
|
||||
seconds of code</span>
|
||||
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
|
||||
</a></h1>
|
||||
</header>
|
||||
<div class="container card-container">
|
||||
<main class="col-centered">
|
||||
<span id="top"><br><br></span>
|
||||
<h2 class="category-name">Our philosophy</h2>
|
||||
<p style="text-align: justify">The core goal of <strong>30 seconds of code</strong> is to provide a quality resource for beginner and advanced JavaScript developers alike. We want to help improve the JavaScript ecosystem, by lowering the barrier of entry for newcomers and help seasoned veterans pick up new tricks and remember old ones. In order to achieve this, we have collected hundreds of snippets that can be of use in a wide range of situations. We welcome new contributors and we like fresh ideas, as long as the code is short and easy to grasp in about 30 seconds. The only catch, if you may, is that a few of our snippets are not perfectly optimized for large, enterprise applications and they might not be deemed production-ready.</p><br />
|
||||
<h2 class="category-name">Related projects</h2>
|
||||
<p style="text-align: justify">The idea behind <strong>30 seconds of code</strong> has inspired some people to create similar collections in other programming languages and environments. Here are the ones we like the most:</p>
|
||||
<ul>
|
||||
<li><a href="https://atomiks.github.io/30-seconds-of-css/">30 seconds of CSS</a> by <strong>atomiks</strong></li>
|
||||
<li><a href="http://30secondsofinterviews.org/">30 seconds of Interviews</a> by <strong>fejes713</strong></li>
|
||||
<li><a href="https://github.com/kriadmin/30-seconds-of-python-code">30 seconds of Python</a> by <strong>kriadmin</strong></li>
|
||||
</ul><br />
|
||||
<h2 class="category-name">Maintainers</h2>
|
||||
<div class="flex-row">
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/Chalarangelo.png" alt="chalarangelo" />
|
||||
<a href="https://github.com/Chalarangelo" class="section button">Angelos Chalaris</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/fejes713.png" width="460px" height="460px" alt="fejes713" />
|
||||
<a href="https://github.com/fejes713" class="section button">Stefan Fejes</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/flxwu.png" alt="flxwu" />
|
||||
<a href="https://github.com/flxwu" class="section button">Felix Wu</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/atomiks.png" alt="atomiks" />
|
||||
<a href="https://github.com/atomiks" class="section button">atomiks</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/skatcat31.png" alt="skatcat31" />
|
||||
<a href="https://github.com/skatcat31" class="section button">Robert Mennell</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="category-name">Past maintainers</h2>
|
||||
<div class="flex-row">
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/kingdavidmartins.png" alt="kingdavidmartins" />
|
||||
<a href="https://github.com/kingdavidmartins" class="section button">King David Martins</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/elderhsouza.png" alt="elderhsouza" />
|
||||
<a href="https://github.com/elderhsouza" class="section button">Elder Henrique Souza</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/iamsoorena.png" alt="iamsoorena" />
|
||||
<a href="https://github.com/iamsoorena" class="section button">Soorena</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><h2 class="category-name">License</h2>
|
||||
<p style="text-align: justify">In order for <strong>30 seconds of code</strong> to be as accessible and useful as
|
||||
possible, all of the snippets in the collection are licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0
|
||||
License</a>, meaning they are absolutely free to use in any project you like. If you like what we do, you can
|
||||
always credit us, but that is not mandatory.</p><br />
|
||||
</main>
|
||||
<footer class="col-full-width container">
|
||||
<div class="col-centered">
|
||||
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
|
||||
license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a
|
||||
href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
|
||||
license.<br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;"
|
||||
width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a></p>
|
||||
<br />
|
||||
<p style="display: inline-block;"><a href="./about">About</a> <a href="./contributing">Contributing</a> <a
|
||||
href="./archive">Archive</a> <a href="./glossary">Glossary</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<a class="scroll-to-top" href="#top"></a></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@ -73,7 +73,7 @@
|
||||
},1700);
|
||||
}
|
||||
}, false);
|
||||
}</script></head><body onload="loader()"><a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick='ga("gtag_UA_117141635_1.send","event","Ribbon","Click","Github Clickthrough",1)' 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><button class="menu-button"></button><header><h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"/><span id="title"> 30 seconds of code</span> <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small></a></h1></header><div class="container card-container"><main class="col-centered"><span id="top"><br><br></span><h2 class="category-name">Snippets Archive</h2><p style="text-align:justify">These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are.</p><br/><div class="card code-card"><div class="section card-content"><h4 id="binarysearch.md">binarySearch</h4><p>Use recursion. Similar to <code>Array.indexOf()</code> that finds the index of a value within an array. The difference being this operation only works with sorted arrays which offers a major performance boost due to it's logarithmic nature when compared to a linear search or <code>Array.indexOf()</code>.</p><p>Search a sorted array by repeatedly dividing the search interval in half. Begin with an interval covering the whole array. If the value of the search is less than the item in the middle of the interval, recurse into the lower half. Otherwise recurse into the upper half. Repeatedly recurse until the value is found which is the mid or you've recursed to a point that is greater than the length which means the value doesn't exist and return <code>-1</code>.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">binarySearch</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> val<span class="token punctuation">,</span> start <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> end <span class="token operator">=</span> arr<span class="token punctuation">.</span>length <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>
|
||||
}</script></head><body onload="loader()"><a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick='ga("gtag_UA_117141635_1.send","event","Ribbon","Click","Github Clickthrough",1)' class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688;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><header><h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"/><span id="title"> 30 seconds of code</span> <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small></a></h1></header><div class="container card-container"><main class="col-centered"><span id="top"><br><br></span><h2 class="category-name">Snippets Archive</h2><p style="text-align:justify">These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are.</p><br/><div class="card code-card"><div class="section card-content"><h4 id="binarysearch.md">binarySearch</h4><p>Use recursion. Similar to <code>Array.indexOf()</code> that finds the index of a value within an array. The difference being this operation only works with sorted arrays which offers a major performance boost due to it's logarithmic nature when compared to a linear search or <code>Array.indexOf()</code>.</p><p>Search a sorted array by repeatedly dividing the search interval in half. Begin with an interval covering the whole array. If the value of the search is less than the item in the middle of the interval, recurse into the lower half. Otherwise recurse into the upper half. Repeatedly recurse until the value is found which is the mid or you've recursed to a point that is greater than the length which means the value doesn't exist and return <code>-1</code>.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">binarySearch</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> val<span class="token punctuation">,</span> start <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> end <span class="token operator">=</span> arr<span class="token punctuation">.</span>length <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">if</span> <span class="token punctuation">(</span>start <span class="token operator">></span> end<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> mid <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">((</span>start <span class="token operator">+</span> end<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">);</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>arr<span class="token punctuation">[</span>mid<span class="token punctuation">]</span> <span class="token operator">></span> val<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">binarySearch</span><span class="token punctuation">(</span>arr<span class="token punctuation">,</span> val<span class="token punctuation">,</span> start<span class="token punctuation">,</span> mid <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">);</span>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -852,247 +852,18 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
// Old Landing page
|
||||
|
||||
#splash {
|
||||
height: auto;
|
||||
padding-bottom: 1.5rem;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#ffb300 0%,
|
||||
#ec407a 100%
|
||||
);
|
||||
#logo {
|
||||
margin-top: 0;
|
||||
margin-left: -0.5rem;
|
||||
padding-top: 2rem;
|
||||
text-align: center;
|
||||
font-size: 2.25rem;
|
||||
line-height: 2;
|
||||
img {
|
||||
vertical-align: top;
|
||||
height: 4.5rem;
|
||||
}
|
||||
}
|
||||
#tagline {
|
||||
text-align: center;
|
||||
padding: 0.5rem 25%;
|
||||
}
|
||||
#doc-link {
|
||||
text-align: center;
|
||||
margin-left: -0.5rem;
|
||||
> a {
|
||||
background: transparent;
|
||||
border: 0.0625rem solid rgba(17, 17, 17, 0.95);
|
||||
transition: all 0.3s;
|
||||
border-radius: 0.25rem;
|
||||
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
|
||||
color: #212121;
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background: rgba(17, 17, 17, 0.95);
|
||||
color: #e86957;
|
||||
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
#logo {
|
||||
font-size: 1.75rem;
|
||||
img {
|
||||
height: 3.5rem;
|
||||
}
|
||||
}
|
||||
#tagline {
|
||||
padding: 0.25rem 17.5%;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
#doc-link {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 383px) {
|
||||
#logo {
|
||||
font-size: 1.5rem;
|
||||
img {
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
#tagline {
|
||||
padding: 0.125rem 5%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 479px) {
|
||||
#tagline #tagline-lg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#in-numbers {
|
||||
background: #111; //#3f88c5; //#e15554;
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
color: #fff;
|
||||
svg {
|
||||
fill: #fff;
|
||||
@media screen and (min-width: 768px) {
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: -34px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
overflow-wrap: break-word;
|
||||
@media screen and (min-width: 768px) {
|
||||
position: relative;
|
||||
top: -24px;
|
||||
left: 22px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
margin-top: 0;
|
||||
font-size: 0.625rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#snippet-count,
|
||||
#contrib-count,
|
||||
#commit-count,
|
||||
#star-count {
|
||||
// About page
|
||||
.card.contributor > .section.button {
|
||||
font-size: 1rem;
|
||||
@media screen and (min-width: 768px) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
header.hidden {
|
||||
top: -3.5rem;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.menu-button.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.license-section {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
.col-license-icon {
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
grid-column: span 12;
|
||||
@media screen and (min-width: #{$grid-medium-breakpoint}) {
|
||||
grid-column: span 2;
|
||||
position: relative;
|
||||
top: calc(50% - 40px);
|
||||
}
|
||||
@media screen and (min-width: #{$grid-large-breakpoint}) {
|
||||
grid-column: span 3;
|
||||
}
|
||||
> svg {
|
||||
border: 0.03125rem solid #444;
|
||||
border-radius: 100%;
|
||||
padding: 0.5rem;
|
||||
fill: #444;
|
||||
}
|
||||
}
|
||||
.col-license-text {
|
||||
vertical-align: middle;
|
||||
grid-column: span 12;
|
||||
@media screen and (min-width: #{$grid-medium-breakpoint}) {
|
||||
grid-column: span 10;
|
||||
}
|
||||
@media screen and (min-width: #{$grid-large-breakpoint}) {
|
||||
grid-column: span 9;
|
||||
display: block;
|
||||
transition: all 0.3s ease;
|
||||
&:link, &:visited {
|
||||
color: var(#{$fore-color-var});
|
||||
&:hover {
|
||||
color: var(#{$a-link-color-var});
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2.index-section {
|
||||
font-size: 2.25rem;
|
||||
border-left: 0.3125rem solid #de4a6d;
|
||||
padding-left: 0.625rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.card.contributor {
|
||||
height: calc(100% - 1rem);
|
||||
justify-content: left;
|
||||
> .section.media {
|
||||
height: auto;
|
||||
}
|
||||
> .section.button {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
transition: color 0.3s;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--a-l-col);
|
||||
background: #f8f8f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card.fluid.contribution-guideline {
|
||||
overflow: visible;
|
||||
margin-top: 3rem;
|
||||
padding: 8px;
|
||||
padding-bottom: 0.25rem;
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
padding-top: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.contribution-guideline + .contribution-guideline {
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: relative;
|
||||
top: -2.75rem;
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
background: #ddd;
|
||||
border: 0.03125rem solid #d0d0d0;
|
||||
border-radius: 100%;
|
||||
left: calc(50% - 0.1875rem);
|
||||
box-shadow: inset -0.03125rem -0.03125rem 0.03125rem rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: - 1.875rem;
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: -2.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.contribution-number {
|
||||
position: absolute;
|
||||
top: -1.125rem;
|
||||
left: calc(50% - 1.125rem);
|
||||
font-size: 1.5rem;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 174, 39, 1) 0%,
|
||||
rgba(222, 73, 109, 1) 100%
|
||||
);
|
||||
border: 0.03125 solid #ddd;
|
||||
width: 2.25rem;
|
||||
text-align: center;
|
||||
height: 2.25rem;
|
||||
border-radius: 100%;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
*/
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -122,8 +122,6 @@ try {
|
||||
'utf8'
|
||||
);
|
||||
archivedEndPart = fs.readFileSync(path.join(staticPartsPath, 'archived-page-end.html'), 'utf8');
|
||||
|
||||
indexStaticFile = fs.readFileSync(path.join(staticPartsPath, 'index.html'), 'utf8');
|
||||
} catch (err) {
|
||||
// Handle errors (hopefully not!)
|
||||
console.log(`${chalk.red('ERROR!')} During static part loading: ${err}`);
|
||||
@ -437,6 +435,14 @@ try {
|
||||
console.log(`${chalk.red('ERROR!')} During archive.html generation: ${err}`);
|
||||
process.exit(1);
|
||||
}
|
||||
// Copy about.html
|
||||
try {
|
||||
fs.copyFileSync(path.join(staticPartsPath, 'about.html'), path.join(docsPath, 'about.html'));
|
||||
console.log(`${chalk.green('SUCCESS!')} about.html file copied!`);
|
||||
} catch (err) {
|
||||
console.log(`${chalk.red('ERROR!')} During about.html copying: ${err}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Log the time taken
|
||||
console.timeEnd('Webber');
|
||||
|
||||
128
static-parts/about.html
Normal file
128
static-parts/about.html
Normal file
@ -0,0 +1,128 @@
|
||||
<!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="./style.css">
|
||||
<title>About - 30 seconds of code</title>
|
||||
<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="keywords" content="javascript, snippets, code, programming">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo@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="https://30secondsofcode.org/logos/logo_512.png">
|
||||
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"
|
||||
class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; 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>
|
||||
<header>
|
||||
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo" /><span id="title"> 30
|
||||
seconds of code</span>
|
||||
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
|
||||
</a></h1>
|
||||
</header>
|
||||
<div class="container card-container">
|
||||
<main class="col-centered">
|
||||
<span id="top"><br><br></span>
|
||||
<h2 class="category-name">Our philosophy</h2>
|
||||
<p style="text-align: justify">The core goal of <strong>30 seconds of code</strong> is to provide a quality resource for beginner and advanced JavaScript developers alike. We want to help improve the JavaScript ecosystem, by lowering the barrier of entry for newcomers and help seasoned veterans pick up new tricks and remember old ones. In order to achieve this, we have collected hundreds of snippets that can be of use in a wide range of situations. We welcome new contributors and we like fresh ideas, as long as the code is short and easy to grasp in about 30 seconds. The only catch, if you may, is that a few of our snippets are not perfectly optimized for large, enterprise applications and they might not be deemed production-ready.</p><br />
|
||||
<h2 class="category-name">Related projects</h2>
|
||||
<p style="text-align: justify">The idea behind <strong>30 seconds of code</strong> has inspired some people to create similar collections in other programming languages and environments. Here are the ones we like the most:</p>
|
||||
<ul>
|
||||
<li><a href="https://atomiks.github.io/30-seconds-of-css/">30 seconds of CSS</a> by <strong>atomiks</strong></li>
|
||||
<li><a href="http://30secondsofinterviews.org/">30 seconds of Interviews</a> by <strong>fejes713</strong></li>
|
||||
<li><a href="https://github.com/kriadmin/30-seconds-of-python-code">30 seconds of Python</a> by <strong>kriadmin</strong></li>
|
||||
</ul><br />
|
||||
<h2 class="category-name">Maintainers</h2>
|
||||
<div class="flex-row">
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/Chalarangelo.png" alt="chalarangelo" />
|
||||
<a href="https://github.com/Chalarangelo" class="section button">Angelos Chalaris</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/fejes713.png" width="460px" height="460px" alt="fejes713" />
|
||||
<a href="https://github.com/fejes713" class="section button">Stefan Fejes</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/flxwu.png" alt="flxwu" />
|
||||
<a href="https://github.com/flxwu" class="section button">Felix Wu</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/atomiks.png" alt="atomiks" />
|
||||
<a href="https://github.com/atomiks" class="section button">atomiks</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/skatcat31.png" alt="skatcat31" />
|
||||
<a href="https://github.com/skatcat31" class="section button">Robert Mennell</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="category-name">Past maintainers</h2>
|
||||
<div class="flex-row">
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/kingdavidmartins.png" alt="kingdavidmartins" />
|
||||
<a href="https://github.com/kingdavidmartins" class="section button">King David Martins</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/elderhsouza.png" alt="elderhsouza" />
|
||||
<a href="https://github.com/elderhsouza" class="section button">Elder Henrique Souza</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/iamsoorena.png" alt="iamsoorena" />
|
||||
<a href="https://github.com/iamsoorena" class="section button">Soorena</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><h2 class="category-name">License</h2>
|
||||
<p style="text-align: justify">In order for <strong>30 seconds of code</strong> to be as accessible and useful as
|
||||
possible, all of the snippets in the collection are licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0
|
||||
License</a>, meaning they are absolutely free to use in any project you like. If you like what we do, you can
|
||||
always credit us, but that is not mandatory.</p><br />
|
||||
</main>
|
||||
<footer class="col-full-width container">
|
||||
<div class="col-centered">
|
||||
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
|
||||
license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a
|
||||
href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
|
||||
license.<br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;"
|
||||
width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a></p>
|
||||
<br />
|
||||
<p style="display: inline-block;"><a href="./about">About</a> <a href="./contributing">Contributing</a> <a
|
||||
href="./archive">Archive</a> <a href="./glossary">Glossary</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<a class="scroll-to-top" href="#top"></a></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -101,7 +101,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body onload="loader()">
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"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>
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; 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>
|
||||
<header>
|
||||
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"/><span id="title"> 30 seconds of code</span>
|
||||
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
|
||||
|
||||
@ -1,273 +0,0 @@
|
||||
<!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="./style.css">
|
||||
<title>30 seconds of code</title>
|
||||
<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="keywords" content="javascript, snippets, code, programming">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo@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="https://30secondsofcode.org/logos/logo_512.png">
|
||||
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"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/logos/logo_256.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="./array" class="button">View collection</a></p>
|
||||
</div>
|
||||
<div id="in-numbers">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<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-code" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
|
||||
<p><span id="snippet-count">$snippet-count</span><br/>snippets</p>
|
||||
</div>
|
||||
<div class="col-sm-3 no-padding" style="text-align: center">
|
||||
<svg version="1.1" width="24" height="24" viewBox="0 0 16 16" class="octicon octicon-organization" aria-hidden="true"><path fill-rule="evenodd" d="M16 12.999c0 .439-.45 1-1 1H7.995c-.539 0-.994-.447-.995-.999H1c-.54 0-1-.561-1-1 0-2.634 3-4 3-4s.229-.409 0-1c-.841-.621-1.058-.59-1-3 .058-2.419 1.367-3 2.5-3s2.442.58 2.5 3c.058 2.41-.159 2.379-1 3-.229.59 0 1 0 1s1.549.711 2.42 2.088A6.78 6.78 0 0 1 10 8.999s.229-.409 0-1c-.841-.62-1.058-.59-1-3 .058-2.419 1.367-3 2.5-3s2.437.581 2.495 3c.059 2.41-.158 2.38-1 3-.229.59 0 1 0 1s3.005 1.366 3.005 4z"/></svg>
|
||||
<p><span id="contrib-count">$contrib-count</span><br/>contributors</p>
|
||||
</div>
|
||||
<div class="col-sm-3 no-padding" style="text-align: center">
|
||||
<svg version="1.1" width="24" height="24" viewBox="0 0 10 16" class="octicon octicon-git-branch" aria-hidden="true"><path fill-rule="evenodd" d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 0 0-1-3.72C.88 1 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
|
||||
<p><span id="commit-count">$commit-count</span><br/>commits</p>
|
||||
</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">$star-count</span><br/>stars</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<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">Our philosophy</h2>
|
||||
<p style="text-align: justify">The core goal of <strong>30 seconds of code</strong> is to provide a quality resource for beginner and advanced JavaScript developers alike. We want to help improve the JavaScript ecosystem, by lowering the barrier of entry for newcomers and help seasoned veterans pick up new tricks and remember old ones. In order to achieve this, we have collected hundreds of snippets that can be of use in a wide range of situations. We welcome new contributors and we like fresh ideas, as long as the code is short and easy to grasp in about 30 seconds. The only catch, if you may, is that a few of our snippets are not perfectly optimized for large, enterprise applications and they might not be deemed production-ready.</p><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<div class="card fluid">
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-2 col-lg-3 no-padding" id="license-icon"><svg version="1.1" width="64" height="64" viewBox="0 0 14 16" class="octicon octicon-law" aria-hidden="true"><path fill-rule="evenodd" d="M7 4c-.83 0-1.5-.67-1.5-1.5S6.17 1 7 1s1.5.67 1.5 1.5S7.83 4 7 4zm7 6c0 1.11-.89 2-2 2h-1c-1.11 0-2-.89-2-2l2-4h-1c-.55 0-1-.45-1-1H8v8c.42 0 1 .45 1 1h1c.42 0 1 .45 1 1H3c0-.55.58-1 1-1h1c0-.55.58-1 1-1h.03L6 5H5c0 .55-.45 1-1 1H3l2 4c0 1.11-.89 2-2 2H2c-1.11 0-2-.89-2-2l2-4H1V5h3c0-.55.45-1 1-1h4c.55 0 1 .45 1 1h3v1h-1l2 4zM2.5 7L1 10h3L2.5 7zM13 10l-1.5-3-1.5 3h3z"/></svg>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-10 col-lg-9 no-padding" style="padding:0"><p style="text-align: justify" id="license">In order for <strong>30 seconds of code</strong> to be as accessible and useful as possible, all of the snippets in the collection are licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0 License</a>, meaning they are absolutely free to use in any project you like. If you like what we do, you can always credit us, but that is not mandatory.</p></div>
|
||||
</div>
|
||||
</div><br/>
|
||||
</div>
|
||||
</div>
|
||||
<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" 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>
|
||||
$daily-picks
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<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">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">Beginner's snippets</a></li>
|
||||
<li>If you want to level up your 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>
|
||||
<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">Related projects</h2>
|
||||
<p style="text-align: justify">The idea behind <strong>30 seconds of code</strong> has inspired some people to create similar collections in other programming languages and environments. Here are the ones we like the most:</p>
|
||||
<ul>
|
||||
<li><a href="https://atomiks.github.io/30-seconds-of-css/">30 seconds of CSS</a> by <strong>atomiks</strong></li>
|
||||
<li><a href="http://30secondsofinterviews.org/">30 seconds of Interviews</a> by <strong>fejes713</strong></li>
|
||||
<li><a href="https://github.com/kriadmin/30-seconds-of-python-code">30 seconds of Python</a> by <strong>kriadmin</strong></li>
|
||||
</ul><br/>
|
||||
</div>
|
||||
</div>
|
||||
<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">Top contributors</h2>
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/Chalarangelo.png" alt="chalarangelo"/>
|
||||
<a href="https://github.com/Chalarangelo" class="section button">Angelos Chalaris</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/fejes713.png" alt="fejes713"/>
|
||||
<a href="https://github.com/fejes713" class="section button">Stefan Feješ</a>
|
||||
</div></div>
|
||||
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/flxwu.png" alt="flxwu"/>
|
||||
<a href="https://github.com/flxwu" class="section button">Felix Wu</a>
|
||||
</div></div>
|
||||
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/atomiks.png" alt="atomiks"/>
|
||||
<a href="https://github.com/atomiks" class="section button">atomiks</a>
|
||||
</div></div>
|
||||
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/kingdavidmartins.png" alt="kingdavidmartins"/>
|
||||
<a href="https://github.com/kingdavidmartins" class="section button">King David Martins</a>
|
||||
</div></div>
|
||||
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/kriadmin.png" alt="kriadmin"/>
|
||||
<a href="https://github.com/kriadmin" class="section button">Rohit Tanwar</a>
|
||||
</div></div>
|
||||
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/iamsoorena.png" alt="iamsoorena"/>
|
||||
<a href="https://github.com/iamsoorena" class="section button">Soorena Soleimani</a>
|
||||
</div></div>
|
||||
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/skatcat31.png" alt="skatcat31"/>
|
||||
<a href="https://github.com/skatcat31" class="section button">Robert Mennell</a>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">How to contribute</h2>
|
||||
<p style="text-align: justify">Do you have a cool idea for a new snippet? Maybe some code you use often and is not part of our collection? Contributing to <strong>30 seconds of code</strong> is as simple as 1,2,3,4!</p>
|
||||
<div class="card fluid contribution-guideline">
|
||||
<span class="contribution-number">1</span>
|
||||
<div class="section">
|
||||
<h3>Create</h3>
|
||||
<p style="text-align: justify">Start by creating a snippet, according to the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/snippet-template.md">snippet template</a>. Make sure to follow these simple guidelines:</p>
|
||||
<ul style="text-align: justify">
|
||||
<li>Your snippet title must be unique and the same as the name of the implemented function.</li>
|
||||
<li>Use the snippet description to explain what your snippet does and how it works.</li>
|
||||
<li>Try to keep the snippet's code short and to the point. Use modern techniques and features.</li>
|
||||
<li>Remember to provide an example of how your snippet works.</li>
|
||||
<li>Your snippet should solve a real-world problem, no matter how simple.</li>
|
||||
<li>Never modify README.md or any of the HTML files.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fluid contribution-guideline">
|
||||
<span class="contribution-number">2</span>
|
||||
<div class="section">
|
||||
<h3>Tag</h3>
|
||||
<p style="text-align: justify">Run <code>npm run tagger</code> from your terminal, then open the tag_database file and tag your snippet appropriately. Multitagging is also supported, just make sure the first tag you specify is on of the major tags and the one that is most relevant to the implemented function.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fluid contribution-guideline">
|
||||
<span class="contribution-number">3</span>
|
||||
<div class="section">
|
||||
<h3>Test</h3>
|
||||
<p style="text-align: justify">You can optionally test your snippet to make our job easier. Simply run <code>npm run tester</code> to generate the test files for your snippet. Find the related folder for you snippet under the test directory and write some tests. Remember to run <code>npm run tester</code> again to make sure your tests are passing.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fluid contribution-guideline">
|
||||
<span class="contribution-number">4</span>
|
||||
<div class="section">
|
||||
<h3>Pull request</h3>
|
||||
<p style="text-align: justify">If you have done everything mentioned above, you should now have an awesome snippet to add to our collection. Simply start a pull request and follow the guidelines provided. Remember to only submit one snippet per pull request, so that we can quickly evaluate and merge your code into the collection.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>If you need additional pointers about writing a snippet, be sure to read the complete <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/CONTRIBUTING.md">contribution guidelines</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<footer class="container"><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Sponsored by <img src="./sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;" width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>. <br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> are licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a> license.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.<br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></div></div></footer>
|
||||
<script>
|
||||
window.onload = function(){
|
||||
let counters = ['#snippet-count', '#contrib-count', '#commit-count', '#star-count'];
|
||||
let values = [$snippet-count,$contrib-count,$commit-count,$star-count];
|
||||
let steps = [1,1,8,42];
|
||||
runCounter(counters[0],0,values[0],steps[0]);
|
||||
runCounter(counters[1],0,values[1],steps[1]);
|
||||
runCounter(counters[2],0,values[2],steps[2]);
|
||||
runCounter(counters[3],0,values[3],steps[3]);
|
||||
document.querySelector('button.next').addEventListener('click', function(e){
|
||||
let selected = document.getElementById('pick-slider').querySelector('.selected');
|
||||
if(selected == Array.from(document.querySelectorAll('.card.fluid.pick')).slice(-1)[0])
|
||||
{
|
||||
document.querySelector('.card.fluid.pick').className = 'card fluid pick selected';
|
||||
}
|
||||
else {
|
||||
selected.nextElementSibling.className = 'card fluid pick selected';
|
||||
}
|
||||
selected.className = 'card fluid pick';
|
||||
});
|
||||
|
||||
document.querySelector('button.previous').addEventListener('click', function(e){
|
||||
let selected = document.getElementById('pick-slider').querySelector('.selected');
|
||||
if(selected == document.querySelector('.card.fluid.pick'))
|
||||
{
|
||||
Array.from(document.querySelectorAll('.card.fluid.pick')).slice(-1)[0].className = 'card fluid pick selected';
|
||||
}
|
||||
else {
|
||||
selected.previousElementSibling.className = 'card fluid pick selected';
|
||||
}
|
||||
selected.className = 'card fluid pick';
|
||||
});
|
||||
document.addEventListener('click', function (event) {
|
||||
if ( event.target.classList.contains('collapse') ) {
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
|
||||
}
|
||||
else if (event.target.classList.contains('clipboard-copy')) {
|
||||
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text.trim();
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand("Copy");
|
||||
document.body.removeChild(textArea);
|
||||
let tst = document.createElement('div');
|
||||
tst.classList = 'toast';
|
||||
tst.innerHTML = 'Snippet copied to clipboard!';
|
||||
document.body.appendChild(tst);
|
||||
setTimeout(function() {
|
||||
tst.style.opacity = 0;
|
||||
setTimeout(function() {
|
||||
document.body.removeChild(tst);
|
||||
},300);
|
||||
},1700);
|
||||
}
|
||||
|
||||
}, false);
|
||||
}
|
||||
function runCounter(selector, start, end, increment = 1, duration = 2000){
|
||||
let current = start,
|
||||
step = end > start ? increment : -increment,
|
||||
timer = setInterval(function() {
|
||||
current += step;
|
||||
document.querySelector(selector).innerHTML = current;
|
||||
if (current >= end) document.querySelector(selector).innerHTML = end;
|
||||
if (current >= end) clearInterval(timer);
|
||||
}, Math.abs(Math.floor(duration / (end - start))));
|
||||
};
|
||||
|
||||
function elementIsVisibleInViewport(el, partiallyVisible = false) {
|
||||
const { top, left, bottom, right } = el.getBoundingClientRect();
|
||||
const { innerHeight, innerWidth } = window;
|
||||
return partiallyVisible
|
||||
? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
|
||||
((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
|
||||
: top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user