DEV Community: Prathamesh Patil

Next Js - Interview Experience.

Prathamesh Patil — Tue, 27 Feb 2024 17:23:08 +0000

Recently I had a interview for Next.js below are few questions.

CSS 

Difference between rem & em ? 
Types of display property - i.e (inline , none , block)

Next Js  

Key Features of next.js ? 
What is Static site generation ? 
What is Code splitting? 
What is Dynamic import? 
Difference between getServerSideProps and getStaticProps ?
State management tools ? (Mobix) - Dynamic routing ?

Git - First Commit

Prathamesh Patil — Fri, 02 Jul 2021 15:20:18 +0000

Prerequisites :- Git is installed on your machine.

Step 1: - Create a repository on GitHub
Step 2: - Create a Folder on your local
Step 3: - Now open a terminal for this directory and hit cmd

git init

Step 4: -Setup your configuration

git config --global user.name "Your Name"
git config --global user.email  Your Email

to see all the config you can type

git config --list

Step 5: Now to connect repository to local folder

git remote add origin "Your repository URL"

you can copy your repository url from github

Step 6: Now you are all connected you can start your work in folder you created to push your code follow below cmds

Will show all changes

git status

I will create my new branch and will push our code there

git checkout -b "your branch name"
git add .
git commit -m "First Commit"
git push origin "your branch name"

Done your code is on Git :) :)

My Recent React JS Interview

Prathamesh Patil — Fri, 18 Jun 2021 14:12:09 +0000

React Interview 18 June 2020 * **********************************************************

let num=0;
async function increment(){
num+=await 2;
console.log(num);
}
increment();
num+=1;
console.log(num);

console.log('hi');
setTimeout(()=>console.log('there'),5000)
console.log('You')

cont
let
var


let arr = [1,2,3,4,5];

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

console.log(i)

ans output and why

let newArray = [1,2,3,4,5];

1) Increment 1 in the smallest and largest element.

-Difference between state and props
-To to pass props from child to parent
-What if i tried to push a value in const array
-Optimising Apps
-Webpack Bundle - create a build file for each file in proj
-event loops in js

Scenarios
- handling auth tokens
- handling user with different permissions.
- create a project to list an employee from api with onclick of user should redirect to specific user.(Explain whole design)

Setup React App With Redux Store

Prathamesh Patil — Sat, 27 Mar 2021 18:10:46 +0000

Step 1: Create React App

npx create-react-app my-app

cd my-app

Step 2: Instal Redux , React Redux & Redux Thunk With Following CMD's

npm install redux

npm install react-redux

npm install redux-thunk

Step 3: Create reducers/reducer.js in src

Add Code as below in reducer.js:

const initialState = {
   name:prathamesh
}

function reducer(state = initialState, action) {
    switch (action.type) {
        case 'SET_CHECKED':
            return {
                ...state,
                name:action.payload.name
            }
            break;

        default:
            return state;
            break;
    }
}

export default reducer;

Step 4: Time to connect store
Open src/index.js & import

import {Provider} from 'react-redux';
import {createStore,applyMiddleware, compose} from 'redux'
import reducer from './reducers/reducer'
import thunk from 'redux-thunk';

Then make changes as below

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer,composeEnhancers(
  applyMiddleware(thunk),
));

ReactDOM.render(
  <Provider store={store}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </Provider>,
  document.getElementById('root')
);

This will connect our store to app with react devtool.

Step 5:Connect any of the component to store

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Check extends Component {

    render() {
        return (
            <div>
               <h1>{this.props.name}</h1>
            </div>
        )
    }
}

const mapStateToProps  = state => {
    return {
        isChecked : state.name
    }
}

export default connect(mapStateToProps,null)(Check);

Above is a component named Check where we have connected store with connect function at the bottom which we have imported from react-redux & we can access the state by mapStateToProps.

Websocket - With Socket.io & Lravel echo

Prathamesh Patil — Mon, 21 Sep 2020 06:14:01 +0000

