Code improvement tips

1. How to name function?

// For showing loading spinner
function loading(){
loader.hidden = false
}

// Even Comments are not necessary
function showLoadingSpinner(){
loader.hidden = false
}

Name the function with particular action.

1. Recursive Function can lead you in infinite loop of errors

function getdatafromAPI(){
try{
//Function
throw new Error('OOps')
}catch(error){
getdatafromAPI()
}
}

Can you Imagine what will happen in here?
Solution: Setting some counter variable in catch block so you can run function certain number of times and if it stills shows error define error.

1. Increasing performance of website when network is slow, by shipping only things that are necessary for the view. Creating initial_load boolean to and make first loading setting it false for all other loads and make initial loading fast. The less data you ship faster your website will be.
2. Check out TC39/proposals for staying upto date with new feature of Js.
3. Creating different modules whenever it is possible to make your code clean.
4. Check the order of your javascript importing in the html files. Those really matters.

5. Different Ways of importing javascript
   async - Only on packages whose execution order doesn't matter.
   Something like google analytics script
   defer - only execute the script after loading everything
   

6. Javascript is the reaction of data change on webpage
   And frontend framework like react and angular helps writing those reaction cleaner and faster

7. Difference between textcotent and innertext of html from javascript
   Innertext triggers rendering of whole page even if the inside content is not changed that can be computationally expensive

8. Don't declare variable of type function and then change it to variable not good practice

9. Choosing which data type to use Array or object?
   While using Array if you want to delete element through an array you need to go through entire array but for object you can do that with simple key and the process become faster.

10. Checking user browser to implement some features is cumbersome because browsers are always updating something into them. You can check type of browser in windows.navigator.userAgent but you get multiple browser options there.
    So always right browser specific code in conditionals.

11. Concept of Models in javascript:
    For module you can put files in any order and it will still works. If you just add script file as it is then order does matter. For modules Order doesn't matter.
    Module is one single entry file in the javascript that is connected to other files.
    Web bundlers:
    Bundlers are the software that understand the what part of code is used and creates efficient bundle for import. It works on concept of tree shaking and eliminates code that we are not using.
    Dynamic Module loading:
    

import('./modules/myModule.js')
  .then((module) => {
    // Do something with the module.
  });

1. When give display: flex; attribute hidden in html doesn't work. you have to add different class to hide Attribute and then make display none over it.