Ayush Goyal

Could you help me understand more about your my name is mobile introduction? Yeah. Okay. Sure. So my name is Ayush Noel, and I have completed my engineering professional engineering college, Najibar in 2020. And after that, I joined a company called Aluqua Sports Technologies, uh, as I am associate software engineer, uh, in March 2020, and I worked there for around 1 year. And after that, I joined the road and I worked as a software engineer. Uh, there I worked for around 8 to 9 months, and I switched from there due to some relocation issues. And after that, I joined RNM Technology as a full stack developer. And the since in, uh, in November 2021 and since then, I'm working here as a full stack developer. And I'm working on technologies like React, Next, Node, uh, MongoDB, Elasticsearch, and all those things.

When would you use a fragment in media? What problem is this? Okay. So React fragment, uh, is nothing but an empty, uh, empty fragment, uh, that we can use when we don't want to create an additional HTML element in the norm. So what React component does is it always return a single element. So if we return to Dave inside single component, we can wrap those 2 into a single react fragment that will be a sim empty fragment. Uh, empty tag. You can say an empty estimate tag that can be that can wrap those 2 div to make it a single, uh, element.

How do you approach error handling in asynchronous JavaScript code? Okay. So if we have any, uh, code running in our, uh, in our application, for example, we have a function, and we are making an API call which is asynchronous in nature. So what we will do is write, uh, wrap that into a try catch flow. Uh, and in try, we will make that API call and do whatever is in operation we are doing. Uh, API call or API catching. So if there is any exception or if there is any error that came, uh, to or came in that case, then we will catch that in the error block. And we also have a block finally. Try catching finally block there, uh, or we can use that block if we want to run some permissions irrespective of whether we caught the error or, uh, there was no error. Finally block will always.

How do flexbox and grid differ in c s and when it is appropriate to use one over another? Okay. So both Flexbox and Grid have, uh, are used in the CSS. And, uh, so if we, uh, in in my experience, uh, I try to use flex mostly, uh, over the grid. Uh, but, generally, I use grid also when I want to create some fixed portion of, uh, I should the separation of, uh, particular screen. For example, if I want to separate a screen into 4 part, then I'll use grid and display grid and then grid template columns to 4 actions. 1 f r, 1 f r, 1 f r, and 1 f r. And as compared to if I want to, um, if I have 2 dev blocks and I want to, uh, as they are their display is in blocks form. And if I want them to come to in a single line, then maybe I'll use display flex and align them center. So they'll come into a similar line. So they both have their significance, and they both can achieve the, say, UI, uh, whatever you want to achieve. We can achieve a same thing using Flex, and it's it depends on the developer what he what he is using and why.

Discround. How you would create a real time collaborative feature in an application using the 10 WebSocket. Okay. So in, uh, in React, we can use WebSockets. So what what WebSockets does, uh, it, uh, is is that it creates a a two way communication. So mostly in the in best device, uh, there is a client or 2 server connection open where we say that we want some data to client. Client said that we want some data to server server. That's the data to the client and connection is good. But in that, so if it happens, if that connection stays open and both the list and the front end can send the data back end all the times, and back end can send the data to front end all the times. Okay. So in React, what we can do is create the events, uh, and reset to those events. We can create the event using Emmet, and we can add on those events using Emmet, and we can listen to those events. We can come on. But if there is any event happens there, then you can use that. So using these events, uh, event creation and event, uh, you can use that for the React or component React application, which is real time in nature.

So in TypeScript, uh, we can define the type of a particular minor type except for this certain fixed states. Obviously, we can always define the type by using colon and the type that we can go and define. Type you can define. Like, for example, we are saying bar. Tempo variable equals to not equals to colon, test type. Either is a string or number. You can use that.

Given the typescript snippet below, which part of solid principle does it potentially violate? Okay. So glass rectangle with height constructor. We have width c number, height and number. That's the height line. Then after that, we have class square. Click calculate area. Now we are creating a new square, and we are calculating the table. So it is following the single entity principle of solid as in single responsibility principle. So that is fine. I think the code I think the code looks good. I don't see any problem.

In this JavaScript code, why am I the usage of double equals to be problematic? What would you use instead of making more robust? Okay. So if, uh, double equal to does not do type checking. So if user input types 42 in number, if user input values 42 in number, then also it will be, uh, accepted. And if it is in string, that is also it will be accepted. So if we write triple equals to instead of double equals to, then it will also check its type. So if, uh, it is triple equals to and the user input value is 42 instinct, then only it will say it is it comes along the correct answer. I'll say it will screw in. Try again. Else block and print try again.

What are the potential pitfalls when migrating a large Javascript codebase to TypeScript and how would you mitigate them? Okay so if we have a large data codebase written in Javascript and if we want to convert them into TypeScript So the very first difference in the type checking, it does not happen in Javascript but it will happen in TypeScript So it depends, in also TypeScript it depends what level of type checking you want to achieve So you can achieve that from Javascript to TypeScript easily by declaring all the variables type to any So all the variable types will be any and that way you can convert the code from Javascript to TypeScript easily But that is not how you should do it because that is not the main purpose of TypeScript The main purpose is to properly define its types and defining the type of each particular variable will depend on what type of variables you have used in Javascript whether you have done type conversion, type propagation in Javascript then it will take a lot of time to properly identify the code, read the code, understand the code and see if you have declared a variable which is a is equal to 10 and then you are changing its type into making it a boolean or a string or whatever you want to do which should not happen in TypeScript so that all those things need to be in the mind then we can mitigate the code from Javascript to TypeScript

How you doing a performance issue in React application? Obviously, performance issue, uh, in React application can occur due to rerendering. And, uh, we can, uh, we can, uh, resolve that by using react but memo memoize the component or lazy import the components if it is because of rerendering. It. And if they are not happening in read any, then I'll try to debug it using the developer tool. I'll check whether I am making infinite API calls in that or time. If that is happening, that will also, uh, that can also have my, uh, main UI and cause a lot of performance issues. And, uh, there are, uh, if there is any, uh, condition that is running in a for loop, that can also impact the, uh, paid performance because it, uh, blocks the main thread. So that will slow slow down our, uh, paid application. Maybe hang it as well. So all these things, and we can you see and debug the code to see why the our page is not performing as it is expected.

How do you ensure accessibility is part of your UX design? Okay. So while developing the proper UI, uh, I like to consider 2 things, uh, in mind. 1st is the UI is, uh, properly responsive in, uh, most of the screens, like a laptop and web laptop and mobiles. Because now most of the most of the peoples now, you know, why to do to scroll all their websites. And second thing, I try to check all the events, uh, all the e because, uh, in events mostly, in today's object in the events, so mostly, the JavaScript will be ready. And that is the main reason why our page can hang. If you have used any, uh, event that is causing the the the calling or something like that, then that only the page can hang. So that is the main issue. Then that I will keep in mind that our, uh, events are properly aligned. Uh, we have properly included events. And if I have added any event listener, and I'll properly remove that in a PMF function as well.