Prince kesh

Hi. Uh, so let's start with my yeah. It started. So my name is Vince Gish. Uh, for my graduations, I have done b check-in computer science. I passed out it in year 2020. After that, I have been started working as a front end developer. Uh, initially, I was working at things where I used various packages like React, Redux, TypeScript, JavaScript, and HTML, CSS. So my role there was to work in 2 different projects at one time. And apart from that, I also worked in Node. Js there just for 2, 3 months, I would say, because there was a requirement since since there was a shortage of back end developer there, I worked there. Uh, so what we did there was, uh, I implemented, uh, AWS SDK in Node. Js. And after that, I worked at Zeep. There, we were working on web 3 and web tokens and all that stuff. And now I am working at NinoPal. I am working in 3 projects. One is our NinoPal website, and one is our inner house product mock up. And apart from that, there is a client project also we are working on, and that's it. Uh, I mean and, also, in in Nepal, I have also worked on Next. Js. For SEO purposes, it is, uh, good to use Resendec, though. That's what I have used. Thank you.

When optimizing your next, uh, after what tactics, uh, use? So tactics, you can use, uh, used and say, um, the other thing called can I re no? I cannot. So, uh, in the there's a in HTML, uh, you can include headway. You can just specify wherever when, uh, whenever a link is shared, what shows on the UI. Like, uh, what when you share in a WhatsApp, there's a head HTML what appears. So whenever go any user searches that, uh, the the Google surpasses the web inside the HTML and it looks for those head and all that, and then it works like that. So that's how it works. And, also, you can see there are some meta tags which are going, uh, they're basically, the most common such meta tags are used. Like, say, there's a tool used for making front end development. You can, uh, add, like, Figma, how you make a front end development, and a description and a title of that key. If anyone uses, uh, use force key, how to do this and all that, so you can add that since description. So it will help for SEO. Whenever you search like that, your response comes on the top.

This is responsive than the CSS. So for use, uh, basically, developing responsive design using CSS, we use, uh, media query. Okay. And when in media query, you can also use a a great layout and call SM and everything. Uh, what you can do, k, you can, uh, say there's a block. Uh, it is divided into 12 columns. So you can specify those columns, and you can mention key on that screen. Based on the screen, which screen is that, you can use that. Like, for SM, it will be treated like even the smaller screens. For MD, it will be for medium screens, and large will go with, uh, be be laptops or computer. So that's how.

What method would you apply to a Figma design? We apply it. To integrate Figma design, there's no specific method. What we do is say if a design is given in Figma, you just click on that, uh, Figma design and inspect. It gives you the it's, uh, keyboard is the width of that. And on the right side, you can inspect that element, and you can just copy and paste it. And and something, it had to be made than directly copying it. So that's how it goes. Uh, because, uh, in Figma, not everything, what appears there is useful. Like, you can say that they are mostly in the design line height is given, but it is not, uh, right way to choose a line height. So you can use padding and all that first.

What do you want to do? Large and request. Okay. So, basically, for dealing with API request, we use a useEffect. So useEffect are the various type. Uh, when you pass an empty dependency array, what happens? When Whenever the component is loaded, that API will be called, and you can fetch that response and display on the website. So if you say there's a large dataset, set, like, even say a table of 1,000 rows, so you won't, like it should be, uh, take the whole response at once because it will delay the app. The time taken to fetch the response from back end and back end fetches from the database will be more. You can use pagination for that or also lazy loading or scrolling whenever the user reach you at that. We again hit the API. So, say, first, uh, you get key for the first page. Uh, say there are 100 items, and you divide them by 10 10 10. And when you request first page, you you get the first 10 items. When the users, uh, get to the bottom or they click next page, the next API will be it, and you get the items 10 to 20, and then you display on the website. So that way, the website is faster and easier to use. And, also, it will load faster because the response time will be lesser for the APIs.

