Gourav Chatterjee

Hi, I am Gaurav Chatterjee, and I am a full stack developer. I have 5 years of experience as a full stack developer. Currently, I am working with Manstack, MongoDB, Express JS, React JS, and Mongoose JS. Apart from this, I have experience with Vue. I have experience with Nest, Next, all these technologies. I have also experience in DevOps, AWS, multiple AWS components, and CICD pipeline setup. I have all this experience. I have also worked with Docker and Kubernetes, setting up servers and all. So, I have overall 5 years of experience, and I can work seamlessly on both the front end and back end, mostly using JavaScript technologies. And I'm looking for new opportunities to enhance my skills as well as to give my 100% for the betterment of the organization that I will be working for.

So, event loop is a continuous loop that helps to run JavaScript on browsers. So, in the context of event loops, the event loop is a continuous loop, which monitors all the functions that are being executed in JavaScript. So, in case of any web API calls or any kind of other API calls or any external activities, JavaScript, the environment JavaScript does not do that by itself. What happens is it's being done using the browser APIs. So, when this kind of scenario comes, it gets picked up by the browser APIs, and it gets executed and it comes to the callback queue. And the event loop checks the call stack where all the functions are getting stored. So, that call stack is continuously checked by the Event Loop. If there is any function, the Event Loop executes that. And after all the functions are executed in the call stack, then the callback queue gets checked. And if there is any external activity that is pending over there, then that gets picked up and executed in JavaScript. So, that's how the event loop works.

So synchronous code is all the functions that we use, everything, such as console log and everything, all this executes synchronously, so that is synchronous. But if there is any external API calls or in Node.js, if there is any database calls or anything, so that is not a synchronous call. That has to be executed in an asynchronous manner. And for those scenarios, we can use promises, and we can use async/await to execute those asynchronous codes effectively in our code base. So async/await can help us to write asynchronous code in a way that looks like synchronous code. So synchronous code is what happens synchronously and async is what happens asynchronously. But using async keyword, we can make it look like a sync code.

So, Java, we can use the fetch API. We can use fetch, and we can use JavaScript's fetch API to handle multiple API calls. As it is asynchronous, the Vue JS UI will be automatically processed, and it can execute simultaneously. On the other end, JavaScript's event loop will check the callback queue if the API calls are being finished, then it will capture those callback functions and put them in the call stack, and that's how the API calls will be finished executing.

Yeah. So nested routes are like, suppose I have a route for users, and I want to fetch another route for user slash profile page. We can do this by using React Router, and we can use user slash profile page. Then we can call the component which is responsible for showing that particular route. We can put it in the parent route so that it is taken as a nested route. And browser page rendering is so, what React does. React keeps a virtual DOM, and it takes a copy of the actual DOM and keeps a virtual DOM. Every time a page renders, it changes it. Whatever changes happen in the page, it compares with the actual DOM. The virtual DOM gets compared with the actual DOM. If there are any changes, it only changes those things, not the full document.

So I would, yes. So if there is a large CSS code base, so if there is I would take first the common CSS code, which is being used in multiple components, and I would put it in a separate file. And I would take that file for all the components that I am using. But if there is any CSS code for a particular component, I would write a separate CSS file for that component only and which is used by that component so that all components do not have to use the large CSS code base. And there could be multiple classes, which are not in use by a single component. So even if the component is not using the CSS classes, it has to load the CSS classes, which increases the load time of the page and affects the browser's performance. So I would shift whatever CSS code is necessary into separate CSS files and which are used by particular components. And if there is any CSS code which is being used for multiple components, then I would take that in a common CSS file, like a styles or CSS file.

Yeah. So, how the state is being updated with the company? So this state counter, we can use, like, we could update the counter beforehand. And in the set state method, we just need to pass whatever the updated value is. We should not execute this kind of thing, like counter, then update the counter plus 1. We don't do this. We update the counter value first, then we pass the updated value in the set state method so that the new value gets updated in the state component. So my solution would be to update the counter value beforehand and put the updated counter variable inside the set state method without the curly braces.

Yeah. It will not work because it's fetching the URL, and in the then method, it's getting the response and then it's getting the JSON. But the return statement will execute first because it's a synchronous method. And in the asynchronous method, so the fetch will take some time to be executed, and the event loop will not pick up this immediately. Instead, the event loop will pick up the return statement before, and there will be no data. So the data may be blank, and that will return a null value as the return statement. So what I would do to rectify this is I would put the return statement in the second then block. So that would work. This will not work because the return statement is outside the then block. So the asynchronous code will take some time to be executed, and the return statement will be executed first. That's why there will be no data because the API call will not be finished by the time the function returns the data.

Yeah, so we need to understand how virtual DOM works. Like, the virtual DOM takes a copy of the real DOM, and whenever there's an update in the rendering process, it compares the virtual DOM with the real DOM. And if there are only changes, then it only updates those parts in the actual DOM after comparing with the virtual DOM. And if there's any update, then only it should re-render the component. We could memoize the situation, like what the list is being updated. If there's any updation, then only it should render the component. Using memoization technique, we could optimize the whole rendering performance so that it doesn't get updated every time there's a change in the component or in the UI. So, yeah, memoization would be a technique that we could use, and use virtual DOM to optimize list rendering when there's a large dataset.

If there is a bootstrap update and maybe issues like visual regressions and anything, we need to check the documentation to see what has been updated and if there are any breaking changes or not. If there are any breaking changes, we need to address those things and update our classes based on the breaking changes mentioned in the documentation, like some components, some colors, and all. If there are any changes, we need to plan accordingly to rectify the previously developed code to update with the newer version. We could use a separate CSS file to rectify all those classes and match up with the new version, and we could change the class names and all in certain places where there are issues.

So what I did for React application deployment is I used AWS Amplify. There's a service called AWS Amplify. We just need to link our GitHub repository, whether it's private or public. We need to link the repository to Amplify and specify the build command, test command, and the deployment command. It's like running NPM install, then NPM build, and all this stuff. So whenever we do that, AWS picks up automatically. Every time there's a push to the main branch, it picks up the code, builds it, and deploys it to their environment. It also handles SSL termination by itself. If we want to map our own custom domain, we can do that in the admin panel. For security, as I mentioned, it automatically handles SSL termination. It has an environment section where we can mention some secrets, although we shouldn't expose any secrets in the frontend. If there are any, we can mention them in the environment section, and it picks up from environment variables. For scalability, Amplify can also be configured for scalability. If there's a certain load, it can be scaled automatically. We can spin up another instance and set up a load balancer for load balancing between all those instances.

Yeah. Tailwind CSS is a very good tool, and I have been using it for a long time now. What Tailwind CSS does is use the technology called tree shaking. So, what happens is when we give the classes, Tailwind doesn't give us all the built-up components like Bootstrap. It gives us classes, and we can use those classes to build our own components, and that is very useful. Why? Because it doesn't load all the classes, all the CSS classes like Bootstrap in our component, and it doesn't get heavy. It takes only the classes that we specify in the code base and takes the CSS for those classes only. It doesn't take all the CSS classes, and that helps to optimize the application's performance. Also, we can do our own styling using all those classes because using Bootstrap, the application looks very similar to other applications. But using Tailwind CSS, we can do our own styling. We can create our own CSS file. We could use Tailwind classes inside the CSS file to make any custom classes, and later, we can use those custom classes inside our Vue JS component to use Tailwind CSS. So, that's a very good technology, and Tailwind CSS is a very developer-friendly tool; I would suggest it.