Introducing Page To Speech feature using Web Speech APIArticle contains
  1. Major challenges
  2. Benefits
  3. What's Web Speech API?
  4. Limitations and drawbacks
  5. Browser compatibility
  6. Demo
  7. Feedback
  8. Additional resources
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
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