Adapter
ary
Creates a function that accepts up to n arguments, ignoring any additional arguments.
Call the provided function, fn, with up to n arguments, using Array.slice(0,n) and the spread operator (...).
const ary = (fn, n) => (...args) => fn(...args.slice(0, n)); + }
30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
Adapter
ary
Creates a function that accepts up to
narguments, ignoring any additional arguments.Call the provided function,
fn, with up tonarguments, usingArray.slice(0,n)and the spread operator (...).const ary = (fn, n) => (...args) => fn(...args.slice(0, n));const firstTwoMax = ary(Math.max, 2); [[2, 6, 'a'], [8, 4, 6], [10]].map(x => firstTwoMax(...x)); // [6, 8, 10]call
Given a key and a set of arguments, call them when given a context. Primarily useful in composition.
Use a closure to call a stored key with stored arguments.
const call = (key, ...args) => context => context[key](...args); @@ -311,6 +335,17 @@ Object.assig );const users = [{ user: 'barney', age: 36, active: false }, { user: 'fred', age: 40, active: true }]; partition(users, o => o.active); // [[{ 'user': 'fred', 'age': 40, 'active': true }],[{ 'user': 'barney', 'age': 36, 'active': false }]] +permutations
⚠️ WARNING: This function's execution time increases exponentially with each array element. Anything more than 8 to 10 entries will cause your browser to hang as it tries to solve all the different combinations.
Generates all permutations of an array's elements (contains duplicates).
Use recursion. For each element in the given array, create all the partial permutations for the rest of its elements. Use
Array.map()to combine the element with each partial permutation, thenArray.reduce()to combine all permutations in one array. Base cases are for arraylengthequal to2or1.const permutations = arr => { + if (arr.length <= 2) return arr.length === 2 ? [arr, [arr[1], arr[0]]] : arr; + return arr.reduce( + (acc, item, i) => + acc.concat( + permutations([...arr.slice(0, i), ...arr.slice(i + 1)]).map(val => [item, ...val]) + ), + [] + ); +}; +permutations([1, 33, 5]); // [ [ 1, 33, 5 ], [ 1, 5, 33 ], [ 33, 1, 5 ], [ 33, 5, 1 ], [ 5, 1, 33 ], [ 5, 33, 1 ] ]pull
Mutates the original array to filter out the values specified.
Use
Array.filter()andArray.includes()to pull out the values that are not needed. UseArray.length = 0to mutate the passed in an array by resetting it's length to zero andArray.push()to re-populate it with only the pulled values.(For a snippet that does not mutate the original array see
without)const pull = (arr, ...args) => { let argState = Array.isArray(args[0]) ? args[0] : args; let pulled = arr.filter((v, i) => !argState.includes(v)); @@ -429,22 +464,19 @@ Object.assig return index === -1 ? arr.length : index; };sortedIndexBy([{ x: 4 }, { x: 5 }], { x: 4 }, o => o.x); // 0 -sortedLastIndex
Returns the highest 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.map()to map each element to an array with its index and value. UseArray.reverse()andArray.findIndex()to find the appropriate last index where the element should be inserted.const sortedLastIndex = (arr, n) => { +sortedLastIndex
Returns the highest 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.reverse()andArray.findIndex()to find the appropriate last index where the element should be inserted.const sortedLastIndex = (arr, n) => { const isDescending = arr[0] > arr[arr.length - 1]; - const index = arr - .map((val, i) => [i, val]) - .reverse() - .findIndex(el => (isDescending ? n <= el[1] : n >= el[1])); + const index = arr.reverse().findIndex(el => (isDescending ? n <= el : n >= el)); return index === -1 ? 0 : arr.length - index - 1; };sortedLastIndex([10, 20, 30, 30, 40], 30); // 3 -sortedLastIndexBy
Returns the highest index at which value should be inserted into array in order to maintain its sort order, based on a provided iterator function.
Check if the array is sorted in descending order (loosely). Use
Array.reverse()andArray.findIndex()to find the appropriate last index where the element should be inserted, based on the iterator functionfn..const sortedLastIndexBy = (arr, n, fn) => { +sortedLastIndexBy
Returns the highest index at which value should be inserted into array in order to maintain its sort order, based on a provided iterator function.
Check if the array is sorted in descending order (loosely). Use
Array.map()to apply the iterator function to all elements of the array. UseArray.reverse()andArray.findIndex()to find the appropriate last index where the element should be inserted, based on the provided iterator function.const sortedLastIndexBy = (arr, n, fn) => { const isDescending = fn(arr[0]) > fn(arr[arr.length - 1]); const val = fn(n); const index = arr - .map((val, i) => [i, fn(val)]) + .map(fn) .reverse() - .findIndex(el => (isDescending ? val <= el[1] : val >= el[1])); + .findIndex(el => (isDescending ? val <= el : val >= el)); return index === -1 ? 0 : arr.length - index; };sortedLastIndexBy([{ x: 4 }, { x: 5 }], { x: 4 }, o => o.x); // 1 @@ -804,14 +836,16 @@ document.bodygetMeridiemSuffixOfInteger(11); // "11am" getMeridiemSuffixOfInteger(13); // "1pm" getMeridiemSuffixOfInteger(25); // "1pm" -tomorrow
Results in a string representation of tomorrow's date. Use
new Date()to get today's date, adding one day usingDate.getDate()andDate.setDate(), and converting the Date object to a string.const tomorrow = () => { +tomorrow
Results in a string representation of tomorrow's date. Use
new Date()to get today's date, adding one day usingDate.getDate()andDate.setDate(), and converting the Date object to a string.const tomorrow = (long = false) => { let t = new Date(); t.setDate(t.getDate() + 1); - return `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, '0')}-${String( + const ret = `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, '0')}-${String( t.getDate() - ).padStart(2, '0')}`; + ).padStart(2, '0')}`; + return !long ? ret : `${ret}T00:00:00`; };tomorrow(); // 2017-12-27 (if current date is 2017-12-26) +tomorrow(true); // 2017-12-27T00:00:00 (if current date is 2017-12-26)Function
attempt
Attempts to invoke a function with the provided arguments, returning either the result or the caught error object.
Use a
try... catchblock to return either the result of the function or an appropriate error.const attempt = (fn, ...args) => { try { return fn(args); @@ -1441,6 +1475,19 @@ Foo.prototype: 'foo' }; merge(object, other); // { a: [ { x: 2 }, { y: 4 }, { z: 3 } ], b: [ 1, 2, 3 ], c: 'foo' } +nest
Given a flat array of objects linked to one another, it will nest them recursively. Useful for nesting comments, such as the ones on reddit.com.
Use recursion. Use
Array.filter()to filter the items where theidmatches thelink, thenArray.map()to map each one to a new object that has achildrenproperty which recursively nests the items based on which ones are children of the current item. Omit the second argument,id, to default tonullwhich indicates the object is not linked to another one (i.e. it is a top level object). Omit the third argument,link, to use'parent_id'as the default property which links the object to another one by itsid.const nest = (items, id = null, link = 'parent_id') => + items + .filter(item => item[link] === id) + .map(item => ({ ...item, children: nest(items, item.id) })); +// One top level comment +const comments = [ + { id: 1, parent_id: null }, + { id: 2, parent_id: 1 }, + { id: 3, parent_id: 1 }, + { id: 4, parent_id: 2 }, + { id: 5, parent_id: 4 } +]; +const nestedComments = nest(comments); // [{ id: 1, parent_id: null, children: [...] }]objectFromPairs
Creates an object from the given key-value pairs.
Use
Array.reduce()to create and combine key-value pairs.const objectFromPairs = arr => arr.reduce((a, v) => ((a[v[0]] = v[1]), a), {});objectFromPairs([['a', 1], ['b', 2]]); // {a: 1, b: 2}objectToPairs
Creates an array of key-value pair arrays from an object.
Use
Object.keys()andArray.map()to iterate over the object's keys and produce an array with key-value pairs.const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]); @@ -1516,18 +1563,7 @@ Foo.prototypereturn acc; }, {});unflattenObject({ 'a.b.c': 1, d: 1 }); // { a: { b: { c: 1 } }, d: 1 } -String
anagrams
⚠️ WARNING: This function's execution time increases exponentially with each character. Anything more than 8 to 10 characters will cause your browser to hang as it tries to solve all the different combinations.
Generates all anagrams of a string (contains duplicates).
Use recursion. For each letter in the given string, create all the partial anagrams for the rest of its letters. Use
Array.map()to combine the letter with each partial anagram, thenArray.reduce()to combine all anagrams in one array. Base cases are for stringlengthequal to2or1.const anagrams = str => { - if (str.length <= 2) return str.length === 2 ? [str, str[1] + str[0]] : [str]; - return str - .split('') - .reduce( - (acc, letter, i) => - acc.concat(anagrams(str.slice(0, i) + str.slice(i + 1)).map(val => letter + val)), - [] - ); -}; -anagrams('abc'); // ['abc','acb','bac','bca','cab','cba'] -byteSize
Returns the length of a string in bytes.
Convert a given string to a
BlobObject and find itssize.const byteSize = str => new Blob([str]).size; +String
byteSize
Returns the length of a string in bytes.
Convert a given string to a
BlobObject and find itssize.const byteSize = str => new Blob([str]).size;byteSize('😀'); // 4 byteSize('Hello World'); // 11capitalize
Capitalizes the first letter of a string.
Use array destructuring and
String.toUpperCase()to capitalize first letter,...restto get array of characters after first letter and thenArray.join('')to make it a string again. Omit thelowerRestparameter to keep the rest of the string intact, or set it totrueto convert to lowercase.const capitalize = ([first, ...rest], lowerRest = false) => @@ -1567,6 +1603,17 @@ Foo.prototypeShow examplesisAbsoluteURL('https://google.com'); // true isAbsoluteURL('ftp://www.myserver.net'); // true isAbsoluteURL('/foo/bar'); // false +isAnagram
Checks if a string is an anagram of another string (case-insensitive, ignores spaces, punctuation and special characters).
Use
String.toLowerCase(),String.replace()with an appropriate regular expression to remove unnecessary characters,String.split(''),Array.sort()andArray.join('')on both strings to normalize them, then check if their normalized forms are equal.const isAnagram = (str1, str2) => { + const normalize = str => + str + .toLowerCase() + .replace(/[^a-z0-9]/gi, '') + .split('') + .sort() + .join(''); + return normalize(str1) === normalize(str2); +}; +isAnagram('iceman', 'cinema'); // trueisLowerCase
Checks if a string is lower case.
Convert the given string to lower case, using
String.toLowerCase()and compare it to the original.const isLowerCase = str => str === str.toLowerCase();isLowerCase('abc'); // true isLowerCase('a3@$'); // true @@ -1580,6 +1627,11 @@ Foo.prototypeShow examplesmask(1234567890); // '******7890' mask(1234567890, 3); // '*******890' mask(1234567890, -4, '$'); // '$$$$567890' +pad
Pads a string on both sides with the specified character, if it's shorter than the specified length.
Use
String.padStart()andString.padEnd()to pad both sides of the given string. Omit the third argument,char, to use the whitespace character as the default padding character.const pad = (str, length, char = ' ') => + str.padStart((str.length + length) / 2, char).padEnd(length, char); +pad('cat', 8); // ' cat ' +pad(String(42), 6, '0'); // '004200' +pad('foobar', 3); // 'foobar'palindrome
Returns
trueif the given string is a palindrome,falseotherwise.Convert string
String.toLowerCase()and useString.replace()to remove non-alphanumeric characters from it. Then,String.split('')into individual characters,Array.reverse(),String.join('')and compare to the original, unreversed string, after converting itString.tolowerCase().const palindrome = str => { const s = str.toLowerCase().replace(/[\W_]/g, ''); return ( @@ -1616,6 +1668,17 @@ Foo.prototypeShow examplessortCharactersInString('cabbage'); // 'aabbceg'splitLines
Splits a multiline string into an array of lines.
Use
String.split()and a regular expression to match line breaks and create an array.const splitLines = str => str.split(/\r?\n/);splitLines('This\nis a\nmultiline\nstring.\n'); // ['This', 'is a', 'multiline', 'string.' , ''] +stringPermutations
⚠️ WARNING: This function's execution time increases exponentially with each character. Anything more than 8 to 10 characters will cause your browser to hang as it tries to solve all the different combinations.
Generates all permutations of a string (contains duplicates).
Use recursion. For each letter in the given string, create all the partial permutations for the rest of its letters. Use
Array.map()to combine the letter with each partial permutation, thenArray.reduce()to combine all permutations in one array. Base cases are for stringlengthequal to2or1.const stringPermutations = str => { + if (str.length <= 2) return str.length === 2 ? [str, str[1] + str[0]] : [str]; + return str + .split('') + .reduce( + (acc, letter, i) => + acc.concat(stringPermutations(str.slice(0, i) + str.slice(i + 1)).map(val => letter + val)), + [] + ); +}; +stringPermutations('abc'); // ['abc','acb','bac','bca','cab','cba']stripHTMLTags
Removes HTML/XML tags from string.
Use a regular expression to remove HTML/XML tags from a string.
const stripHTMLTags = str => str.replace(/<[^>]*>/g, '');stripHTMLTags('<p><em>lorem</em> <strong>ipsum</strong></p>'); // 'lorem ipsum'toCamelCase
Converts a string to camelcase.
Break the string into words and combine them capitalizing the first letter of each word, using a regexp.
const toCamelCase = str => { diff --git a/docs/mini.css b/docs/mini.css index f986e4ed1..ec1fe96f9 100644 --- a/docs/mini.css +++ b/docs/mini.css @@ -1 +1 @@ -:root{--f-col:#111;--f-col2:#444;--b-col:#f8f8f8;--b-col2:#f0f0f0;--blq-col:#f57c00;--pre-col:#1565c0;--br-col:#aaa;--br-col2:#ddd;--h-ratio:1.19;--u-m:.5rem;--u-p:.5rem;--u-br-r:.125rem;--a-l-col:#0277bd;--a-v-col:#01579b}html{font-size:16px}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--f-col);background:var(--b-col)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--u-m)) var(--u-m);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--f-col2);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--h-ratio) * var(--h-ratio) * var(--h-ratio) * var(--h-ratio))}h2{font-size:calc(1rem * var(--h-ratio) * var(--h-ratio) * var(--h-ratio))}h3{font-size:calc(1rem * var(--h-ratio) * var(--h-ratio))}h4{font-size:calc(1rem * var(--h-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--h-ratio))}p{margin:var(--u-m)}ol,ul{margin:var(--u-m);padding-left:calc(2 * var(--u-m))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--u-m);height:.0625rem;background:linear-gradient(to right, transparent, var(--br-col) 20%, var(--br-col) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--f-col2);margin:var(--u-m);padding:calc(3 * var(--u-p));border:.0625rem solid var(--br-col2);border-left:.375rem solid var(--blq-col);border-radius:0 var(--u-br-r) var(--u-br-r) 0}blockquote:before{position:absolute;top:calc(0rem - var(--u-p));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blq-col)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--b-col2);border-radius:var(--u-br-r);padding:calc(var(--u-p) / 4) calc(var(--u-p) / 2)}kbd{background:var(--f-col);color:var(--b-col);border-radius:var(--u-br-r);padding:calc(var(--u-p) / 4) calc(var(--u-p) / 2)}pre{overflow:auto;background:var(--b-col2);padding:calc(1.5 * var(--u-p));margin:var(--u-m);border:.0625rem solid var(--br-col2);border-left:.25rem solid var(--pre-col);border-radius:0 var(--u-br-r) var(--u-br-r) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figure{margin:var(--u-m)}figcaption{color:var(--f-col2)}a{text-decoration:none}a:link{color:var(--a-l-col)}a:visited{color:var(--a-v-col)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--u-p))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-o-']{flex:0 0 auto;padding:0 calc(var(--u-p) / 2)}.col-sm{max-width:100%;flex-grow:1;flex-basis:0}.col-sm-1{max-width:8.33333%;flex-basis:8.33333%}.col-sm-o-0{margin-left:0}.col-sm-2{max-width:16.66667%;flex-basis:16.66667%}.col-sm-o-1{margin-left:8.33333%}.col-sm-3{max-width:25%;flex-basis:25%}.col-sm-o-2{margin-left:16.66667%}.col-sm-4{max-width:33.33333%;flex-basis:33.33333%}.col-sm-o-3{margin-left:25%}.col-sm-5{max-width:41.66667%;flex-basis:41.66667%}.col-sm-o-4{margin-left:33.33333%}.col-sm-6{max-width:50%;flex-basis:50%}.col-sm-o-5{margin-left:41.66667%}.col-sm-7{max-width:58.33333%;flex-basis:58.33333%}.col-sm-o-6{margin-left:50%}.col-sm-8{max-width:66.66667%;flex-basis:66.66667%}.col-sm-o-7{margin-left:58.33333%}.col-sm-9{max-width:75%;flex-basis:75%}.col-sm-o-8{margin-left:66.66667%}.col-sm-10{max-width:83.33333%;flex-basis:83.33333%}.col-sm-o-9{margin-left:75%}.col-sm-11{max-width:91.66667%;flex-basis:91.66667%}.col-sm-o-10{margin-left:83.33333%}.col-sm-12{max-width:100%;flex-basis:100%}.col-sm-o-11{margin-left:91.66667%}.col-sm-n{order:initial}.col-sm-f{order:-999}.col-sm-l{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-o-']{flex:0 0 auto;padding:0 calc(var(--u-p) / 2)}.col-md{max-width:100%;flex-grow:1;flex-basis:0}.col-md-1{max-width:8.33333%;flex-basis:8.33333%}.col-md-o-0{margin-left:0}.col-md-2{max-width:16.66667%;flex-basis:16.66667%}.col-md-o-1{margin-left:8.33333%}.col-md-3{max-width:25%;flex-basis:25%}.col-md-o-2{margin-left:16.66667%}.col-md-4{max-width:33.33333%;flex-basis:33.33333%}.col-md-o-3{margin-left:25%}.col-md-5{max-width:41.66667%;flex-basis:41.66667%}.col-md-o-4{margin-left:33.33333%}.col-md-6{max-width:50%;flex-basis:50%}.col-md-o-5{margin-left:41.66667%}.col-md-7{max-width:58.33333%;flex-basis:58.33333%}.col-md-o-6{margin-left:50%}.col-md-8{max-width:66.66667%;flex-basis:66.66667%}.col-md-o-7{margin-left:58.33333%}.col-md-9{max-width:75%;flex-basis:75%}.col-md-o-8{margin-left:66.66667%}.col-md-10{max-width:83.33333%;flex-basis:83.33333%}.col-md-o-9{margin-left:75%}.col-md-11{max-width:91.66667%;flex-basis:91.66667%}.col-md-o-10{margin-left:83.33333%}.col-md-12{max-width:100%;flex-basis:100%}.col-md-o-11{margin-left:91.66667%}.col-md-n{order:initial}.col-md-f{order:-999}.col-md-l{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-o-']{flex:0 0 auto;padding:0 calc(var(--u-p) / 2)}.col-lg{max-width:100%;flex-grow:1;flex-basis:0}.col-lg-1{max-width:8.33333%;flex-basis:8.33333%}.col-lg-o-0{margin-left:0}.col-lg-2{max-width:16.66667%;flex-basis:16.66667%}.col-lg-o-1{margin-left:8.33333%}.col-lg-3{max-width:25%;flex-basis:25%}.col-lg-o-2{margin-left:16.66667%}.col-lg-4{max-width:33.33333%;flex-basis:33.33333%}.col-lg-o-3{margin-left:25%}.col-lg-5{max-width:41.66667%;flex-basis:41.66667%}.col-lg-o-4{margin-left:33.33333%}.col-lg-6{max-width:50%;flex-basis:50%}.col-lg-o-5{margin-left:41.66667%}.col-lg-7{max-width:58.33333%;flex-basis:58.33333%}.col-lg-o-6{margin-left:50%}.col-lg-8{max-width:66.66667%;flex-basis:66.66667%}.col-lg-o-7{margin-left:58.33333%}.col-lg-9{max-width:75%;flex-basis:75%}.col-lg-o-8{margin-left:66.66667%}.col-lg-10{max-width:83.33333%;flex-basis:83.33333%}.col-lg-o-9{margin-left:75%}.col-lg-11{max-width:91.66667%;flex-basis:91.66667%}.col-lg-o-10{margin-left:83.33333%}.col-lg-12{max-width:100%;flex-basis:100%}.col-lg-o-11{margin-left:91.66667%}.col-lg-n{order:initial}.col-lg-f{order:-999}.col-lg-l{order:999}}:root{--cd-b-col:#f8f8f8;--cd-f-col:#111;--cd-br-col:#ddd}.card{display:flex;flex-direction:column;justify-content:space-between;align-self:center;position:relative;width:100%;background:var(--cd-b-col);color:var(--cd-f-col);border:.0625rem solid var(--cd-br-col);border-radius:var(--u-br-r);margin:var(--u-m);overflow:hidden}@media screen and (min-width: 320px){.card{max-width:320px}}.card>.section{background:var(--cd-b-col);color:var(--cd-f-col);box-sizing:border-box;margin:0;border:0;border-radius:0;border-bottom:.0625rem solid var(--cd-br-col);padding:var(--u-p);width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>.section:last-child{border-bottom:0}.card.fluid{max-width:100%;width:auto}.card>.section.double-padded{padding:calc(1.5 * var(--u-p))}.card{box-shadow:0 1.25rem 2.5rem -0.625rem rgba(0,32,64,0.1)}.card>h3.section.double-padded{padding:calc(3 * var(--u-p))}.card>.section.double-padded>p{margin:var(--u-m) calc(var(--u-m) / 2)}.card+.card{margin-top:calc(5 * var(--u-m))}:root{--frm-b-col:#f0f0f0;--frm-f-col:#111;--frm-br-col:#ddd;--in-b-col:#f8f8f8;--in-f-col:#111;--in-br-col:#ddd;--in-fc-col:#0288d1;--in-inv-col:#d32f2f;--btn-b-col:#e2e2e2;--btn-h-b-col:#dcdcdc;--btn-f-col:#212121;--btn-br-col:transparent;--btn-h-br-col:transparent;--btn-grp-br-col:rgba(124,124,124,0.54)}form{background:var(--frm-b-col);color:var(--frm-f-col);border:.0625rem solid var(--frm-br-col);border-radius:var(--u-br-r);margin:var(--u-m);padding:calc(2 * var(--u-p)) var(--u-p)}fieldset{border:.0625rem solid var(--frm-br-col);border-radius:var(--u-br-r);margin:calc(var(--u-m) / 4);padding:var(--u-p)}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;padding:calc(var(--u-p) / 2)}label{padding:calc(var(--u-p) / 2) var(--u-p)}.input-group{display:inline-block}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],[type="checkbox"],[type="radio"],textarea,select{box-sizing:border-box;background:var(--in-b-col);color:var(--in-f-col);border:.0625rem solid var(--in-br-col);border-radius:var(--u-br-r);margin:calc(var(--u-m) / 2);padding:var(--u-p) calc(1.5 * var(--u-p))}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:var(--in-fc-col);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:var(--in-inv-col);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:var(--b-col2)}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}[type="checkbox"],[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;height:calc(1rem + var(--u-p) / 2);width:calc(1rem + var(--u-p) / 2);vertical-align:text-bottom;padding:0;flex-basis:calc(1rem + var(--u-p) / 2) !important;flex-grow:0 !important}[type="checkbox"]:checked:before,[type="radio"]:checked:before{position:absolute}[type="checkbox"]:checked:before{content:'\2713';font-family:sans-serif;font-size:calc(1rem + var(--u-p) / 2);top:calc(0rem - var(--u-p));left:calc(var(--u-p) / 4)}[type="radio"]{border-radius:100%}[type="radio"]:checked:before{border-radius:100%;content:'';top:calc(.0625rem + var(--u-p) / 2);left:calc(.0625rem + var(--u-p) / 2);background:var(--in-f-col);width:0.5rem;height:0.5rem}:placeholder-shown{color:var(--in-f-col)}::-ms-placeholder{color:var(--in-f-col);opacity:0.54}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:var(--btn-b-col);color:var(--btn-f-col);border:.0625rem solid var(--btn-br-col);border-radius:var(--u-br-r);padding:var(--u-p) calc(1.5 * var(--u-p));margin:var(--u-m);text-decoration:none;cursor:pointer;transition:background 0.3s}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:var(--btn-h-b-col);border-color:var(--btn-h-br-col)}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75}.button-group{display:flex;border:.0625rem solid var(--btn-grp-br-col);border-radius:var(--u-br-r);margin:var(--u-m)}.button-group>button,.button-group [type="button"],.button-group>[type="submit"],.button-group>[type="reset"],.button-group>.button,.button-group>[role="button"]{margin:0;max-width:100%;flex:1 1 auto;text-align:center;border:0;border-radius:0;box-shadow:none}.button-group>:not(:first-child){border-left:.0625rem solid var(--btn-grp-br-col)}@media screen and (max-width: 767px){.button-group{flex-direction:column}.button-group>:not(:first-child){border:0;border-top:.0625rem solid var(--btn-grp-br-col)}}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{--btn-b-col:#1976d2;--btn-f-col:#f8f8f8}button.primary:hover,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:focus,.button.primary:hover,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:focus{--btn-h-b-col:#1565c0}:root{--hd-b-col:#f8f8f8;--hd-hv-b-col:#f0f0f0;--hd-f-col:#444;--hd-br-col:#ddd;--nv-b-col:#f8f8f8;--nv-hv-b-col:#f0f0f0;--nv-f-col:#444;--nv-br-col:#ddd;--nv-ln-col:#0277bd;--ft-f-col:#444;--ft-b-col:#f8f8f8;--ft-br-col:#ddd;--ft-ln-col:#0277bd;--dr-b-col:#f8f8f8;--dr-hv-b-col:#f0f0f0;--dr-br-col:#ddd;--dr-cl-col:#444}header{height:3.1875rem;background:var(--hd-b-col);color:var(--hd-f-col);border-bottom:.0625rem solid var(--hd-br-col);padding:calc(var(--u-p) / 4) 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header.row{box-sizing:content-box}header .logo{color:var(--hd-f-col);font-size:1.75rem;padding:var(--u-p) calc(2 * var(--u-p));text-decoration:none}header button,header [type="button"],header .button,header [role="button"]{box-sizing:border-box;position:relative;top:calc(0rem - var(--u-p) / 4);height:calc(3.1875rem + var(--u-p) / 2);background:var(--hd-b-col);line-height:calc(3.1875rem - var(--u-p) * 1.5);text-align:center;color:var(--hd-f-col);border:0;border-radius:0;margin:0;text-transform:uppercase}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header .button:hover,header .button:focus,header [role="button"]:hover,header [role="button"]:focus{background:var(--hd-hv-b-col)}nav{background:var(--nv-b-col);color:var(--nv-f-col);border:.0625rem solid var(--nv-br-col);border-radius:var(--u-br-r);margin:var(--u-m)}nav *{padding:var(--u-p) calc(1.5 * var(--u-p))}nav a,nav a:visited{display:block;color:var(--nv-ln-col);border-radius:var(--u-br-r);transition:background 0.3s}nav a:hover,nav a:focus,nav a:visited:hover,nav a:visited:focus{text-decoration:none;background:var(--nv-hv-b-col)}nav .sublink-1{position:relative;margin-left:calc(2 * var(--u-p))}nav .sublink-1:before{position:absolute;left:calc(var(--u-p) - 1 * var(--u-p));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nv-br-col);border-left:0}footer{background:var(--ft-b-col);color:var(--ft-f-col);border-top:.0625rem solid var(--ft-br-col);padding:calc(2 * var(--u-p)) var(--u-p);font-size:.875rem}footer a,footer a:visited{color:var(--ft-ln-col)}header.sticky{position:-webkit-sticky;position:sticky;z-index:1101;top:0}footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101;bottom:0}.drawer-toggle:before{display:inline-block;position:relative;vertical-align:bottom;content:'\00a0\2261\00a0';font-family:sans-serif;font-size:1.5em}@media screen and (min-width: 768px){.drawer-toggle:not(.persistent){display:none}}[type="checkbox"].drawer{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].drawer+*{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:var(--dr-b-col);border:.0625rem solid var(--dr-br-col);border-radius:0;margin:0;z-index:1110;left:-320px;transition:left 0.3s}[type="checkbox"].drawer+* .drawer-close{position:absolute;top:var(--u-m);right:var(--u-m);z-index:1111;width:2rem;height:2rem;border-radius:var(--u-br-r);padding:var(--u-p);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].drawer+* .drawer-close:before{display:block;content:'\00D7';color:var(--dr-cl-col);position:relative;font-family:sans-serif;font-size:2rem;line-height:1;text-align:center}[type="checkbox"].drawer+* .drawer-close:hover,[type="checkbox"].drawer+* .drawer-close:focus{background:var(--dr-hv-b-col)}@media screen and (max-width: 320px){[type="checkbox"].drawer+*{width:100%}}[type="checkbox"].drawer:checked+*{left:0}@media screen and (min-width: 768px){[type="checkbox"].drawer:not(.persistent)+*{position:static;height:100%;z-index:1100}[type="checkbox"].drawer:not(.persistent)+* .drawer-close{display:none}}:root{--mrk-b-col:#424242;--mrk-f-col:#fafafa}mark{background:var(--mrk-b-col);color:var(--mrk-f-col);font-size:.5em;line-height:1em;border-radius:var(--u-br-r);padding:calc(var(--u-p) / 4) calc(var(--u-p) / 2)}mark.inline-block{display:inline-block;font-size:1em;line-height:1.5;padding:calc(var(--u-p) / 2) var(--u-p)}:root{--tst-b-col:#212121;--tst-f-col:#fafafa}.toast{position:fixed;bottom:calc(var(--u-m) * 3);left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--tst-f-col);background:var(--tst-b-col);border-radius:calc(var(--u-br-r) * 16);padding:var(--u-p) calc(var(--u-p) * 3)}.toast{bottom:calc(var(--u-m) / 2);opacity:1;transition:opacity 0.3s ease-in-out}mark{position:relative;top:-0.25rem;left:0.25rem}mark.secondary{--mrk-b-col:#d32f2f}mark.tertiary{--mrk-b-col:#308732}mark.tag{padding:calc(var(--u-p)/2) var(--u-p);border-radius:1em}code,pre,kbd,code *,pre *,kbd *,code[class*="language-"],pre[class*="language-"]{font-family:Menlo, Consolas, monospace !important}pre{border:0.0625rem solid var(--br-col2);border-radius:var(--u-br-r)}.group{position:relative;margin-top:2em;margin-bottom:1em}.search{font-size:0.875rem;margin-top:-0.1em;display:block;width:100%;border:none;border-bottom:.0625rem solid var(--nv-ln-col)}.search:focus{outline:none}label#search-label{color:var(--nv-ln-col);font-size:1.125rem;font-weight:400;position:absolute;left:0.3125rem;top:0.625rem}.search:focus ~ label#search-label,.search:valid ~ label#search-label{top:-1.25rem;font-size:0.875rem;color:var(--nv-ln-col)}label#menu-toggle{width:3.4375rem}header h1.logo{margin-top:-0.8rem;text-align:center}header h1.logo a{text-decoration:none;color:#111}header #title{position:relative;top:-1rem}@media screen and (max-width: 500px){header #title{font-size:1rem;display:block}}header h1 small{display:block;font-size:0.875rem;color:#888;margin-top:-0.8rem}@media screen and (max-width: 768px){header h1 small{font-size:0.75rem}}@media screen and (max-width: 600px){header h1 small{font-size:0.625rem}}@media screen and (max-width: 500px){header h1 small{font-size:0.5rem;margin-top:-1.2rem}}label#menu-toggle{position:absolute;left:0.5rem;top:0.5rem;width:3.4375rem}main{padding:0}:root{--clps-lbl-b-col:#e8e8e8;--clps-lbl-f-col:#212121;--clps-lbl-h-b-col:#f0f0f0;--clps-sel-lbl-b-col:#ececec;--clps-br-col:#ddd;--clps-cnt-b-col:#fafafa;--clps-sel-lbl-br-col:#0277bd}label.collapse{width:100%;display:inline-block;cursor:pointer;box-sizing:border-box;transition:background 0.3s;color:var(--clps-lbl-f-col);background:var(--clps-lbl-b-col);border:.0625rem solid var(--clps-br-col);padding:calc(1.5 * var(--u-p));border-radius:var(--u-br-r)}label.collapse:hover,label.collapse:focus{background:var(--clps-lbl-h-b-col)}label.collapse+pre{box-sizing:border-box;height:0;max-height:1px;overflow:auto;margin:0;border:0;padding:0;transition:max-height 0.3s}label.collapse.toggled{background:var(--clps-sel-lbl-b-col);border-bottom-color:var(--clps-sel-lbl-br-col);border-bottom-left-radius:0;border-bottom-right-radius:0}label.collapse.toggled+pre{border-top-left-radius:0;border-top-right-radius:0;position:relative;width:100%;height:auto;border:.0625rem solid var(--clps-br-col);border-top:0;padding:calc(2 * var(--u-p));max-height:400px}button.primary.clipboard-copy{width:100%;margin-left:0}button.primary.clipboard-copy>img{vertical-align:bottom}code[class*="language-"],pre[class*="language-"]{color:#222;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.8;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hypens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:calc(2 * var(--u-p));overflow:auto;margin:var(--u-m) 0}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{background:#b3d4fc}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{background:#b3d4fc}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#7a8490}.token.punctuation{color:#666}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.constant,.token.symbol,.token.deleted,.token.function{color:#005cc5}.token.number,.token.class-name{color:#832ed2}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#067e36}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.atrule,.token.attr-value,.token.keyword{color:#d73a49}.token.regex{color:#097cab}.token.important,.token.variable{color:#e90}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}button.scroll-to-top{border-radius:100%;font-size:1.5rem;line-height:1;box-sizing:border-box;width:2.75rem;height:2.75rem;position:fixed;bottom:1rem;right:2rem;background:var(--b-col);box-shadow:0 0.25rem 0.25rem 0 rgba(0,0,0,0.125),0 0.125rem 0.125rem -0.125rem rgba(0,0,0,0.25)}button.scroll-to-top:hover,button.scroll-to-top:focus{background:var(--b-col2)} +:root{--f-col:#111;--f-col2:#444;--b-col:#f8f8f8;--b-col2:#f0f0f0;--blq-col:#f57c00;--pre-col:#1565c0;--br-col:#aaa;--br-col2:#ddd;--h-ratio:1.19;--u-m:.5rem;--u-p:.5rem;--u-br-r:.125rem;--a-l-col:#0277bd;--a-v-col:#01579b}html{font-size:16px}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--f-col);background:var(--b-col)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--u-m)) var(--u-m);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--f-col2);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--h-ratio) * var(--h-ratio) * var(--h-ratio) * var(--h-ratio))}h2{font-size:calc(1rem * var(--h-ratio) * var(--h-ratio) * var(--h-ratio))}h3{font-size:calc(1rem * var(--h-ratio) * var(--h-ratio))}h4{font-size:calc(1rem * var(--h-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--h-ratio))}p{margin:var(--u-m)}ol,ul{margin:var(--u-m);padding-left:calc(2 * var(--u-m))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--u-m);height:.0625rem;background:linear-gradient(to right, transparent, var(--br-col) 20%, var(--br-col) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--f-col2);margin:var(--u-m);padding:calc(3 * var(--u-p));border:.0625rem solid var(--br-col2);border-left:.375rem solid var(--blq-col);border-radius:0 var(--u-br-r) var(--u-br-r) 0}blockquote:before{position:absolute;top:calc(0rem - var(--u-p));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blq-col)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--b-col2);border-radius:var(--u-br-r);padding:calc(var(--u-p) / 4) calc(var(--u-p) / 2)}kbd{background:var(--f-col);color:var(--b-col);border-radius:var(--u-br-r);padding:calc(var(--u-p) / 4) calc(var(--u-p) / 2)}pre{overflow:auto;background:var(--b-col2);padding:calc(1.5 * var(--u-p));margin:var(--u-m);border:.0625rem solid var(--br-col2);border-left:.25rem solid var(--pre-col);border-radius:0 var(--u-br-r) var(--u-br-r) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figure{margin:var(--u-m)}figcaption{color:var(--f-col2)}a{text-decoration:none}a:link{color:var(--a-l-col)}a:visited{color:var(--a-v-col)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--u-p))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-o-']{flex:0 0 auto;padding:0 calc(var(--u-p) / 2)}.col-sm{max-width:100%;flex-grow:1;flex-basis:0}.col-sm-1{max-width:8.33333%;flex-basis:8.33333%}.col-sm-o-0{margin-left:0}.col-sm-2{max-width:16.66667%;flex-basis:16.66667%}.col-sm-o-1{margin-left:8.33333%}.col-sm-3{max-width:25%;flex-basis:25%}.col-sm-o-2{margin-left:16.66667%}.col-sm-4{max-width:33.33333%;flex-basis:33.33333%}.col-sm-o-3{margin-left:25%}.col-sm-5{max-width:41.66667%;flex-basis:41.66667%}.col-sm-o-4{margin-left:33.33333%}.col-sm-6{max-width:50%;flex-basis:50%}.col-sm-o-5{margin-left:41.66667%}.col-sm-7{max-width:58.33333%;flex-basis:58.33333%}.col-sm-o-6{margin-left:50%}.col-sm-8{max-width:66.66667%;flex-basis:66.66667%}.col-sm-o-7{margin-left:58.33333%}.col-sm-9{max-width:75%;flex-basis:75%}.col-sm-o-8{margin-left:66.66667%}.col-sm-10{max-width:83.33333%;flex-basis:83.33333%}.col-sm-o-9{margin-left:75%}.col-sm-11{max-width:91.66667%;flex-basis:91.66667%}.col-sm-o-10{margin-left:83.33333%}.col-sm-12{max-width:100%;flex-basis:100%}.col-sm-o-11{margin-left:91.66667%}.col-sm-n{order:initial}.col-sm-f{order:-999}.col-sm-l{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-o-']{flex:0 0 auto;padding:0 calc(var(--u-p) / 2)}.col-md{max-width:100%;flex-grow:1;flex-basis:0}.col-md-1{max-width:8.33333%;flex-basis:8.33333%}.col-md-o-0{margin-left:0}.col-md-2{max-width:16.66667%;flex-basis:16.66667%}.col-md-o-1{margin-left:8.33333%}.col-md-3{max-width:25%;flex-basis:25%}.col-md-o-2{margin-left:16.66667%}.col-md-4{max-width:33.33333%;flex-basis:33.33333%}.col-md-o-3{margin-left:25%}.col-md-5{max-width:41.66667%;flex-basis:41.66667%}.col-md-o-4{margin-left:33.33333%}.col-md-6{max-width:50%;flex-basis:50%}.col-md-o-5{margin-left:41.66667%}.col-md-7{max-width:58.33333%;flex-basis:58.33333%}.col-md-o-6{margin-left:50%}.col-md-8{max-width:66.66667%;flex-basis:66.66667%}.col-md-o-7{margin-left:58.33333%}.col-md-9{max-width:75%;flex-basis:75%}.col-md-o-8{margin-left:66.66667%}.col-md-10{max-width:83.33333%;flex-basis:83.33333%}.col-md-o-9{margin-left:75%}.col-md-11{max-width:91.66667%;flex-basis:91.66667%}.col-md-o-10{margin-left:83.33333%}.col-md-12{max-width:100%;flex-basis:100%}.col-md-o-11{margin-left:91.66667%}.col-md-n{order:initial}.col-md-f{order:-999}.col-md-l{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-o-']{flex:0 0 auto;padding:0 calc(var(--u-p) / 2)}.col-lg{max-width:100%;flex-grow:1;flex-basis:0}.col-lg-1{max-width:8.33333%;flex-basis:8.33333%}.col-lg-o-0{margin-left:0}.col-lg-2{max-width:16.66667%;flex-basis:16.66667%}.col-lg-o-1{margin-left:8.33333%}.col-lg-3{max-width:25%;flex-basis:25%}.col-lg-o-2{margin-left:16.66667%}.col-lg-4{max-width:33.33333%;flex-basis:33.33333%}.col-lg-o-3{margin-left:25%}.col-lg-5{max-width:41.66667%;flex-basis:41.66667%}.col-lg-o-4{margin-left:33.33333%}.col-lg-6{max-width:50%;flex-basis:50%}.col-lg-o-5{margin-left:41.66667%}.col-lg-7{max-width:58.33333%;flex-basis:58.33333%}.col-lg-o-6{margin-left:50%}.col-lg-8{max-width:66.66667%;flex-basis:66.66667%}.col-lg-o-7{margin-left:58.33333%}.col-lg-9{max-width:75%;flex-basis:75%}.col-lg-o-8{margin-left:66.66667%}.col-lg-10{max-width:83.33333%;flex-basis:83.33333%}.col-lg-o-9{margin-left:75%}.col-lg-11{max-width:91.66667%;flex-basis:91.66667%}.col-lg-o-10{margin-left:83.33333%}.col-lg-12{max-width:100%;flex-basis:100%}.col-lg-o-11{margin-left:91.66667%}.col-lg-n{order:initial}.col-lg-f{order:-999}.col-lg-l{order:999}}:root{--cd-b-col:#f8f8f8;--cd-f-col:#111;--cd-br-col:#ddd}.card{display:flex;flex-direction:column;justify-content:space-between;align-self:center;position:relative;width:100%;background:var(--cd-b-col);color:var(--cd-f-col);border:.0625rem solid var(--cd-br-col);border-radius:var(--u-br-r);margin:var(--u-m);overflow:hidden}@media screen and (min-width: 320px){.card{max-width:320px}}.card>.section{background:var(--cd-b-col);color:var(--cd-f-col);box-sizing:border-box;margin:0;border:0;border-radius:0;border-bottom:.0625rem solid var(--cd-br-col);padding:var(--u-p);width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>.section:last-child{border-bottom:0}.card.fluid{max-width:100%;width:auto}.card>.section.double-padded{padding:calc(1.5 * var(--u-p))}.card{box-shadow:0 1.25rem 2.5rem -0.625rem rgba(0,32,64,0.1)}.card>h3.section.double-padded{padding:calc(3 * var(--u-p))}.card>.section.double-padded>p{margin:var(--u-m) calc(var(--u-m) / 2)}.card+.card{margin-top:calc(5 * var(--u-m))}:root{--frm-b-col:#f0f0f0;--frm-f-col:#111;--frm-br-col:#ddd;--in-b-col:#f8f8f8;--in-f-col:#111;--in-br-col:#ddd;--in-fc-col:#0288d1;--in-inv-col:#d32f2f;--btn-b-col:#e2e2e2;--btn-h-b-col:#dcdcdc;--btn-f-col:#212121;--btn-br-col:transparent;--btn-h-br-col:transparent;--btn-grp-br-col:rgba(124,124,124,0.54)}form{background:var(--frm-b-col);color:var(--frm-f-col);border:.0625rem solid var(--frm-br-col);border-radius:var(--u-br-r);margin:var(--u-m);padding:calc(2 * var(--u-p)) var(--u-p)}fieldset{border:.0625rem solid var(--frm-br-col);border-radius:var(--u-br-r);margin:calc(var(--u-m) / 4);padding:var(--u-p)}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;padding:calc(var(--u-p) / 2)}label{padding:calc(var(--u-p) / 2) var(--u-p)}.input-group{display:inline-block}.input-group.fluid{display:flex;align-items:center;justify-content:center}.input-group.fluid>input{max-width:100%;flex-grow:1;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{align-items:stretch;flex-direction:column}}.input-group.vertical{display:flex;align-items:stretch;flex-direction:column}.input-group.vertical>input{max-width:100%;flex-grow:1;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],[type="checkbox"],[type="radio"],textarea,select{box-sizing:border-box;background:var(--in-b-col);color:var(--in-f-col);border:.0625rem solid var(--in-br-col);border-radius:var(--u-br-r);margin:calc(var(--u-m) / 2);padding:var(--u-p) calc(1.5 * var(--u-p))}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:var(--in-fc-col);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:var(--in-inv-col);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:var(--b-col2)}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}[type="checkbox"],[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;height:calc(1rem + var(--u-p) / 2);width:calc(1rem + var(--u-p) / 2);vertical-align:text-bottom;padding:0;flex-basis:calc(1rem + var(--u-p) / 2) !important;flex-grow:0 !important}[type="checkbox"]:checked:before,[type="radio"]:checked:before{position:absolute}[type="checkbox"]:checked:before{content:'\2713';font-family:sans-serif;font-size:calc(1rem + var(--u-p) / 2);top:calc(0rem - var(--u-p));left:calc(var(--u-p) / 4)}[type="radio"]{border-radius:100%}[type="radio"]:checked:before{border-radius:100%;content:'';top:calc(.0625rem + var(--u-p) / 2);left:calc(.0625rem + var(--u-p) / 2);background:var(--in-f-col);width:0.5rem;height:0.5rem}:placeholder-shown{color:var(--in-f-col)}::-ms-placeholder{color:var(--in-f-col);opacity:0.54}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:var(--btn-b-col);color:var(--btn-f-col);border:.0625rem solid var(--btn-br-col);border-radius:var(--u-br-r);padding:var(--u-p) calc(1.5 * var(--u-p));margin:var(--u-m);text-decoration:none;cursor:pointer;transition:background 0.3s}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:var(--btn-h-b-col);border-color:var(--btn-h-br-col)}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75}.button-group{display:flex;border:.0625rem solid var(--btn-grp-br-col);border-radius:var(--u-br-r);margin:var(--u-m)}.button-group>button,.button-group [type="button"],.button-group>[type="submit"],.button-group>[type="reset"],.button-group>.button,.button-group>[role="button"]{margin:0;max-width:100%;flex:1 1 auto;text-align:center;border:0;border-radius:0;box-shadow:none}.button-group>:not(:first-child){border-left:.0625rem solid var(--btn-grp-br-col)}@media screen and (max-width: 767px){.button-group{flex-direction:column}.button-group>:not(:first-child){border:0;border-top:.0625rem solid var(--btn-grp-br-col)}}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{--btn-b-col:#1976d2;--btn-f-col:#f8f8f8}button.primary:hover,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:focus,.button.primary:hover,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:focus{--btn-h-b-col:#1565c0}:root{--hd-b-col:#f8f8f8;--hd-hv-b-col:#f0f0f0;--hd-f-col:#444;--hd-br-col:#ddd;--nv-b-col:#f8f8f8;--nv-hv-b-col:#f0f0f0;--nv-f-col:#444;--nv-br-col:#ddd;--nv-ln-col:#0277bd;--ft-f-col:#444;--ft-b-col:#f8f8f8;--ft-br-col:#ddd;--ft-ln-col:#0277bd;--dr-b-col:#f8f8f8;--dr-hv-b-col:#f0f0f0;--dr-br-col:#ddd;--dr-cl-col:#444}header{height:3.1875rem;background:var(--hd-b-col);color:var(--hd-f-col);border-bottom:.0625rem solid var(--hd-br-col);padding:calc(var(--u-p) / 4) 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header.row{box-sizing:content-box}header .logo{color:var(--hd-f-col);font-size:1.75rem;padding:var(--u-p) calc(2 * var(--u-p));text-decoration:none}header button,header [type="button"],header .button,header [role="button"]{box-sizing:border-box;position:relative;top:calc(0rem - var(--u-p) / 4);height:calc(3.1875rem + var(--u-p) / 2);background:var(--hd-b-col);line-height:calc(3.1875rem - var(--u-p) * 1.5);text-align:center;color:var(--hd-f-col);border:0;border-radius:0;margin:0;text-transform:uppercase}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header .button:hover,header .button:focus,header [role="button"]:hover,header [role="button"]:focus{background:var(--hd-hv-b-col)}nav{background:var(--nv-b-col);color:var(--nv-f-col);border:.0625rem solid var(--nv-br-col);border-radius:var(--u-br-r);margin:var(--u-m)}nav *{padding:var(--u-p) calc(1.5 * var(--u-p))}nav a,nav a:visited{display:block;color:var(--nv-ln-col);border-radius:var(--u-br-r);transition:background 0.3s}nav a:hover,nav a:focus,nav a:visited:hover,nav a:visited:focus{text-decoration:none;background:var(--nv-hv-b-col)}nav .sublink-1{position:relative;margin-left:calc(2 * var(--u-p))}nav .sublink-1:before{position:absolute;left:calc(var(--u-p) - 1 * var(--u-p));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nv-br-col);border-left:0}footer{background:var(--ft-b-col);color:var(--ft-f-col);border-top:.0625rem solid var(--ft-br-col);padding:calc(2 * var(--u-p)) var(--u-p);font-size:.875rem}footer a,footer a:visited{color:var(--ft-ln-col)}header.sticky{position:-webkit-sticky;position:sticky;z-index:1101;top:0}footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101;bottom:0}.drawer-toggle:before{display:inline-block;position:relative;vertical-align:bottom;content:'\00a0\2261\00a0';font-family:sans-serif;font-size:1.5em}@media screen and (min-width: 768px){.drawer-toggle:not(.persistent){display:none}}[type="checkbox"].drawer{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].drawer+*{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:var(--dr-b-col);border:.0625rem solid var(--dr-br-col);border-radius:0;margin:0;z-index:1110;left:-320px;transition:left 0.3s}[type="checkbox"].drawer+* .drawer-close{position:absolute;top:var(--u-m);right:var(--u-m);z-index:1111;width:2rem;height:2rem;border-radius:var(--u-br-r);padding:var(--u-p);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].drawer+* .drawer-close:before{display:block;content:'\00D7';color:var(--dr-cl-col);position:relative;font-family:sans-serif;font-size:2rem;line-height:1;text-align:center}[type="checkbox"].drawer+* .drawer-close:hover,[type="checkbox"].drawer+* .drawer-close:focus{background:var(--dr-hv-b-col)}@media screen and (max-width: 320px){[type="checkbox"].drawer+*{width:100%}}[type="checkbox"].drawer:checked+*{left:0}@media screen and (min-width: 768px){[type="checkbox"].drawer:not(.persistent)+*{position:static;height:100%;z-index:1100}[type="checkbox"].drawer:not(.persistent)+* .drawer-close{display:none}}:root{--mrk-b-col:#424242;--mrk-f-col:#fafafa}mark{background:var(--mrk-b-col);color:var(--mrk-f-col);font-size:.5em;line-height:1em;border-radius:var(--u-br-r);padding:calc(var(--u-p) / 4) calc(var(--u-p) / 2)}mark.inline-block{display:inline-block;font-size:1em;line-height:1.5;padding:calc(var(--u-p) / 2) var(--u-p)}:root{--tst-b-col:#212121;--tst-f-col:#fafafa}.toast{position:fixed;bottom:calc(var(--u-m) * 3);left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--tst-f-col);background:var(--tst-b-col);border-radius:calc(var(--u-br-r) * 16);padding:var(--u-p) calc(var(--u-p) * 3)}div,main,nav{-webkit-overflow-scrolling:touch}.toast{bottom:calc(var(--u-m) / 2);opacity:1;transition:opacity 0.3s ease-in-out}mark{position:relative;top:-0.25rem;left:0.25rem}mark.secondary{--mrk-b-col:#d32f2f}mark.tertiary{--mrk-b-col:#308732}mark.tag{padding:calc(var(--u-p)/2) var(--u-p);border-radius:1em}code,pre,kbd,code *,pre *,kbd *,code[class*="language-"],pre[class*="language-"]{font-family:Menlo, Consolas, monospace !important}pre{border:0.0625rem solid var(--br-col2);border-radius:var(--u-br-r)}.search{font-size:0.875rem}header h1.logo{margin-top:-0.8rem;text-align:center;position:relative;top:0;transition:top 0.3s}header h1.logo a{text-decoration:none;color:#111}@media screen and (min-width: 769px){header h1.logo:hover{top:-3.5rem}}header #title{position:relative;top:-1rem}@media screen and (max-width: 768px){header #title{display:none}}header h1 small{display:block;font-size:0.875rem;color:#888;margin-top:0.75rem}label#menu-toggle{position:absolute;left:0rem;top:0rem;width:3.4375rem}main{padding:0}:root{--clps-lbl-b-col:#e8e8e8;--clps-lbl-f-col:#212121;--clps-lbl-h-b-col:#f0f0f0;--clps-sel-lbl-b-col:#ececec;--clps-br-col:#ddd;--clps-cnt-b-col:#fafafa;--clps-sel-lbl-br-col:#0277bd}label.collapse{width:100%;display:inline-block;cursor:pointer;box-sizing:border-box;transition:background 0.3s;color:var(--clps-lbl-f-col);background:var(--clps-lbl-b-col);border:.0625rem solid var(--clps-br-col);padding:calc(1.5 * var(--u-p));border-radius:var(--u-br-r)}label.collapse:hover,label.collapse:focus{background:var(--clps-lbl-h-b-col)}label.collapse+pre{box-sizing:border-box;height:0;max-height:1px;overflow:auto;margin:0;border:0;padding:0;transition:max-height 0.3s}label.collapse.toggled{background:var(--clps-sel-lbl-b-col);border-bottom-color:var(--clps-sel-lbl-br-col);border-bottom-left-radius:0;border-bottom-right-radius:0}label.collapse.toggled+pre{border-top-left-radius:0;border-top-right-radius:0;position:relative;width:100%;height:auto;border:.0625rem solid var(--clps-br-col);border-top:0;padding:calc(2 * var(--u-p));max-height:400px}button.primary.clipboard-copy{width:100%;margin-left:0}button.primary.clipboard-copy>img{vertical-align:bottom}code[class*="language-"],pre[class*="language-"]{color:#222;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.8;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hypens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:calc(2 * var(--u-p));overflow:auto;margin:var(--u-m) 0}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{background:#b3d4fc}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{background:#b3d4fc}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#7a8490}.token.punctuation{color:#666}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.constant,.token.symbol,.token.deleted,.token.function{color:#005cc5}.token.number,.token.class-name{color:#832ed2}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#067e36}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.atrule,.token.attr-value,.token.keyword{color:#d73a49}.token.regex{color:#097cab}.token.important,.token.variable{color:#e90}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}button.scroll-to-top{border-radius:100%;font-size:1.5rem;line-height:1;box-sizing:border-box;width:2.75rem;height:2.75rem;position:fixed;bottom:1rem;right:2rem;background:var(--b-col);box-shadow:0 0.25rem 0.25rem 0 rgba(0,0,0,0.125),0 0.125rem 0.125rem -0.125rem rgba(0,0,0,0.25)}button.scroll-to-top:hover,button.scroll-to-top:focus{background:var(--b-col2)} diff --git a/docs/mini/flavor.scss b/docs/mini/flavor.scss index 59775783e..b4df595c0 100644 --- a/docs/mini/flavor.scss +++ b/docs/mini/flavor.scss @@ -92,7 +92,7 @@ $button-hover-border-color-var: '--btn-h-br-col'; $button-group-border-color-var: '--btn-grp-br-col'; -$_include-fluid-input-group: false; +$_include-fluid-input-group: true; @import 'input_control'; @@ -159,6 +159,9 @@ $_include-collapse: false; @import 'contextual'; +div,main,nav{ + -webkit-overflow-scrolling: touch; +} .#{$toast-name} { bottom: calc(var(#{$universal-margin-var}) / 2); opacity: 1; @@ -195,68 +198,45 @@ pre { border: 0.0625rem solid var(#{$secondary-border-color-var}); border-radius: var(#{$universal-border-radius-var}); } -.group{ - position:relative; - margin-top: 2em; - margin-bottom: 1em -} -.search{ + +.search { font-size: 0.875rem; - margin-top: -0.1em; - display:block; - width:100%; - border:none; - border-bottom: $__1px solid var(#{$nav-link-color-var}); -} -.search:focus{ - outline:none -} -label#search-label{ - color:var(#{$nav-link-color-var}); - font-size: 1.125rem; - font-weight:400; - position:absolute; - left: 0.3125rem; - top: 0.625rem; -} -.search:focus ~ label#search-label,.search:valid ~ label#search-label{ - top: -1.25rem; - font-size: 0.875rem; - color:var(#{$nav-link-color-var}); -} -label#menu-toggle { - width: 3.4375rem; } header h1.logo { margin-top: -0.8rem; text-align:center; + position: relative; + top: 0; + transition: top 0.3s; a { text-decoration:none; color: #111; } + @media screen and (min-width: 769px) { + &:hover { + top: -3.5rem; + } + } } header #title { position:relative; top: -1rem; - @media screen and (max-width: 500px) { font-size: 1rem; display: block } + @media screen and (max-width: 768px) { display: none; } } header h1 small { display:block; font-size: 0.875rem; color: #888; - margin-top: -0.8rem; - @media screen and (max-width: 768px) { font-size: 0.75rem; } - @media screen and (max-width: 600px) { font-size: 0.625rem; } - @media screen and (max-width: 500px) { font-size: 0.5rem; margin-top: -1.2rem; } + margin-top: 0.75rem; } label#menu-toggle { position: absolute; - left: 0.5rem; - top: 0.5rem; + left: 0rem; + top: 0rem; width: 3.4375rem; } diff --git a/snippets/anagrams.md b/snippets/anagrams.md deleted file mode 100644 index ae7284a0b..000000000 --- a/snippets/anagrams.md +++ /dev/null @@ -1,27 +0,0 @@ -### anagrams - -⚠️ **WARNING**: This function's execution time increases exponentially with each character. Anything more than 8 to 10 characters will cause your browser to hang as it tries to solve all the different combinations. - -Generates all anagrams of a string (contains duplicates). - -Use recursion. -For each letter in the given string, create all the partial anagrams for the rest of its letters. -Use `Array.map()` to combine the letter with each partial anagram, then `Array.reduce()` to combine all anagrams in one array. -Base cases are for string `length` equal to `2` or `1`. - -```js -const anagrams = str => { - if (str.length <= 2) return str.length === 2 ? [str, str[1] + str[0]] : [str]; - return str - .split('') - .reduce( - (acc, letter, i) => - acc.concat(anagrams(str.slice(0, i) + str.slice(i + 1)).map(val => letter + val)), - [] - ); -}; -``` - -```js -anagrams('abc'); // ['abc','acb','bac','bca','cab','cba'] -``` diff --git a/snippets/isAnagram.md b/snippets/isAnagram.md new file mode 100644 index 000000000..81045764a --- /dev/null +++ b/snippets/isAnagram.md @@ -0,0 +1,22 @@ +### isAnagram + +Checks if a string is an anagram of another string (case-insensitive, ignores spaces, punctuation and special characters). + +Use `String.toLowerCase()`, `String.replace()` with an appropriate regular expression to remove unnecessary characters, `String.split('')`, `Array.sort()` and `Array.join('')` on both strings to normalize them, then check if their normalized forms are equal. + +```js +const isAnagram = (str1, str2) => { + const normalize = str => + str + .toLowerCase() + .replace(/[^a-z0-9]/gi, '') + .split('') + .sort() + .join(''); + return normalize(str1) === normalize(str2); +}; +``` + +```js +isAnagram('iceman', 'cinema'); // true +``` diff --git a/snippets/nest.md b/snippets/nest.md new file mode 100644 index 000000000..b7ca13827 --- /dev/null +++ b/snippets/nest.md @@ -0,0 +1,29 @@ +### nest + +Given a flat array of objects linked to one another, it will nest them recursively. +Useful for nesting comments, such as the ones on reddit.com. + +Use recursion. +Use `Array.filter()` to filter the items where the `id` matches the `link`, then `Array.map()` to map each one to a new object that has a `children` property which recursively nests the items based on which ones are children of the current item. +Omit the second argument, `id`, to default to `null` which indicates the object is not linked to another one (i.e. it is a top level object). +Omit the third argument, `link`, to use `'parent_id'` as the default property which links the object to another one by its `id`. + +```js +const nest = (items, id = null, link = 'parent_id') => + items + .filter(item => item[link] === id) + .map(item => ({ ...item, children: nest(items, item.id) })); +``` + +```js +// One top level comment +const comments = [ + { id: 1, parent_id: null }, + { id: 2, parent_id: 1 }, + { id: 3, parent_id: 1 }, + { id: 4, parent_id: 2 }, + { id: 5, parent_id: 4 } +]; +const nestedComments = nest(comments); // [{ id: 1, parent_id: null, children: [...] }] +``` + diff --git a/snippets/pad.md b/snippets/pad.md new file mode 100644 index 000000000..18e449739 --- /dev/null +++ b/snippets/pad.md @@ -0,0 +1,17 @@ +### pad + +Pads a string on both sides with the specified character, if it's shorter than the specified length. + +Use `String.padStart()` and `String.padEnd()` to pad both sides of the given string. +Omit the third argument, `char`, to use the whitespace character as the default padding character. + +```js +const pad = (str, length, char = ' ') => + str.padStart((str.length + length) / 2, char).padEnd(length, char); +``` + +```js +pad('cat', 8); // ' cat ' +pad(String(42), 6, '0'); // '004200' +pad('foobar', 3); // 'foobar' +``` diff --git a/snippets/permutations.md b/snippets/permutations.md new file mode 100644 index 000000000..44ec508ce --- /dev/null +++ b/snippets/permutations.md @@ -0,0 +1,27 @@ +### permutations + +⚠️ **WARNING**: This function's execution time increases exponentially with each array element. Anything more than 8 to 10 entries will cause your browser to hang as it tries to solve all the different combinations. + +Generates all permutations of an array's elements (contains duplicates). + +Use recursion. +For each element in the given array, create all the partial permutations for the rest of its elements. +Use `Array.map()` to combine the element with each partial permutation, then `Array.reduce()` to combine all permutations in one array. +Base cases are for array `length` equal to `2` or `1`. + +```js +const permutations = arr => { + if (arr.length <= 2) return arr.length === 2 ? [arr, [arr[1], arr[0]]] : arr; + return arr.reduce( + (acc, item, i) => + acc.concat( + permutations([...arr.slice(0, i), ...arr.slice(i + 1)]).map(val => [item, ...val]) + ), + [] + ); +}; +``` + +```js +permutations([1, 33, 5]); // [ [ 1, 33, 5 ], [ 1, 5, 33 ], [ 33, 1, 5 ], [ 33, 5, 1 ], [ 5, 1, 33 ], [ 5, 33, 1 ] ] +``` diff --git a/snippets/sortedLastIndex.md b/snippets/sortedLastIndex.md index 57d2499a3..43ecefab5 100644 --- a/snippets/sortedLastIndex.md +++ b/snippets/sortedLastIndex.md @@ -3,16 +3,12 @@ Returns the highest 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.map()` to map each element to an array with its index and value. Use `Array.reverse()` and `Array.findIndex()` to find the appropriate last index where the element should be inserted. ```js const sortedLastIndex = (arr, n) => { const isDescending = arr[0] > arr[arr.length - 1]; - const index = arr - .map((val, i) => [i, val]) - .reverse() - .findIndex(el => (isDescending ? n <= el[1] : n >= el[1])); + const index = arr.reverse().findIndex(el => (isDescending ? n <= el : n >= el)); return index === -1 ? 0 : arr.length - index - 1; }; ``` diff --git a/snippets/sortedLastIndexBy.md b/snippets/sortedLastIndexBy.md index 443ba5045..97e60f827 100644 --- a/snippets/sortedLastIndexBy.md +++ b/snippets/sortedLastIndexBy.md @@ -3,16 +3,17 @@ Returns the highest index at which value should be inserted into array in order to maintain its sort order, based on a provided iterator function. Check if the array is sorted in descending order (loosely). -Use `Array.reverse()` and `Array.findIndex()` to find the appropriate last index where the element should be inserted, based on the iterator function `fn`.. +Use `Array.map()` to apply the iterator function to all elements of the array. +Use `Array.reverse()` and `Array.findIndex()` to find the appropriate last index where the element should be inserted, based on the provided iterator function. ```js const sortedLastIndexBy = (arr, n, fn) => { const isDescending = fn(arr[0]) > fn(arr[arr.length - 1]); const val = fn(n); const index = arr - .map((val, i) => [i, fn(val)]) + .map(fn) .reverse() - .findIndex(el => (isDescending ? val <= el[1] : val >= el[1])); + .findIndex(el => (isDescending ? val <= el : val >= el)); return index === -1 ? 0 : arr.length - index; }; ``` diff --git a/snippets/stringPermutations.md b/snippets/stringPermutations.md new file mode 100644 index 000000000..dee086afa --- /dev/null +++ b/snippets/stringPermutations.md @@ -0,0 +1,27 @@ +### stringPermutations + +⚠️ **WARNING**: This function's execution time increases exponentially with each character. Anything more than 8 to 10 characters will cause your browser to hang as it tries to solve all the different combinations. + +Generates all permutations of a string (contains duplicates). + +Use recursion. +For each letter in the given string, create all the partial permutations for the rest of its letters. +Use `Array.map()` to combine the letter with each partial permutation, then `Array.reduce()` to combine all permutations in one array. +Base cases are for string `length` equal to `2` or `1`. + +```js +const stringPermutations = str => { + if (str.length <= 2) return str.length === 2 ? [str, str[1] + str[0]] : [str]; + return str + .split('') + .reduce( + (acc, letter, i) => + acc.concat(stringPermutations(str.slice(0, i) + str.slice(i + 1)).map(val => letter + val)), + [] + ); +}; +``` + +```js +stringPermutations('abc'); // ['abc','acb','bac','bca','cab','cba'] +``` diff --git a/snippets/tomorrow.md b/snippets/tomorrow.md index fd7c4dfa1..68651691e 100644 --- a/snippets/tomorrow.md +++ b/snippets/tomorrow.md @@ -4,15 +4,17 @@ Results in a string representation of tomorrow's date. Use `new Date()` to get today's date, adding one day using `Date.getDate()` and `Date.setDate()`, and converting the Date object to a string. ```js -const tomorrow = () => { +const tomorrow = (long = false) => { let t = new Date(); t.setDate(t.getDate() + 1); - return `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, '0')}-${String( + const ret = `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, '0')}-${String( t.getDate() ).padStart(2, '0')}`; + return !long ? ret : `${ret}T00:00:00`; }; ``` ```js tomorrow(); // 2017-12-27 (if current date is 2017-12-26) +tomorrow(true); // 2017-12-27T00:00:00 (if current date is 2017-12-26) ``` diff --git a/snippets_archive/isSimilar.md b/snippets_archive/isSimilar.md new file mode 100644 index 000000000..7ed53b2ae --- /dev/null +++ b/snippets_archive/isSimilar.md @@ -0,0 +1,19 @@ +### isSimilar + +Determines if the `pattern` matches with `str`. + +Use `String.toLowerCase()` to convert both strings to lowercase, then loop through `str` and determine if it contains all characters of `pattern` and in the correct order. +Adapted from [here](https://github.com/forrestthewoods/lib_fts/blob/80f3f8c52db53428247e741b9efe2cde9667050c/code/fts_fuzzy_match.js#L18). + +``` js +const isSimilar = (pattern, str) => + [...str].reduce( + (matchIndex, char) => char.toLowerCase() === (pattern[matchIndex] || '').toLowerCase() ? matchIndex + 1 : matchIndex, 0 + ) === pattern.length ? true : false; +``` + + +``` js +isSimilar('rt','Rohit'); // true +isSimilar('tr','Rohit'); // false +``` diff --git a/static-parts/index-start.html b/static-parts/index-start.html index e5c0702d1..29cc93b13 100644 --- a/static-parts/index-start.html +++ b/static-parts/index-start.html @@ -34,11 +34,30 @@ document.querySelector('main').scrollTo(0, c - c / 4); } }; + function scrollTo(element, to, id, duration) { + if (duration <= 0) return; + var difference = to - element.scrollTop; + var perTick = difference / duration * 40; + + setTimeout(function() { + element.scrollTop = element.scrollTop + perTick; + if (element.scrollTop === to) { + window.location.href = "#"+id; + return; + } + scrollTo(element, to, id, duration - 40); + }, 40); + }; function loader() { registerClickListener(); } function registerClickListener() { document.addEventListener('click', function (event) { + if( document.getElementById('doc-drawer-checkbox').checked ) { + if(!document.querySelector('nav').contains(event.target) && !event.target.classList.contains('drawer-toggle') && !event.target.classList.contains('drawer')) { + document.getElementById('doc-drawer-checkbox').checked = false; + } + } if ( event.target.classList.contains('collapse') ) { event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled'; } @@ -64,23 +83,26 @@ else if (event.target.classList.contains('scroll-to-top')){ scrollToTop(); } + else if (event.target.classList.contains('sublink-1')){ + event.preventDefault(); + scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400); + document.getElementById('doc-drawer-checkbox').checked = false; + } }, false); } - --
+ -
+