Blog

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.

A tooltip is a widely used feature across the web. Hundreds of different approaches and implementations. The ARIA Authoring Practices Guide (APG) defines the tooltip in the following way:

The !important CSS rule is usually considered as bad practise since it overrides all other styles, regardless of their specificity. This might make it tough to manage your stylesheets and cause unexpected behavior on your website.

The browser loads all the files necessary for the page to render the site as you expect. This implies that all items, including those images that aren’t visible and haven’t got the lazy loading technique, will be requested.

How do you fix slow loading images on your website? What’s causing them? There are ways to optimize it, and let’s dive into it deeper.

Digital accessibility refers to providing an equivalent user experience for people with disabilities, including auditory, cognitive, neurological, physical, speech, and visual disabilities. That means also providing web-based information, digital content, applications, and resources that are available and used by everyone.

In HTML, the indeterminate state is a special state for form elements like checkboxes, radio buttons, and progress bars. This state is used to indicate a condition where the element doesn’t have a definite state (neither checked nor unchecked).

This can happen when the user interacts with the control in a way that doesn’t clearly indicate their intention, such as clicking on the control without pressing the button or moving the mouse over the control without selecting it. When a form control is in an indeterminate state, it can be difficult for the browser to determine the user’s intent and may result in the form not being submitted or the control not being properly initialized.

The <select> HTML element represents a control that provides a menu of options. When used with an attribute multiple then it allows selecting multiple options at once. However, the current implementation for multiple selections is not optimal on a desktop device so we need to find a different way. The goal would be to build multiple selections that are accessible to everyone.

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.

1. Initial page load time – with lazy loading, the page is loaded faster because only images that are visible on the screen are loaded.
2. Initial page weight – because images that aren’t visible won’t be downloaded. Hence, the whole page weight will be smaller.
3. Initial page rendering – less images to render, the faster the whole page will be rendered for the user.
4. System resource usage – this refers to less resource usage like CPU, network, etc.