Browser keyboard navigation in macOSArticle contains
  1. Why can't I use my keyboard to move between links on macOS?
  2. The solution for enabling navigation through all focusable interactive elements
  3. Safari browser settings
Best practices for writing good alt textArticle contains
  1. Good and bad alt text example
  2. The alt text and what to include - best practice
  3. Supplemental information
  4. Usage scenarios
  5. Example code
  6. Final words
Simple image gallery - accessible, responsive and with preloadingArticle contains
  1. Desired features
  2. Demo
  3. Tips for creating an accessible image gallery
Determining viewport size - small, medium and large - using CSSArticle contains
  1. CSS code for determining viewport size
  2. How to get the value of the viewport size
  3. Practical example of viewport size determination
Computer and mobile phone

Determining viewport size – small, medium and large – using CSS

To get the viewport size using CSS in JavaScript, you can utilize the getComputedStyle method to access the content of a pseudo-element, such as ::before, which can be defined in your CSS media queries. This allows you to dynamically determine the viewport size category (e.g., small, medium, large) based on the current screen width, enhancing responsive design capabilities.

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.

Continue reading “Determining viewport size – small, medium and large – using CSS”
What is a Single Page Application?Article contains
  1. What is the difference between Single Page Application and Multi Page Application?
  2. Benefits of Single Page Applications
  3. The Downsides of Single Page Applications
  4. SEO and crawling challenges
  5. Single page app example sites
Single Page Application

What is a Single Page Application?

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.

Continue reading “What is a Single Page Application?”
Create custom and accessible tooltipArticle contains
  1. Requirements for creating custom and accessible tooltips in HTML
  2. Notes
    1. Reduce motion using CSS prefers-reduced-motion
    2. How to make tooltips with only CSS?
  3. Experimental example
  4. How a screen reader works with our tooltip
  5. Frequently Asked Questions about tooltips
    1. Do screen readers read tooltips?
    2. How do users access a tooltip?
    3. Why is it called a tooltip?
    4. Should you put links in tooltips?
  6. Resources
Why using rule important in CSS is bad?Article contains
  1. What is !important CSS rule?
  2. Is using the CSS !important rule bad?
  3. What can be done instead of using !important?
  4. Exceptions in the !important flag usage
How to fix defer offscreen imagesArticle contains
  1. Fixing defer offscreen images: The ultimate solution
  2. Determining loaded and rendered images outside the viewport: An automatic approach
8 tips to speed up image loadingArticle contains
  1. Why optimize images?
  2. Strategies for making images load faster on websites
    1. Optimizing images file size
    2. Client-side image optimization techniques before uploading
    3. Implementing responsive images with srcset and sizes
    4. Deferring offscreen image loading with lazy loading technique
    5. Preloading images for faster loading times
    6. Boosting performance with priority hints and fetchpriority
    7. Leveraging browser caching
    8. Utilizing content delivery networks (CDNs)
  3. Additional hints for consideration
    1. Lazy loading with delay technique
    2. Use at least protocol HTTP/2
    3. Faster loading background images with image-set()
    4. Replacing inline SVG elements with image elements
    5. Speed up loading small images
      1. Limitations and pitfalls for base64 encoded images
  4. Summary
What is digital accessibility?Article contains
  1. Understanding and implementing accessibility: a practical guide
  2. Web Accessibility Initiative: ensuring inclusivity for all users
  3. Web Accessibility Success Criteria: enhancing user experience for people with disabilities
  4. WCAG Conformance levels: achieving optimal accessibility standards
  5. A Summary of digital accessibility best practices
  6. Essential minimum requirements for web accessibility
  7. Crafting an Accessibility Statement for your website
  8. Concluding remarks: essential considerations for digital accessibility
  9. Estimate how many people using your website might be disabled