And support usability and modularity. Uh, they are very reactive, reusable components. You can, uh, use HOCs. HOC is basically, uh, bigger, uh, it is the react component. It takes in itself a component and and returns a new component. So by the mean of that key, uh, say there are, uh, how to get an example? Say there's a thing there's a logic which is repeating, uh, 3 to 4 pages. So you should not apply or, uh, make the logic in every file three times. So what you can do, you can just simply define an HOC or a component where it utilizes the that logic. Yeah. So, uh, my in a simple word, say, I have a logic where whatever the data comes, I have to add it by plus 10. Right? Just just a small example. So whenever you use that HUC, you pass the numbers, and it will plus 10 for that. You don't have to write that whole code. You just need to import it, and the UI will be loaded there. So that will be a reusable code.

And this one, and then we don't want the user. It comes to fetching it. Okay. Asynchronous function gets user response. Wait. Fetch. Wait. I use, uh, the issue is there should not be 2 times await. Uh, the await in the first line is it self is, uh, sufficient. You should not have that user data equals to await response dot JSON. So that's the issue in it. If you remove that, uh, await before the response dot JSON, so that will be put, and it will work pretty well.

Type c function, please. Explain what might if you don't, uh, properly validate the input, put the data. It's a user ID name. K. I understood. So we in type, you had defined the type. That ID should always be number and name should always be a string. Say, that can be an issue, say, if a user had entered his name as, uh, the, uh, something else, but it is showing, uh, number. So that will create an issue for the back end that the name saved is, uh, in a string. That can happen when you are processing a probe. Say, I am passing the 2 probes, and by mistake, I and, uh, strap them swap their positions. So what will happen? I pass key, uh, say save user data as a function. I pass the data. I pass ID, uh, as prince and name as 1. So what will happen? That will go to back end, and that will be saved as like that. So that's an issue. So for this, if you implemented this typing, so that will help you to know that, uh, it should be a number and should be a string. In longer scenarios, uh, it can help. Like, uh, there's an array. So you'd, uh, typically, uh, define that key. It will be always an array type. So if, uh, user, by by mistake, passes string and try to run a array method, That will cause an error. So the typing would help you before the code goes to server anywhere. So that will help you.

No. Yes, sir. How would you hack into a high traffic advantage with 3rd party services? 3rd party services. So when you integrate a third party services, that can be very challenging. Say, I have create a third party service, and once it's down, it might create an issue. So supposing that is not down, so with various third party service are ensuring scalability. So you should, uh, always use third party services, uh, before first, you should check whether it's a it's not a very, uh, bad service. I'm not also

Okay. So that has helped really well. Uh, say, there's a design now. Then he gives us a design, and that will be easier for us to, uh, implement the same in our app. If Figma wasn't there, the that design could have been said must have been developed on a paper. So that would not have reflect how the application should have looked in, uh, that way. So by the help of Figma, it helps to, uh, see how the website would look actually when you go into that before going to development. And that way, I can also plan out how how much time will it be taking for integrating it. And, also, it will help you. Uh, it gives, uh, exact dimensions you have to follow for each design, sir. I have 3 Figma files, 1 for mobile, 1 for tablet, and 1 for computer. I can definitely have a look on that and integrate in my app. So that's how it has, uh, has become major part in front end, I would say. Yeah.

And what do you recommend? I'm telling you, like, my main customer. Okay. So first of all, the font sizes and the color that you use should be consistent. That, uh, saying key, it should not be in one page. You are having, uh, one set of font size of only like, if you are if having your headings, uh, should be of a bigger size than your paragraph. Right? Say, I'm a heading. It should be, say, 14 pixels, and the paragraph should be around 10 or 12. It should not be like a both are of same, uh, phone size because that will, uh, make an issue. Not an issue. That won't look good. And for the design and color, color should not be very blunt on the eyes that it is, uh, not easy to read. And, also, we follow, say, in blogs, I would say. In blogs, when you blog website, uh, the the text which should have have padding on the left and right side, it should be in the middle. So it should not be like the user have to read from left to right left to right. I also have to move. It should be user looking at one point should be able to read the whole line without, uh, any issue. That's how, uh, basically, user design is followed. Thanks for the opportunity. Uh, I would love to work. Thank you.