As Node.js continues to get more and more native, built-in features, developers are constantly looking for ways to simplify their code and reduce dependencies on external packages. One such opportunity arises when replacing (or much better alternative to) the glob-all package with the built-in fs.promises.glob function, available in Node.js from version 22.0.0 behind the flag --experimental-glob and became un-flagged in v22.2.0.
XPath, or XML Path Language, is a query language designed to navigate through elements and attributes in an XML document. The document.evaluate() method in JavaScript allows developers to execute XPath expressions against an XML document, returning nodes or values based on the specified query. While this functionality is powerful, it also poses risks of injection attacks if user input is not properly handled.
To wait for an HTML element to exist in the DOM using JavaScript, we’ll use requestAnimationFrame to periodically check for the element’s existence, and combine it with Promise to achieve this without blocking the main thread.
This approach is performance-friendly because requestAnimationFrame allows the browser to optimize rendering and ensures that the checks occur at the right time in the rendering cycle.
To escape HTML string tags in JavaScript, you need to replace certain special characters with their corresponding HTML entities. This is crucial for preventing issues like Cross-Site Scripting (XSS) attacks and ensuring that user-generated content is displayed correctly without being interpreted as HTML.
Continue reading “Escape HTML string tags in JavaScript”
When embedding content using iframe (inline frame), users may experience delays while the iframe loads, especially if the content is from a slow server or a third-party site. During this period, users may perceive the application as unresponsive. To mitigate this issue, a Please wait
message or an animated loading indicator can be displayed, depending on the design requirements.
Let’s explore the method to implement Please wait
message for the iframe using TypeScript, a superset of JavaScript.
Determining whether an element is interactive or not can be crucial for various purposes, such as improving accessibility, enhancing user experience, testing purpose or debugging issues.
An interactive element is one that can receive focus, be clicked, be active, or be tabbable, allowing users to engage with it in some way. Let’s find out how to determine if an element is focusable or active using JavaScript.
Continue reading “Explore focusable, clickable, tabbable or active states”
When an HTML form control has the required attribute and is not visible in the viewport, when the submit action is triggered, then the browser will scroll to the element when it’s invalid and the tooltip should be displayed as expected.
The Clipboard API in JavaScript provides a modern way to interact with the system clipboard, allowing reading from and writing to it programmatically. However, not all browsers support this API, or the API may not be available, so it’s important to implement a fallback solution for better compatibility. Let’s explore how to use the Clipboard API with a fallback mechanism.
Continue reading “JavaScript Clipboard API with fallback”
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”
Creating a slug from a string in JavaScript can be useful for generating URLs or identifiers that are easy to read and share. A slug typically consists of lowercase letters, numbers, hyphens, or underscores, and it does not contain spaces or special characters.
Continue reading “Creating a slug from a string in JavaScript”