tools-clickwithclark

$3

* [addFontFace][1]
* [Parameters][2]
* [Examples][3]
* [createElement][4]
* [Parameters][5]
* [Examples][6]
* [debounce][7]
* [Parameters][8]
* [debounceInput][9]
* [Parameters][10]
* [debounceLeading][11]
* [Parameters][12]
* [throttle][13]
* [Parameters][14]
* [deepCopy][15]
* [Parameters][16]
* [escapeHtml][17]
* [Parameters][18]
* [generateID][19]
* [Parameters][20]
* [toLowerKeys][21]
* [Parameters][22]
* [waitForElement][23]
* [Parameters][24]
* [Examples][25]

addFontFace

Dynamically add Fonts to a Page

[Additional Notation][26]

$3

* families [Array][27] An array list of google font families to add to a page.

$3

``javascript
//Font Style

n: normal (default)
i: italic
o: oblique


(no properties)
=> n4

font-style: italic;
=> i4

font-weight: normal;
=> n4

font-weight: bold;
=> n7

font-style: normal;
font-weight: 400;
=> n4

font-style: italic;
font-weight: 500;
=> i5

//usage:

addFontFace(['Praise:400','Montserrat:400,700,i4,i7','Roboto:i5'])
`

createElement

Easily Create HTML elements

Remember: 'className' for classes not just 'class'

[Original Author][28]

$3

* object [Object][29] The object to build the HTML element

$3

`javascript
document.body.appendChild(createElement({
type:'section',
className:'secion-1',
id:'section-1-id',
innerHTML:'This is an Example',
attributes:{
dataFoo:'data Test 1',
dataBaz:'data Test 2',
onclick:'someFuncHere(this);'
}
}))
`

debounce

Delays invoking a callback function until after the timeout seconds have
elapsed since the last time the debounced function was invoked

$3

* callback @callback function to execute
* timeOut [Number][30] delay time in seconds

debounceInput

Debounce a given input

$3

* callback @callback function to execute
* doneTypingInterval [Number][30] delay time in seconds

debounceLeading

Run callback once and ignore subsequence calls within given timeOut
good for triggering auto-save or displaying suggestions

$3

* callback @callback function to execute
* timeout [Number][30] delay time in seconds

throttle

Invokes callback at most once per every timeOut seconds.

$3

* callback @callback function to execute
* timeOut [Number][30] delay time in seconds

deepCopy

Copies an object and all it's nested properties

More Info: [MDN Web Docs][31]

$3

* object [Object][29] The object to copy

Returns [Object][29] The copied object

escapeHtml

Prevent accidental markup where text is expected

$3

* text [String][32] The text to be escaped

Returns [String][32] The escaped text with no HTML markup

generateID

Generate an alphanumeric unique ID
No duplicates found in a 10 Million ID generation test
Ideal for small prototypes/scenarios.

For serious commercial projects use [nanoid][33].

$3

* prefix [String][32]
* suffix [String][32]

Returns [String][32] A unique ID

toLowerKeys

Converts an object's keys to lower case

$3

* obj [Object][29] Object with possible mixed keys

Returns [Object][29]

waitForElement

$3

* selector [String][32] The selector of the desired element
* checkFrequencyInMs [Number][30] How often to check for element in Milliseconds
* timeoutInMs [Number][30] How long to keep checking in milliseconds before timing out

$3

`javascript
//Here it is waiting on an element by class name for 10 seconds, and checking every half a second for the element

waitForElement('.vsc-initialized',500,10_000).then((e)=>{console.log('element found'); return e;})
`

Returns [Promise][34] Resolves to the element if found

Webpack Configs

$3

First Install the package to get access to all the dependencies

`
npm i tools-clickwithclark
`
Then call the package with the desired flag

`
npx tools-clickwithclark < wp | webpack> [option] <'path/to/main.js'> | default ='./src/index.js'
`

$3

-p, --prod : Production Configurations

-d, --dev : Development build Configurations

-u, --umd : UMD build Configurations

-b, --obf : Obfuscated build Configurations

$3

`
npx --yes tools-clickwithclark wp -u './index.js'
npx --yes tools-clickwithclark wp -p './index.js'
npx --yes tools-clickwithclark wp -d './index.js'
npx --yes tools-clickwithclark wp -b './index.js'
``

[1]: #addfontface

[2]: #parameters

[3]: #examples

[4]: #createelement

[5]: #parameters-1

[6]: #examples-1

[7]: #debounce

[8]: #parameters-2

[9]: #debounceinput

[10]: #parameters-3

[11]: #debounceleading

[12]: #parameters-4

[13]: #throttle

[14]: #parameters-5

[15]: #deepcopy

[16]: #parameters-6

[17]: #escapehtml

[18]: #parameters-7

[19]: #generateid

[20]: #parameters-8

[21]: #tolowerkeys

[22]: #parameters-9

[23]: #waitforelement

[24]: #parameters-10

[25]: #examples-2

[26]: https://github.com/typekit/fvd

[27]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

[28]: https://javascript.plainenglish.io/how-to-build-complex-dom-elements-quickly-b3ead8e09647

[29]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

[30]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number

[31]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#An_object_copy_function

[32]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

[33]: https://npmjs.com/package/nanoid

[34]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise