{"id":17991044,"url":"https://github.com/oleksiyrudenko/a-tiny-js-world","last_synced_at":"2025-04-06T01:11:03.812Z","repository":{"id":47153494,"uuid":"152983280","full_name":"OleksiyRudenko/a-tiny-JS-world","owner":"OleksiyRudenko","description":"A tiny task for those who isn't familiar with OOP and JS OOP in particular yet","archived":false,"fork":false,"pushed_at":"2023-06-03T17:30:19.000Z","size":4145,"stargazers_count":65,"open_issues_count":7,"forks_count":228,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T00:09:30.057Z","etag":null,"topics":["beginner-friendly","javascript","learning-by-doing","learning-exercise","learning-javascript","oop","oop-principles","self-learning"],"latest_commit_sha":null,"homepage":"http://OleksiyRudenko.github.io/a-tiny-JS-world/","language":"HTML","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/OleksiyRudenko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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-10-14T14:34:03.000Z","updated_at":"2025-03-06T22:41:26.000Z","dependencies_parsed_at":"2024-10-29T20:29:19.694Z","dependency_job_id":null,"html_url":"https://github.com/OleksiyRudenko/a-tiny-JS-world","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OleksiyRudenko%2Fa-tiny-JS-world","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OleksiyRudenko%2Fa-tiny-JS-world/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OleksiyRudenko%2Fa-tiny-JS-world/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OleksiyRudenko%2Fa-tiny-JS-world/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OleksiyRudenko","download_url":"https://codeload.github.com/OleksiyRudenko/a-tiny-JS-world/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247419861,"owners_count":20936012,"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":["beginner-friendly","javascript","learning-by-doing","learning-exercise","learning-javascript","oop","oop-principles","self-learning"],"created_at":"2024-10-29T19:19:57.491Z","updated_at":"2025-04-06T01:11:03.792Z","avatar_url":"https://github.com/OleksiyRudenko.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![MIT Licensed][icon-mit]][license]\n[![Kottans-Frontend][icon-kottans]][kottans-frontend]\n\n# A Tiny JS World\n\nThis is a tiny task for those who are not familiar with\nObject-Oriented Programing concepts yet.\nAnd with JavaScript OOP in particular.\n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n\n- [About you](#about-you)\n- [The story](#the-story)\n- [First approach](#first-approach)\n  - [Preparations](#preparations)\n  - [The job](#the-job)\n  - [Keep things simple](#keep-things-simple)\n  - [Testing your app](#testing-your-app)\n  - [Publishing](#publishing)\n- [What's next](#whats-next)\n  - [List your repo](#list-your-repo)\n  - [Code review](#code-review)\n- [Leveling your skills up](#leveling-your-skills-up)\n- [Credits](#credits)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- generated with [DocToc](https://github.com/thlorenz/doctoc) --\u003e\n\n## About you\n\nThis place can be useful to you if you\n\n* know JavaScript basics\n* don't know any OOP or at least JavaScript specific OOP\n\n## The story\n\nThere is a tiny world inhabited by a dog, a cat, a woman,\na man, and sometimes by a cat-woman.\n\nYou will be creating a JavaScript model of this world.\n\n## First approach\n\n### Preparations\n\n1. Fork [this repo](https://github.com/OleksiyRudenko/a-tiny-JS-world)\n\n   ![fork](img/fork.png)\n\n1. Clone your fork locally\n\n1. `index.js` is what you will work with. Put your code\n   into it. \n   It is also a good practice to work in a dedicated\n   branch, not `master`. So start with `checkout -B populate-world`\n   before committing any changes.\n\n### The job\n\n 1. Define objects representing this world inhabitants:\n    a dog, a cat, a woman, and a man.\n    - Each inhabitant has hands (optional, naturally), legs,\n      a name, is of certain gender, and also can say\n      something relevant, like \"meow\" or \"Hello Jenny!\".\n 1. List inhabitants using project built-in `print(message)` function.\n    Each list entry should look like\n    `human; John; male; 2; 2; Hello world!`\n    - if inhabitant has no hands then\n      skip it or report `0` or `undefined`, it is totally up to you\n 1. Optional: each inhabitant can be friendly to 1 or\n    more other inhabitants (or to none). If you implement\n    this then the output should also list friends, i.e.\n    `human; John; male; 2; 2; Hello world!; Rex, Tom, Jenny`\n 1. Optional: Define an object representing cat-woman.\n    - cat-woman's saying should be exactly the same as\n      cat's\n    - whenever you change cat's saying cat-woman's saying\n      should change accordingly, they are strongly tied\n      on some astral level\n\nRead following [Keep things simple](#keep-things-simple)\nand [Testing your app](#testing-your-app) sections\nbefore you start coding.\n\n### Keep things simple\n\n**NB!** At this stage you don't need anything beyond what you\nalready know. Do not study any OOP.\nAnything like example below would work.\n\n```javascript\nconst dog = {\n  species: 'dog',\n  name: 'Toby',\n  gender: 'male',\n  legs: 4,\n  hands: 0,\n  saying: 'woof-woof!'\n};\n// ... other objects ...\nprint(dog.species + ';' + dog.name + ';' + dog.gender + ';' + \n  dog.legs + ';' + dog.hands + ';' + dog.saying);\n// ... other print-outs ...\n```\n\nIf you know how to improve the code sample above e.g. employing\n[`#Array.join`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join)\nor a function that takes an object as an argument\nand returns a string to feed to `print()` then go ahead.\n\nYou will have the opportunity to improve your skills later on\nand your current solution at your current level of knowledge\nwill become a milestone to measure your improvement against.\nThat is the aim of incremental studying process:\n**Do - Learn - Improve**\n\n### Testing your app\n\nTo see how things work open `index.html` in Live Server mode in your IDE.\n\n\u003e How to open file in the LiveServer mode:\n\u003e - [VS Code](https://github.com/ritwickdey/vscode-live-server)\n\u003e - [WebStorm](./img/WebStorm-LiveServer.png)\n\nPress `Ctrl-Shift-J` in Google Chrome or Mozilla Firefox to see\ndeveloper's console for possible errors.\n\nYou may want to prettify the output, but try focusing more on code itself.\n\nDoing `var object1 = object2` and `object2.name='Anny'`\nresults in changing name of `object1` to `Anny` as well?\n\nRead about\n[Copying Objects in JavaScript](https://scotch.io/bar-talk/copying-objects-in-javascript)\n\nOnce you are happy with your app, or at least it doesn't report any errors in dev console\nyou may consider it to be of release quality and worth merging into master:\n\n`git checkout master \u0026\u0026 git merge populate-world`\n\nHowever, proceed with any further changes when on `populate-world` or\nanother feature branch, merging into `master` from time to time.\n\n### Publishing\n\nPush your repo to github.\n\nYou may want to publish your world on [GitHub Pages](https://pages.github.com/).\nFollowing the [official GitHub guidelines](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site)\non a simple web-project publishing.\n\nNow your world is published at\n`https://\u003cYourGithubUsername\u003e.github.io/a-tiny-JS-world/`\n\nPublication will be automatically updated when you push your new commits\n(although it may take 5 to 10 minutes since `git push`).\n\n[_^ Up to TOC ^_](#table-of-contents)\n\n## What's next\n\nYou're done? Congratulations!\n\nDid you like the experience?\nGrant this repo a :star:!\n\n### List your repo\n\n1. Navigate to [A Tiny JS World root repo worlds list](https://github.com/OleksiyRudenko/a-tiny-JS-world/blob/master/worlds.md)\n\n1. Edit the file\n   * Click **Edit this file** button\n\n   * Copy the very first line in the table, go all way down\n     to the end of the table, insert the copy as\n     the last row in the table, and edit it as\n     appropriate specifying:\n     - current date as YYYY-MM-DD\n     - number of objects you created\n     - number of code lines your object definitions take\n     - your GitHub nick in square brackets\n       and link to your repository in parentheses\n       \n   * Add an extra new line so additions from other contributors\n     do not affect yours.\n\n   * Switch to Preview tab to check if the table still looks\n     nice.\n\n   ![edit-animated](img/edit.gif)\n\n1. Submit changes\n   * Scroll down to **Propose file change**\n   * Type \"List a tiny JS world by \u003cyour name\u003e\" in commit subject\n   * Click **Propose file change** button, then **Create pull request** and then **Create pull request** once again to complete.\n\n   ![do-pr](img/pr.gif)\n\nYou are done here!\n\n_Please, note that PRs may not be merged very soon. Thank you\nfor your patience._\n\n### Code review\n\nIf you have completed this task as a part\nof [Kottans Front-End Course](https://github.com/kottans/frontend)\nask a course mentor or classmates to support you.\nCheck this task intro within the course for instructions.\n\nOtherwise, ask someone to review your code and come up with\nexplanations on how it could be completed with OOP\nin mind. It is always good to explain yet another\napproach on some working code.\n\nKeep in mind that this was just a tiny world and\nwhenever you need to build bigger worlds\nObject-Oriented Programming concepts come\nto your rescue.\n\n[_^ Up to TOC ^_](#table-of-contents)\n\n## Leveling your skills up\n\n### Learn on your own\n\nImagine you have to build a big world populated with billions\nof inhabitants and a great variety of species, and your world\nproject code base will be distributed across many files.\n\nNow, here are the problems.\n\n - How do you create many similar objects?\n - How do you add an attribute to all e.g. humans?\n - How do you access your world inhabitants across your code base?\n - How do you deal with common attributes for multiple species?\n - How do you aggregate inhabitants into communities (families,\n   countries etc.)?\n - What if you decide to add a family name and want that a person\n   being asked for her or his name would include family name\n   in their response? (And you already have these questions\n   posed in multiple locations across your code base)\n\n**In other words how do you make your code scalable?**\n\nObject-Oriented Programing (OOP) concepts come to your rescue.\n\nThe following will help you to make yourself familiar\nwith OOP and JavaScript OOP.\n\n- [How to explain object-oriented programming concepts to a 6-year-old](https://medium.freecodecamp.org/object-oriented-programming-concepts-21bb035f7260)\n- [Object-oriented JavaScript for beginners](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS)\n- [Object oriented programming in javascript](https://www.sohamkamani.com/blog/2016/04/30/oops-in-js/)\n- [A guide to prototype-based class inheritance in JavaScript](https://levelup.gitconnected.com/a-guide-to-prototype-based-class-inheritance-in-javascript-e2e30c2c92b4)\n- [Fundamental Object Design Patterns](https://medium.com/launch-school/javascript-weekly-fundamental-object-design-patterns-31453f68427f)\n- [Composition over Inheritance\n](https://medium.com/humans-create-software/composition-over-inheritance-cb6f88070205)\n- MDN reference:\n  * [constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor)\n  * [extends](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends)\n  * [super](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super)\n- [“Super” and “Extends” In JavaScript ES6 - Understanding The Tough Parts](https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420) - How ES6 class syntax maps onto ES5 prototype features. \n- [What is `super()` in Javascript](https://css-tricks.com/what-is-super-in-javascript/)\n- [ES6 classes cheat snippet](https://gist.github.com/OleksiyRudenko/672d39b08d9d0da4e179aca49876c58b)\n\nConsider completing\n[Object-Oriented Javascript](https://github.com/kottans/frontend/blob/master/tasks/js-oop.md)\nfrom [Kottans Front-End Course](https://github.com/kottans/frontend) if not yet.\n\nSome extras related to OOP:\n - [DRY, KISS, YAGNI](https://code.tutsplus.com/tutorials/3-key-software-principles-you-must-understand--net-25161)\n - [SOLID](https://medium.com/@cramirez92/s-o-l-i-d-the-first-5-priciples-of-object-oriented-design-with-javascript-790f6ac9b9fa)\n\n### Improve your code\n\nIf you feel now that you can improve your code being armed\nwith OOP knowledge then go ahead!\n\nIn addition to the [requirements above](#the-job) implement the following:\n1. we need **at least** three men, three women, two cats and two dogs;\n   all cats produce the same word when they meow, all dogs produce the same word as a bark;\n   write the code in a manner that adding more inhabitants\n   by a peer developer will require as small effort as only possible,\n   so you will need to keep the code DRY;\n1. at inhabitant creation time some properties are assigned a default value,  \n   so that  we do not need to specify species at inhabitant creation time;\n   same goes with legs, hands, and whatever words we define for animals to say;\n   although any properties\n   with default values should exist and be initialized;\n1. if any inhabitant doesn't have a property by natural design (e.g. dogs do not have hands),\n   then the class shouldn't have its own or inherited property;\n   no hands - no property and no info about hands in presentation string and so on;\n1. (optional, yet may be requested by a reviewer) all inhabitants\n   have friends from among other inhabitants;\n   friends list should store inhabitants (not just names as strings),\n   while output lists only friends' names;\n   what to print if an inhabitant has no friends? you decide;\n1. (optional): change all cat's word for meow, CatWoman's word\n   should also change accordingly without additional effort;\n   add code fragment that clearly demonstrates this effect.\n\nWhen done **update your row**\nin the [worlds.md](https://github.com/OleksiyRudenko/a-tiny-JS-world/blob/master/worlds.md)\nsubmitting a relevant PR.\n\n### Wrap-up\n\nGrats! You've done a great job! You have improved your OOP skills and\nhopefully feel happier and self-confident.\n\nYour repo fork reflects your progress, so feel free exposing it\nto whoever might be interested in your learning path proofs.\n\n[_^ Up to TOC ^_](#table-of-contents)\n\n## Credits\n\nThis repo is dedicated to my elder son Yaroslav who turned\n18 on this repo creation date.\n\nThis Tiny JS World project wouldn't ever happen without\n[Kottans](http://kottans.org/) and awesome\n[Kottans Front-End Course](https://github.com/kottans/frontend)\n(it's free and initial part is completely remote)\nI have completed as a student in 2017 and since then\nhave a chance to contribute thus paying back.\n\nSpecial thanks to [Anastasiya Mashoshyna](https://github.com/AMashoshyna),\n[Yevhen Orlov](https://github.com/yevhenorlov) and other\n[Kottans](https://github.com/kottans) for the discussion, feedback,\nand support that resulted in this project creation.\n\n[_^ Up to TOC ^_](#table-of-contents)\n\n[icon-mit]: https://img.shields.io/badge/license-MIT-blue.svg\n[license]: https://github.com/OleksiyRudenko/a-tiny-JS-world/blob/master/LICENSE.md\n\n[icon-kottans]: https://img.shields.io/badge/%3D(%5E.%5E)%3D-frontend-yellow.svg\n[kottans-frontend]: https://github.com/kottans/frontend\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foleksiyrudenko%2Fa-tiny-js-world","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foleksiyrudenko%2Fa-tiny-js-world","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foleksiyrudenko%2Fa-tiny-js-world/lists"}