Self-Assessment about the code

[Basir-Mohammadi]

Below is the feedback after checking whether the code for this project follows the best practices and clean code rules.

JavaScript best practices

Strong type checks
✔️ Use === instead of ==

Variables

❌Kindly name well the variables. This way they become searchable and easier to understand after a person sees them.
❌Kindly don't add extra unneeded words to the variable names.
❌Please don't enforce the need for memorizing the variable context.
❌Kindly don't add unnecessary context.

** Functions**

❌Kindly Use long and descriptive names. Considering that it represents a certain behavior, a function name should be a verb or a
phrase fully exposing the intent behind it as well as the intent of the arguments. Their name should say what they do.
❌Kindly Avoid a long number of arguments. Ideally, a function should have two or fewer arguments specified. The fewer the
arguments, the easier is to test the function.
❌Kindly Use default arguments instead of conditionals.
❌Kindly Avoid executing multiple actions within a single function. A function should do one thing.
❌Kindly Use Object.assign to set default objects.
❌Kindly Don't use flags as parameters because they are telling you that the function is doing more than it should.
❌Kindly Don't pollute the globals. If you need to extend an existing object use ES Classes and inheritance instead of creating the
function on the prototype chain of the native object.

Conditionals

❌ Please avoid negative conditionals.
❌ Kindly use conditional shorthands. This might be trivial, but it's worth mentioning. Use this approach only for boolean values and if you are sure that the value will not be undefined or null
❌ Kindly void conditionals whenever possible. Use polymorphism and inheritance instead.

ES Classes

✔️ Use classes instead over ES5 plain functions
❌ Please use method chaining. As a result, your code will be less verbose. In your class, simply return this at the end of every function, and you can chain further class methods onto it.

⚠️ In general, you should do your best not to repeat yourself, meaning you shouldn't write duplicate code, and not to leave tails behind you such as unused functions and dead code.

⚠️ In your project you used node modules, kindly add .lock files in the repository to avoid problems with future versions of the dependencies.

⚠️ Kindly use ES6 object destructuring to get the values from an object. This way you can avoid repeating a lot of code

JavaScript in the browser

✔️ No use of console.log to your repo. It’s nice, it increases on the performance and it doesnt make confidential data be visible to anyone using the browser tools to look at your website.
✔️ No use window.alert() or window.confirm(). It’s good, possible to style, it does not stop code execution and displays well on different browsers.
✔️ Keep the number of changes/updates to the DOM as low as possible, they are very expensive for the browser.
❌ Kindly keep the application logic separated from DOM manipulation tasks.
✔️ No use document.write or eval
✔️ Add node_modules dir to your .gitignore file as all those files are not needed in your repo (each team member will install all packages thanks to your package.json file).
✔️ No commit of old pieces of code as inline comments. They will make your project look messy. If you need to review a previous version of your code, you can always use git history.

DRY, KISS, and YAGNI rules.
Here are the principles you need to follow to write the clean code
DRY: Don't repeat yourself! It simply means you should try to avoid having duplicated code. Instead, you should reuse your code when possible.

KISS: Keep It Simple, Stupid. No further explanation is needed! Try to avoid unnecessary complexity, don't over-engineer your code. A simple, small, and easy-to understand code base is easier to maintain and scale.

YAGNI: You Aren't Gonna Need It. Don't add anything you don't strictly need. Try to avoid the temptation of adding the most trendy technologies just because you think they may be useful in the future. Add things gradually, when they are really needed.

HTML and CSS best practices.
✔️ use HTML5 semantic tags
✔️Kindly avoid lines of code that are too long (100 characters or more).
✔️ No blank lines and indentations are okay.
✔️ Close all HTML elements
✔️ Use lowercase for elements and attribute names.
✔️ Always quote attribute values.
✔️ Use space-less equal signs.
✔️ No use of inline styles.
✔️ No use !important rule in your CSS style definitions
✔️ Use the class attribute for multiple elements
✔️ No commit of old pieces of code as inline comments.