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

Merge branch 'master' into isPrimitive

Browse Source
This commit is contained in:
Angelos Chalaris
2017-12-31 19:28:20 +02:00
committed by GitHub
parent a14a4c2a0c 40bdbdaa91
commit aeb392c910
24 changed files with 871 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

487
README.md
View File

@ -9,12 +9,13 @@
- Use <kbd>Ctrl</kbd> + <kbd>F</kbd> or <kbd>command</kbd> + <kbd>F</kbd> to search for a snippet.
- Contributions welcome, please read the [contribution guide](CONTRIBUTING.md).
- Snippets are written in ES6, use the [Babel transpiler](https://babeljs.io/) to ensure backwards-compatibility.
- You can import these snippets into your text editor of choice (VSCode, Atom, Sublime) using the files found in [this repo](https://github.com/Rob-Rychs/30-seconds-of-code-texteditorsnippets).
- You can import these snippets into Alfred 3, using [this file](https://github.com/lslvxy/30-seconds-of-code-alfredsnippets).
- You can find a package with all the snippets on [npm](https://www.npmjs.com/package/tsoc). Bear in mind that most of these snippets are not production-ready.
## Table of Contents
### Adapter
### 🔌 Adapter
<details>
<summary>View contents</summary>
@ -28,7 +29,7 @@
</details>
### Array
### 📚 Array
<details>
<summary>View contents</summary>
@ -63,6 +64,7 @@
* [`quickSort`](#quicksort)
* [`remove`](#remove)
* [`sample`](#sample)
* [`sampleSize`](#samplesize)
* [`shuffle`](#shuffle)
* [`similarity`](#similarity)
* [`symmetricDifference`](#symmetricdifference)
@ -76,13 +78,14 @@
</details>
### Browser
### 🌐 Browser
<details>
<summary>View contents</summary>
* [`arrayToHtmlList`](#arraytohtmllist)
* [`bottomVisible`](#bottomvisible)
* [`copyToClipboard`](#copytoclipboard)
* [`currentURL`](#currenturl)
* [`detectDeviceType`](#detectdevicetype)
* [`elementIsVisibleInViewport`](#elementisvisibleinviewport)
@ -97,12 +100,13 @@
* [`scrollToTop`](#scrolltotop)
* [`setStyle`](#setstyle)
* [`show`](#show)
* [`speechSynthesis`](#speechsynthesis)
* [`toggleClass`](#toggleclass)
* [`UUIDGeneratorBrowser`](#uuidgeneratorbrowser)
</details>
### Date
### ⏱️ Date
<details>
<summary>View contents</summary>
@ -114,7 +118,7 @@
</details>
### Function
### 🎛️ Function
<details>
<summary>View contents</summary>
@ -123,12 +127,13 @@
* [`compose`](#compose)
* [`curry`](#curry)
* [`functionName`](#functionname)
* [`memoize`](#memoize)
* [`runPromisesInSeries`](#runpromisesinseries)
* [`sleep`](#sleep)
</details>
### Logic
### 🔮 Logic
<details>
<summary>View contents</summary>
@ -137,7 +142,7 @@
</details>
### Math
### ➗ Math
<details>
<summary>View contents</summary>
@ -173,16 +178,7 @@
</details>
### Media
<details>
<summary>View contents</summary>
* [`speechSynthesis`](#speechsynthesis)
</details>
### Node
### 📦 Node
<details>
<summary>View contents</summary>
@ -193,7 +189,7 @@
</details>
### Object
### 🗃️ Object
<details>
<summary>View contents</summary>
@ -205,11 +201,12 @@
* [`orderBy`](#orderby)
* [`select`](#select)
* [`shallowClone`](#shallowclone)
* [`size`](#size)
* [`truthCheckCollection`](#truthcheckcollection)
</details>
### String
### 📜 String
<details>
<summary>View contents</summary>
@ -222,6 +219,7 @@
* [`escapeHTML`](#escapehtml)
* [`escapeRegExp`](#escaperegexp)
* [`fromCamelCase`](#fromcamelcase)
* [`isAbsoluteURL`](#isabsoluteurl)
* [`palindrome`](#palindrome)
* [`repeatString`](#repeatstring)
* [`reverseString`](#reversestring)
@ -236,7 +234,7 @@
</details>
### Utility
### 💎 Utility
<details>
<summary>View contents</summary>
@ -247,11 +245,15 @@
* [`getType`](#gettype)
* [`hexToRGB`](#hextorgb)
* [`isArray`](#isarray)
* [`isArrayLike`](#isarraylike)
* [`isBoolean`](#isboolean)
* [`isFunction`](#isfunction)
* [`isNull`](#isnull)
* [`isNumber`](#isnumber)
* [`isPromiseLike`](#ispromiselike)
* [`isString`](#isstring)
* [`isSymbol`](#issymbol)
* [`isValidJSON`](#isvalidjson)
* [`randomHexColorCode`](#randomhexcolorcode)
* [`RGBToHex`](#rgbtohex)
* [`sdbm`](#sdbm)
@ -259,10 +261,21 @@
* [`toDecimalMark`](#todecimalmark)
* [`toOrdinalSuffix`](#toordinalsuffix)
* [`validateNumber`](#validatenumber)
* [`yesNo`](#yesno)
</details>
## Adapter
### _Uncategorized_
<details>
<summary>View contents</summary>
* [`sortedIndex`](#sortedindex)
</details>
---
## 🔌 Adapter
### call
@ -424,7 +437,8 @@ arrayMax([1, 2, 4]); // 4
<br>[⬆ Back to top](#table-of-contents)
## Array
---
## 📚 Array
### chunk
@ -1190,6 +1204,38 @@ sample([3, 7, 9, 11]); // 9
<br>[⬆ Back to top](#table-of-contents)
### sampleSize
Gets `n` random elements at unique keys from `array` up to the size of `array`.
Shuffle the array using the [Fisher-Yates algorithm](https://github.com/chalarangelo/30-seconds-of-code#shuffle).
Use `Array.slice()` to get the first `n` elements.
Omit the second argument, `n` to get only one element at random from the array.
```js
const sampleSize = ([...arr], n = 1) => {
let m = arr.length;
while (m) {
const i = Math.floor(Math.random() * m--);
[arr[m], arr[i]] = [arr[i], arr[m]];
}
return arr.slice(0, n);
};
```
<details>
<summary>Examples</summary>
```js
sampleSize([1, 2, 3], 2); // [3,1]
sampleSize([1, 2, 3], 4); // [2,3,1]
```
</details>
<br>[⬆ Back to top](#table-of-contents)
### shuffle
Randomizes the order of the values of an array, returning a new array.
@ -1437,7 +1483,8 @@ zipObject(['a', 'b'], [1, 2, 3]); // {a: 1, b: 2}
<br>[⬆ Back to top](#table-of-contents)
## Browser
---
## 🌐 Browser
### arrayToHtmlList
@ -1486,6 +1533,48 @@ bottomVisible(); // true
<br>[⬆ Back to top](#table-of-contents)
### copyToClipboard
Copy a string to the clipboard. Only works as a result of user action (i.e. inside a `click` event listener).
Create a new `<textarea>` element, fill it with the supplied data and add it to the HTML document.
Use `Selection.getRangeAt()`to store the selected range (if any).
Use `document.execCommand('copy')` to copy to the clipboard.
Remove the `<textarea>` element from the HTML document.
Finally, use `Selection().addRange()` to recover the original selected range (if any).
```js
const copyToClipboard = str => {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selected =
document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
};
```
<details>
<summary>Examples</summary>
```js
copyToClipboard('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard.
```
</details>
<br>[⬆ Back to top](#table-of-contents)
### currentURL
Returns the current URL.
@ -1842,6 +1931,35 @@ show(document.querySelectorAll('img')); // Shows all <img> elements on the page
<br>[⬆ Back to top](#table-of-contents)
### speechSynthesis
Performs speech synthesis (experimental).
Use `SpeechSynthesisUtterance.voice` and `window.speechSynthesis.getVoices()` to convert a message to speech.
Use `window.speechSynthesis.speak()` to play the message.
Learn more about the [SpeechSynthesisUtterance interface of the Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance).
```js
const speechSynthesis = message => {
const msg = new SpeechSynthesisUtterance(message);
msg.voice = window.speechSynthesis.getVoices()[0];
window.speechSynthesis.speak(msg);
};
```
<details>
<summary>Examples</summary>
```js
speechSynthesis('Hello, World'); // // plays the message
```
</details>
<br>[⬆ Back to top](#table-of-contents)
### toggleClass
Toggle a class for an element.
@ -1888,7 +2006,8 @@ UUIDGeneratorBrowser(); // '7982fcfe-5721-4632-bede-6000885be57d'
<br>[⬆ Back to top](#table-of-contents)
## Date
---
## ⏱️ Date
### getDaysDiffBetweenDates
@ -1988,7 +2107,8 @@ tomorrow(); // 2017-12-27 (if current date is 2017-12-26)
<br>[⬆ Back to top](#table-of-contents)
## Function
---
## 🎛️ Function
### chainAsync
@ -2103,6 +2223,35 @@ functionName(Math.max); // max (logged in debug channel of console)
<br>[⬆ Back to top](#table-of-contents)
### memoize
Returns the memoized (cached) function.
Use `Object.create(null)` to create an empty object without `Object.prototype` (so that those properties are not resolved if the input value is something like `'hasOwnProperty'`).
Return a function which takes a single argument to be supplied to the memoized function by first checking if the function's output for that specific input value is already cached, or store and return it if not.
```js
const memoize = fn => {
const cache = Object.create(null);
return value => cache[value] || (cache[value] = fn(value));
};
```
<details>
<summary>Examples</summary>
```js
// See the `anagrams` snippet.
const anagramsCached = memoize(anagrams);
anagramsCached('javascript'); // takes a long time
anagramsCached('javascript'); // returns virtually instantly since it's now cached
```
</details>
<br>[⬆ Back to top](#table-of-contents)
### runPromisesInSeries
Runs an array of promises in series.
@ -2151,7 +2300,8 @@ async function sleepyWork() {
<br>[⬆ Back to top](#table-of-contents)
## Logic
---
## 🔮 Logic
### negate
@ -2175,7 +2325,8 @@ negate(isOdd)(1); // false
<br>[⬆ Back to top](#table-of-contents)
## Math
---
## ➗ Math
### average
@ -2398,7 +2549,7 @@ const fibonacciUntilNum = num => {
<summary>Examples</summary>
```js
fibonacciCountUntilNum(10); // 7
fibonacciUntilNum(10); // [ 0, 1, 1, 2, 3, 5, 8 ]
```
</details>
@ -2568,7 +2719,7 @@ Return `false` if any of them divides the given number, else return `true`, unle
```js
const isPrime = num => {
const boundary = Math.floor(Math.sqrt(num));
for (var i = 2; i * i <= boundary; i++) if (num % i == 0) return false;
for (var i = 2; i <= boundary; i++) if (num % i == 0) return false;
return num >= 2;
};
```
@ -2880,37 +3031,8 @@ sum([1, 2, 3, 4]); // 10
<br>[⬆ Back to top](#table-of-contents)
## Media
### speechSynthesis
Performs speech synthesis (experimental).
Use `SpeechSynthesisUtterance.voice` and `window.speechSynthesis.getVoices()` to convert a message to speech.
Use `window.speechSynthesis.speak()` to play the message.
Learn more about the [SpeechSynthesisUtterance interface of the Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance).
```js
const speechSynthesis = message => {
const msg = new SpeechSynthesisUtterance(message);
msg.voice = window.speechSynthesis.getVoices()[0];
window.speechSynthesis.speak(msg);
};
```
<details>
<summary>Examples</summary>
```js
speechSynthesis('Hello, World'); // // plays the message
```
</details>
<br>[⬆ Back to top](#table-of-contents)
## Node
---
## 📦 Node
### JSONToFile
@ -2999,7 +3121,8 @@ UUIDGeneratorNode(); // '79c7c136-60ee-40a2-beb2-856f1feabefc'
<br>[⬆ Back to top](#table-of-contents)
## Object
---
## 🗃️ Object
### cleanObj
@ -3193,6 +3316,40 @@ a === b; // false
<br>[⬆ Back to top](#table-of-contents)
### size
Get size of arrays, objects or strings.
Get type of `value` (`array`, `object` or `string`).
Use `length` property for arrays.
Use `length` or `size` value if available or number of keys for objects.
Use `size` of a [`Blob` object](https://developer.mozilla.org/en-US/docs/Web/API/Blob) created from `value` for strings.
Split strings into array of characters with `split('')` and return its length.
```js
const size = value =>
Array.isArray(value)
? value.length
: value && typeof value === 'object'
? value.size || value.length || Object.keys(value).length
: typeof value === 'string' ? new Blob([value]).size : 0;
```
<details>
<summary>Examples</summary>
```js
size([1, 2, 3, 4, 5]); // 5
size('size'); // 4
size({ one: 1, two: 2, three: 3 }); // 3
```
</details>
<br>[⬆ Back to top](#table-of-contents)
### truthCheckCollection
Checks if the predicate (second argument) is truthy on all elements of a collection (first argument).
@ -3214,7 +3371,8 @@ truthCheckCollection([{ user: 'Tinky-Winky', sex: 'male' }, { user: 'Dipsy', sex
<br>[⬆ Back to top](#table-of-contents)
## String
---
## 📜 String
### anagrams
@ -3273,7 +3431,7 @@ byteSize('Hello World'); // 11
<br>[⬆ Back to top](#table-of-contents)
### Capitalize
### capitalize
Capitalizes the first letter of a string.
@ -3427,6 +3585,30 @@ fromCamelCase('someJavascriptProperty', '_'); // 'some_javascript_property'
<br>[⬆ Back to top](#table-of-contents)
### isAbsoluteURL
Returns `true` if the given string is an absolute URL, `false` otherwise.
Use a regular expression to test if the string is an absolute URL.
```js
const isAbsoluteURL = str => /^[a-z][a-z0-9+.-]*:/.test(str);
```
<details>
<summary>Examples</summary>
```js
isAbsoluteURL('https://google.com'); // true
isAbsoluteURL('ftp://www.myserver.net'); // true
isAbsoluteURL('/foo/bar'); // false
```
</details>
<br>[⬆ Back to top](#table-of-contents)
### palindrome
Returns `true` if the given string is a palindrome, `false` otherwise.
@ -3633,13 +3815,12 @@ Break the string into words and combine them using `_` as a separator.
For more detailed explanation of this Regex, [visit this Site](https://regex101.com/r/bMCgAB/1).
```js
const toSnakeCase = str => {
const toSnakeCase = str =>
str &&
str
.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
.map(x => x.toLowerCase())
.join('_');
};
```
<details>
@ -3738,7 +3919,8 @@ words('python, javaScript & coffee'); // ["python", "javaScript", "coffee"]
<br>[⬆ Back to top](#table-of-contents)
## Utility
---
## 💎 Utility
### coalesce
@ -3902,6 +4084,35 @@ isArray([1]); // true
<br>[⬆ Back to top](#table-of-contents)
### isArrayLike
Checks if the provided argument is array-like (i.e. is iterable).
Check that the object is not a function or `null` and that its `length` property is a non-negative integer below `Number.MAX_SAFE_INTEGER`.
```js
const isArrayLike = val =>
val != null &&
typeof val != 'function' &&
val.length > -1 &&
val.length % 1 == 0 &&
val.length <= Number.MAX_SAFE_INTEGER;
```
<details>
<summary>Examples</summary>
```js
isArrayLike(document.querySelectorAll('.className')); // true
isArrayLike('abc'); // true
isArrayLike(null); // false
```
</details>
<br>[⬆ Back to top](#table-of-contents)
### isBoolean
Checks if the given argument is a native boolean element.
@ -3948,6 +4159,29 @@ isFunction(x => x); // true
<br>[⬆ Back to top](#table-of-contents)
### isNull
Returns `true` if the specified value is `null`, `false` otherwise.
Use the strict equality operator to check if the value and of `val` are equal to `null`.
```js
const isNull = val => val === null;
```
<details>
<summary>Examples</summary>
```js
isNull(null); // true
isNull('null'); // false
```
</details>
<br>[⬆ Back to top](#table-of-contents)
### isNumber
Checks if the given argument is a number.
@ -3970,6 +4204,37 @@ isNumber(1); // true
<br>[⬆ Back to top](#table-of-contents)
### isPromiseLike
Returns `true` if an object looks like a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), `false` otherwise.
Check if the object is not `null`, its `typeof` matches either `object` or `function` and if it has a `.then` property, which is also a `function`.
```js
const isPromiseLike = obj =>
obj !== null &&
(typeof obj === 'object' || typeof obj === 'function') &&
typeof obj.then === 'function';
```
<details>
<summary>Examples</summary>
```js
isPromiseLike({
then: function() {
return '';
}
}); // true
isPromiseLike(null); // false
isPromiseLike({}); // false
```
</details>
<br>[⬆ Back to top](#table-of-contents)
### isString
Checks if the given argument is a string.
@ -4016,6 +4281,37 @@ isSymbol(Symbol('x')); // true
<br>[⬆ Back to top](#table-of-contents)
### isValidJSON
Checks if the provided argument is a valid JSON.
Use `JSON.parse()` and a `try... catch` block to check if the provided argument is a valid JSON.
```js
const isValidJSON = obj => {
try {
JSON.parse(obj);
return true;
} catch (e) {
return false;
}
};
```
<details>
<summary>Examples</summary>
```js
isValidJSON('{"name":"Adam","age":20}'); // true
isValidJSON('{"name":"Adam",age:"20"}'); // false
isValidJSON(null); // true
```
</details>
<br>[⬆ Back to top](#table-of-contents)
### randomHexColorCode
Generates a random hexadecimal color code.
@ -4200,6 +4496,65 @@ validateNumber('10'); // true
<br>[⬆ Back to top](#table-of-contents)
### yesNo
Returns `true` if the string is `y`/`yes` or `false` if the string is `n`/`no`.
Use `RegExp.test()` to check if the string evaluates to `y/yes` or `n/no`.
Omit the second argument, `def` to set the default answer as `no`.
```js
const yesNo = (val, def = false) =>
/^(y|yes)$/i.test(val) ? true : /^(n|no)$/i.test(val) ? false : def;
```
<details>
<summary>Examples</summary>
```js
yesNo('Y'); // true
yesNo('yes'); // true
yesNo('No'); // false
yesNo('Foo', true); // true
```
</details>
<br>[⬆ Back to top](#table-of-contents)
---
## _Uncategorized_
### sortedIndex
Returns the lowest index at which value should be inserted into array in order to maintain its sort order.
Check if the array is sorted in descending order (loosely).
Use `Array.findIndex()` to find the appropriate index where the element should be inserted.
```js
const sortedIndex = (arr, n) => {
const isDescending = arr[0] > arr[arr.length - 1];
const index = arr.findIndex(el => (isDescending ? n >= el : n <= el));
return index === -1 ? arr.length : index;
};
```
```js
sortedIndex([5, 3, 2, 1], 4); // 1
sortedIndex([30, 50], 40); // 1
```
<br>[⬆ back to top](#table-of-contents)
## Collaborators
| [<img src="https://github.com/Chalarangelo.png" width="100px;"/>](https://github.com/Chalarangelo)<br/> [<sub>Angelos Chalaris</sub>](https://github.com/Chalarangelo) | [<img src="https://github.com/Pl4gue.png" width="100px;"/>](https://github.com/Pl4gue)<br/> [<sub>David Wu</sub>](https://github.com/Pl4gue) | [<img src="https://github.com/fejes713.png" width="100px;"/>](https://github.com/fejes713)<br/> [<sub>Stefan Feješ</sub>](https://github.com/fejes713) | [<img src="https://github.com/kingdavidmartins.png" width="100px;"/>](https://github.com/kingdavidmartins)<br/> [<sub>King David Martins</sub>](https://github.com/iamsoorena) | [<img src="https://github.com/iamsoorena.png" width="100px;"/>](https://github.com/iamsoorena)<br/> [<sub>Soorena Soleimani</sub>](https://github.com/iamsoorena) |
| --- | --- | --- | --- | --- |
| [<img src="https://github.com/elderhsouza.png" width="100px;"/>](https://github.com/elderhsouza)<br/> [<sub>Elder Henrique Souza</sub>](https://github.com/elderhsouza) | [<img src="https://github.com/skatcat31.png" width="100px;"/>](https://github.com/skatcat31)<br/> [<sub>Robert Mennell</sub>](https://github.com/skatcat31) | [<img src="https://github.com/atomiks.png" width="100px;"/>](https://github.com/atomiks)<br/> [<sub>atomiks</sub>](https://github.com/atomiks) |
## Credits
*Icons made by [Smashicons](https://www.flaticon.com/authors/smashicons) from [www.flaticon.com](https://www.flaticon.com/) is licensed by [CC 3.0 BY](http://creativecommons.org/licenses/by/3.0/).*

119
docs/index.html
View File

File diff suppressed because one or more lines are too long

2
docs/mini.css
View File

File diff suppressed because one or more lines are too long

2
docs/mini/flavor.scss
View File

@ -121,7 +121,7 @@ code {
transform: scale(1); /* Deals with the issue described in #243 */
}
pre { font-size: 1rem; border: 0.0625rem solid var(--secondary-border-color); border-radius: var(--universal-border-radius);}
.group{position:relative;margin-top:2em;margin-bottom:-1em}
.group{position:relative;margin-top:2em;margin-bottom:1em}
.search{font-size:14px;margin-top:-.1em;display:block;width:100%;border:none;border-bottom:1px solid var(--nav-link-color)}
.search:focus{outline:none}
label#search-label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;left:5px;top:10px}

122
scripts/build.js
View File

@ -3,51 +3,64 @@
Run using `npm run builder`.
*/
// Load modules
const fs = require('fs-extra'),
path = require('path'),
chalk = require('chalk');
// Set variables for paths
const snippetsPath = './snippets',
staticPartsPath = './static-parts';
// Set variables for script
let snippets = {},
startPart = '',
const fs = require('fs-extra');
const path = require('path');
const chalk = require('chalk');
const SNIPPETS_PATH = './snippets';
const STATIC_PARTS_PATH = './static-parts';
const snippets = {};
const EMOJIS = {
adapter: '🔌',
array: '📚',
browser: '🌐',
date: '⏱️',
function: '🎛️',
logic: '🔮',
math: '➗',
media: '📺',
node: '📦',
object: '🗃️',
string: '📜',
utility: '💎'
};
let startPart = '',
endPart = '',
output = '',
tagDbData = {};
// Load helper functions (these are from existing snippets in 30 seconds of code!)
const objectFromPairs = arr => arr.reduce((a, v) => ((a[v[0]] = v[1]), a), {});
const capitalize = (str, lowerRest = false) =>
str.slice(0, 1).toUpperCase() + (lowerRest ? str.slice(1).toLowerCase() : str.slice(1));
// Start the timer of the script
console.time('Builder');
// Synchronously read all snippets and sort them as necessary (case-insensitive)
try {
let snippetFilenames = fs.readdirSync(snippetsPath);
snippetFilenames.sort((a, b) => {
a = a.toLowerCase();
b = b.toLowerCase();
if (a < b) return -1;
if (a > b) return 1;
return 0;
});
const snippetFilenames = fs
.readdirSync(SNIPPETS_PATH)
.sort((a, b) => a.toLowerCase() - b.toLowerCase());
// Store the data read from each snippet in the appropriate object
for (let snippet of snippetFilenames)
snippets[snippet] = fs.readFileSync(path.join(snippetsPath, snippet), 'utf8');
for (const name of snippetFilenames) {
snippets[name] = fs.readFileSync(path.join(SNIPPETS_PATH, name), 'utf8');
}
} catch (err) {
// Handle errors (hopefully not!)
console.log(`${chalk.red('ERROR!')} During snippet loading: ${err}`);
process.exit(1);
}
// Load static parts for the README file
try {
startPart = fs.readFileSync(path.join(staticPartsPath, 'README-start.md'), 'utf8');
endPart = fs.readFileSync(path.join(staticPartsPath, 'README-end.md'), 'utf8');
startPart = fs.readFileSync(path.join(STATIC_PARTS_PATH, 'README-start.md'), 'utf8');
endPart = fs.readFileSync(path.join(STATIC_PARTS_PATH, 'README-end.md'), 'utf8');
} catch (err) {
// Handle errors (hopefully not!)
console.log(`${chalk.red('ERROR!')} During static part loading: ${err}`);
process.exit(1);
}
// Load tag data from the database
try {
tagDbData = objectFromPairs(
@ -58,48 +71,62 @@ try {
.map(v => v.split(':').slice(0, 2))
);
} catch (err) {
// Handle errors (hopefully not!)
console.log(`${chalk.red('ERROR!')} During tag database loading: ${err}`);
process.exit(1);
}
// Create the output for the README file
try {
const tags = [
...new Set(
Object.entries(tagDbData)
.map(t => t[1])
.filter(v => v)
.sort((a, b) => a.localeCompare(b))
)
];
// Add the start static part
output += `${startPart + '\n'}`;
// Loop over tags and snippets to create the table of contents
let uncategorizedOutput = '';
for (let tag of [...new Set(Object.entries(tagDbData).map(t => t[1]))]
.filter(v => v)
.sort((a, b) => a.localeCompare(b))) {
if (capitalize(tag, true) == 'Uncategorized') {
uncategorizedOutput += `### _${capitalize(
tag,
true
)}_\n\n<details>\n<summary>View contents</summary>\n\n`;
for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag))
// Loop over tags and snippets to create the table of contents
for (const tag of tags) {
const capitalizedTag = capitalize(tag, true);
if (capitalizedTag === 'Uncategorized') {
uncategorizedOutput += `### _${capitalizedTag}_\n\n<details>\n<summary>View contents</summary>\n\n`;
for (const taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag)) {
uncategorizedOutput += `* [\`${taggedSnippet[0]}\`](#${taggedSnippet[0].toLowerCase()})\n`;
}
uncategorizedOutput += '\n</details>\n\n';
} else {
output += `### ${capitalize(tag, true)}\n\n<details>\n<summary>View contents</summary>\n\n`;
for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag))
output += `### ${
EMOJIS[tag] || ''
} ${capitalizedTag}\n\n<details>\n<summary>View contents</summary>\n\n`;
for (const taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag)) {
output += `* [\`${taggedSnippet[0]}\`](#${taggedSnippet[0].toLowerCase()})\n`;
}
output += '\n</details>\n\n';
}
}
output += uncategorizedOutput;
uncategorizedOutput = '';
// Loop over tags and snippets to create the list of snippets
for (let tag of [...new Set(Object.entries(tagDbData).map(t => t[1]))]
.filter(v => v)
.sort((a, b) => a.localeCompare(b))) {
if (capitalize(tag, true) == 'Uncategorized') {
uncategorizedOutput += `## _${capitalize(tag, true)}_\n`;
for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag))
for (const tag of tags) {
const capitalizedTag = capitalize(tag, true);
if (capitalizedTag == 'Uncategorized') {
uncategorizedOutput += `---\n ## _${capitalizedTag}_\n`;
for (const taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag)) {
uncategorizedOutput += `\n${snippets[taggedSnippet[0] + '.md'] +
'\n<br>[⬆ back to top](#table-of-contents)\n\n'}`;
}
} else {
output += `## ${capitalize(tag, true)}\n`;
for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag)) {
output += `---\n ## ${EMOJIS[tag] || ''} ${capitalizedTag}\n`;
for (const taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag)) {
let data = snippets[taggedSnippet[0] + '.md'];
data =
data.slice(0, data.lastIndexOf('```js')) +
@ -111,17 +138,16 @@ try {
}
}
}
output += uncategorizedOutput;
// Add the ending static part
output += `\n${endPart + '\n'}`;
// Write to the README file
fs.writeFileSync('README.md', output);
} catch (err) {
// Handle errors (hopefully not!)
console.log(`${chalk.red('ERROR!')} During README generation: ${err}`);
process.exit(1);
}
// Log a success message
console.log(`${chalk.green('SUCCESS!')} README file generated!`);
// Log the time taken
console.timeEnd('Builder');

2
snippets/capitalize.md
View File

@ -1,4 +1,4 @@
### Capitalize
### capitalize
Capitalizes the first letter of a string.

33
snippets/copyToClipboard.md Normal file
View File

@ -0,0 +1,33 @@
### copyToClipboard
Copy a string to the clipboard. Only works as a result of user action (i.e. inside a `click` event listener).
Create a new `<textarea>` element, fill it with the supplied data and add it to the HTML document.
Use `Selection.getRangeAt()`to store the selected range (if any).
Use `document.execCommand('copy')` to copy to the clipboard.
Remove the `<textarea>` element from the HTML document.
Finally, use `Selection().addRange()` to recover the original selected range (if any).
```js
const copyToClipboard = str => {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selected =
document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
};
```
```js
copyToClipboard('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard.
```

2
snippets/fibonacciUntilNum.md
View File

@ -17,5 +17,5 @@ const fibonacciUntilNum = num => {
```
```js
fibonacciCountUntilNum(10); // 7
fibonacciUntilNum(10); // [ 0, 1, 1, 2, 3, 5, 8 ]
```

15
snippets/isAbsoluteURL.md Normal file
View File

@ -0,0 +1,15 @@
### isAbsoluteURL
Returns `true` if the given string is an absolute URL, `false` otherwise.
Use a regular expression to test if the string is an absolute URL.
```js
const isAbsoluteURL = str => /^[a-z][a-z0-9+.-]*:/.test(str);
```
```js
isAbsoluteURL('https://google.com'); // true
isAbsoluteURL('ftp://www.myserver.net'); // true
isAbsoluteURL('/foo/bar'); // false
```

20
snippets/isArrayLike.md Normal file
View File

@ -0,0 +1,20 @@
### isArrayLike
Checks if the provided argument is array-like (i.e. is iterable).
Check that the object is not a function or `null` and that its `length` property is a non-negative integer below `Number.MAX_SAFE_INTEGER`.
```js
const isArrayLike = val =>
val != null &&
typeof val != 'function' &&
val.length > -1 &&
val.length % 1 == 0 &&
val.length <= Number.MAX_SAFE_INTEGER;
```
```js
isArrayLike(document.querySelectorAll('.className')); // true
isArrayLike('abc'); // true
isArrayLike(null); // false
```

14
snippets/isNull.md Normal file
View File

@ -0,0 +1,14 @@
### isNull
Returns `true` if the specified value is `null`, `false` otherwise.
Use the strict equality operator to check if the value and of `val` are equal to `null`.
```js
const isNull = val => val === null;
```
```js
isNull(null); // true
isNull('null'); // false
```

2
snippets/isPrime.md
View File

@ -8,7 +8,7 @@ Return `false` if any of them divides the given number, else return `true`, unle
```js
const isPrime = num => {
const boundary = Math.floor(Math.sqrt(num));
for (var i = 2; i * i <= boundary; i++) if (num % i == 0) return false;
for (var i = 2; i <= boundary; i++) if (num % i == 0) return false;
return num >= 2;
};
```

22
snippets/isPromiseLike.md Normal file
View File

@ -0,0 +1,22 @@
### isPromiseLike
Returns `true` if an object looks like a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), `false` otherwise.
Check if the object is not `null`, its `typeof` matches either `object` or `function` and if it has a `.then` property, which is also a `function`.
```js
const isPromiseLike = obj =>
obj !== null &&
(typeof obj === 'object' || typeof obj === 'function') &&
typeof obj.then === 'function';
```
```js
isPromiseLike({
then: function() {
return '';
}
}); // true
isPromiseLike(null); // false
isPromiseLike({}); // false
```

22
snippets/isValidJSON.md Normal file
View File

@ -0,0 +1,22 @@
### isValidJSON
Checks if the provided argument is a valid JSON.
Use `JSON.parse()` and a `try... catch` block to check if the provided argument is a valid JSON.
```js
const isValidJSON = obj => {
try {
JSON.parse(obj);
return true;
} catch (e) {
return false;
}
};
```
```js
isValidJSON('{"name":"Adam","age":20}'); // true
isValidJSON('{"name":"Adam",age:"20"}'); // false
isValidJSON(null); // true
```

20
snippets/memoize.md Normal file
View File

@ -0,0 +1,20 @@
### memoize
Returns the memoized (cached) function.
Use `Object.create(null)` to create an empty object without `Object.prototype` (so that those properties are not resolved if the input value is something like `'hasOwnProperty'`).
Return a function which takes a single argument to be supplied to the memoized function by first checking if the function's output for that specific input value is already cached, or store and return it if not.
```js
const memoize = fn => {
const cache = Object.create(null);
return value => cache[value] || (cache[value] = fn(value));
};
```
```js
// See the `anagrams` snippet.
const anagramsCached = memoize(anagrams);
anagramsCached('javascript'); // takes a long time
anagramsCached('javascript'); // returns virtually instantly since it's now cached
```

23
snippets/sampleSize.md Normal file
View File

@ -0,0 +1,23 @@
### sampleSize
Gets `n` random elements at unique keys from `array` up to the size of `array`.
Shuffle the array using the [Fisher-Yates algorithm](https://github.com/chalarangelo/30-seconds-of-code#shuffle).
Use `Array.slice()` to get the first `n` elements.
Omit the second argument, `n` to get only one element at random from the array.
```js
const sampleSize = ([...arr], n = 1) => {
let m = arr.length;
while (m) {
const i = Math.floor(Math.random() * m--);
[arr[m], arr[i]] = [arr[i], arr[m]];
}
return arr.slice(0, n);
};
```
```js
sampleSize([1, 2, 3], 2); // [3,1]
sampleSize([1, 2, 3], 4); // [2,3,1]
```

25
snippets/size.md Normal file
View File

@ -0,0 +1,25 @@
### size
Get size of arrays, objects or strings.
Get type of `value` (`array`, `object` or `string`).
Use `length` property for arrays.
Use `length` or `size` value if available or number of keys for objects.
Use `size` of a [`Blob` object](https://developer.mozilla.org/en-US/docs/Web/API/Blob) created from `value` for strings.
Split strings into array of characters with `split('')` and return its length.
```js
const size = value =>
Array.isArray(value)
? value.length
: value && typeof value === 'object'
? value.size || value.length || Object.keys(value).length
: typeof value === 'string' ? new Blob([value]).size : 0;
```
```js
size([1, 2, 3, 4, 5]); // 5
size('size'); // 4
size({ one: 1, two: 2, three: 3 }); // 3
```

19
snippets/sortedIndex.md Normal file
View File

@ -0,0 +1,19 @@
### sortedIndex
Returns the lowest index at which value should be inserted into array in order to maintain its sort order.
Check if the array is sorted in descending order (loosely).
Use `Array.findIndex()` to find the appropriate index where the element should be inserted.
```js
const sortedIndex = (arr, n) => {
const isDescending = arr[0] > arr[arr.length - 1];
const index = arr.findIndex(el => (isDescending ? n >= el : n <= el));
return index === -1 ? arr.length : index;
};
```
```js
sortedIndex([5, 3, 2, 1], 4); // 1
sortedIndex([30, 50], 40); // 1
```

3
snippets/toSnakeCase.md
View File

@ -6,13 +6,12 @@ Break the string into words and combine them using `_` as a separator.
For more detailed explanation of this Regex, [visit this Site](https://regex101.com/r/bMCgAB/1).
```js
const toSnakeCase = str => {
const toSnakeCase = str =>
str &&
str
.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
.map(x => x.toLowerCase())
.join('_');
};
```
```js

18
snippets/yesNo.md Normal file
View File

@ -0,0 +1,18 @@
### yesNo
Returns `true` if the string is `y`/`yes` or `false` if the string is `n`/`no`.
Use `RegExp.test()` to check if the string evaluates to `y/yes` or `n/no`.
Omit the second argument, `def` to set the default answer as `no`.
```js
const yesNo = (val, def = false) =>
/^(y|yes)$/i.test(val) ? true : /^(n|no)$/i.test(val) ? false : def;
```
```js
yesNo('Y'); // true
yesNo('yes'); // true
yesNo('No'); // false
yesNo('Foo', true); // true
```

7
static-parts/README-end.md
View File

@ -1,3 +1,10 @@
## Collaborators
| [<img src="https://github.com/Chalarangelo.png" width="100px;"/>](https://github.com/Chalarangelo)<br/> [<sub>Angelos Chalaris</sub>](https://github.com/Chalarangelo) | [<img src="https://github.com/Pl4gue.png" width="100px;"/>](https://github.com/Pl4gue)<br/> [<sub>David Wu</sub>](https://github.com/Pl4gue) | [<img src="https://github.com/fejes713.png" width="100px;"/>](https://github.com/fejes713)<br/> [<sub>Stefan Feješ</sub>](https://github.com/fejes713) | [<img src="https://github.com/kingdavidmartins.png" width="100px;"/>](https://github.com/kingdavidmartins)<br/> [<sub>King David Martins</sub>](https://github.com/iamsoorena) | [<img src="https://github.com/iamsoorena.png" width="100px;"/>](https://github.com/iamsoorena)<br/> [<sub>Soorena Soleimani</sub>](https://github.com/iamsoorena) |
| --- | --- | --- | --- | --- |
| [<img src="https://github.com/elderhsouza.png" width="100px;"/>](https://github.com/elderhsouza)<br/> [<sub>Elder Henrique Souza</sub>](https://github.com/elderhsouza) | [<img src="https://github.com/skatcat31.png" width="100px;"/>](https://github.com/skatcat31)<br/> [<sub>Robert Mennell</sub>](https://github.com/skatcat31) | [<img src="https://github.com/atomiks.png" width="100px;"/>](https://github.com/atomiks)<br/> [<sub>atomiks</sub>](https://github.com/atomiks) |
## Credits
*Icons made by [Smashicons](https://www.flaticon.com/authors/smashicons) from [www.flaticon.com](https://www.flaticon.com/) is licensed by [CC 3.0 BY](http://creativecommons.org/licenses/by/3.0/).*

1
static-parts/README-start.md
View File

@ -9,6 +9,7 @@
- Use <kbd>Ctrl</kbd> + <kbd>F</kbd> or <kbd>command</kbd> + <kbd>F</kbd> to search for a snippet.
- Contributions welcome, please read the [contribution guide](CONTRIBUTING.md).
- Snippets are written in ES6, use the [Babel transpiler](https://babeljs.io/) to ensure backwards-compatibility.
- You can import these snippets into your text editor of choice (VSCode, Atom, Sublime) using the files found in [this repo](https://github.com/Rob-Rychs/30-seconds-of-code-texteditorsnippets).
- You can import these snippets into Alfred 3, using [this file](https://github.com/lslvxy/30-seconds-of-code-alfredsnippets).
- You can find a package with all the snippets on [npm](https://www.npmjs.com/package/tsoc). Bear in mind that most of these snippets are not production-ready.

2
static-parts/index-start.html
View File

@ -92,8 +92,6 @@
<nav class="col-md-4 col-lg-3" style="border-top: 0">
<div class="group">
<input class="search" type="text" id="searchInput" onkeyup="search(this)">
<span class="highlight"></span>
<span class="bar"></span>
<label id="search-label">Search for snippet...</label>
</div>
<label for="doc-drawer-checkbox" class="button drawer-close"></label>

13
tag_database
View File

@ -16,6 +16,7 @@ collatz:math
collectInto:adapter
compact:array
compose:function
copyToClipboard:browser
countOccurrences:array
countVowels:string
currentURL:browser
@ -63,17 +64,22 @@ initializeArrayWithRange:array
initializeArrayWithValues:array
inRange:math
intersection:array
isAbsoluteURL:string
isArmstrongNumber:math
isArray:utility
isArrayLike:utility
isBoolean:utility
isDivisible:math
isEven:math
isFunction:utility
isNull:utility
isNumber:utility
isPrime:math
isPrimitive:utility
isPromiseLike:utility
isString:utility
isSymbol:utility
isValidJSON:utility
JSONToDate:date
JSONToFile:node
last:array
@ -82,6 +88,7 @@ lowercaseKeys:object
mapObject:array
max:math
median:math
memoize:function
min:math
negate:logic
nthElement:array
@ -112,6 +119,7 @@ RGBToHex:utility
round:math
runPromisesInSeries:function
sample:array
sampleSize:array
scrollToTop:browser
sdbm:utility
select:object
@ -120,9 +128,11 @@ shallowClone:object
show:browser
shuffle:array
similarity:array
size:object
sleep:function
sortCharactersInString:string
speechSynthesis:media
sortedIndex:uncategorized
speechSynthesis:browser
splitLines:string
spreadOver:adapter
standardDeviation:math
@ -149,5 +159,6 @@ UUIDGeneratorNode:node
validateNumber:utility
without:array
words:string
yesNo:utility
zip:array
zipObject:array