{"id":29601999,"url":"https://github.com/neilveil/devils","last_synced_at":"2025-07-20T13:37:20.866Z","repository":{"id":196967169,"uuid":"697750806","full_name":"neilveil/devils","owner":"neilveil","description":"A collection of useful front-end web development utility functions","archived":false,"fork":false,"pushed_at":"2024-06-24T07:46:27.000Z","size":111,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-29T20:03:03.608Z","etag":null,"topics":["front-end","frontend-development","frontend-toolkit","frontend-utilities","javascript-helpers","javascript-toolkit","utility-functions","utility-library","utils","web-development-toolkit","web-development-tools","web-development-utilities"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/devils","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/neilveil.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-28T12:00:15.000Z","updated_at":"2024-06-24T07:46:30.000Z","dependencies_parsed_at":"2023-11-17T14:42:24.523Z","dependency_job_id":"dc437d1c-a48c-4606-bfe2-2b7353264c85","html_url":"https://github.com/neilveil/devils","commit_stats":null,"previous_names":["neilveil/devils","neilveil/feutils"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/neilveil/devils","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neilveil%2Fdevils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neilveil%2Fdevils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neilveil%2Fdevils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neilveil%2Fdevils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/neilveil","download_url":"https://codeload.github.com/neilveil/devils/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neilveil%2Fdevils/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266135053,"owners_count":23881775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["front-end","frontend-development","frontend-toolkit","frontend-utilities","javascript-helpers","javascript-toolkit","utility-functions","utility-library","utils","web-development-toolkit","web-development-tools","web-development-utilities"],"created_at":"2025-07-20T13:37:11.806Z","updated_at":"2025-07-20T13:37:20.856Z","avatar_url":"https://github.com/neilveil.png","language":"TypeScript","readme":"# Devils 🛠️\n\n**A collection of useful front-end web development utility functions.**\n\n## Usage Example 🚀\n\n```js\nimport { delay } from 'devils'\n\n..\n\nawait delay(2)\n```\n\n## Content 📦\n\n- Storage Manager\n- Theme Manager\n- Query String Manager\n- Scroll Back\n- Delay\n- Add Plural Suffix\n- Get Ordinal Suffix\n- Select Random in Array\n- Copy to Clipboard\n- Sort Array of Objects\n- Arrange an Array\n- Remove Duplicates\n- Format Numbers with Commas\n- Get Uploaded Image Details\n- Audio Player\n- Request Module\n- Fuzzy Search in Array of Objects\n\n\u003e Everything in less than \u003c5KB.\n\n## Helpers 🛠️\n\n### Storage Manager 🗄️\n\nThe Storage Manager helpers streamline the process of reading and writing various data types to local storage, eliminating the need for manual stringification and parsing. Additionally, it handles any potential errors that may arise during these operations.\n\n```js\n// Set data\nstorageManager.set('my-data', { name: 'neilveil' })\n\n// Read data -\u003e \"neilveil\"\nstorageManager.get('my-data')\n\n// Return default value if not defined -\u003e \"User\"\nstorageManager.get('my-data-2', 'User')\n\n// Clear only 1 key\nstorageManager.clear('my-data')\n\n// Clear all data\nstorageManager.clear()\n```\n\n### Theme Manager 🎨\n\nThe Theme Manager provides seamless control over both light and dark themes for your application.\n\n```js\n// Set last used theme if exists or set user preferred theme based on OS\nthemeManager.init()\n\n// Get current theme\nthemeManager.get() // Last used theme or user preferred theme\n\n// Get user preferred theme\nthemeManager.getPreferredTheme()\n\n// Set light theme\nthemeManager.set('light')\n\n// Set dark theme\nthemeManager.set('dark')\n\n// Toggle theme\nthemeManager.toggle()\n```\n\nHTML structure\n\n```html\n\u003chtml\u003e\n  \u003cbody data-theme=\"light\"\u003e\n\u003c/html\u003e\n```\n\n\u003e Theme manager saves theme in local storage key 'APP_THEME'.\n\n### Query String Manager 🧮\n\nEnables the seamless passage of object data across pages via URL query strings.\n\n```js\n// Generate query string to append in path\nqsm.gen({ a: 1 }) // -\u003e ?eyJhIjoxfQ==\n```\n\nAppend it in path\n\n```html\n\u003ca href=\"/my-page?eyJhIjoxfQ==\"\u003eNew page\u003c/a\u003e\n```\n\nRead data in `/my-page`\n\n```js\n// Read data\nconsole.log(qsm.read()) // -\u003e { a: 1 }\n\n// Read key \"a\"\nconsole.log(qsm.read('a')) // -\u003e 1\n\n// Read key \"b\" \u0026 return default value 2 if not found\nconsole.log(qsm.read('b', 2)) // -\u003e 2\n```\n\nAppend query string in url\n\n```js\nqsm.gen({ a: 1 }, '/my-page') // -\u003e /my-page?eyJhIjoxfQ== | { a: 1 }\n```\n\nAppend query string \u0026 forward\n\n```js\nqsm.fwd({ b: 2 }, '/my-page') // -\u003e /my-page?eyJhIjoxLCJiIjoyfQ== | { a: 1, b: 2 }\n```\n\nReact example\n\n```jsx\nfunction MyPage() {\n  const [a, setA] = useState(qsm.read('a', 0))\n\n  return (\n    \u003cdiv\u003e\n      \u003cLink to={qsm.gen({ a: 1 }, '/my-page')}\u003eProfile\u003c/Link\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Delay ⏳\n\nAllow your code to pause execution for a specified duration. This is valuable for displaying loaders, preventing action clicks, implementing custom animations, and more.\n\n```js\n// Wait for 2 seconds\nawait delay(2)\n\nor\n\nawait delay(2000, true)\n```\n\n### Add Plural Suffix 📚\n\nMaintains code cleanliness by handling the addition of plural suffixes (`s` \u0026 `ies`) without the need for extra conditional operators.\n\n```jsx\n\u003cdiv\u003e0 {addPluralSuffix('apple', 0)}\u003c/div\u003e // 0 apples\n\u003cdiv\u003e1 {addPluralSuffix('apple', 1)}\u003c/div\u003e // 1 apple\n\u003cdiv\u003e2 {addPluralSuffix('apple', 2)}\u003c/div\u003e // 2 apples\n\n\u003cdiv\u003e0 {addPluralSuffix('entry', 0)}\u003c/div\u003e // 0 entries\n\u003cdiv\u003e1 {addPluralSuffix('entry', 1)}\u003c/div\u003e // 1 entry\n\u003cdiv\u003e2 {addPluralSuffix('entry', 2)}\u003c/div\u003e // 2 entries\n```\n\n### Get Ordinal Suffix of a Number 🥇\n\nStreamlines your code by handling the addition of ordinal suffixes (e.g., \"st\", \"nd\", \"rd\", \"th\") without the need for extra conditional operators.\n\n```jsx\n\u003cdiv\u003e1{getOrdinalSuffix(1)}\u003c/div\u003e // 1st\n\u003cdiv\u003e2{getOrdinalSuffix(1)}\u003c/div\u003e // 2nd\n\u003cdiv\u003e3{getOrdinalSuffix(1)}\u003c/div\u003e // 3rd\n\u003cdiv\u003e4{getOrdinalSuffix(1)}\u003c/div\u003e // 4th\n\n\u003cdiv\u003e101{getOrdinalSuffix(1)}\u003c/div\u003e // 101st\n\u003cdiv\u003e102{getOrdinalSuffix(1)}\u003c/div\u003e // 102nd\n\u003cdiv\u003e103{getOrdinalSuffix(1)}\u003c/div\u003e // 103rd\n\u003cdiv\u003e104{getOrdinalSuffix(1)}\u003c/div\u003e // 104th\n```\n\n### Select Random in Array 🎲\n\nAllows you to pick a random value from an array. This is handy for displaying diverse texts, values, colors, etc., each time a user loads the application.\n\n```jsx\nconst lines = ['Awesome product', 'Try once', 'Wonderful!']\n\n..\n\n\u003cdiv\u003e{getRandomInArray(lines)}\u003c/div\u003e\n```\n\n### Copy to Clipboard 📋\n\nCopy any text value to clipboard.\n\n```js\ncopyText('This is some text!')\n```\n\n### Clone Object 👥\n\nCreate a new copy of Javascript Object.\n\n```js\nconst data = { a: 1 }\n\nconst data2 = cloneObject(data)\ndata2.a = 2\n\nconsole.log(data.a, data2.a) // 1, 2\n```\n\n### Sort Array of Objects 🔄\n\n```js\nconst data = [\n  { id: 4, name: 'Neil Arya' },\n  { id: 1, name: 'Jon Doe' }\n]\n\nsortObjects(data, 'id') // by \"id\"\nsortObjects(data, 'name') // by \"name\"\n```\n\n### Arrange an Array 🔄\n\n```js\nconst data = [\n  { id: 4, name: 'Neil Arya' },\n  { id: 1, name: 'Jon Doe' }\n]\n\narrangeObjects([1, 4], data, 'id')\n```\n\n### Remove Duplicates from an Array 🔄\n\n```js\nconst data = [\n  { id: 4, name: 'Neil Arya' },\n  { id: 1, name: 'Jon Doe' },\n  { id: 1, name: 'Jon Doe' }\n]\n\nremoveDuplicates(data, 'id')\n```\n\n### Round number 🔵\n\n```js\nroundNumber(2.343) // 2.34\nroundNumber(2.326) // 2.33\n\n// 1 decimal digit\nroundNumber(2.326, 1) // 2.3\n```\n\n\u003e Decimal numbers should always be passed through this utility function to resolve floating point issues like `.1 + .2 =\u003e 0.30000000000000004`\n\n### Format Numbers with Commas 💹\n\n```js\nformatNumber(1000000) // 1,000,000\n\n// Indian style formatting\nformatNumber(1000000, true) // 10,00,000\n```\n\n### Empty check 📥\n\nSet default value if undefined `emptyCheck(value, defaultValue)`.\n\n```js\nlet a = 1\nlet b\n\nemptyCheck(a, 2) // 1\nemptyCheck(b, 0) // 0\n```\n\n### Get Uploaded Image Width, Height \u0026 Size 🖼️\n\nGet uploaded image details to validate resolution \u0026 size.\n\n```js\ngetImgDetails(imageBlob) // { width: 1920, height: 1080, size: 1000000 }\n```\n\n### Audio Player 🎵\n\nPre-load \u0026 play sound in different browsers.\n\n```js\n// Pre-load\naudioPlayer('https://www.example.com/sound.mp3', 'load')\n\n// Play\naudioPlayer('https://www.example.com/sound.mp3')\n// or\naudioPlayer('https://www.example.com/sound.mp3', 'play')\n\n// Pause\naudioPlayer('https://www.example.com/sound.mp3', 'pause')\n\n// Stop\naudioPlayer('https://www.example.com/sound.mp3', 'stop')\n```\n\n### Request Module 📡\n\n```js\nawait request({\n  host: 'https://www.example.com', // *required\n  path: '/api/profile', // *required\n  method: 'get', // get | post | put | patch | delete\n  args: { a: 1 }, // Used as \"params\" if get requests \u0026 \"data\" if post request\n  headers: { authorization: 'Basic jgjklewr423452vnjas==' },\n  params: { b: 2 }, // Get request parameters\n  data: { c: 3 }, // Post request data\n  clean: true // Default true, if true returns `response.data` \u0026 if false returns `response`\n})\n```\n\nDependency [axios](https://www.npmjs.com/package/axios)\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/axios@1.5.1/dist/axios.min.js\"\u003e\u003c/script\u003e\n```\n\n### Fuzzy Search in Array of Objects 🔍\n\n```js\nconst data = [\n  { id: 4, name: 'Neil Arya', keywords: ['developers', 'open-source'] },\n  { id: 1, name: 'Jon Doe', keywords: ['dummy', 'user'] }\n]\n\nconst searchKeys = ['name', 'keywords']\n\nconst searchString = 'neel ara'\n\nconsole.log(fuse(data, searchKeys, searchString))\n\n// Fuse options\nconst fuseOptions = {}\nconsole.log(fuse(data, searchKeys, searchString, fuseOptions))\n```\n\nDependency [fuse.js](https://www.npmjs.com/package/fuse.js)\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.min.js\"\u003e\u003c/script\u003e\n```\n\n## Contributing 🤝\n\nContributions are welcome! Feel free to open an issue or submit a pull request.\n\n## License 📜\n\nThis project is licensed under the [MIT License](./license.txt).\n\n## Developer 👨‍💻\n\nDeveloped \u0026 maintained by [neilveil](https://github.com/neilveil).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneilveil%2Fdevils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneilveil%2Fdevils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneilveil%2Fdevils/lists"}