Shubham soni

Hi. My name is Shivam Soni. I'm currently working as a front end engineer in Amazon, and my technical expertise are HTML, CSS, JavaScript, React. And, I'm having around 4.5 years of experience. Uh, I belongs to Rajasthan. And, Yeah. That's a very short introduction. I'll

So How I can okay. So for the initial loading, I guess, uh, we can start with the web portal. Uh, we can use the lighthouse. That is a a kind of we can say it's a performance tool from which the 1st load time or the cumulative layout shift are the like, there are so many matrices available to which we can we can test our page load application. Second thing is To increase the loading time, we can use the CDN also just to get the earlier assets. 3rd thing, the image compression, we can compress our images to the web p, uh, so that a completion of image will also be there. 4, just to add more loading, just to faster the loading time, we can have a basically Lazy lazy loading component. And, uh, so that our bundle size would be less, and we can fetch it faster. And, uh, for the responsiveness, we can use the tailwind, which is, like, currently popular framework. Apart from that, page assets would be yeah. We can inline our CSS. So so because CSS is the render blocking element, so we can inline the CSS for the app component so that the render bucket could be prevented. Yeah. These are the major step that we can take for the optimization of the web page.

So ensure that your job different cross. So just to ensure cross browser compatibility in JavaScript. So ensuring the cross browser compatibility. Make sure your JavaScript code works across. So first thing is, like, uh, it's always better to choose a framework which is, like, more compatible. The for MDN document sees everything about it. Second thing is, I guess, uh, we should consider our polyfill. Polyfill, uh, is the major thing which should work across. Otherwise, we have to write our own polyfill. Just like for an example, includes won't work in the, uh, IE, which is deprecated now. So more thing about this is, like, avoid excessive use of the markup, like, uh, list uses of the list tool just to create the menus instead of the, uh, p elements just like using the correct HTML, uh, 5 syntax, which which can help us. Or what more providing the fallbacks could be a major, uh, thing that we can do. And, uh, I guess, these are the major things that we can do

Would you apply to create the form layout as both accessible and responsible on the mobile devices using HTMLs and CSS? So to increase the accessibility, I guess, uh, we should 1st, use the HTML five semantic elements because they are used for the web accessibility as well as for the SEO part. That's the first thing. Second thing, to increase the accessibility, we can increase the include the area, ARIA area, which is, uh, so just to while increasing the screen reader, those tags are Really helpful for a for a disabled people to get more accessibility. We can also include the, Uh, speech text, which is also helpful in achieving this accessibility. In the terms of responsiveness, We can use the Flexbox, which is majorly used. Second thing is to add the media query wherever possible. And We should have a breakpoint on each screen size just to increase the responsiveness of the, uh, of the web as well as mobile application.

So how would you approach creating a JavaScript function that dynamically updates the UI without reloading the page? So just to reload the page, uh, initially, AJAX requests were there. But now the single page application has already came. So without reloading the page, we we can handle that? Again, uh, second thing, like, prevent default is, uh, again, the like, inside the function, if we use the prevent default, it won't rerender the whole page. Instead of that, it will just prevent the rerendering of the whole page, and will, uh, just update the UI dynamically? That's how, like, we can add the dynamic updates on the UI

When building a high traffic website, how would you optimize the CSS delivery to improve the critical path performance? So as, uh, CSS is the major render blocking, uh, while building our dorms, like so, basically, the steps of, uh, building, to reaching the complete pixel perfect page is first creating the DOM. 2nd is to creating the CSOMs. So DOM updates when, um, so DOM is created when chunks of HTML elements are committed. It it creates the DOM. But CSS is when CSUNS is created, c s CSS DOM is created, so it has to wait for complete CSS to arrive, then it uh, then it completely create the CSOMs, then the DOM and CSOM, uh, merge to create the complete layout, then the paint or reflow is happening. Uh, coming to the optimization of the CSS delivery, first, uh, we should have a lesser bundle size. That's the first thing. Uh, second thing to increase the CSS delivery is writing some of the inline code, like, just to, uh, uh, block the initial build wherever possible. 3rd thing is we can have a preload, prefetch, and prefetch, uh, preload or prefetch the highly critical images or the CSS, uh, apart from that, yeah, these are the major things from where we can optimize the seats. Apart from this, yeah, we can add 1 more thing that is, uh, CDN. We can have all these uh, into this CDN, which we can fetch easily. And, uh, minification of the CSS file will also help in reducing the bundle size of the CSS so it can go over the network

