JavaScript tips

 I had to change a '#' to '%23' in an SVG in a 'data' URL of a 'background-image' property in CSS. I had to do this when changing RGB colors to hexadecimal when 'minimising' my page using a bit of Perl:     s/rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\)/sprintf("%s23%02x%02x%02x","%",$1,$2,$3)/eg; (My old version of Perl does not allow '%%' in the 'sprintf' in the substitution) All the other 'special' characters are encoded in the SVG in the 'data' URL.  The 'background-image' property looks like:     url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20168%... There are online tools to do the encoding. A PNG image would need full 'base64' encoding to go in a 'url' but an SVG does not. There are more tips at:  bbingo.xyz/techtips/

 I now put code examples inside a '<pre><code>' block I was using '&nbsp;' to indent lines. I set the '<code>' to 'display:block' so I can indent it with 'margin-left'. I start the example code immediately after the '<code>' tag to avoid an extra newline. I put everything in a 'div' with contenteditable="true" and  spellcheck="false" to allow 'copy and pasting' and to remove any red 'spell-check' wavy line. I give the 'div' 'max-width:100%' and 'overflow:auto' to stop scrollbars appearing in the browser's outer window There are more tips at: [bbingo.xyz/t](http://bbingo.xyz/t) There are more tips at:  bbingo.xyz/techtips/

 I changed some of my icons to have transparent backgrounds. These were the icons mentioned in the 'manifest' files of my Progressive Web Apps (PWA). I had given the icons white backgrounds to make them clearer as recommended by the PWA tutorial on Google's 'web.dev'. But these looked strange next to other icons on a Windows desktop. I made all my web pages PWA's by adding a 'manifest' file and starting a 'do-nothing' service worker. Chrome warns that loading these service workers slows things down. There are more tips at: bbingo.xyz/techtips/

 If I want to see changes I have made to my website in Chrome, then sometimes I have to click 'Disable cache' in the 'Network' tab of the 'Developer tools'. I noticed this when changing the icon images in 'Web App' 'manifest' files. This may also have happened when I changed script files that I load in by creating a 'script' tag and setting the 'src'. There are more tips at: [bbingo.xyz/t](http://bbingo.xyz/t) There are more tips at:  bbingo.xyz/techtips/

 I forgot which version of my JavaScript game I 'minimised' to produce the latest version. Luckily I had put an RCS 'identification marker' in an HTML comment at the start of the code. I had used the '$Revision$' marker. RCS is the free source control system that came with my old Linux system. There are more tips at:  bbingo.xyz/techtips/

 I speed up my JavaScript animations of the color of each letter in lines of text by:  using 'IntersectionObserver' to only run the animations when the text is visible coloring the elements for the letters in steps with delays in-between. (I also create and get references to these elements in steps) sometimes coloring whole lines rather than each letter  sometimes just coloring lines that are 'above the fold' only slowly changing the colors of the letters (about every 20 seconds) sometimes not having a 'transition' for the color changes delaying the start of the coloring until a few seconds after the page loads making the page load quicker by making the page small by putting the JavaScript in separate files. I create 'script' elements in JavaScript and set their 'src'. I use 'load' events to create dependencies between the scripts not coloring the text on mobiles and tablets. I look at the 'user agent string' and use 'media qu