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.