# tools-clickwithclark

> A bunch of useful tools to complement any web dev project

Latest version **1.5.1** (published 2024-05-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install tools-clickwithclark
pnpm add tools-clickwithclark
yarn add tools-clickwithclark
bun add tools-clickwithclark
```

Provides the commands `tcwc`, `tools-clickwithclark`.

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.1 |
| Published | 2024-05-08 |
| First published | 2022-06-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 23 |
| Unpacked size | 52 KB |
| Known vulnerabilities | 0 (+9 in 2 direct dependencies) |
| Install scripts | no |
| Author | clickwithclark |
| Maintainers | clickwithclark |
| Keywords | tools-clickwithclark, clickwithclark |

## Links

- npm: https://www.npmjs.com/package/tools-clickwithclark
- npm.io page: https://npm.io/package/tools-clickwithclark

## Dependencies (23)

- [meow](https://npm.io/package/meow.md) 9.0.0
- [chalk](https://npm.io/package/chalk.md) 4.1.2
- [webpack](https://npm.io/package/webpack.md) ~5.91.0
- [cli-alerts](https://npm.io/package/cli-alerts.md) 1.2.2
- [css-loader](https://npm.io/package/css-loader.md) 6.3.0
- [cli-welcome](https://npm.io/package/cli-welcome.md) 2.2.2
- [html-loader](https://npm.io/package/html-loader.md) 2.1.2
- [sass-loader](https://npm.io/package/sass-loader.md) 12.1.0
- [webpack-cli](https://npm.io/package/webpack-cli.md) 4.9.2
- [style-loader](https://npm.io/package/style-loader.md) 3.3.0
- [cli-meow-help](https://npm.io/package/cli-meow-help.md) 3.1.0
- [webpack-merge](https://npm.io/package/webpack-merge.md) 5.8.0
- [cli-handle-error](https://npm.io/package/cli-handle-error.md) 4.4.0
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ~4.15.2
- [webpack-obfuscator](https://npm.io/package/webpack-obfuscator.md) ~3.5.1
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 5.3.2
- [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) 4.0.0
- [cli-handle-unhandled](https://npm.io/package/cli-handle-unhandled.md) 1.1.1
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) 5.3.1
- [webpack-dev-middleware](https://npm.io/package/webpack-dev-middleware.md) ~5.3.4
- [workbox-webpack-plugin](https://npm.io/package/workbox-webpack-plugin.md) ~6.6.0
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) 2.3.0
- [css-minimizer-webpack-plugin](https://npm.io/package/css-minimizer-webpack-plugin.md) 3.0.2

## Recent versions

- 1.5.1 (latest) — 2024-05-08
- 1.5.0 — 2024-05-08
- 1.4.0 — 2024-05-08
- 1.3.4 — 2024-05-08
- 1.3.3 — 2024-05-08
- 1.3.2 — 2024-05-08
- 1.3.1 — 2024-05-07
- 1.3.0 — 2024-05-07
- 1.2.2 — 2024-05-07
- 1.2.1 — 2024-04-21
- 1.1.1 — 2022-06-09

## README

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### Table of Contents

*   [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]

### Parameters

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

### Examples

```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]

### Parameters

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

### Examples

```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

### Parameters

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

## debounceInput

Debounce a given input

### Parameters

*   `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

### Parameters

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

## throttle

Invokes callback at most once per every timeOut seconds.

### Parameters

*   `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]

### Parameters

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

Returns **[Object][29]** The copied object

## escapeHtml

Prevent accidental markup where text is expected

### Parameters

*   `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].

### Parameters

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

Returns **[String][32]** A unique ID

## toLowerKeys

Converts an object's keys to lower case

### Parameters

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

Returns **[Object][29]** 

## waitForElement

### Parameters

*   `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

### Examples

```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

### Usage

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'
```

### Options
`-p, --prod` : Production Configurations

`-d, --dev` : Development build Configurations

`-u, --umd` : UMD build Configurations

`-b, --obf` : Obfuscated build Configurations

### Example
```
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

---
_Source: https://npm.io/package/tools-clickwithclark · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._