Prince kesh

Hi. So let's start with my introduction. My name is Vince Gish. For my graduations, I have done a bachelor's degree in computer science. I passed out with it in the year 2020. After that, I have been working as a front-end developer. Initially, I was working on projects where I used various packages like React, Redux, TypeScript, JavaScript, and HTML, CSS. So my role there was to work on two different projects at one time. And apart from that, I also worked with Node.js for about two or three months because there was a requirement since there was a shortage of back-end developers, I worked there. So what we did there was I implemented the 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 on three projects. One is our NinoPal website, and one is our internal house product mock-up. And apart from that, there is a client project that we are also working on. I also worked on Next.js in Nepal. For SEO purposes, it is good to use Resendec, though. That's what I used. Thank you.

When optimizing for next, after what tactics are used? So, tactics you can use, used and say the other thing is called canonical. I cannot. So, in HTML, there's a way to include headway. You can just specify wherever when a link is shared, what shows on the UI. Like, what happens when you share in a WhatsApp, there's a head HTML that appears. So whenever a user searches that, 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, 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 add, like, Figma, how you make front-end development, and a description and a title of that key. If anyone uses the canonical 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, basically, developing responsive design using CSS, we use media query. Okay. And when in media query, you can also use a great layout and call SM and everything. What you can do, you can say there's a block. It is divided into 12 columns. So you can specify those columns, and you can mention key on that screen. Based on the screen size, 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 laptops or computers.

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 Figma design and inspect. It gives you its 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 something, it has to be made than directly copying it. So that's how it goes. Because in Figma, not everything that appears there is useful. Like, you can say that they are mostly in the design line height is given, but it is not the 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 requests, we use a useEffect. So, useEffect are of various types. When you pass an empty dependency array, what happens? When the component is loaded, that API will be called, and you can fetch the response and display it on the website. If you have a large dataset, like a table of 1,000 rows, you shouldn't take the whole response at once because it will delay the app. The time taken to fetch the response from the backend and the backend fetching from the database will be more. You can use pagination for that or also lazy loading or scrolling when the user reaches the end. We again hit the API. So, say, first, you get the key for the first page. Say there are 100 items, and you divide them into groups of 10. And when you request the first page, you get the first 10 items. When the user gets to the bottom or clicks the next page, the next API is hit, and you get items 10 to 20, and then you display them 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 less for the APIs.

And support usability and modularity. They are very reactive, reusable components. You can use HOCs. HOC is basically a bigger React component. It takes in a component and returns a new component. So, by the means of that key, say there are ways to get an example. Say there's a thing with a logic that's repeating on 3 to 4 pages. You should not apply or make the logic in every file three times. So, what you can do is define an HOC or a component where it utilizes that logic. Yeah. So, in simple words, I have a logic where whatever the data comes, I have to add 10 to it. Right? Just a small example. So, whenever you use that HOC, you pass the numbers, and it will add 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, then we don't want the user. It comes to fetching it. Okay. Asynchronous function gets user response. Fetch. Wait. I use the issue is there should not be two times await. The await in the first line is itself 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 await before the response dot JSON, it will work pretty well.

Type C function, please. Explain what might happen if you don't, properly validate the input, put the data. It's a user ID name. K. I understood. So, in type, you had defined the type. That ID should always be a number and name should always be a string. Say, that can be an issue, if a user had entered his name as, something else, but it is showing, a number. So that will create an issue for the back end, the name saved is, in a string. That can happen when you are processing a probe. Say, I am passing the two probes, and by mistake, I swap their positions. So what will happen? I pass key, say save user data as a function. I pass the data. I pass ID, 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, it should be a number and should be a string. In longer scenarios, it can help. Like, there's an array. So you'd, typically, define that key. It will be always an array type. So if, user, by mistake, passes string and tries to run an 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 third-party services? Third-party services. When you integrate third-party services, that can be very challenging. Say, I have created a third-party service, and once it's down, it might create an issue. So, supposing it's not down, with various third-party services ensuring scalability. You should always use third-party services before first checking whether it's not a very bad service. I'm not also.

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

And what I recommend is that the font sizes and color should be consistent. My main customer, my main point is that the key should not be on one page. You should have one set of font sizes. If you're having headings, they should be of a bigger size than your paragraphs. Right? Say, "I'm a heading." It should be, say, 14 pixels, and the paragraph should be around 10 or 12. They shouldn't be the same phone size because that will make an issue. That won't look good. And for the design and color, the color should not be very blunt on the eyes, making it not easy to read. We follow the same principle in blogs, I would say. In blogs, when you have a blog website, the text should have padding on the left and right side, and it should be centered. So it shouldn't be that the user has to read from left to right, left to right. I also have to move. It should be that the user can look at one point and read the whole line without any issue. That's how user design is followed. Thanks for the opportunity. I would love to work. Thank you.