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.