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

Map Filter & Reduce in Javascript

1. Map, Filter, Reduce are the higher-order function in javascript. 

Map

1. The map function is used to transform an array.
2. Suppose you have this array

const arr = [5, 1, 3, 2, 6]

    3. Its possible transformations could be doubling, tripling, or finding a Binary number of each element present in the array. and it will store the transformation into the new array.

    4. 

function double(x) {

    return x * 2;

}

/*

* function map accepts function `double`.

* so the map is Higher Order function

*/

const output = arr.map(double); 

console.log(output);

    5. You can also write the above function like this

const output = arr.map((x) => x * 2);

console.log(output);

Map Example

const users = [

    { firstName: "Rahul", lastName: "More", age: 22 },

    { firstName: "Yogesh", lastName: "More", age: 20 },

    { firstName: "Rohit", lastName: "Bhosale", age: 17 },

    { firstName: "Nityanand", lastName: "Yevte", age: 28 },

    { firstName: "Sachin", lastName: "Yevte", age: 26 },

];

// get Full name of users

const fullName = users.map((x) => { // Now x has access to every elemet of array.

    console.log(x.firstName + " " + x.lastName)

});

Filter()

1. The filter function is used to filter values present inside the array.
2. Let's say if you want to filter out al the values which are odd, or greater than 3 inside it, or divisible by 3.
3. Used to filter the data based on condition.

function isOdd(x) {

    return x % 2;

}

const FilterData = arr.filter(isOdd)

console.log(FilterData);

function even(x) {

    return x % 2 == 0

}

const FilterData = arr.filter(even)

function even(x) {

    return x % 2 == 0

}

const FilterData = arr.filter(even)

function greaterThan(x) {

    return x > 4;

}

const FilterData = arr.filter(greaterThan)

Filter Example

// Get the name of the users Whose age is greater than 20

const ageOfx = users.filter((x) => {

    if (x.age > 20) {

        console.log(x.firstName);

    }

})

Reduce()

1. As the name suggests Reduce doesn't Reduce anything :D
2. Reduce can be used to iterate over each & every element of an array & find the sum of all the elements in the array. or the largest or the max element inside the array.
3. Instead of directly going to write Reduce Method we will just check the above (p2) example in a Non-Functional way.

function findSum(arr) {

    let sum = 0;

    for (var i = 0; i < arr.length; i++) {

        sum = sum + arr[i];

    }

    return sum

}

console.log(findSum(arr));

    4. So to find we do something like this in a non-functional way.

    Let's Do it in a Functional Way.

    

const res = arr.reduce(function (acc, curr) { // Key, Value

});

    5. So first function `reduce` accepts 2 parameters 1st is a function & we will talk later about 2nd function.

    6. initially `acc` in 0 & `curr` contains the elements of the array.

    7. if we console acc initially it will give 0 & later it will return `undefined.

    8. 

const res = arr.reduce(function (acc, curr) { // Key, Value

    acc = acc + curr;

    return acc;

});

console.log(res);

    9. & if we talk about 2nd argument it takes the initial value of acc. ( by default it is 0 )

    10. Another example using reduce. Find max element using Reduce. 

const maxUsingReduce = arr.reduce(function (max, curr) {

    if (curr > max) {

        max = curr;

    }

    return max;

});

console.log(maxUsingReduce);

If my curr element is greater than the max element. then my max element is the current element.

Reduce Example

// get The age & show the count of number of people present in that array! 

const countAge = users.reduce(function (acc, curr) {// intialValue, currentValue

    if (acc[curr.age]) {

        acc[curr.age] = ++acc[curr.age];

    } else {

        acc[curr.age] = 1

    }

    return acc;

}, {});

console.log(countAge)

   We can also use Chaining on these functions.

// Get the name of the users Whose age is greater than 20

const ageOfx = users.filter((x) => x.age > 20).map(x => x.firstName);

console.log(ageOfx);

Read More