As we all know about web-sockets ,as some times it may go difficult to implement. Here I will Mention the Perfect Simplified steps to implement a Web-socket for Front-end I have chosen Veu.js

Here we are going to Use Redis - So First We have to Install Redis pon our system



sudo apt install redis-server

Lets Start with Laravel

Step 1: Install Following Packages



 i)composer require predis/predis,
 ii)composer require illuminate/redis

Step 2: Add Following Line in .env file



REDIS_HOST = localhost
REDIS_PASSWORD = null
REDIS_PORT = 6379
REDIS_DB = 0

BROADCAST_DRIVER=redis

Step 3:Now Install laravel-echo-server globally with command



npm install -g laravel-echo-server

Step 4: Now in your Projects Root Folder run following command



laravel-echo-server init

After running above command it will ask you following questions - ans is appropriately as eg below is mine on local machine



? Do you want to run this server in development mode? Yes
? Which port would you like to serve from? 6001
? Which database would you like to use to store presence channel members? redis
? Enter the host of your Laravel authentication server. http://localhost
? Will you be serving on http or https? http
? Do you want to generate a client ID/Key for HTTP API? No
? Do you want to setup cross domain access to the API? No
? What do you want this config to be saved as? laravel-echo-server.json

Step 5: - Now start the Laravel Echo Server By command



laravel-echo-server start

This will look like below :-

foreach vs forelse

Prathamesh Patil — Thu, 20 Feb 2020 08:08:18 +0000

ForElse is a ForEach loop, but with extra handling for empty input(s)

Below example shoes both loops with the same list of Users as Input


@foreach ($users as $user)
    <p>This is user {{ $user->id }}</p>
@endforeach

@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>No users</p>
@endforelse

Now if we compare this to the source code for the Laravel Framework to see how the loops are compiled (all Blades constructs are compiled into HTML when being rendered by PHP on the web page):

 /**
     * Compile the for-each statements into valid PHP.
     *
     * @param  string  $expression
     * @return string
     */
    protected function compileForeach($expression)
    {
        preg_match('/\( *(.*) +as *(.*)\)$/is', $expression, $matches);

        $iteratee = trim($matches[1]);

        $iteration = trim($matches[2]);

        $initLoop = "\$__currentLoopData = {$iteratee}; \$__env->addLoop(\$__currentLoopData);";

        $iterateLoop = '$__env->incrementLoopIndices(); $loop = $__env->getLastLoop();';

        return "<?php {$initLoop} foreach(\$__currentLoopData as {$iteration}): {$iterateLoop} ?>";
    }


   /**
     * Compile the for-else statements into valid PHP.
     *
     * @param  string  $expression
     * @return string
     */
    protected function compileForelse($expression)
    {
        $empty = '$__empty_'.++$this->forElseCounter;

        preg_match('/\( *(.*) +as *(.*)\)$/is', $expression, $matches);

        $iteratee = trim($matches[1]);

        $iteration = trim($matches[2]);

        $initLoop = "\$__currentLoopData = {$iteratee}; \$__env->addLoop(\$__currentLoopData);";

        $iterateLoop = '$__env->incrementLoopIndices(); $loop = $__env->getLastLoop();';

        return "<?php {$empty} = true; {$initLoop} foreach(\$__currentLoopData as {$iteration}): {$iterateLoop} {$empty} = false; ?>";
    }

Essentially, the ForElse loop has a built-in code and compile check for an empty input, in which case it optionally outputs an alternate display template for the empty input.

I would imagine you can use a ForEach loop in every case that you might use a ForElse loop, adding that you include and empty checks that ForElse might catch for you.

Why Arrow Function?

Prathamesh Patil — Mon, 03 Feb 2020 08:04:57 +0000

Before knowing why to go with arrow functions. let us know what is arrow functions. Below is an example of normal function

//Normal Function

myfunction(){
    return 'I am a Normal Function';
}

Now We can write the above function in arrow function as shown below


//Arrow Function

const myfunction = ()=>{
    return 'I am Arrow Function';
}

Suppose we want to send parameter in an arrow function then we can pass as


