Posts

Loading in SVG's from a file using JavaScript

Image
 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 ...
Post a Comment
Read more

CSS view transitions crashed my webpage

Image
 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...
Post a Comment
Read more

AI can't do tricky changes

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

Leaving in old code, commented out

Image
 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.
Post a Comment
Read more

Hiding SVG that is referenced later

Image
 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'. 
Post a Comment
Read more

Making JavaScript and CSS slightly smaller

Image
 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'.
Post a Comment
Read more

Bug with '</style>' inside a comment in a stylesheet

Image
 If I have '</style>' inside a comment in a stylesheet then Chrome thinks I am ending the styleheet. I put a commented out SVG in a stylesheet above where the SVG was encoded as a data URL . The SVG has a stylesheet within it However, another time, I had an extra '</head>' inside the 'head' tag and nothing happened.
Post a Comment
Read more