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. Inkscape allows you to create optimized SVGs directly
    1. A step-by-step guide on how to save optimized SVG in Inkscape
    2. Additional options for optimization
  4. Command-line tool
Convert SVG to image in browser: PNG, JPEG, WebPArticle 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 image in browser: PNG, JPEG, WebP

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 image in browser: PNG, JPEG, WebP”
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
    2. The example of how you might do this for the shadowDOM
Add a badge to the browser tab favicon using JavaScriptArticle contains
  1. Understanding what a favicon is
  2. Use cases for the badge in the favicon
  3. Adding a badge to your browser tab favicon with JavaScript
  4. I can't change the favicon with JavaScript in Safari
  5. Taking it to the next level with an enhanced version
Example of browser tab with favicon and badge on it

Add a badge to the browser tab favicon using JavaScript

Adding a badge to the favicon using JavaScript can be done by updating the image specified by the <link /> element with a new icon image.

This method involves JavaScript and creating an in-memory canvas element, applying the favicon image, drawing the badge shape and text on top, and then updating the <link /> element’s href attribute with the final composite of the canvas element’s image data as a Base64 encoded string.

Continue reading “Add a badge to the browser tab favicon using JavaScript”
Check if a string is valid HTML using JavaScriptArticle contains
  1. Essential requirements
  2. How does the DOMParser interface parse HTML strings differently based on the mimeType argument?
  3. Practical example
  4. Code
  5. Example of validation error
  6. What a MIME type is and why it's used in the isStringValidHtml function?
  7. How does the DOMParser API handle invalid HTML syntax?
Solution to "Type 'FileList' must have a '[Symbol.iterator]()' method that returns an iterator"Article contains
  1. Solution to the error Type 'FileList' must have a '[Symbol.iterator]()' method that returns an iterator
  2. Notes
How to pause and resume event propagation in JavaScript?Article contains
  1. How to pause and resume events in JavaScript
  2. Support for asynchronous operations during event propagation pause
  3. Techniques for pausing and resuming event propagation
  4. Implementing event pausing and resuming in JavaScript
  5. Implementing event pausing and resuming on input type file
Reporting bug practicesArticle contains
  1. How do we define a bug?
  2. Submitting bugs
  3. When reporting a bug, what information should be included
  4. Choose a non-generic subject describing what and where is failing
  5. Use plain English, don't use words that only a few might understand
  6. Avoid acronyms
  7. Is the problem observed persistent or temporary?
  8. Actual behaviour
  9. Steps to reproduce
  10. Expected behaviour
  11. When possible, include logs, screenshots, video recordings, the app version, and any other supporting information
  12. Discussing root cause
  13. Geek and Poke fun
Create a self-signed SSL certificate and update Keychain Access on MacOSArticle contains
  1. How to create a self-signed certificate with the command line?
  2. Updating Nginx configuration
Sass darken and lighten functions replace with color.adjust in Visual Studio CodeArticle contains
  1. Automatically replacing Sass darken and lighten functions with color.adjust in All Files with Visual Studio Code
  2. Important notes on the replacement process