All Projects → OleksiyRudenko → A Tiny Js World

OleksiyRudenko / A Tiny Js World

Licence: mit
A tiny task for those who isn't familiar with OOP and JS OOP in particular yet

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to A Tiny Js World

Postgres Showcase
Postgres features showcase (commented SQL samples) for beginners
Stars: ✭ 121 (+142%)
Mutual labels:  beginner-friendly, learning-by-doing
Pandemic-Produce-Delivery-Project
An ongoing open-source e-commerce shop using React, Express, Firebase, and MongoDB. Designed for pandemic-relief and social good. New contributors are always, always, welcomed, regardless of where you are 🔥. Feel free to reach out at [email protected]~
Stars: ✭ 20 (-60%)
Mutual labels:  learning-by-doing, beginner-friendly
Hacktoberfest2021
✨✨FREE FOR ALL , LEARNING and CELEBRATING OPEN SOURCE, This Hacktoberfest project exists to help you submit your first Pull Request! ✨✨
Stars: ✭ 23 (-54%)
Mutual labels:  learning-by-doing, beginner-friendly
Learnyounode
Learn You The Node.js For Much Win! An intro to Node.js via a set of self-guided workshops.
Stars: ✭ 6,933 (+13766%)
Mutual labels:  learning-by-doing
Swapi
*NOT MAINTAINED - NO GUARENTEE TO BE UP*
Stars: ✭ 872 (+1644%)
Mutual labels:  beginner-friendly
Solrb
Solr + Ruby + OOP + ❤️ = Solrb
Stars: ✭ 37 (-26%)
Mutual labels:  oop
C Algorithms
All algorithms implemented in C
Stars: ✭ 51 (+2%)
Mutual labels:  beginner-friendly
Wp Controllers
The OOP Developer's best friend for working with objects in WordPress
Stars: ✭ 25 (-50%)
Mutual labels:  oop
Hacktoberfest Simple Practice Programmes
A beginner-friendly open source repository to create your pull request.
Stars: ✭ 42 (-16%)
Mutual labels:  beginner-friendly
Simple Ssd For Beginners
This repository contains easy SSD(Single Shot MultiBox Detector) implemented with Pytorch and is easy to read and learn
Stars: ✭ 33 (-34%)
Mutual labels:  beginner-friendly
Koochooloo
Make your URLs shorter (smaller) and more memorable in Go
Stars: ✭ 29 (-42%)
Mutual labels:  learning-by-doing
Notebooks
Learn Python for free using open-source notebooks in Hebrew.
Stars: ✭ 877 (+1654%)
Mutual labels:  learning-by-doing
Python stock github
Python 量化投资及 Github 管理学习笔记
Stars: ✭ 39 (-22%)
Mutual labels:  learning-by-doing
Drl Theme Manager
Xcode File Template to generate theme manager for Swift 3+
Stars: ✭ 12 (-76%)
Mutual labels:  oop
Simpletones.js
The goal of simpleTones.js is to provide every JavaScript developer with a lightweight solution for creating custom sounds in their web applications. This documentation has been written in hopes that the least experienced developer can read, understand and go on to do great things. You can check out several examples at this link:
Stars: ✭ 45 (-10%)
Mutual labels:  beginner-friendly
Essa
Embeddable SCADA for Small Applications
Stars: ✭ 7 (-86%)
Mutual labels:  oop
Javascript Mini Projects
Awesome Collection of amazing javascript mini-projects.
Stars: ✭ 42 (-16%)
Mutual labels:  beginner-friendly
Wenoof
WENO interpolation Object Oriented Fortran library
Stars: ✭ 27 (-46%)
Mutual labels:  oop
Css Art Hacktoberfest Edition
Hacktoberfest Edition - A CSS art challenge, for all skill levels
Stars: ✭ 21 (-58%)
Mutual labels:  beginner-friendly
Hacktoberfest2k19
Hacktoberfest is here! Raise the PR and earn goodies.
Stars: ✭ 34 (-32%)
Mutual labels:  beginner-friendly

MIT Licensed Kottans-Frontend

A Tiny JS World

This is a tiny task for those who are not familiar with Object-Oriented Programing concepts yet. And with JavaScript OOP in particular.

Table of Contents

About you

This place can be useful to you if you

  • know JavaScript basics
  • don't know any OOP or at least JavaScript specific OOP

The story

There is a tiny world inhabited by a dog, a cat, a woman, a man, and sometimes by a cat-woman.

You will be creating a JavaScript model of this world.

First approach

Preparations

  1. Fork this repo

    fork

  2. Clone your fork locally

  3. index.js is what you will work with. Put your code into it. It is also a good practice to work in a dedicated branch, not master. So start with checkout -B populate-world before committing any changes.

The job

  1. Define objects representing this world inhabitants: a dog, a cat, a woman, and a man.
    • Each inhabitant has legs, hands (optional, naturally), a name, is of certain gender and also can say something relevant, like "meow" or "Hello Jenny!".
  2. List inhabitants using project built-in print(message) function. Each list entry should look like human; John; male; 2; 2; Hello world!
    • if inhabitant has no hands then skip it or report 0 or undefined, it is totally up to you
  3. Optional: each inhabitant can be friendly to 1 or more other inhabitants (or to none). If you implement this then the output should also list friends, i.e. human; John; male; 2; 2; Hello world!; Rex, Tom, Jenny
  4. Optional: Define an object representing cat-woman.
    • cat-woman's saying should be exactly the same as cat's
    • whenever you change cat's saying cat-woman's saying should change accordingly, they are strongly tied on some astral level

