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
Resolving the script tag type attribute hash prepending issue with CloudflareArticle contains
  1. Solution for hash prepending issue with Cloudflare
  2. Final notes
"JavaScript" sentence and script HTML element

Resolving the script tag type attribute hash prepending issue with Cloudflare

If your script HTML tag has the type attribute prepended with a hash, like <script type="ea10e272b0a1989fb2f3aa4e-text/javascript">...</script> and you’re using Cloudflare services, then the root cause is the Cloudflare Rocket Loader, a feature of Cloudflare that optimizes the loading of JavaScript resources on your web pages.

Rocket Loader modifies the type attribute of script tags for website loading optimization by deferring the loading of JavaScript until after rendering. This modification can sometimes cause issues with HTML validation and Content Security Policy (CSP) headers.

Cloudflare Rocket Loader adds an argument “type” into the script tag and causing issues with the W3C validator due to the “subtype missing” error.

Continue reading “Resolving the script tag type attribute hash prepending issue with Cloudflare”
Get days between two dates in JavaScriptArticle contains
  1. JavaScript code for calculating days between two dates
  2. Code explanation
  3. Practical example with unit tests for calculating days between dates
Capitalize the first letter in JavaScriptArticle contains
  1. How to capitalize the first letter of a string in JavaScript?
  2. How are strings represented in JavaScript?
  3. Getting and capitalizing the first character of a string in JavaScript
    1. Key features
  4. Practical example
Man in a hood on the background of green letters (matrix). On the back there is an inscription: "JavaScript Capitalize First Letter"

Capitalize the first letter in JavaScript

How to capitalize the first letter of a string in JavaScript?

To capitalize the first character of a string in JavaScript while properly handling Unicode characters, you can use the String.prototype.charAt(), String.fromCodePoint() and String.prototype.substring() methods. This ensures that the first character is transformed to uppercase while the rest of the string remains unchanged, accommodating various Unicode character sets effectively, specifically surrogate pairs.

Surrogate pairs are crucial in Unicode because they allow the encoding of characters that fall outside the Basic Multilingual Plane (BMP), which includes code points above U+FFFF. In UTF-16 encoding, these characters are represented using two 16-bit code units: a high-surrogate and a low-surrogate. This mechanism is essential for supporting a wide range of characters, including many emojis and rare scripts, ensuring that applications can display and manipulate all Unicode characters effectively.

Without surrogate pairs, many characters would be inaccessible, limiting the representation of global languages and symbols in digital formats. For example, the character for the “grinning face with smiling eyes” emoji (😄) has a code point of U+1F604. In UTF-16, this is represented as the surrogate pair 0xD83D and 0xDE04.

Continue reading “Capitalize the first letter in JavaScript”
Best practices for optimizing SVG codeArticle contains
  1. Minify the code
  2. Compress the SVG files
    1. Enabling serving SVGZ files in Apache
    2. Enabling serving SVGZ files in Nginx
    3. Enabling serving SVGZ files in IIS
    4. Example page with SVG and SVGz
  3. Using Inkscape to create optimized SVGs directly
  4. Command-line tool using SVGO NPM package
Convert SVG to PNG, JPEG, or WebP image using JavaScript in the browserArticle contains
  1. Example code for converting SVG to PNG image
  2. Brief explanation of SVG to image conversion
  3. Considerations and limitations
  4. Managing memory during the conversion process
  5. Converting SVG to JPG, JPEG, or WebP format
  6. Alternative methods for SVG conversion
  7. Converting SVG to image online
SVG text and three arrows that point to PNG, JPEG, and JPG, representing three different formats that SVG can be converted to.

Convert SVG to PNG, JPEG, or WebP image using JavaScript in the browser

To convert SVG to PNG, JPG, or WebP WebP is a modern raster graphics file format created by Google to provide more powerful lossless and lossy compression for images on the web. It is designed to replace the JPEG, PNG, and GIF file formats, and it supports animation and alpha transparency. WebP images are less in size than popular formats such as PNG and JPEG, which might result in faster website load times., you can use the DOM API to create an object URL from the SVG code, load it into an image element, and then write that image to a Canvas. Finally, you can use the toDataURL() method to convert the Canvas to a base64 encoded PNG image.

Continue reading “Convert SVG to PNG, JPEG, or WebP image using JavaScript in the browser”
How to find the highest z-index on a page using JavaScriptArticle contains
  1. Practical code example for finding highest z-index
  2. Can this method be modified to work with iframes or shadow DOM?
    1. The example of how you might do this for an iframe
  3. Optimize function for performance
  4. Final words about z-index value