JavaScript tips

 I am finding it hard to make releases of code while I am developing. This is because I work on many things at once. I am always in the middle of something. So I just made a release after a weekend of coding, when everything worked.  In the release notes, I said I had just started one of the changes. But the code is not minimized, it is about 16 megabytes, and so takes over 10 seconds to load across the internet.  The server at my web hosting provider is also a bit slow. I could not put my latest changes into 'github.com' using the web form.  Maybe the source is too big, there are too many changes, or perhaps it was because it was Friday.

 I am not sure how to load in an SVG from a file using JavaScript. I want to then reference the SVG in several places using a 'use' attribute. Sometimes I just add the whole SVG using 'innerHTML'. I put this in a file and create a 'script' element with a 'src' of the file.  I then add the 'script' element to the document 'body'. Sometimes I need to use 'createElementNS' to create an 'svg' element, and then I can add the SVG's contents using 'innerHTML'. Other times this does not work and maybe I need to create other elements of the SVG with 'createElementNS'. Another way is to convert the SVG to a 'data URL' for a 'background-image' attribute within a CSS rule. I put this in a file, and create a 'link' element with an 'href' of the file and a 'rel' attribute set to "stylesheet".  I then add the 'link' element to the document head. To convert the ...

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

 When I make a tricky change to my game, I laugh and think:        'at least, AI couldn't do this' 

 I leave in old code but comment it out. I can quickly see the old code. The code can look a bit messy. Other people might look at old versions in the source control system instead.

 An SVG would not show when it was hidden in a 'div' with 'display: none' and referenced later in a 'use' tag. To fix this, I put the SVG in a 'defs' tag inside an outer 'svg' tag. I hide this outer 'svg' by saying: 'position: absolute', 'height: 0' and 'width: 0'.