Dhaval Vadher

Hi. Uh, and, uh, I'm working as a front end developer since last 14 years. And I have extensive knowledge about, uh, on front end technologies like, uh, JavaScript, HTML, CSS, React. And for the system design, I'm using that. I have a good knowledge in the material UI and the entry designs. Besides that, I am actively participating on the performance of the applications using the optimization's, uh, techniques like in the React. Uh, we can use 10 you know, we can say use memo or use callback functions or react memo with that and as well as that, uh, lazy loading images and code splitting plus, uh, React, uh, profiler, okay, which is available in the, uh, dev tool. K. With that, uh, we can optimize the performance of the applications. Plus, uh, even I'm actually participating in the, uh, getting the requirement gathering and have a collaboration with the back end developer to identify the data structure of the API so that we can it is useful for the front end developer while, um, binding the date data to the applications. That's it. Thank you.

What techniques do you apply? Okay. So, generally, uh, I'm using the class classes for styling the component. And, uh, somebody if there is a, uh, like also, I want the SSS based on the component I'm going to create. So suppose we have, uh, some features like, okay, in one page, we have, like, 10 to 15 components. I'm going to create 15 components. I'm going to create a a style, uh, create a SCSS file for all that components. And, uh, each component has a parent parent, and, uh, that is identified with the ID. And, uh, within that ID, we can, uh, uh, write a specific, uh, CSS or CSS with that. Even we can use the, uh, variables, uh, like, globally. Set the variables for styling the components, like, um, the phone color and branding of colors and buttons and all these components that we can uh, have the variables. We can write the variable value over there, uh, so that we can change, uh, later on easily. Okay.

It's not really showing your estimate. Okay. For those CGI clearance okay. We can write, uh, HTML file, like, a semantic HTML markup like okay. Uh, if we if, uh, there is a header, we can use the h one, h two, h three, h four tag. And for the every sections, we can use the sections tag so that whenever the screen is reading the page, it is going to be hierarchy, like, kind of child notes, uh, best structure. Like, okay. This is a one is a parent like body, and then later on that, uh, there is a section wise, there is a splitting with it within that. Okay? So one section has some content, and with that, there's one, there's 2, 10, uh, list. For that list, we can use a list and audio and video kind of text as well. So that it is better to reading. And, also, uh, for every image, we can have that alt tag for the images and, uh, for, uh, how can I say that? Okay. For SEO purpose, we can use the meta description as possible as with the voice or some text or description that we want. Thank you.

For a year, Kent TypeScript project. So, uh, Webpack is, uh, basically used for the term build up package. So we can do the, uh, course splitting, you know, that we can write in the Webpack. And for the for SCSS, we can use the loaders. Uh, that is used for that CSS preprocessor plus image optimizations and, uh, for, uh, TypeScript uh, a lot into the JavaScript. For that, we can use that, uh, um, webpack. That's what what I had a knowledge for the webpack is used for. Like, we can use the plug ins, and we can we can optimize some, uh, ugly file just for unrealistic unrelated code for cleanup of code like that. So that the the bundle size is going to be reduced.

Okay. For lazy learning components, uh, we can use that, uh, suspense method. And, uh, asynchronously, we can use that, uh, the component is import asynchronously. And that is the way of method to use the lazy loading of component and benefit of that component. Like, okay. So, uh, the component is getting load whenever it it is getting needed unless it is not going to be load, uh, on the first. Like, If there is no need of component of even if it is, uh, written all there, but the component is not needed, then the component is not getting loaded the first.

You must expect a large JavaScript base to task for you. What's that? Okay. So, uh, first of all, if I have to, um, detect a JavaScript code, so first of all, I'm going to get a thorough knowledge of the functionality of the applications. And then, uh, go to the JavaScript code or, uh, line by line and then to debug the code as well. And, uh, once I know, okay, this code is useful for, um, this code is used for this particular functionality and like that, uh, I'm going to spit out the code based on the feature or based on the components. And, uh, then we can convert that into the test file. Okay? Suppose, uh, we have that, uh, some data to be bind. Okay? And that call is written in the JavaScript. Okay? We can use that, uh, we have that data structure, like, okay. This, um, value for this, uh, component or this, uh, list should be, like, a string or, um, like, the numbers. That we I'm going to identify and then, uh, write a interface for that, uh, particular, uh, object. Like, okay. There is some suppose there is a user, then the name should be the string. The last name should be string, then, uh, it should be the number, uh, like way like that. Okay. Then I didn't phone. Then use that, uh, interface, uh, object, and, uh, apply to that particular object like okay. Uh, user object. Yeah. So it is going to be created, mhmm, uh, many files. We can say, like, okay. For particular sections, we can create one file, like, okay. So that it is going to be easier to handle later on. And, uh, we can, uh, I can going to, uh, uh, write a document for that as well.

Okay. Over here, uh, the error is, like, okay. Item of 3 is not going to be, uh, shown because there is only 3 items and the index of 3. Okay. That is not present in the, uh, area. Uh, here, it reduce it is just reducing the length of the, uh, item array items array. And we can, uh, use that using the items dot pop, uh, rather than just, uh, doing the items dot length. Yeah. So console dot log items or 3 is going to give an error because there is only 3 items and, uh, in, uh, item of 3 is not there.

So in this command, we this do something. Okay. That funk content is, uh, function is calling whenever the component is rendered. Okay? For that, we can use a use, uh, or React memo for this component so that it is going to check all the props or and there is no any props passing in this component as well. So it is going to check whether the component, uh, have any change in the values of state or, uh, props. Anything is changed or not. You can use that to use, uh, react to memo.

Sorry. I don't have answer for this.

No. I didn't.

Okay. For best practice, I'm, uh, usually, uh, go through that, uh, different blogs or whenever we I'm finding some, uh, finding some issues or, uh, in applications, I'm going to go through that, uh, in some of the blocks and find out the solution. And in meantime, I'm getting some other, uh, good practice to resolve that issues. So seeing that, uh, I can update myself, like, the latest, uh, or best way to fixing the bugs. And, also, I'm also participating in the front end community, uh, which is in the LinkedIn web. I can regularly, uh, check, like, what are the new trends coming and what, uh, discussions are going. I'm going to help some and then I'm going to help top people, Like, uh, if they have some issues, uh, even I can also ask for the help whenever I'm getting some issues. Plus, uh, there are in my last company, we have some every week, we have one session for discussion on the front end, um, within front end team. Okay? Where where everyone can share their experience. They if they have some good, uh, or, uh, something new they know. Like, okay, they want to share. We can discuss on that as well.