JavaScript tips

 The online SVG optimizer, 'svgomg', shortens id's to the same letters which conflict if the SVG's are inlined. I solved this by turning off the 'Clean up IDs' option. I use the optimizer at: 'jakearchibald.github.io/svgomg/'. The W3C HTML validator points out the conflicts. The Node.js tool that is used has a prefix option or plugin to solve this problem. The SVG's at 'openclipart.org' by regular contributors are not shrunk that much by the optimizer. One SVG got bigger after being optimized. Another SVG was dramatically smaller after being optimized. There are more tips at:  bbingo.xyz/techtips/

 Scaling down the size of a button on the 'active' state means the JavaScript action does not fire on the outer parts of the button. I am animating my buttons on the 'hover' and 'active' states. I use 'scale3d' and 'rotate3d' as I am already setting the background color. I have 'input' elements with a 'type' of 'button' which have no content so I cannot have ':before' or ':after' elements.  I set a zero transition time for the 'active' state and a longer transition time on the button element.  Therefore the button is immediately transformed and then more slowly springs back into its original shape.  My problem is that when I click on the button, it is immediately scaled down, so on the outer parts of the button the click is no longer inside the button, and so the JavaScript action does not fire. My soluation is to instead use rotations on the 'x' and 'y' axis of 180 degrees. There ar

 If I dynamically create an 'input' tag with JavaScript then I seem to have to dynamically create the 'label' tag too. If the 'label' tag is in the static HTML without the 'input' tag then the W3C HTML validator says the 'for' attribute of the 'label' tag points to an 'input' tag that does not exist. I dynamically create the 'input' tag to avoid the browser asking me to confirm that I want to leave the page when I have entered something in the 'input' tag. The 'input' tag is not part of a form that is submitted. Also I have to dynamically create an 'img' tag with JavaScript when I set the 'src' attribute with JavaScript. If the 'img' tag is in the static HTML without a 'src' tag then the W3C HTML validator says there is an error. I dynamically set the 'src' attribute because I am showing a carousel of images with JavaScript. I am worried that Google's search will

 The W3C HTML validator has an 'outline' option. This option showed a bug where the 'h1' tag was inside an 'h2' tag. I was using the 'h2' tag to give a name to an HTML5 'section'. This bug was not shown by the HTML5 outliner I use. This is the old one written by Marc Hoyois.  There are more tips at:  bbingo.xyz/techtips/

 I found a pure-CSS switch that does not use the 'for' attribute of the label to set the 'input' element. This switch has the 'input' element as the background for the whole switch and uses 'pointer-events: none' on the label to pass clicks through to the 'input' element. This switch is at:     https://codepen.io/nikkk-me/pen/abvPjeG There are more tips at:  bbingo.xyz/techtips/