JavaScript tips

 My JavaScript game is too big for 'freehostingeu.com'. There seems to be a limit of 2 megabytes. I use 'freehostingeu.com' as a sort of backup website. My game is about 4 megabytes. I am manually 'minimising' it at the moment with shell and Perl scripts in addition to 'UglifyJS'.  But I will not be able to get it to be under 2 megabtyes. I did split the JavaScript in my game into two for the 'InfinityFree' hosting site a year or two ago. This site has a lower limit of 1 megabtyes. I should have developed my game as lots of separate JavaScript and CSS files.  But having one 'monolithic' file made things a lot easier to start with    There are more tips at:  bbingo.xyz/techtips/

 I cannot see the source of my game in Chrome with the 'View source' option on the old Windows7 computers in my library. My game is about 12 megabytes. To get round this, I note down the line number of the error in Chrome and then look at the source in Firefox which loads in my big game successfully. There probably is a better way to view a file with line numbers in Windows. The line numbers in Word wrap around to line '1' after line '65534'. There are more tips at:  bbingo.xyz/techtips/

 I remove excess whitespace in strings used to create dynamic CSS. My minimiser, 'UglifyJS', does not remove the excess whitespace. It would be quite difficult.  So, I edit the source file by hand in 'vi' saying:     s:'[ ][ ]*:' :g This turns:     ' @keyframes ppbWingRight' + birdNumber + ' { ' +     '   0% { ' +     '     transform: rotate3d(0,1,0,' + wingAngle + 'deg); ' +     '   } ' +     '   100% { ' +     '     transform: rotate3d(0,1,0,-' + wingAngle + 'deg); ' +     '   } ' +     ' } ' + into:            ' @keyframes ppbWingRight' + birdNumber + ' { ' +     ' 0% { ' +     ' transform: rotate3d(0,1,0,' + wingAngle + 'deg); ' +     ' } ' +     ' 100% { ' +     ' transform: rotate3d(0,1,0,-' + wingAngle + 'deg); ' +     ' } '...

 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/