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. Uh, currently, I am working with Manstack, MongoDB, Express JS, React JS, and Mode JS. Apart from this, I have experience with Vue. Js. I have experience with Nest, Next, all these technologies. I have also experience on, uh, DevOps, AWS, uh, multiple AWS components, CICD pipeline setup. I have all this experience. I have also worked with Docker and Kubernetes, setting up servers and all. Uh, so yeah. So I have overall 5 years of experience, and I 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 skill as well as to give my 100% for betterment of the of the organization that I will be working for.

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

So sync synchronous code is, like, all the functions that we use, everything, like console log and everything, all this, uh, executes synchronously, so that is synchronous. But if there is any, suppose, external API calls or in Node. Js, if there is any database calls or anything, so that is not a synchronous call. So that has to be, uh, executed in a asynchronous matter. And for those scenario, we can use promises, and we can use asynchabit to execute those asynchronous codes, uh, effectively in our code base. So asynchavet can help us to to write a synchronous code in a which looks like a syncs which look like that it is a synchronous code. So yeah. Yeah. So synchro synchronous code is sync is, like, what happens in 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 fetch API. We can use fetch, and we we can use, uh, JavaScript fetch API to to handle multiple API calls. And as it is asynchronous asynchronous, uh, call, uh, the Vue JS UI trade will be automatically processed, and it it can execute, uh, simultaneously. And the other end, uh, and the other end, uh, JavaScript's event loop will check, uh, will check the callback queue if the API calls are being finished, then it will it will capture those callback queue functions and put those in call stack, and that's how the API calls will be finished executing.

Yeah. So nested routes are like uh, suppose I have I have a route for users, and I want to fetch, uh, I want I want to another I want to have another route for user slash profile page. So we can do, like, uh, we can use react router, and we can use, like, user slash profile page. And then we can call the component, uh, which is which is responsible for showing the, uh, for showing for showing that particular, uh, for that particular route. And we can put it in the in inside the parent route so that it is it is, uh, it is, uh, it is taken as a as a nested routes. And browser page rendering is, uh, so what React does, uh, React React, uh, keeps a virtual DOM, and it, uh, it it takes a copy of the actual DOM and it keeps a virtual DOM. And every time a page renders, it changes it. Uh, whatever changes happens in the page, it compares with the actual DOM. The virtual DOM gets compared with the actual DOM. And if there is any changes, uh, in whatever part there is changes, yet only change those things, not the full dock. So that's how browser page rendering happens.

So I would, uh, yeah. So if there is a large CSS code base, so if if if there is I would take first the common, uh, common CSS code, which is being used in multiple components, and I would take those common CSS code and put it in a separate file. And I would I would take though that file, uh, uh, for for all the all the components that I am using. But if there is any suppose I have written some CSS code, there is some CSS code for a particular component, I would write a separate CSS file for that component only and which is being used by that component so that all the components need not to use the large CSS code base. And in their their their could be multiple classes, which is 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. I need to take it to, uh, increment the load time of the page, and the browser ending performance will get affected. So that's why I I would, uh, shift whatever whatever CSS code is necessary and shift those in separate CSS files and which is being used by particular, uh, particular component. And if 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 style or CSS or something.

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

Yeah. It it will not work because it's fetching the URL, and in the then method, it's getting the response and then it's, uh, getting the JSON. But where the return statement will execute first because it is a synchronous method. And in the asynchronous method, uh, 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 the that will that will return a null value as the as the as the return statement. So what I would do to rectify this is I would I would take the return statement, and I would put it in the second then second then block. So that would work. So 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, uh, we need to model we need to understand how virtual DOM works. Like, uh, the virtual DOM takes a copy of the real DOM, and, uh, and this and and whenever there is any update in the rendering process, it compares the virtual DOM with the real DOM. And if there is only any changes, then only it it it changed those part in the to only those part in the actual DOM update those part in the actual DOM after comparing with the, uh, virtual DOM. So what I could do, we could we could memoize we could memoize the situation, uh, like what what the list is being updated. And if there is any updation, then only it should render rerender the component. And using memoization technique, we could optimize, uh, we could optimize optimize the whole rendering performance so that it doesn't gain update it doesn't get updated every time there is any change in in the in the component or in the UI. So, yeah, memoization would be a technique that we could use, uh, and use virtual DOM to to optimize list rendering when there's a large dataset.

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

So what I did for, uh, React the React application deployment is I used AWS Amplify. So there is a service called AWS Amplify. So we just need to link our GitHub, uh, GitHub repository if it is a private or public. So we need to link the repository to Amplify, and we need to specify the build command, test command, and the deployment command. It's like NPM install, then NPM build, and all this stuff. So whenever we do we do that, uh, AWS picks up automatically. Every time there is a push to the main branch, it picks up the code. It builds, and it deploys on its environment, and it also handles the SSL termination by itself. If we want to map our own domain, own custom domain, we can do that in the admin panel. So and for security for security, as I mentioned, like, it it automatically hap it does the SSL termination. It has, uh, environment section where we could mention some secrets and all. Although we don't we should not expose any secrets in the front end, But if there is any, we could mention it in the environment section, and it picks up, uh, from the environment variables. For scalability, Amplify can also be configured for scalability. Like, if there is, uh, certain load, uh, multiple load, it it it can be scale it can be scaled automatically. Like, we could spin up another instance for that, and we could set up a load balancer for for for load balancing the load 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 Tailwind, uh, Tailwind Tailwind is with the technology like called tree shaking. So what happens is when we give the classes so Telwin doesn't give us the all built 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 the only 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 to to to optimize the application's performance. Also, we could we could do our own styling using all those classes because using bootstrap, uh, application looks very similar to other applications. But using Tailwind CSS, we can do our own styling. We can we can create our own CSS file. We could use Tailwind classes inside the CSS file for making any 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 very developer friendly tools, Tailwind CSS, I would suggest.