Read following Keep things simple and Testing your app sections before you start coding.

Keep things simple

NB! At this stage you don't need anything beyond what you already know. Do not study any OOP. Anything like example below would work.

const dog = {
  species: 'dog',
  name: 'Toby',
  gender: 'male',
  legs: 4,
  hands: 0,
  saying: 'woof-woof!'
};
// ... other objects ...
print(dog.species + ';' + dog.name + ';' + dog.gender + ';' + 
  dog.legs + ';' + dog.hands + ';' + dog.saying);
// ... other print-outs ...

If you know how to improve the code sample above e.g. employing #Array.join or a function that takes an object as an argument and returns a string to feed to print() then go ahead.

You will have the opportunity to improve your skills later on and your current solution at your current level of knowledge will become a milestone to measure your improvement against. That is the aim of incremental studying process: Do - Learn - Improve

Testing your app

To see how things work just open index.html with your browser. Press Ctrl-Shift-J in Google Chrome or Mozilla Firefox to see developer's console for possible errors.

You may want to prettify the output, but try focusing more on code itself.

Doing var object1 = object2 and object2.name='Anny' results in changing name of object1 to Anny as well?

Click me!

Read about Copying Objects in JavaScript

Once you are happy with your app, or at least it doesn't report any errors in dev console you may consider it to be of release quality and worth merging into master:

git checkout master && git merge populate-world

However proceed with any further changes when on populate-world or another feature branch, merging into master from time to time.

Publishing

Push your repo to github.

You may want to publish your world on GitHub Pages. The following commands will help you.

Assuming you merged your code into master. You may alternatively merge from feature branch (populate-world).

git fetch
git checkout gh-pages
git pull origin gh-pages
git merge master
git push origin gh-pages
git checkout master

The above script updates gh-pages branch from the remote, then from master, and pushes updated branch to the remote.

Now your world is published at https://<YourGithubUsername>.github.io/a-tiny-JS-world/

When you want to update your site with latest changes in master do the following: (Assuming you merged your code into master. You may alternatively merge from feature branch (populate-world).)

git checkout gh-pages
git merge master
git push origin gh-pages
git checkout master

NB! Your project may not be published or updated immediately. Try refreshing your page in 5 to 10 minutes after pushing gh-pages.

If you want to have your fork published before any changes pushed (i.e. original gh-pages) then do the following to trigger publishing:

git push -f origin origin/gh-pages^:gh-pages
git push origin origin/gh-pages:gh-pages

^ Up to TOC ^

What's next

You're done? Congratulations!

Did you like the experience? Grant this repo a ⭐️!

List your repo

  1. Navigate to A Tiny JS World root repo worlds list

  2. Edit the file

    • Click Edit this file button

    • Copy the very first line in the table, go all way down to the end of the table, insert the copy as the last row in the table, and edit it as appropriate specifying:

      • current date as YYYY-MM-DD
      • number of objects you created
      • number of code lines your object definitions take
      • your github nick in square brackets and link to your repository in parentheses
    • Add an extra new line so additions from other contributors do not affect yours.

    • Switch to Preview tab to check if the table still looks nice.

    edit-animated

  3. Submit changes

    • Scroll down to Propose file change
    • Type "List a tiny JS world by " in commit subject
    • Click Propose file change button, then Create pull request and then Create pull request once again to complete.

    do-pr

You are done here!

Please, note that PRs may not be merged very soon. Thank you for your patience.

Code review

If you have completed this task as a part of Kottans Front-End Course ask a course mentor or classmates to support you. Check this task intro within the course for instructions.

Otherwise, ask someone to review your code and come up with explanations on how it could be completed with OOP in mind. It is always good to explain yet another approach on some working code.

Keep in mind that this was just a tiny world and whenever you need to build bigger worlds Object Oriented Programming concepts come to your rescue.

^ Up to TOC ^

Leveling your skills up

Learn on your own

Imagine you have to build a big world populated with billions of inhabitants and a great variety of species, and your world project code base will be distributed across many files.

Now, here are the problems.

  • How do you create many similar objects?
  • How do you add an attribute to all e.g. humans?
  • How do you access your world inhabitants across your code base?
  • How do you deal with common attributes for multiple species?
  • How do you aggregate inhabitants into communities (families, countries etc.)?
  • What if you decide to add a family name and want that a person being asked for her or his name would include family name in their response? (And you already have these questions posed in multiple locations across your code base)

In other words how do you make your code scalable?

Object-Oriented Programing (OOP) concepts come to your rescue.

The following will help you to make yourself familiar with OOP and JavaScript OOP.

Consider completing Object-Oriented Javascript from Kottans Front-End Course if not yet.

Some extras related to OOP:

Improve your code

If you feel now that you can improve your code being armed with OOP knowledge then go ahead! Don't forget to fix your row in the worlds.md submitting an update PR.

Wrap-up

Grats! You've done a great job! You have improved your OOP skills and hopefully feel happier and self-confident.

Your repo fork reflects your progress, so feel free exposing it to whoever might be interested in your learning path proofs.

^ Up to TOC ^

Credits

This repo is dedicated to my elder son Yaroslav who turned 18 on this repo creation date.

This Tiny JS World project wouldn't ever happen without Kottans and awesome Kottans Front-End Course (it's free and initial part is completely remote) I have completed as a student in 2017 and since then have a chance to contribute thus paying back.

Special thanks to Anastasiya Mashoshyna, Yevhen Orlov and other Kottans for the discussion, feedback, and support that resulted in this project creation.

^ Up to TOC ^

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].