In the following HTML service segments, there is a common error that could affect our user experience. Can you spot and explain the mistake and provide the debugging approach for this? So, I HTML submit submit button. Add event listener. Click. So when HTML will be there? So first thing is, like, we can so during this function, the, I guess, page it will be reloaded initially because we are not using the e dot prevent default for this. And once we can actually remove the alert part in you let me think it one more time. Like, I so it's it's really not a good practice to use the alert, uh, inside the function because alert can be it's much more faster than the DOM. It instantly it it instantly when you whenever you click on that function, it will completely block the UI. I so we should avoid writing the function that apart from this, I feel like submit button is not defined in the HTML part. I so we should give an ID for the submit button? And

Can you identify any potential issue with the following CSS snippet related to the response in your design? Provide explanation what could be wrong enough for some advisers on how to improve this. About potential issue with the CSS snippet related to the responsiveness design. About about So the thing here I identified is, about so if the width is 960 pixel, then it will be aligned to the center part. And about if it is lesser than 960px then width would be on the 100%. So it will definitely, about no. I'm not much aware about this

What approach would you take to build a single page application with the JAVA JavaScript, ensuring both smoother experience on the mobile? Single page application with vanilla JavaScript to ensuring both smoother and smoother experience. So just to include What approaches I would take first to organize the code? So second thing is reactive reacting the changes with the whatever Changes we are doing, like, whatever based on the interaction with the UI. We can also include the support of data binding. Uh, we can have a proper handling the navigation routing. That that could also be done. And, uh, we can also include the keyboard support, controls, and clicks on the tabs. So

Can you suggest a way to dynamically adjust a boot strap grid layout based on the data fetched from the API? I'm not aware about this.

How would you set up a CSS preprocessor like SAS in a new project? What benefit it? Uh, how to set up a SASS in a new project, uh, what benefit it's provide. So So SaaS is basically a wrapper build on the top of the CSS only. And, uh, it's basically ultimately code is combined to the uh, CSS only. So major benefits of the SaaS is, like, we can declare the variable inside that. We can have a nesting CSS one inside other. We can also use the, uh, import and include. So, like, just writing 1 CSS code that can be used in uh, other things also. Apart from this, uh, we can extend this as We can also have a we can also provide the modules inside this. We can have a mixing with the SAS. Uh, like mixing. You can just write a code, and then you can mix that. You can use add the red include to add it to anywhere wherever you want. Within that, you can use it as a function also. You can pass the dynamic parameters there also. And, uh, it also supports the inheritance. Uh, and, uh, it has some operators, like, uh, you can use uh, we can dynamically define the sizes of that.

Show the backward compatibility with the new JavaScript while working with the front end legacy system. So the best way to handle the backward compare compatibility is just to use the feature flag. So that is one of the way by which we can do that. So the feature flag is the way by which we can just have the new while while having the new feature launch, we can just keep that feature for a particular audience. If that does not ensure that or of particular reason, if that does not if that if that does not guarantee that, like, uh, this will be going ahead or this is not going to sustain, we can just add a feature flag to turn off that particular, flag and just include the older version of that so that in the in this way, we can have a backward compatibility. So feature flag is one of the ways. Second thing, always ensuring, like, keeping the older code in a very reusable fashion so that you can add more, keeping the backward compact. So I guess feature flag is the one of the best way by which we can uh