Anchal Gupta

Hi. My name is Anchel Gupta. I have 6.2 years of experience. I have mostly worked upon front end development in my career. I have worked in 2 companies. First one was MAQ Software, and then I there I have worked for 3 years. Then I joined, uh, Techmojo Solutions for 3.2 years where I have worked upon different kind of projects, and my technical skills include React JS, JavaScript, HTML, CSS, TypeScript, and I have used test for testing purposes. Uh, from last 1 year, I am leading a team of 7 members, uh, 5 developers and 2 work US. I help them in resolving the issues. I help developers to resolve the issues. I my roles and responsibilities in that company is to review the peers, end to end project management, uh, assigning the task to developers and QS, assigning the story points, discuss the issues and issues of the team with the upper management, assign the, uh, assign things to the team members, assign OKRs to the team members. And other than that, I have worked upon fantasy gaming application, which was based on React JS and JavaScript, HTML, and CSS. So I have majorly worked upon React JS in my career. I have worked upon different domains. I have worked upon, uh, worked in gaming domain. I have worked up, uh, worked in, uh, finance domain, even management system, employee management system kind of things. I have worked upon Power BI visuals, migrating the Power BI visual from, uh, from, uh, jQuery and JavaScript to React JS. I have worked upon performance optimization of applications. Uh, in my previous project, I have worked upon the optimization techniques where the load time for the application was around 10 seconds, and I have re reduced it to 4 seconds. I have developed the team of members, and we have, uh, documented the approach to optimize the performance of the application. I have used several techniques, uh, like, uh, memoization in React, code splitting, uh, code lazy loading. So these kind of techniques I have, uh, used. And before my leadership role, I was working as a senior software engineer in Techmojo Solutions where I worked as individual contributor, and I was also helping team members. I went I was also mentoring the team members there.

Okay. So critical factors for choosing different NPM packages for a project can be, uh, the size of the NPM package, first thing, and how many, uh, downloads that NPM package has, and what is the certificate that NPM package, uh, has, and what are the dependencies it has been using, what are the security, uh, reasons for the NPM package, and how often it has been updating, like, uh, what is the version, uh, version in each, um, in each year or how often they are updating the NPM package, and what are the capabilities that NPM package has, and, uh, what is the size of NPM package, uh, how much it is compatible with my project, Is it fulfilling all my needs or not? If not, then I will go to other NPM libraries and check whether which one is more compatible for my requirements. Yeah. That's it.

Okay. To refactor a JavaScript code base to TypeScript, uh, to minimize the disruption and ensure safety ensure type safety, uh, first step I will take is I will first, uh, refactor the services files, the API files. So I will first refactor the API response. Like, I will convert the API response from, um, JavaScript typeset. I will create different types for the response type and the request, uh, body type. I will create different interfaces and types wherever needed. I will create, uh, the global types if, uh, if we are reusing them multiple times. So I will put it into the global, uh, type file. And then after the type, um, after the API files, I will go to each component 1 by 1, and, uh, like, I will go on the child level first, the leaf node, and then there, I will first, uh, convert that component from JavaScript to TypeScript. And then I will go to the above level in the hierarchy, then the above, like, say so, uh, so I will go 1 by 1 in the hierarchy, and I will update all the components 1 by 1. After that, uh, once the components are done, I will go to the pages if we have any pages, uh, folder, which will have the highest, uh, level of parent component. So then I will update there, and I will make sure that, uh, the the TypeScript, the interfaces, and type whatever we have created has proper names, and we are extending wherever, uh, we we wherever it is getting repeated. So I will create inheritance. I will use, uh, the principle of inheritance, uh, there. So, uh, that kind of things I will do to ensure the type safety, and I will also, um, use e s link. So we I can add boost there so nobody can use any, um, nobody can use any in a project and disable the ES link. This kind of, uh, like, plugins we can use. So everyone is following everyone in the team is following the TypeScript things.

Types of features, um, to consider essential for maintaining a large code base and why. Like, I will use types and interfaces. So, like, we can extend them. Like, we can use the usable code there. So we can use, uh, uh, we can, um, like, multiple times, we can use the same thing. And instead of creating different different things, different different interface or type, we can, uh, make use of the previously defined types or interfaces. So the reusability factor will come into picture in text script. And second thing is, like, IntelliSense, the visual code editor will provide the IntelliSense and, uh, like, the developers can, uh, code better and faster. They have the idea, like, what will come next and what property each object has. So that will come into picture. We can make use of tuples. We can make use of, um, the union operator. So that feature, um, I can think that is easy and, uh, everybody can use it. And one of the main feature is the inheritance. Like, inheritance is a very essential feature for the large code base because we will have too many, uh, we if that inter inheritance is not in the picture, we have to create too many interfaces or types, whatever we are creating. Uh, by, uh, inheritance, we can, like, directly inherit one type and then, uh, like, uh, add new properties so that we can do in TypeScript for, uh, maintaining the large code base. And TypeScript basically provides, uh, like, the code is not that error prone. In JavaScript, the type is not defined. So, um, anybody can write anything, like, uh, if the if a function is accepting string as a parameter, um, the you developers can pass number as well, so it will accept that one as well. But in TypeScript, if you have defined the type with colon like dot colon string, um, the code editor will itself will give you error that, uh, it is defined. Like, it the param the argument passed should be a type of string. So that helps that will, uh, come handy for the developers to write code.

