Dhaval Vadher

Hi, and I've been working as a front-end developer for the last 14 years. I have extensive knowledge about front-end technologies such as JavaScript, HTML, CSS, and React. For system design, I use those. I have a good knowledge of Material UI and entry designs. Besides that, I actively participate in optimizing application performance using techniques like React's use memo or use callback functions, or React memo, and also lazy loading images and code splitting, plus the React profiler, which is available in the dev tool. With that, we can optimize application performance. Plus, I participate in gathering requirements and collaborate with back-end developers to identify the data structure of the API so that it's useful for front-end developers while binding data to the applications. That's it. Thank you.

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

It's not really showing your estimate. Okay. For those CGI clearances, okay. We can write an HTML file, like, a semantic HTML markup, okay. If we have a header, we can use the h1, h2, h3, h4 tags. And for each section, we can use the section tag so that when the screen reads the page, it will have a hierarchy, like, a child-to-parent structure. This is a one-level body, and then later on, there's a section-wise splitting within that. One section has content, and within that, there are one, two, ten lists. For that list, we can use an ordered or unordered list, and also include audio and video text for better reading. Additionally, for every image, we can have an alt tag. For SEO purposes, we can use a meta description with the desired text or voiceover. Thank you.

For a year, Kent has been working on a TypeScript project. So, Webpack is basically used for building up packages. We can do course splitting, you know, that we can write in Webpack. And for SCSS, we can use loaders. That is used for CSS preprocessors, plus image optimizations and for taking TypeScript into JavaScript. For that, we can use Webpack. That's what I have knowledge about Webpack being used for. Like, we can use plugins, and we can optimize some ugly files just for unrelated code for cleanup of code like that. So, the bundle size is going to be reduced.

For lazy learning components, we can use the suspense method. And asynchronously, we can import the component asynchronously. That is the method to use the lazy loading of components and the benefits of that component. So, the component is loaded whenever it is needed unless it's not going to be loaded on the first load. Like, if there's no need for the component even if it's written already, but the component is not needed, then the component is not loaded at first.

You must expect a large JavaScript base to tackle for you. What's that? Okay. So, first of all, if I have to detect a JavaScript code, I'm going to get a thorough knowledge of the functionality of the applications. And then, I'll go through the JavaScript code line by line and debug the code as well. And once I know this code is useful for this particular functionality, I'm going to categorize the code based on the feature or components. And then we can convert that into a test file. Suppose we have some data to be bound. We can use that data structure, like this value for this component or this list should be a string or numbers. I'm going to identify and write an interface for that particular object. Like, if there is a user, the name should be a string, the last name should be a string, and then it should be a number, like that. Then I'd use that interface object and apply it to the user object. So it is going to be created many files. We can say for particular sections, we can create one file, so it's easier to handle later on. And I can write a document for that as well.

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

So in this command, we do something. Okay. The function content is, function is called whenever the component is rendered. Okay? For that, we can use a use, or React memo for this component so that it checks all the props or there are no props passing in this component as well. So it checks whether the component has any change in the values of state or props. Anything is changed or not. You can use React memo.

I don't have an answer for this either.

I wasn't able to do it.

For best practice, I'm usually go through different blogs or whenever I find some issues or in applications, I go through those blocks and find out the solution. In the meantime, I'm getting good practice resolving those issues. So, I can update myself on the latest or best way to fix bugs. I'm also participating in the front-end community on LinkedIn, where I can regularly check what new trends are coming and what discussions are happening. I help others, and I also ask for help when I need it. Plus, in my last company, we had weekly sessions for discussion with the front-end team, where everyone could share their experience. If they had something new they knew, they could share it, and we could discuss it.