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 had fun using 'corner-shape: scoop' to 'carve out' the corners of boxes with round corners. In fact, I give a random value between '-0.5' and '-1.5' to the 'superellipse' function. Nicely, 'scoop' has no effect if the corners are not rounded.

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