{"id":21069137,"url":"https://github.com/symbolinker/dotsy","last_synced_at":"2026-03-02T05:01:42.569Z","repository":{"id":257789641,"uuid":"859762374","full_name":"SymboLinker/dotsy","owner":"SymboLinker","description":"Dotsy is a JavaScript library with which you can create HTML for randomly positioned, non-overlapping, customized dots.","archived":false,"fork":false,"pushed_at":"2025-04-01T20:18:17.000Z","size":223,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-01T03:33:51.380Z","etag":null,"topics":["arithmetic","circles","color","counting","dots","education","html","javascript","random","research","size","subitizing","teaching","training","typescript"],"latest_commit_sha":null,"homepage":"https://symbolinker.github.io/dotsy/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"0bsd","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SymboLinker.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2024-09-19T08:32:41.000Z","updated_at":"2025-04-01T20:18:15.000Z","dependencies_parsed_at":"2024-11-19T18:54:44.188Z","dependency_job_id":null,"html_url":"https://github.com/SymboLinker/dotsy","commit_stats":null,"previous_names":["symbolinker/dotsy"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/SymboLinker/dotsy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SymboLinker%2Fdotsy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SymboLinker%2Fdotsy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SymboLinker%2Fdotsy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SymboLinker%2Fdotsy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SymboLinker","download_url":"https://codeload.github.com/SymboLinker/dotsy/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SymboLinker%2Fdotsy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29993029,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T01:47:34.672Z","status":"online","status_checked_at":"2026-03-02T02:00:07.342Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["arithmetic","circles","color","counting","dots","education","html","javascript","random","research","size","subitizing","teaching","training","typescript"],"created_at":"2024-11-19T18:32:31.149Z","updated_at":"2026-03-02T05:01:42.563Z","avatar_url":"https://github.com/SymboLinker.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dotsy\n\nDotsy is a JavaScript library with which you can create HTML for randomly positioned, non-overlapping, customized dots. You can set:\n- the height and width of the container\n- the radius and color of each dot\n\nThen Dotsy calculates the locations and creates the HTML for you.\n\nThis library can be used, for example, in software that may focus on:\n- subitizing\n- counting\n- arithmetic\n\n## How to use this library\n\nFor an online example to play with, see [symbolinker.github.io/dotsy](https://symbolinker.github.io/dotsy). The source code of the example can be found in the [docs](https://github.com/SymboLinker/dotsy/tree/main/docs) folder.\n\nOf the source code of the library itself, you only need to have a look inside the [src/public](https://github.com/SymboLinker/dotsy/tree/main/src/public) folder. A note about `getHtml`: it returns a container `div` with `class=\"dotsy-rectangle\"` and this contains for each dot a div with `class=\"dotsy-dot\"`. This allows you to easily add touch/click event handlers.\n\nHow to add it to your project? There are various ways:\n\n#### Using a `\u003cscript\u003e` element\n\nThere is no need to download or install anything. Your website just needs to have a `\u003cscript\u003e` element that results in getting one of the following files from [jsDelivr](https://www.jsdelivr.com/package/npm/dotsy?path=dist):\n\n- dotsy.es2020-esm.js\n- dotsy.es2017-esm.js\n- dotsy.es2015-iife.js\n\n\u003cstrong\u003eesYEAR\u003c/strong\u003e: those are JavaScript language versions.\u003cbr/\u003e\n\u003cstrong\u003eesm\u003c/strong\u003e: the ECMAScript module is simply the best choice: easy, safe, future proof.\u003cbr/\u003e\n\u003cstrong\u003eiife\u003c/strong\u003e: an immediately invoked function expression for browsers that do not support ESM.\n\nFor each of those \".js\" files there is a minified version (\".min.js\") - a smaller file (of only 2 kB) with the same capabilities.\n\nA `\u003cscript\u003e` element using the recommended \"dotsy.es2017-esm.min.js\":\n\n```html\n\u003cscript type=\"module\"\u003e\n  import * as dotsy from 'https://cdn.jsdelivr.net/npm/dotsy@0.1.0/dist/dotsy.es2017-esm.min.js';\n  let settings = new dotsy.Settings();\n  // ...(set settings here)...\n  let html = dotsy.getHtml(settings);\n  // ...(get your HTML element)...\n  yourElement.innerHTML = html;\n\u003c/script\u003e\n```\n\nA `\u003cscript\u003e` element using the with-older-browsers-compatible \"dotsy.es2015-iife.min.js\":\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/dotsy@0.1.0/dist/dotsy.es2015-iife.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n  window.addEventListener('DOMContentLoaded', (event) =\u003e {\n    let settings = new dotsy.Settings();\n    // ...(set settings here)...\n    let html = dotsy.getHtml(settings);\n    // ...(get your HTML element)...\n    yourElement.innerHTML = html;\n  });\n\u003c/script\u003e\n```\n\n#### Using npm\n\nThis library has been published to [npm](https://www.npmjs.com/package/dotsy). After opening a folder in VS Code, run in the terminal:\n\n```\nnpm i dotsy\n```\n\nVerify that `dotsy` has been added to the `node_modules` folder. Then you can choose:\n\nUsing the CommonJS module (the `.cjs` file) in `myFile.js`:\n\n```js\nconst dotsy = require('dotsy');\nconst settings = new dotsy.Settings();\n```\n\nUsing the ESM module (the `.mjs` file) in `myFile.js` or `myFile.ts`:\n\n```ts\nimport * as dotsy from 'dotsy';\nconst settings = new dotsy.Settings();\n```\n\n\n## How to use this repo\n\nFollow these steps to set up (and verify) a development environment for this repository:\n\n1. Install [Node.js](https://nodejs.org/en/download), [Git](https://git-scm.com/downloads) and [VS Code](https://code.visualstudio.com/download).\n2. Fork (or clone), checkout and then open the root folder of this repository in VS Code.\n3. Open the VS Code Terminal and run:\u003cbr/\u003e\n   `npm ci`\u003cbr/\u003e\n   This loads all the devDependencies from the tree as specified in package-lock.json.\n4. Compiling the library:\u003cbr/\u003e\n   All of the following commands run some script as defined in package.json:\u003cbr/\u003e\n   `npm run strictcheck` to do type checking, to check whether a successful compilation is possible.\u003cbr/\u003e\n   `npm run clean` to run eslint (performing auto-fixes).\u003cbr/\u003e\n   `npm test` to run all unit tests from the 'tests' folder.\u003cbr/\u003e\n   `npm run build` creates a single-file library in different formats and language versions in the 'dist' folder. Note: the 'src' folder contains all the source code files.\n5. Testing localhost:\u003cbr/\u003e\n   For testing localhost with live reload from VS Code, you could install the VS Code extension [Five Server](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server). Then open '/localhost/index.html' in VS Code and click `\u003e Go Live` in the bottom right corner of VS Code. The browser starts up automatically.\n\n\n## License\n\nThe Dotsy repository uses the most permissive licensing available. The \"BSD Zero Clause License\" ([0BSD](https://choosealicense.com/licenses/0bsd/)) allows for\u003cbr/\u003e\ncommercial + non-commercial use, closed + open source, with + without modifications, etc. and [is equivalent](https://github.com/github/choosealicense.com/issues/805) to licenses like:\n\n- \"MIT No Attribution License\" ([MIT-0](https://choosealicense.com/licenses/mit-0//)).\n- \"The Unlicense\" ([Unlicense](https://choosealicense.com/licenses/unlicense/)).\n- \"CC0\" ([CC0](https://choosealicense.com/licenses/cc0/)).\n\nThe \"BSD Zero Clause License\" ([0BSD](https://choosealicense.com/licenses/0bsd/)) does not have the condition\n\n\u003e (...), provided that the above copyright notice and this permission notice appear in all copies.\n\nwhich is part of the \"MIT License\" ([MIT](https://choosealicense.com/licenses/mit/)) and its shorter equivalent \"ISC License\" ([ISC](https://choosealicense.com/licenses/isc/)). Apart from that they are all equivalent.\n\n\n## Ask or contribute\n\n- [ask questions](https://github.com/Symbolinker/dotsy/discussions) about anything that is not clear or when you'd like help.\n- [share](https://github.com/Symbolinker/dotsy/discussions) ideas or what you've made.\n- [report a bug](https://github.com/Symbolinker/dotsy/issues).\n- [request an enhancement](https://github.com/Symbolinker/dotsy/issues).\n- [open a pull request](https://github.com/Symbolinker/dotsy/pulls). (The command `npm run clean` runs eslint.)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsymbolinker%2Fdotsy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsymbolinker%2Fdotsy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsymbolinker%2Fdotsy/lists"}