Vijayalaxmee Angadi

Yeah. Myself Vijay Lakshmi. I work as a front end developer, uh, and I had experience of 5.6 years. So, well, I have experience of 6 years, uh, in content development. I worked on various industry projects like, ecommerce and augmented reality, metaverse based projects, and the sports entertainment industry, development driven projects, and augmented reality based projects. And my tech stack expertise come to, like, HTML, CSS, JavaScript, jQuery, VR. JS, and CSS, SaaS plus API integrations, uh, and, uh, manual testing, all these things. I'm also currently pursuing my MBA in, uh, information technology and management. And, And yeah. And I work mostly my responsibilities majorly comes in, like, uh, converting the designs into responsive pages and manual testing, API integrations, data visualization, and, uh, data manipulation, manual, uh, I mean, uh, user, uh, testing as well. Yeah. That's about in short about my background.

Steps would you take to optimize the web pages assets for faster loading times while maintaining a response to design? Uh, okay. So steps in web page, what I will take is one thing is image optimization. That's, uh, one, Technically, I can, uh, see, and either I can compress and, uh, I can compress the image and uses, uh, between the quality and size? And that's why I will implement the lazy loading. And, Lazy loading, uh, helps in, uh, not differ their loading until they are about to enter the use of its report. So and, also, I'll do the implementation that does, like, HTML CSS task with files to reduce the file sizes, and I can use the tools Like, uh, ugly file JS or some minifier, uh, for minifying the files? And one is other thing is completion. Confirmation is basically, like, uh, whenever the server side complete completion, I can do for a text based assets or any Uh, to reduce the amount of data which is sent to the network. And also font optimization, I can do Because, uh, the number of font variations and rates, uh, will reduce the number of HTTP requests and See the usage and that that's basically, like, uh, content delivery networks, uh, to distribute my my assets, Uh, close it to the users and so reducing the HTTP request and also responsive design? Yeah.

Specific scenario where I would use a CSS flex box or CSS grids highlighting the mobile responsiveness. Okay. That would be, uh, so certainly, like, Uh, in the desk in the scenario of response to, uh, navigation, uh, desktop view, what I would use is I would use the CS grid to create a structure layout, uh, for the navigation bar. And the flex box, uh, I can be used, uh, to align the I can split in the grid cell and so that flexibility and but easy vertical rendering center, uh, centering them. And that's it. For the mobile view, what I can do is I will use media queries to switch to mobile, uh, friendly layout. And, uh, When the screen will will be below certain, uh, threshold, I can use the media queries, and I can also convert the grid layout to a single column using the flex box and, uh, for stacking icons, uh, vertically. Yeah. This will this this is the

Okay. So, uh, there is a syntax that in the given code, I would See, uh, in the provided code that there is a incorrect placement of the closing code. Uh, that is in the data element by ID method. The correct code should be, like Okay. So one thing is we can do current correcting the syntax. And, also, When encountering the issues, I can do the debugging approach. Uh, check whether the browser can select it or is there any uncaught syntax So that was there. Uh, any similar message and, uh, inspect the line mentioned in the error message, and It's in that's in the. And, Yeah. That's

Managers see a specificity conflicts in our labs project where multiple developers are contributing styles. Okay. So what can be done is, uh, I'll follow the guidelines where, uh, for the document to be, like, where the CSS document guidelines for my project and, uh, naming conventions and, uh, what are the selected procedures and the class naming patterns. And I'll communicate, uh, these guidelines clearly to all the developers which are who are contributing to the particular project. And, also, using the class and ID naming convention to minimize the conflicts that I can execute, uh, systematic naming. And, uh, I will avoid overusing the ID selector. Uh, and since as they have a high specificity, instead instead, I will favor the class selectors for filing the elements, and, uh, and what I would do is that, uh, I I would do a CSS may a reset or, uh, normalize CSS to establish some consistent bit length across the different browsers. Uh, Yeah. And I'll use the specify specificity mod modifiers as well and also all organize the size according, uh, with the component based architecture. So that it'll be easy to edit anywhere that is required. Using the k plus s r and post process r, uh, to modelize and organize the

Strategies would you deploy? Apply to ensure that your adjusted call works across devices. Okay. Well, uh, studies, one thing I would do is that, uh, I will check uh, the responsive design. Uh, to implement the responsive design, uh, we'll be using media queries on the layouts and styles and screen sizes for all the tablets, laptops, and desktops, smartphones, all these things. And I'll do the code processing for all the different browsers, the Chrome, Firefox, Safari, and Edge, etcetera. And, uh, One thing is, uh, user emulators that basically, like, browser, uh, developers to simulate the different, uh, devices. So with the different screen resolution for development. And, also, uh, user isn't user isn't snicking, I would say. That basically detects the device, uh, specific devices or devices to apply it a little bit of styles and scripts. And flexible and that and that, uh, implementations within the libraries like and all.

