Sass color.adjust function is now replacing darken or lighten functions with the new Sass module system. However, making changes manually to all files can be very time-consuming. Here is how to make it faster for all files in Visual Studio Code.
The browser viewport is the screen that actually shows the webpage. Determining its size might be handy when we want to provide some specific features for the viewport size. Here we want to utilize CSS media query and a little JavaScript to get the viewport size.
A Single Page Application (SPA) is a web application or website that works within a web browser and only loads one document. It does not require page refreshing while in use, and the majority of its content remains unchanged with only minor updates.
Primary goal is to enable faster transitions and make the web application or website feel more like a native application.
Every single HTTP request decreases loading performance. For a simple image, the attribute loading="lazy" can be used in order to defer the loading of off-screen images until the image appears on the screen. Lazy loading of images improves performance by reducing initial page load time, initial page weight, initial page rendering, and system resource usage.
Initial page load time – with lazy loading, the page is loaded faster because only images that are visible on the screen are loaded.
Initial page weight – because images that aren’t visible won’t be downloaded. Hence, the whole page weight will be smaller.
Initial page rendering – less images to render, the faster the whole page will be rendered for the user.
System resource usage – this refers to less resource usage like CPU, network, etc.
The HTMLElement.focus() method sets focus on the specified element. The focused element will receive a keyboard and similar events by default. However, sometimes you would like to prevent scrolling the document to bring the newly-focused element into view. This could be useful when you want to check if the element is capable to receive focus.