A Single Page Application (SPA) is a type of a web-based application 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.Continue reading “What is a Single Page 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:Continue reading “Create custom and accessible tooltip”
!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.Continue reading “How to fix defer offscreen images”
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.Continue reading “8 tips to speed up image loading”
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.Continue reading “What is digital accessibility?”
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.Continue reading “Definitive guide to indeterminate state of a checkbox”
<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.
- 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.
Everyone wants their site to be loaded fast. It’s not only good from the SEO perspective but also from the user experience perspective. However, achieving fast loading website it’s that easy quite often. Some use a one-click solution to
magically resolve all loading performance issues. Use that with caution as those won’t resolve all issues you may have.