const myfunction = (name,age)=>{
    return 'My Name is'+name+','+age+'years old';
}

Now if we have a single parameter to pass then we can also write the function as


const myfunction = name =>{
    return 'My Name is'+name+','+age+'years old';
}

Now the question is why this arrow function what's the use of arrow functions.
Let's take an example we have a class person which as a function personName() which in return console logs the name with a delay of 100 ms.

class Person{

constructor(name){
   this.name = name;
}

personName(){
    return setTimeout(function(){

        console.log('Name is '+this.name);
    },100);
}
}

per =new Person('Peter');

per.person();

//Output 'Name is Undefined';

So the output is not what we expected .. this says that this is now no more accessible in inner functions.
To solve this there is a solution we can simply bind this function to current objects as


personName(){
    return setTimeout(function(){

        console.log('Name is '+this.name);
    }.bind(this),100);
}

****OR****

personName(){

    var that = this;
    return setTimeout(function(){

        console.log('Name is '+that.name);
    },100);
}

But this solution doesn't seem to a good solution ... so to solve this javascript came with an arrow function which knows from which context it has been called.
Below code shows that now this is accessible in the inner function

class Person{

constructor(name){
   this.name = name;
}

personName(){
    return setTimeout(()=>{

        console.log('Name is '+this.name);
    },100);
}
}

per =new Person('Peter');

per.person();

//Output 'Name is Peter';

Service Container in Laravel

Prathamesh Patil — Thu, 30 Jan 2020 09:46:37 +0000

Before Understanding Service container we will know what is a container as a name explain it all as Container is places where we store something and we get it from there when we need it.Below is an example of the code.

class container{

    public $bindings =[];

    public function bind($name, Callable $resource){

       $this->bindings[$name]=resource;

    }

    public function make($name){

       $this->bindings[$name]();

    }


}

$container = new container();

$container->bind('Game',function(){
    return 'Football';
});

print_r($container->make('Game'));

//Out Put

'Football'

As you can see I have created a container class where I have two methods

1)Bind
2)Make

Bind methods register our function in a container and after that, we make use of that function with make function.
This is a basic concept which laravel uses in Service Container

As we have read the laravel documentation, Service Container helps is managing the Dependency. lets see with an example


app()->bind('Game',function(){

    return new Game();

});

dd(app()->make('Game'));

//Output

Game{}  // class

In Above code with app()->bind() are binding our service to use it .. then we call to make() to use it then we could see an output as a class .. but what if class Game has a dependency on class Football as shown in below code. it will throw an error


Class Game{

public function __construct(Football $football){

$this->football =$football;

}
}

app()->bind('Game',function(){

    return new Game();

});

dd(app()->make('Game'));

//Output

will throw error class football not found so we create a football class as in the below code.


class Football{



}

Class Game{

public function __construct(Football $football){

$this->football =$football;

}
}

app()->bind('Game',function(){

    return new Game(new Football);

});

But What if Football Class has one more dependency of the stadium and so on there laravel handles all through service container.


class Football{



}

class Game{

public function __construct(Football $football){

$this->football =$football;

}
}

/*app()->bind('Game',function(){

    return new Game(new Football);
});*/

dd(resolve('Game'));

//Output

Game{
  football {}
}

So finally we can say that yes service container is a powerful tool for managing class dependencies and performing dependency injection ... :)

Benefit of 'key' prop in React

Prathamesh Patil — Wed, 29 Jan 2020 04:47:34 +0000

If you are a beginner in a react js you may have encountered the key warning in the console while listing elements on the page in a loop.

KEY is a very important and useful concept in react js in improving user experience

Now the question is how?? -- Refer the image below

In the image above on the left side, we have a list were 2 elements are rendered, then now
we add the third element at end of the list as shown at right, react will compare both and will get to know that it needs to update only the third element in the list.

But if we add the element at first position as shown in image above(Diana added th list) the react match will fail and it re-render all list again.
to avoid this re rendering, we can use the "key" prop in the list which will keep track and update only elements that are new. as shown in the below image. ..so simple :)