Things to keep in mind while starting new project. || This is For Developers ||

1. Be clear with requirements.
   
   
2. get reference websites from the client
   
   
3. Be very clear with the end of requirements. (How your website will look & how it will function at last.)
   
   
4. Start with creating masters of the website, because they are the base of the project. masters like (Country, State, City), etc. (Masters according to projects)
   
   
5. Masters are the base of the website. Be careful, clear with your masters.
   
   
6. Developers must have meetings with clients at least once a week.
   
   
7. Developer should not worry about the cost of the project  & should ask Any questions about the project, features, no of expected users, High-end features (even if the client is not paying that much. dev should not worry about that. developers should worry about code, scalability)
   
   
8. Ask client / Project manager if you want this feature, that features, roles and permission, delete options, etc.
   
   
   
9. While understanding the requirements always go with real-life scenarios. (Like SRK, Salma, Amir Khan).
   
   
10. Get Project Documentation from Manger / Co-ordinator OR form the responsible person

Read More

How to introduce yourself?

Introduce yourself

Q. Interviewer Question: Do i want to hire this person? Give reasons why interviewer should hire you?

    ---> Your name, Tech Stack you have worked on

    ---> Don't add clg name, place

    ---> YOu can add your frameworks

    ---> Avoid grammatical error

    ---> Add your load at very top.

    ---> Be very specific to the roles you are interviewing

    ---> Mentioned Few hobbies

    ---> Add things which can add value, so interview can talk to you more

    ---> Make your intro more intresting!

    ---> Add background if related

    ---> Try for 1 Mark Answer!

    ---> Also talk outside of tech at the end of intro. people want to work with          intresting people.

    Q.) How to showcase project? ( 19 Nov 2021 )

    1) Make a story on your project as well.     2) MVP     3) Can you explain your project in 30-40 sec. ( Showcase basic idea. )     4) Give Contetx About project     5) Login / Register basic Crud is present (add/edit/property) present     6) Show how the added property Looks like     7) Describe about map.     8) At last talk about your stack! talk imp

Read More

How to host website on AWS

Launch an Instance

Choose Amazon Machine Image (AMI)

Choose EC2 Instance Types (General Purpose t2)

Configure Security Groups (Security Groups are like firewalls that define what

type of traffic we want to allow.)

Add InBound rules.

Review Instances

Click on Download Key Pair to download key pair and keep it safe.

After a successful launch of instance, you will be taken to the Instance screen.

When the status of Server change from pending to running, you can SSH into

your Server to perform access.

SSH into our machine and install the webserver.

Check your public address from instance details or assign an elastic IP.

you will get a .pem (Privacy Enhanced Maifile )

connect with ssh from a terminal

Now install apache on AWS & database

Install Nodejs ( node -v )

Install MongoDB

Install Pm2

Install Git

Host React JS App or other

After everything is installed Connect with Gitlab

Read More

DSA With JavaScript resources

1. ( Paid 455 ) https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass/ 
   
   
2. (FreeCodeCamp : ) https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/
   
   
3. 30 Seconds:- https://www.30secondsofcode.org/js/t/algorithm/p/1

Read More

What is Redux? Why use Redux? When use Redux?

Why use Redux?

1.  Redux helps us to avoid the problem of prop drilling!
2. Instead of asking data to parent components, you can directly get that from the store.
3. Create Big apps with Redux if your app shares a lot of data between components you should use Redux.
4. Store, Reducers, Actions, Constants
5. Data can be separated using `Multiple reducers` & will be stored in a single Store.
6. in Index.js import Provider & Store. And then Wrap <App /> component with Provider.

Redux Devtools Extension.

1. To view states in our dev tools. you can see state movements. 
2. you have to add/connect your app redux dev tools extension.
3. const store = createStore(rootReducer, composeWithDevTools());

Add to Cart Example:

1.  What is Action: Send data from React to Store. if you click on the `Add to cart` button data will be shown to the cart.
2.  Reducer:  Gets data from action & pushes data to store. check for the action & push data accordingly!
3. container: 
4. Connect React with Redux: (mapStateToProps & mapDispatchToProps)
1. Shopping Types
2. Shopping Actions
3. Shopping Reducers
5. Get to know about Connect function in Redux.

Amazed:

1. By just adding `+`  before `action.payload.qty` type `string` value has been converted to type `number`

console.log("action.payload.qty ===> ", action.payload, " type ===>", typeof +action.payload.qty)

Read More

Hoisting In JavaScript

1. Before saying anything checkout the below example.
   
   
   var x = 8;

   
   

   function getName(){

       console.log('My name in Rahul More');

   }

   getName();

   console.log(x)
   
   
2. What do you think is the output of the above code?
   
   
   
   
   
   Yes, you guess that right. you will get output as you guessed it right.
3. But here is a trick. what if we do something like this?
   
   
   getName();

   console.log(x)

   
   

   var x = 8;

   
   

   function getName(){

       console.log('My name in Rahul More');

   }
   
   
   
4. Now can you guess what the will be the output?
   
   
   
   
   It's running Function getName but we got `undefined` for x
5. But if we remove `x = 8` from we will get an error that `x is not defined`.

Undefined Vs Not Defined

1. Accessing variables & functions before declaring is known as Hoisting in JS.
2. the function is working as it is even if we moved that at TOP but Variable is not working properly.
3. Even before executing the code memory got allocated for variables, functions for other things.
4. 
   

Read More

Asynchronous JavaScript & Event Loop

1. Javascript is a Synchronous single-threaded language. it can do 1 thing at a time.
2. Call stack present in the JS engine all code executes in the call stack.
   
   
   
   function a(){

       console.log('I am a()');

   }

   a();

   console.log('End')
   
   
3. Whenever the js engine runs the code it runs from top to bottom. it runs line by line.
1. Function a will be allocated memory & will be stored in call stack.
2. a() will be pushed at a call stack & function a is executed. after executing a will be popped out from the call stack.
3. And so on...
   
   
   

WEB API's

1. setTimeOut()
2. DOM API'S ( document.getElementByID() )
3. fetch
4. localStorage
5. console
6. location

These are not part of javascript, These are part of Browser. WEB API's present in the global object window.

window.console.log('Rahul More')

We can even write like this to get an appropriate output. but we don't have to write `window` each time because it's present in Global Object. so we can write it as 

console.log('Rahul More')

Example

console.log('start');

setTimeout(function cb() {

    console.log('Callback')

}, 5000);

// this will go to callstack after 5 seconds as we

// have passed this delay! Through the call back queue.

console.log('end');

The above code can generate output like this

Event Loop & Callback

1. Callback goes the call stack through the callback queue.
   
   
   
   
   
2. The event loop continuously checks in Callback QUEUE for callback & adds it to the call stack.

Call Back Queues

1. A lot of calls back stored in CB queues & pushed into call stack one by one using an event loop.

Micro stack Queues.

1. Fetch API.
1. Fetch API doesn't work like other web APIs like setTimeOut(), DOM APIs, instead of fetch APIs go inside Micro stack Queue.
2. It is like call back queue But has a higher priority than Call Back queue as you can see that in the image.

What comes inside Micro Stack Queues

1. Promises
2. Mutation Observer.

What comes inside Micro Stack Queues

1. SetTimeOut
2. DOM API'S.

Starvation.

1. Suppose there are a lot of tasks in the Micro stack queue & one task is creating another task in the Micro stack queue then the task in the callback queue will not get a chance to execute because of priority reasons.
2. This is known as starvation. starvation of the tasks inside the callback queues.

Read More