Definitive guide to indeterminate state of a checkboxArticle contains
  1. Understanding the indeterminate property
  2. Practical examples of indeterminate checkbox state usage
  3. What is a mixed state and how does it relate to the indeterminate state?
  4. Detecting the indeterminate state
  5. What is the value of the indeterminate state?
  6. How to change the indeterminate state
  7. Notes
  8. Browser support for the indeterminate state
  9. A practical example demonstrating the indeterminate state
  10. Resetting a checkbox to its initial state, including the indeterminate state
  11. Accessibility support for indeterminate state
    1. Indeterminate checkboxes (live code example)
    2. Results and considerations for accessibility
3 checkboxes with following states: unchecked, indeterminate, checked

Definitive guide to indeterminate state of a checkbox

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”
How to implement multiple selection with check boxes in an HTML without external librariesArticle contains
  1. Implementing multi-select dropdowns with checkboxes in HTML without external libraries
  2. Example code for multiple selection with checkboxes
    1. Basic example without javaScript
    2. Advanced example with JavaScript for ESC key action
    3. Allowing the user to select only one checkbox
    4. Keep open only one details element at a time
  3. Final notes on implementing multiple selection with checkboxes
"I'm possible" word with jumping person above

How to implement multiple selection with check boxes in an HTML without external libraries

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.

Continue reading “How to implement multiple selection with check boxes in an HTML without external libraries”
Lazy loading CSS background images for better website loading performanceArticle contains
  1. Can you lazy load background images?
  2. Set the goals for lazy loading CSS background
  3. The solution
  4. Workable example
  5. Download package
  6. Discussions
  7. Improved lazy loading for images, video, and audio
  8. How to set lazy loading images on other libraries
Collection of pictures in frame

Lazy loading CSS background images for better website loading performance

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.
Continue reading “Lazy loading CSS background images for better website loading performance”
4 simple things you should do in optimising website loading performanceArticle contains
  1. Delay loading scripts for improved performance
    1. Reduce HTTP connections and download cost
    2. Consider download and execution costs
    3. Multiple scripts in one line can still result in multiple HTTP requests
    4. Be cautious when utilizing User Traffic Analytics
  2. Concatenation for efficient script delivery
  3. Brotli compression for faster page loading
  4. Boost website performance with HTTP/2
  5. Latest update: Optimize the use of multiple SVGs
Stopwatch

4 simple things you should do in optimising website loading performance

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.

Continue reading “4 simple things you should do in optimising website loading performance”
How to set the focus on element and prevent from scrollingArticle contains
  1. How can I prevent scrolling when setting focus on an element?
  2. HTML code
  3. JavaScript code
  4. How do I detect if a browser supports preventScroll option?
  5. Why is the "prevent scroll" feature not working in JavaScript?