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

Updated web script to run uninhibited on Travis

Browse Source 
Uses the environment's GH_KEY hopefully.
This commit is contained in:
Angelos Chalaris
2018-04-07 19:56:40 +03:00
parent 26664df5f4
commit c7510d93be
4 changed files with 34 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/archive.html
View File

@ -10,7 +10,7 @@
gtag('config', 'UA-117141635-1'); gtag('config', 'UA-117141635-1');
</script> </script>
<link rel="stylesheet" href="./mini.css"> <link rel="stylesheet" href="./mini.css">
<title>Snippets for Beginners - 30 seconds of code</title> <title>Snippets Archive - 30 seconds of code</title>
<meta charset="utf-8"> <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="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="keywords" content="javascript, snippets, code, programming">

2
docs/beginner.html
View File

@ -93,7 +93,7 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"> <div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
<h2 class="index-section">Beginner snippets</h2> <h2 class="index-section">Snippets for Beginners</h2>
<p style="text-align: justify">The following section is aimed towards individuals who are at the start of their web developer journey. Each snippet in the next section is simple yet very educational for newcomers. This section is by no means a complete resource for learning modern JavaScript. However, it is enough to grasp some common concepts and use cases. We also strongly recommend checking out <a href="https://developer.mozilla.org/bm/docs/Web/JavaScript">MDN web docs</a> as a learning resource.</p><br/> <p style="text-align: justify">The following section is aimed towards individuals who are at the start of their web developer journey. Each snippet in the next section is simple yet very educational for newcomers. This section is by no means a complete resource for learning modern JavaScript. However, it is enough to grasp some common concepts and use cases. We also strongly recommend checking out <a href="https://developer.mozilla.org/bm/docs/Web/JavaScript">MDN web docs</a> as a learning resource.</p><br/>
</div> </div>
</div> </div>

56
docs/index.html
View File