Okay. So one thing is, uh, get element by ID. Okay. So that is, uh, null argument in function call is present. So so when null null argument will be present, it is, uh, it is likely to be a typo. Uh, the current argument should be, uh, provided, uh, to the code. And, also, there is, uh, like, Quotation is not just adding the code, uh, for the pixels, And, no, that's not there. The corrected code, uh, and I propose a solution that is causing issues that, Uh, we can use the correct method names and variable names. And, uh, also, the argument pass to the function should be valid ID, of the element I want to update. Uh, the missing single quote. So we should make I will make sure that to, uh, replace the I did with the actual ID for of the HTML element. Uh, if I have if I want to manipulate, Additionally, I have to double check whether the, uh, any other type of

Okay. So the given CSS is basically to attempt, uh, in creating the Once we design by existing the container and that we put, uh, on the on the basis of. So issues, What could go wrong is that, uh, the media query breakdown, the media query since it's Bluetooth, it is a 960 pixel Next step, which means that the styles, uh, inside the media query will apply when the input is 960 pixels or narrow narrowed to that. So so the base containing width is also set to 960 pixel, Creating a potential conflict. So, uh, the repetition of container styles inside and outside the media query might lead to our maintenance issues, and, uh, it's unnecessary in this case to use like this. So what we can do is that, uh, we can do the media query adjustment But I can adjust the media to the breakpoint to, uh, value to slightly smaller than the base continue with. Uh, that ensures that Maybe the responses styles that are applied when the viewport is less than 960 pixel will prevent that, uh, conflict. And, In to the container styles outside of the media query, what I'll do is I'll reduce the, and some I'll include the maintenance of that one. And I'll do your mobile first approach, um, that is That will define my, uh, styles for the smaller screens, and then is a method for this to enhance the size for the larger screens. Uh

How would I manage state in complex JavaScript application without using the external libraries to activate Redux? Okay. Um, one thing is we what I can do is I use a state object centralized state object where, um, I If where the application states, um, that I can do. And, Uh, what I do is, uh, I can use the object properties to represent the, uh, the different parts of those, parts of the state? Also, I'll do the state initialization. I'll initialize the state object and with the default values? And, uh, I'll create the functions for that particular state, initialized state. And, uh, I'll write some mutation function for the states as well. And I will use a context API, uh, in the React application, uh, to provide the state to components without the crop drilling? And, also, the customized hooks can be, uh, used for this to encapsulate the, uh, state logic or the reduce across the components that can be used? And, Otherwise, the middle way functions or, Yeah. Those things I will do to manage the state.

How would I approach creating the JavaScript function that dynamically updates the Dubai without reloading the page? Okay. So My approach would be, uh, like, to update the to update dynamically the part of that particular web page in JavaScript is that I use a a text, uh, or the fetch API, uh, to make a asynchronous requests to a server and update the content dynamically? So and, Yeah. I mean, within the div, what I would do is using the ID, uh, of where the dynamic loaded content will be placed? And function? And I'll do the function to make a request to the server endpoint. And if request is successful, it will update the content, uh, to the dynamic to the pitch, uh, with the received data?

Explain how you would set up for CSS preprocessor like SAS in a new project and what benefits it could offer over a regular CSS. Okay. So Compared to CSS and, uh, SaaS, uh, there are so many, uh, benefits, I would say. There are so many options, uh, presented the SaaS. So one thing is we can we need to ins we have to install the the directory, uh, to the directory, the SASS, uh, one using NPM. And we can able to maintain the code structure for the styles and all. And when we write the SAS, we have to compile that every SAS file. And benefits is, like, We can use use the variables to store and use those values through the, uh, the style page, and we can use a nested rule, uh, in the SaaS where within 1, uh, within 1 another, uh, class is second to be the right and repeat repeat the, uh, the styles and the I can use, uh, the mixings, which are basically something similar to functions. Uh, I can do them, and I can able to import, uh, uh, those files as well. And, I can able to perform the calculations and generate the dynamic styles as well. And Again, I need to inherit some properties from one selected to another, and the compiled to be there for CSS 3 process are generated generated, uh, in the CSS to ensuring the compatibility with all the browsers. And it's easy to maintain

If tasked with improving an existing website's load time, which performance metrics would you focus on and what risk might you use? Okay. So one thing is metrics, uh, that is for a page load time. I will use the Google page, uh, speed insights or lighthouse. For your For the 1st content, uh, paint, what I would do is that, uh, the 1st content element to be painted painted on the screen, Uh, I can use the WebRockets or Google PageSpeed insights. I'm trying to interact to To interact the pages to be responsive to become fully responsive, I would use the lighthouses and web page test as well. And, uh, the main thread is blocked and cannot be responded to the user input While, uh, the cumulative time, um, that's when also I will lose that, uh, lighthouse and web page testing as well. And number of requests on file sizes over page speed highlight insights and the developer tools I would use, uh, and as a server response time, That's one thing. I'm caching caching as well. The efficiency of caching properly for to reduce, uh, the redundant downloads, mobile friendly performance and error rates.