JavaScript tips

 The download sites 'download.com' and 'softpedia.com' did not update their entries for my game after I released a new version. I filled in entries on their online forms for the new release. These two download sites had been best for my game in the past. Also, the 'appvisor.com' website closed in 2024. This website had the official PAD repository and validator. 'PAD' stood for 'Portable Application Description' and was an XML file with information about your program. However, I updated the entry for my game at 'libregamewiki.org' and the change was approved within a few days. The 'libregamewiki.org' website comes quite high up in Google's search rankings. But another change I made to my entry on 'libregamewiki' is still waiting to be approved. Also I created an entry for my game on 'github.com'. I was even able to add an update for an improvement. I pasted the new code into the online editor. I pressed '.&#

 I have been adapting an RSS icon made with CSS. The RSS icon came from:      ' codepen.io/dazulu/pen/nwppvr ' There are 4 circles layered on top of each other, using 'z-index' values. The circles are made with 'div's and 'border-radius: 50%'. The circles are of increasing size. The circles are centered by setting a 'left' and 'bottom' to minus half the div's width and height. The circles have 'positon:absolute' within the overall icon container's 'position:relative'. The second and fourth circles have a white background, whereas the first and third have the orange color. Only the top-right corner of the circles is shown by putting the 4 circles in a container 'div' and giving the 'div' an 'overflow: hidden'. Finally a small white circle is placed on top at the center of the above 4 circles. My RSS icon is at:      ' codepen.io/Bert-Beckwith/pen/YzobrmX ' This also shows the icon wit

 Chrome behaved strangely when I put a 'div' inside an anchor ('a') tag. Chrome put the 'div' after the anchor tag rather than inside it. I fixed this by changing the 'div' tags to 'span' tags and set the 'span' tags to 'display: inline-block'. However, it seems the HTML5 specification says that you can put an anchor tag around most tags. There are discussions about this on 'stackoverflow.com'. My 'div' contains other 'divs'. The anchor tag is inside some complex HTML - a simpler example worked fine. I am using an old version of Chrome: the last version on Windows7 from the start of 2024.  (My local library has not upgraded from Windows7 yet. The library has instead installed a more recent version of Firefox. Sadly some websites like 'Outlook' and 'Pinterest' do not completely work with the old version of Chrome) The 'divs' are for an RSS icon made in CSS from:     'codepen.io/da

 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/