{"id":13341572,"url":"https://github.com/squgeim/vocab-web","last_synced_at":"2026-01-17T03:22:40.040Z","repository":{"id":77511680,"uuid":"156979516","full_name":"squgeim/vocab-web","owner":"squgeim","description":"A simple web-app to keep track of words you want to learn","archived":false,"fork":false,"pushed_at":"2018-11-28T04:42:47.000Z","size":32,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-24T10:06:30.632Z","etag":null,"topics":["hyperhtml","javascript","vocabulary","web-components"],"latest_commit_sha":null,"homepage":"https://squgeim.github.io/vocab-web","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/squgeim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-11-10T12:34:22.000Z","updated_at":"2021-12-28T11:36:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"6680a9a6-b346-4149-a92b-f6b363d2cb69","html_url":"https://github.com/squgeim/vocab-web","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/squgeim%2Fvocab-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/squgeim%2Fvocab-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/squgeim%2Fvocab-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/squgeim%2Fvocab-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/squgeim","download_url":"https://codeload.github.com/squgeim/vocab-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243125130,"owners_count":20240263,"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":["hyperhtml","javascript","vocabulary","web-components"],"created_at":"2024-07-29T19:25:38.882Z","updated_at":"2026-01-17T03:22:39.978Z","avatar_url":"https://github.com/squgeim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vocab-web\n\nA simple app to keep track of words you want to learn and practice them.\n\n## Motivation\n\nI consider myself pretty good at english (considering it is a 2nd language). I\nam at a level where I don't need to pay particular attention to each word that\nI am reading or hearing and I get what is being said. I used to hear someone\nsay a rarely used word and although I could not define the word per se, I could\nunderstand the gist from the context and I did not take any note of the word.\n\nThis lead to a situation where it never crossed my mind to use a more accurate\nor more rarely used word when I had to speak impromptu.\n\nThis tool is a system to make sure I take note of words I hear that I may or may\nnot have known already, but I'm sure it would not have crossed my mind to use.\nJust taking an effort into writing down that word helps a lot.\n\n*Side motivation*:\nI do React in my day job, with a thousand abstractions above the browser. For\nsome time, I have been contemplating building something with *raw* javascript\nand only what the latest web platform offered. Thus this javascript project\nwithout a `package.json`.\n\n## Features (both planned and implemented)\n\n- [x] Note down words by typing them down\n- [x] Search for words in the collection\n- [x] Offline access\n- [ ] Fetch meaning and example usages automatically\n- [ ] Extract collection\n- [ ] Import collection\n- [ ] Game: Spelling test\n- [ ] Game: Use in a sentence\n\n**Browser Extension**\n- [ ] Find usage of words in our collection in visited websites\n- [ ] Highlight words in our collection in visited websites\n\n## Contribute\n\nYou can take any feature in the section above and work on it.\n\nAs you may have noticed, there is no `package.json` file, no `npm`, no `webpack`\nor any build tool. That is what makes it possible to host this application\ndirectly from github.\n\nThink very hard before considering adding a library--do you really need it? Or\ncan you whip something up yourself?\n\nHere's the breakdown of how things are:\n- Uses [unpkg](https://unpkg.com) to use some important libraries from npm.\n- Uses `make` for lint, formating, build server, etc. (If you are on Windows,\nplease contribute how to make `make` work.)\n- Uses Web Components with ShadowDOM to build all the components.\n- Uses [hyperHTML](https://github.com/WebReflection/hyperHTML) to write html and handle DOM changes.\n- Uses in-component style for all css. You'll most definitely never need to use\na global css rule. Reuse components, not css.\n- Uses indexDB (via [localforage](https://github.com/localForage/localForage)) to store collection on the browser.\n\n### Application Architecture\n\n| Directory | Description |\n| --------- | ------- |\n| pages     | Top level pages. Each page is a Web Component. Has page-specific logic. |\n| components | Smaller components. Think reuse when building them. |\n| utils     | Simple helper functions/classes. Think pure. |\n| models    | Models are the core logic of the application. They extend from the base model class that can be subscribed to by any of the component. Models can expose methods with side-effects and the components will be notified if any data is modified in a model. (It is your responsibility as a model-author to make sure you alert the subscribers when something is changed). |\n\nJust go though what's already there and you'll be fine.\n\n## Why \"vocab-web\"?\n\nBecause that's the first thing that popped in my mind. I first started a CLI version\ncalled [`vocab-cli`](https://github.com/squgeim/vocab-cli), so this is `vocab-web`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsqugeim%2Fvocab-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsqugeim%2Fvocab-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsqugeim%2Fvocab-web/lists"}