@ -76,42 +76,32 @@
<div id="pick-slider"> <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="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> <button class="previous" aria-label="previous"><svg version="1.1" width="8" height="16" viewBox="0 0 8 16" class="octicon octicon-chevron-left" aria-hidden="true"><path fill-rule="evenodd" d="M6 3l1.5 1.5L3.75 8l3.75 3.5L6 13 1 8l5-5z"/></svg></button>
<div class="card fluid pick selected"><h3 id="createelement.md" class="section double-padded">createElement</h3><div class="section double-padded"> <div class="card fluid pick selected"><h3 id="difference.md" class="section double-padded">difference</h3><div class="section double-padded">
<p>Creates an element from a string (without appending it to the document). <p>Returns the difference between two arrays.</p>
If the given string contains multiple elements, only the first one will be returned.</p> <p>Create a <code>Set</code> from <code>b</code>, then use <code>Array.filter()</code> on <code>a</code> to only keep values not contained in <code>b</code>.</p>
<p>Use <code>document.createElement()</code> to create a new element. <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">difference</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
Set its <code>innerHTML</code> to the string supplied as the argument. <span class="token keyword">const</span> s <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>b<span class="token punctuation">);</span>
Use <code>ParentNode.firstElementChild</code> to return the element version of the string.</p> <span class="token keyword">return</span> a<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>x <span class="token operator">=> !</span>s<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>x<span class="token punctuation">));
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">createElement</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">);</span>
el<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> str<span class="token punctuation">;</span>
<span class="token keyword">return</span> el<span class="token punctuation">.</span>firstElementChild<span class="token punctuation">;
};</span> };</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> el <span class="token operator">=</span> <span class="token function">createElement</span><span class="token punctuation">(</span> </pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">difference</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">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]);</span> <span class="token comment">// [3]</span>
<span class="token template-string"><span class="token string">`&lt;div class="container">
&lt;p>Hello!&lt;/p>
&lt;/div>`</span></span>
<span class="token punctuation">);</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>el<span class="token punctuation">.</span>className<span class="token punctuation">);</span> <span class="token comment">// 'container'</span>
</pre> </pre>
<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="issymbol.md" class="section double-padded">isSymbol</h3><div class="section double-padded"> <button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="hasflags.md" class="section double-padded">hasFlags</h3><div class="section double-padded">
<p>Checks if the given argument is a symbol.</p> <p>Check if the current process's arguments contain the specified flags.</p>
<p>Use <code>typeof</code> to check if a value is classified as a symbol primitive.</p> <p>Use <code>Array.every()</code> and <code>Array.includes()</code> to check if <code>process.argv</code> contains all the specified flags.
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isSymbol</span> <span class="token operator">=</span> val <span class="token operator">=></span> <span class="token keyword">typeof</span> val <span class="token operator">===</span> <span class="token string">'symbol'</span><span class="token punctuation">;</span> Use a regular expression to test if the specified flags are prefixed with <code>-</code> or <code>--</code> and prefix them accordingly.</p>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isSymbol</span><span class="token punctuation">(</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'x'</span><span class="token punctuation">));</span> <span class="token comment">// true</span> <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">hasFlags</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>flags<span class="token punctuation">)</span> <span class="token operator">=></span>
flags<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span>flag <span class="token operator">=></span> process<span class="token punctuation">.</span>argv<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token regex">/^-{1,2}/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>flag<span class="token punctuation">)</span> <span class="token operator">?</span> flag <span class="token punctuation">:</span> <span class="token string">'--'</span> <span class="token operator">+</span> flag<span class="token punctuation">));</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token comment">// node myScript.js -s --test --cool=true</span>
<span class="token function">hasFlags</span><span class="token punctuation">(</span><span class="token string">'-s'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
<span class="token function">hasFlags</span><span class="token punctuation">(</span><span class="token string">'--test'</span><span class="token punctuation">,</span> <span class="token string">'cool=true'</span><span class="token punctuation">,</span> <span class="token string">'-s'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
<span class="token function">hasFlags</span><span class="token punctuation">(</span><span class="token string">'special'</span><span class="token punctuation">);</span> <span class="token comment">// false</span>
</pre> </pre>
<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="scrolltotop.md" class="section double-padded">scrollToTop</h3><div class="section double-padded"> <button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="isplainobject.md" class="section double-padded">isPlainObject</h3><div class="section double-padded">
<p>Smooth-scrolls to the top of the page.</p> <p>Checks if the provided value is an object created by the Object constructor.</p>
<p>Get distance from top using <code>document.documentElement.scrollTop</code> or <code>document.body.scrollTop</code>. <p>Check if the provided value is truthy, use <code>typeof</code> to check if it is an object and <code>Object.constructor</code> to make sure the constructor is equal to <code>Object</code>.</p>
Scroll by a fraction of the distance from the top. Use <code>window.requestAnimationFrame()</code> to animate the scrolling.</p> <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isPlainObject</span> <span class="token operator">=</span> val <span class="token operator">=> !!</span>val <span class="token operator">&amp;&amp;</span> <span class="token keyword">typeof</span> val <span class="token operator">===</span> <span class="token string">'object'</span> <span class="token operator">&amp;&amp;</span> val<span class="token punctuation">.</span>constructor <span class="token operator">===</span> Object<span class="token punctuation">;</span>
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">scrollToTop</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token punctuation">{</span> </pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isPlainObject</span><span class="token punctuation">({</span> a<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">});</span> <span class="token comment">// true</span>
<span class="token keyword">const</span> c <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop <span class="token operator">||</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span> <span class="token function">isPlainObject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">());</span> <span class="token comment">// false</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>c <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">) {</span>
window<span class="token punctuation">.</span><span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span>scrollToTop<span class="token punctuation">);</span>
window<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> c <span class="token operator">-</span> c <span class="token operator">/</span> <span class="token number">8</span><span class="token punctuation">);
}
};</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">scrollToTop</span><span class="token punctuation">();</span>
</pre> </pre>
<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div> <button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div>
<br/> <br/>

10
scripts/web.js
View File

@ -132,7 +132,15 @@ if(!util.isTravisCI() || (util.isTravisCI() && (process.env['TRAVIS_EVENT_TYPE']
indexStaticFile = indexStaticFile.replace('$daily-picks',indexDailyPicks); indexStaticFile = indexStaticFile.replace('$daily-picks',indexDailyPicks);
// Use the Github API to get the needed data // Use the Github API to get the needed data
const githubApi = 'api.github.com'; const githubApi = 'api.github.com';
const headers = { 'User-Agent' : '30-seconds-of-code'}; const headers = util.isTravisCI()
? { 'User-Agent' : '30-seconds-of-code', 'Authorization': 'token '+process.env['GH_TOKEN']}
: { 'User-Agent' : '30-seconds-of-code'};
// Test the API's rate limit (keep for various reasons)
https.get({host: githubApi, path: '/rate_limit?', headers: headers}, res =>{
res.on('data', function (chunk) {
console.log('Remaining requests: '+JSON.parse(chunk).resources.core.remaining);
});
});
// Send requests and wait for responses, write to the page // Send requests and wait for responses, write to the page
https.get({host: githubApi, path: '/repos/chalarangelo/30-seconds-of-code/commits?per_page=1', headers: headers}, resCommits =>{ https.get({host: githubApi, path: '/repos/chalarangelo/30-seconds-of-code/commits?per_page=1', headers: headers}, resCommits =>{
https.get({host: githubApi, path: '/repos/chalarangelo/30-seconds-of-code/contributors?per_page=1', headers: headers}, resContributors => { https.get({host: githubApi, path: '/repos/chalarangelo/30-seconds-of-code/contributors?per_page=1', headers: headers}, resContributors => {