JavaScript tips

 One of my 'view transitions' sometimes made the screen flash. I fixed this by setting 'animation-fill-mode' to 'both'. One of my normal CSS animation might also have had this problem. In general, I tend to put 'both' at the end of all my CSS 'animation' settings values. At first I thought the flashes were happening because I am changing 'display' values to hide and show part of the page. Adding and removing HTML elements seems to be better. Also I thought the flashes might be because I put 'view transition's around the start and end of a game, where a lot of changes are made to the page.  Maybe I should have kept the 'view transition' simpler. There is a good article about this at:   'piccalil.li/blog/     why-are-my-view-transitions-blinking/' The 'piccalil.li' site has some nice articles.

 I sometimes forget that JavaScript's 'replace' function returns the changed value and does not change the string itself. I sometimes miss out the first line in code like this:       targetElement.className =           targetElement.className.               replace(/[ ]*vtSettingsRadioButton/g, ''); Here I am removing a CSS class from an HTML element.

 I could not get Chrome's Lighthouse tool to see my small responsive images. Also, if I toggled the device to be a mobile then Chrome did not load in the smaller images meant for a mobile. But if I simply shrunk the size of Chrome's pane which shows the page, then Chrome did load the responsive images. I think the reason is that the mobile that Chrome simulates has an image density greater than 'one'. So Chrome wants a large image that 'shrinks' down into the image density. I want to show the smaller images because the images are graphs and if a larger image is shrunk by the browser then the text becomes too small to read. I have redrawn most of my images specifically for smaller image sizes.  It is easy to redraw images made with Gnuplot, but harder to redraw 3D graphs made with Excel. I tried using a 'picture' tag rather than an 'img' tag. This is like 'art direction' where a completely different image is shown for different screen size...

 I dread getting the error, "Unexpected token ')'" from Chrome, at the last line of JavaScript in my game. Usually, there is an unclosed brace somewhere in the code. The last line of my game is the end of a self executing anonymous function enclosing the whole game: '})()'. Recently, I used 'rcsdiff' to see all the recent changes. Among the changes I had deleted the closing brace just above a change I had made. I use the RCS version control system. Another time, I commented out or deleted code until the error disappeared.

 My 'view transitions' were causing my game to crash in Chrome. I got the 'Aw Shucks' message from Chrome. I thought maybe the 'view transitions' needed a lot of memory to prepare the new page state in the background. I had just added lots of SVG's to my game which may use up memory. But Chrome's tools showed the 'view transitions' only used a modest amount of memory compared to holding the total page size. It seems 'view transitions' are supported by most browsers now and are no longer experimental. I get the same 'Aw Shucks' message when I run my large game through the online JSHint on an old PC. I had a 'view-transition-name' on the 'root' element. I moved the name to smaller areas of the page that are actually displayed when the transition runs.  Chrome now crashed much less often. I removed the 'view transition' animation from the start of the game because the page changes a lot. This seemed to have st...

 I save space by setting a variable called '_' to 'this' at the start of a function that uses 'this' a lot. Saying 'background: aqua' is shorter than saying 'background-color: aqua'.

 I used 'setTimeout' to run a 20 second animation again two minutes after it first starts. But if I change tabs in Chrome after a a few seconds and come back to the original tab after a few minutes, then the first and second animations run together. It seems the hidden tab freezes but 'setTimeout' still counts down the seconds. 

 I could not set the 'class' of an SVG element using the 'className' property in JavaScript. For example:     var bfyvSVG =              document.createElementNS('http://www.w3.org/2000/svg', 'svg');     bfyvSVG.id = 'bfyvSVG';     bfyvSVG.className = 'bfyvSvg-defs'; One answer is to use 'setAttribute':     bfyvSVG.setAttribute("class","bfyvSvg-defs"); I found the answer on 'stackoverflow.com':     stackoverflow.com/questions/37943006/unable-to-change-class-name-of-svg-element For an SVG, 'className' means something a little different. I could have used 'className.baseVal'

 If a webpage is a 'Progressive Web App' (PWA) then someone may have an installed copy of the webpage that is old. I copied some images into a sub-directory to try to speed up the access time. But I cannot remove the original images from the top directory because an old PWA might use the original images. So it is just a little bit slower accessing the new copies of the images in the sub-directory. I tell Chrome the webpage is a PWA by registerng a 'do-nothing' service-worker.  Chrome warns about having a 'do-nothing' service-worker as it needs to be loaded which takes time. 

 I define my own global function 'alert' that writes the message using 'console.log'.  I still use 'alerts' for debugging. I can leave the alerts in when going live and just override the 'alert' function. I also still debug by adding colored backgrounds to HTML elements. The debugger on my old Konqueror browser hangs the browser. The browser is 15 years old and I compiled it myself (slightly wrongly) from the sources.

 I have been using Chrome's 'view transitions'. I set the 'view-transition-name' property in CSS classes and add (or remove) these CSS classes from the 'document.documentElement' root HTML element. I can do this when the 'view transition' ends using a promise:     transition =         document.startViewTransition(play);     transition.finished.then(finishViewTransition); I use a 'do nothing' 'view transition' to animate showing a dialog box without animating the whole page:     ::view-transition-old(doNothing),     ::view-transition-new(doNothing) {         animation: none;     }     .vtDoNothing {         view-transition-name: doNothing;     }     #confirmBox {     ...     document.documentElement.className += 'vtDoNothing'; I var...

 I add short names for frequently used built-in functions, when 'minifying' my game. I use 'sed' to append code like this to the start of my game:     Array.prototype.p=Array.prototype.push     Math.f=Math.floor     document.ce=document.createElement     Node.prototype.ac = Node.prototype.appendChild     var w=window;w.st=w.setTimeout; I then change the code like this:     sed -e 's/\.push(/.p(/g'  But, I have not found a way of shortening the property 'Node.nextSibling'. Modifying the DOM may not work in old versions of Internet Explorer. I get annonyed when I see repeated code when I look through my game's code after I have 'minified' it

 I ran UglifyJS twice and got a small further reduction in size. I now set the 'passes' option of 'UglifyJS' to '3'. This further reduces the size of the JavaScript in my game by 0.5%. I do not get much reduction in size when I run the 'CSSO' minifier twice or run the HTML minifier at 'jsonformatter.org' twice. The 'terser' JavaScript minifier is much faster than 'UglifyJS' but produces slightly bigger results with the default options.

 I use Douglas Crockford's 'JSMin' minifier a lot. I modified it to keep newlines so I can look through the results. You can find it at:       ' https://github.com/Bert-Beckwith/myjsmin ' 'jsmin.c' is a small C program that removes JavaScript comments and excess whitespace. I often comment out old code rather than remove the code, so I use 'JSMin' to look at what is left. Afterwards I say ':g/^$/d' in 'vim' to remove blank lines. I really should just remove the old code and learn to use my source control system better. I also use 'JSMin' to minify my game, partly so that the input to 'UglifyJS' is smaller. I use an online version of 'UglifyJS' as my Linux system at home is a bit too old to run it. 'JSMin' is small and fast - I can run it in the background whilst playing my game.

 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); ' +     ' } '...

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

 Taking a reference to a function of a class object sometimes loses the context. If I say:       var g = obj.f;       g(); Then the 'this' for 'g' is 'window' not 'obj'. To get round this, sometime I say:     g.call(obj); With a timeout, sometimes I say:           var that = this;           function callg()           {               that.g();           }           setTimeout(callg, 1000); I have been converting 'modules' to objects made with 'prototypes' and 'new'. By a 'module' I mean a self-executing anonymous function (a closure) returning references to inner functions. There are more tips at:  bbingo.xyz/techtips/