JavaScript tips

 I scale up the size of my SVG icons on 'hover' by setting the 'font-size' rather than using a 'scale3d' 'transform'. I use 'ems' for the size of my SVG icons. I keep the SVG icona centred in the same place by using a minus 'translate' 'transform'. Here is an example:     .catNearBriefIntron:hover     {         font-size: 200%;         transform: translate(-25%, -25%);     } I translate by '-25%' rather than '-50%' because I only have to move the centre of the SVG. Using 'scale3d' is quicker as it can run on the GPU. But setting the 'font-size' looks better as the SVG is completely redrawn at the new size. Increasing the 'font-size' means the icon may take up more space and nearby elements may be reflowed. So I set a parent container's 'position' to be 'relative' and then give the icon a 'position' of 'absolute' The scaling using 'font-size' can lo...

 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.

 If I resize PNG images of graphs from 'Gnuplot' using 'GIMP' then I need to change the image 'mode' from 'indexed' to 'RGB' to make the images readable when they are smaller.  The images are then nicely 'interpolated' with a 'cubic' transform. Unfortunately, changing the 'mode' makes the images much larger. So instead, I generate a fresh image from 'Gnuplot' using a smaller 'terminal size', having less 'tics' and breaking the 'title' over 2 lines. But I later decided to convert the graphs to 'RGB' to try to make them easier for the browser to resize.

 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 have been adding 'fetchpriority="high"' to the HTML of images that are visible when the page is first shown. Chrome's 'Lighthouse' tool suggested this. But I show slightly different sets of images for mobiles and desktop computers.  If I set fetchpriority' in JavaScript then it may be too late.

 I learnt how to remove a filename with strange characters in its name. I say:     ls -li to get the inode number, and then delete the file with:       find . -type f -inum 155192 -exec rm {} \; I adapted this from an article on 'distrowatch.com' I tried to use the graphical file manager 'Midnight Commander' but I have mapped the function keys it uses to letters that do not work anymore on my keyboard. I can use 'Midnight Commander' outside of X Windows though. My old 'find' command does not support the '-delete' option.

 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.

 I often add blank lines around HTML that I am modifying to make things clearer.   Most times it does not make any difference. An HTML minifier will remove the blank lines.   I also often comment out old HTML code with '<!--' an '-->'

 When scraping names off Wikipedia I take breaks reading the technology news. Otherwise it is too boring. I read 'slashdot.org', 'osnews.com', 'distrowatch.com', 'lwn.net' and 'computerweekly.com' news and 'reuters.com/technology' news.

 I have started putting braces on newlines in CSS. For example:     .c1,     .c2     {         color: blue;     } This makes adding another class at the end of the list a little easier. I suppose I could even write:       .c1     , .c2     {         color: blue;     } One project I worked on when I was younger formatted SQL like this:     SELECT a          , b       FROM t          , t2

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

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

 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.

 Fading in and out an animation by setting the overall opacity flattens the 3D effects. I am adapting an animation of going through a star field. The stars move forwards with 'translateZ'. A 'transform-style' of 'preserve-3d' is set. I added a 'keyframe' to the outer 'stage' changing the opacity from zero to one at the start, and one to zero at the end. But this changes the 'preserve-3d' in the children to 'flat' and the stars no longer move forwards. I got around the problem by instead setting the opacity on each star.

 Twitter seems to need an 800 by 800 pixel image for the image in its 'meta' open graph tags. Twitter says just to create a post and put in a link to see how the 'card' for the meta tags look. Sometimes the 'card' is shown but sometimes it is not. Twitter has an old tool to show which 'meta' tags are being used, but Twitter now says this is not always correct on all devices. At first I scaled down some old 1280 x 720 pixel screenshots to 800 x 800. But the text looks a bit tall and narrow, so I will have to take fresh screenshots that are square. Facebook seems to look for an image in the page referenced in the 'og:url' tag rather than the current page. Facebook has a tool to check which 'open graph' tags are used. I have added 'open graph' meta tags to all my pages.