JavaScript Clipboard API with fallbackArticle contains
  1. Using the Clipboard API
  2. Limitations
  3. JavaScript Clipboard API example
Preventing multiple HTTP requests to the same endpointArticle contains
  1. Why preventing multiple requests is important
  2. Preventing multiple requests with caching, TypeScript version
    1. Example use case for TypeScript
  3. Preventing multiple requests with caching, Angular version
    1. Example of how to include interceptor in Angular
    2. Execution flow
    3. Benefits
    4. Potential issues
How to get the actual (real) background color of an HTML elementArticle contains
  1. Why does the page have a transparent background color by default, even though browsers display a white background?
  2. Why getComputedStyle returns transparent value?
  3. Demonstrating the behavior
  4. How to get the visible, real background color
  5. Workable example that determines background color for HTML root element
  6. Use cases for finding real background color
  7. Best practices
The example code and the keyboard below it.

How to get the actual (real) background color of an HTML element

In many browsers, when no explicit background color is set for the <html>

or <body> elements, they inherit a transparent background.

However, browsers often render the default background as white for visual consistency, particularly in user interfaces where a clear background is expected. This can lead to confusion when using JavaScript to check computed styles.

Continue reading “How to get the actual (real) background color of an HTML element”
Everything you need to know about the alt attributeArticle contains
  1. What is the alt attribute?
  2. The alt attribute examples
  3. The alt attribute vs property
  4. Accessibility
  5. SEO (Search Engine Optimization) and the alt attribute
  6. Backup content when image fails to load
  7. Alt text during the image loading
  8. The alt for text-only browsers
  9. Decorative images
  10. The alt attribute generator
Creating a slug from a string in JavaScriptArticle contains
  1. Creating a slug from a string in JavaScript
  2. Code explanation
  3. Example usage
Get XPath from the element using JavaScriptArticle contains
  1. Custom function to get XPath
  2. Breakdown of how it works
  3. Additional tools
Use JavaScript to determine whether a string is a valid JSON stringArticle contains
  1. Check if provided string is a valid JSON string code
  2. Code explanation
The text "JavaScript. Is my string a valid JSON string?" on a desert.

Use JavaScript to determine whether a string is a valid JSON string

To determine whether a string is a valid JSON string in JavaScript, you can use the JSON.parse() method within a try...catch block. This approach leverages the fact that JSON.parse() throws a SyntaxError exception if the input string is not valid JSON. By catching this exception, you can accurately determine if the string represents valid JSON.

Continue reading “Use JavaScript to determine whether a string is a valid JSON string”
How to validate an email address in JavaScriptArticle contains
  1. checkValidity method from an input type="email"
  2. Validate an email address in JavaScript
  3. Avoiding a complex regular expression
  4. Final note
A hand pointing to dozens of envelopes symbolizing electronic email and the text "JavaScript validating email format"

How to validate an email address in JavaScript

To check if an email is valid using JavaScript, you can use the checkValidity() method from an <input type="email"/> field (when checking in the browser environment) and additionally check for at (@) symbol in the email address.

We are going to validate the email address format only using browser and custom validation, but not if the email actually exists.

The below code consists of two functions: isInputTypeSupported and isValidEmail. These functions are designed to validate input types and email addresses, leveraging the HTML5 form validation capabilities and custom logic for more comprehensive validation.

Continue reading “How to validate an email address in JavaScript”
Truncating text and making it accessibleArticle contains
  1. CSS techniques for truncation
    1. CSS for single-line text truncation
    2. CSS for multi-line text truncation
  2. JavaScript for truncation
    1. Truncating text by words
    2. Truncating by characters
    3. Truncating in the middle
  3. How do JavaScript solutions differ from CSS truncation techniques?
    1. Flexibility and dynamic content manipulation
    2. Performance considerations
    3. Use cases
  4. Interactive elements like Show more or Read more
  5. Accessibility considerations
  6. Alternatives to truncation
  7. Avoid information loss
Alternative text for CSS generated contentArticle contains
  1. Creating alternative description for CSS content property
  2. Implementation and usage
  3. Workable example