For the webpack to improve the load time of our web application, we can include tree shaking. So it will, like, uh, it will remove the unused code, uh, at the time of, um, at the time at the build time, it will remove the unused code. We can define the source map. Uh, so if the environment is production, so we can, um, uh, we can define whether we want to show the code, like, we want to bundle the whole code or not so that we can define in the webpack. So we can define that. Uh, entry point also we can define. So, um, entry point, uh, and output point also we can define. How would you leverage Webpack to improve the load time of a web application? Tree shaking is the one of the thing which is coming into my mind right now. Loader like, it has Webpack has entry point output, uh, output file, and, um, it has the loaders. So plugins also we can define in Webpack.

An instance where you improve the performance of a web application by modifying its separate configuration. Yeah. Uh, so an instance was like, uh, in one of the application, uh, the the build has the unused code as well. So so to remove the unused code, I have used a e six modules, and I have also include the tree tree shaking inside the webpack. And for CSS code, like, I have used CSS purge and applied it inside the webpack configuration and, uh, Webpack configuration. So if the CSS file or any style code has not been used, it is getting removed at the build time. And for the code part as well, like, um, for the code part as well, like, uh, for the code part as well, like, depth, uh, like, source map, we can define. Like, uh, instead of source map, we can use something else. Uh, so the so the code will not like, the whole code will not be bundled. Only the required part, it will be bundled. We can't implement code splitting, uh, code splitting to improve the performance of the web application.

The road record snippet explained by this might cause unnecessary re renders. And how would you optimize it? So first of all, return doesn't have anything. We should return a GSX from a component, so it doesn't have anything. And, uh, second thing is, like, the function which we have do something, um, um, is not, uh, is not be is not present inside the useCallback. So we have, uh, useCallback as the optimization technique, which React uses to optimize the performance of an application. It it, uh, it, uh, using useCallback, the the function will not be recreated on each and every render. So that part is missing here, and that's why it is causing unnecessary rerender. And inside return statement, like, we are not passing anything, so that's why also, uh, it doesn't returning anything. That's why it is causing the render because return it doesn't have any JSX elements to return.

In this JavaScript snippet, identify the potential error and it will white could occur. K. B. C. So in items a, b, c, d, e, items is an array of length 5, but here we are shortening the length of items dot length equals to 3 in line number 2, and we are trying to access the items of at the, uh, 4th, uh, 3rd index. So that means we are trying to access the 4th item present inside the array. But on line number 2 items dot length equals to 3, the, uh, item the length, uh, the array is getting shortened to 3 items only. So that's why it is getting error. Like, we are getting a potential error that items is 3 because the index out of bound error will be there for this. Uh, my could suggest a way to fix. So one way is, like, we can, um, update the line second line item dot length to 4, and then we can access the 4th item, Um, like, the item at index 3, we can access. Otherwise, uh, what we can do, Uh, what we can do is, like, we can access any other element. Instead of, uh, array index out of bound, we can access another element.

Discuss your experience with direct testing in real applications and how you ensure that typescript test TypeScript types do not interfere with test cases. So in unit, uh, unit testing in React application, I have used it, uh, in all of my applications. And, uh, what I we have done is, like, TDD, we followed. So test driven, uh, development, we have followed. So first, we, uh, first, we design the test cases, then we start writing the code. So and we also check the test coverage. We have used toner cube to test the test coverage, and, uh, I was using just and yet testing library to, uh, to create the unit test casing, uh, unit testing, uh, in React application. And, uh, it was like, uh, we render the component, and we give some props to them. And we have to cover all the lines inside present inside the components and and also we have to, uh, we also have to test the branches present inside the components. So types, uh, for the TypeScript types do not interfere with the test cases. What we do is, like, we also, uh, use the same types whatever we have created for the component. We use those same types for the test cases as well. And so this, uh, by using that, like, it will not interfere there. And the test case will also pass, and the component will also render properly. So, like, we use the same type whatever is present inside the component. So it will also matches through it. And for the mock object also, we use the same types and create the similar kind of objects, whatever we will be we will be getting in the component.

So pro principles of progressive enhancement, uh, have you applied the principles of progressive enhancements in one of your web development projects? Uh, yes. I have applied the progressive enhancement in one of, uh, in my web development projects. So I have applied, uh, the Caesar 3 HTML 5 principles like, um, the semantic text I text I have used to develop my application. I have used, uh, accessibility accessibility as well. Uh, security things also, I have used, uh, in my projects. Optimization techniques, I have used. I have used e s 6.

So, um, give an example of a time when unit give an example of a time when unit test you wrote for a react component found a critical issue. Okay. So what happened once, like, um, I dev I have developed a component long back, and another features comes up, which, uh, so, uh, for developing that feature, uh, the application was very big. So to develop that feature, one of the developer changes, uh, that component. Uh, so that component is reusable, which is which we I was using on multiple places. So the developer has like, another developer has written one task, uh, when, uh, one for one feature, he has updated the component. So he had not tested, uh, that component on each and every place because, uh, what happens, like, we are receiving the receiving the thing from CMS. So for one of the feature, the toggle is off. So the application was not breaking at that time, uh, in the local in dev environment, uh, in the local environment of the developer. So once you try to push the code, uh, once you try to push the code on the git, uh, we have, uh, build in build setup, we have that NPM run test command. So once, uh, he was trying to push the NPM run test command, uh, runs, and it ran and it failed one of my test cases. For that feature, I have written. So it failed, and then developer found that, okay, uh, he has broken the code, uh, broken the code. So that how we found a critical issue, like, which prevent which we have prevented writing the unit test cases.