JavaScript tips

 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...

 Yusuke Nakaya makes a firework animation by moving up together lots of small pieces and then sending them off in random directions. Here is the CSS, which uses a pre-processor:     @keyframes spark#{$i} {       0% {         transform: translateY(random(150) + 500px);       }       50% {         transform: translateY(0);       }       100% {         transform: rotateZ($deg) translateX(random(200) + 100px);       }     } The animation is at: ' codepen.io/YusukeNakaya/pen/zYvWGwb '. I have adapted this to use JavaScript to do the random bits rathen than a CSS pre-proessor. There are more tips at:  bbingo.xyz/techtips/

I like the CSS animations by Yusuke Nakaya at ' codepen.io/YusukeNakaya '. I have changed two to use JavasScript for the random bits rather than a CSS pre-processor. They are the 'Paper Birds' and 'Birds' at: ' codepen.io/Bert-Beckwith '. I use these as background animations for my game. I learn about CSS as I change them There are more tips at:  bbingo.xyz/techtips/