Chrome DevTools XPath safety - escape the JavaScript literal not the XPathArticle contains
  1. When a simple XPath field becomes Remote Code Execution (RCE)
  2. Why document.evaluate itself is innocent
  3. The JavaScript meta-character trap
  4. Sanitizing XPath
  5. Integration recipes
  6. Solutions that fail security review
  7. Short security checklist
  8. Final words
A piece of code with the words "Security Alert" on it. Image by Elchinator from Pixabay.

Chrome DevTools XPath safety – escape the JavaScript literal not the XPath

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.

Continue reading “Chrome DevTools XPath safety – escape the JavaScript literal not the XPath”
Make CSS blur stay within container boundariesArticle contains
  1. The problem with blur overflow
  2. Understanding the issue
  3. Solution to keep blur within container boundaries
    1. Step 1 - why the halo appears
    2. Step 2 - why transform: scale() is the cheapest margin
    3. Step 3 - why overflow: clip instead of hidden
    4. Optional speed boost: add will-change: transform to the pseudo-element
  4. Workable example - putting it together
Very blurred beach. Image by StockSnap from Pixabay.

Make CSS blur stay within container boundaries

CSS filter: blur() is a fantastic tool for adding visual interest and depth to your web designs. It creates a soft, out-of-focus effect that can be used in various ways, from creating frosted glass backgrounds to subtle focus indicators. However, by default, the blur effect can sometimes overflow the boundaries of the element it’s applied to, leading to unexpected visual results. This article will guide you through techniques to keep that blur effect neatly contained within its intended space.

Continue reading “Make CSS blur stay within container boundaries”
Formatting currency in Angular using Intl.NumberFormatArticle contains
  1. Understanding Intl.NumberFormat
    1. Key features of Intl.NumberFormat
  2. Implementing currency formatting in Angular
    1. Usage example
  3. Final words
Semantic HTML explainedArticle contains
  1. What is semantic in HTML?
  2. What is the difference between semantic HTML and traditional HTML?
    1. Traditional HTML
    2. Semantic HTML
  3. Key differences
  4. What is an example of a semantic code?
  5. Benefits of semantic HTML
  6. What is semantic HTML in accessibility?
    1. Meaningful structure for assistive technologies
    2. Improved content understanding
    3. Enhanced keyboard navigation
    4. Compatibility with ARIA attributes
  7. Does semantic HTML improve SEO?
    1. Better content structure
    2. Enhanced crawling and indexing
    3. Rich snippets and featured results
    4. Keyword context
  8. Semantic HTML enhances maintainability and code readability
  9. Web components
  10. Challenges and traps
  11. Considerations and best practices
    1. Structured data (JSON-LD)
    2. Using ARIA and role attributes
  12. Frequently asked questions
    1. Why should I use semantic HTML?
    2. Why should I worry about semantic HTML when I use structured data (JSON-LD)?
  13. Summary
Four tiles and on each of them letters: H, T, M, L. Above sentence: semantic. Image by Miguel Á. Padriñán from Pixabay

Semantic HTML explained

Semantic HTML. The term itself might sound technical and niche, but its impact on the web is anything but. It’s the foundation upon which accessible, maintainable, and search engine-friendly website content is built. Let’s dive into the core principles of semantic HTML, exploring its benefits, common pitfalls, and ultimately, why it’s a crucial skill for any web developer.

Continue reading “Semantic HTML explained”
JavaScript and wait until DOM element existsArticle contains
  1. Introduction
  2. How to wait until a DOM element exists before executing a JavaScript function?
  3. Solution and implementation
  4. Workable example
A keyboard placed on a white surface, accompanied by text that includes "JAVASCRIPT Wait for the DOM element."

JavaScript and wait until DOM element exists

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.

Continue reading “JavaScript and wait until DOM element exists”
Escape HTML string tags in JavaScriptArticle contains
  1. Why escape HTML?
  2. What happens when HTML is not escaped?
  3. How does escaping HTML prevent XSS attacks?
  4. When to escape HTML?
  5. Best practices for secure HTML escaping
    1. Escape on output, not on input
    2. Use a trusted escaping mechanism
    3. Avoid manual replacement
    4. Test your escaping mechanism
    5. Consider Content Security Policy (CSP)
  6. How to escape an HTML string in JavaScript?
    1. Character replacement
    2. Tagged template literal function
  7. When to use the escapeHtml template literal function
  8. Comparison of the provided code examples
  9. In summary
Implement "Please wait" message while iframe is loading using JavaScriptArticle contains
  1. Easy steps to implement a Please Wait message
  2. The code usage example
  3. Understanding the code
  4. Workable example
  5. Tips for enhancements and important considerations
  6. Conclusion
Monitor, code on it and the open HTML tag iframe.

Implement “Please wait” message while iframe is loading using 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.

Continue reading “Implement “Please wait” message while iframe is loading using JavaScript”
Explore focusable, clickable, tabbable or active statesArticle contains
  1. What is the difference between an interactive element that can receive focus, be clicked, be active, or be tabbable?
  2. Determine if an element is clickable
  3. Determine if an element is focusable
    1. Determining if an element is a type of focusable element
    2. Determining if the element can receive focus right now
  4. Determine which element is active now
Laptop and cactus on the left side and coffee on the right side. Image by Megan Rexazin Conde from Pixabay.

Explore focusable, clickable, tabbable or active states

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”
Fixing missing tooltips for invalid required form controlsArticle contains
  1. Solution implementation
  2. Workable example
Insert custom table into existing content without affecting the current layoutArticle contains
  1. Inserting a custom table into existing content
  2. Example implementation
  3. Live example