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/

 I found some characters that were not UTF8 in my webpages using Perl. I typed:     perl -ne 'print if /[^[:ascii:]]/' cr.html The W3C HTML validator noticed the invalid characters. The validator would not work when there were invalid characters. The invalid characters were accents and the 'a' and 'e' combined in 'Julius Caesar'.  The invalid characters were in quotes I took from 'wikiquote.org'. Several suggested checks for invalid characters did not work for me because my version of Linux is 10 years old.  I found the successful command at 'linuxhandbook.com'. This looks a good website for learning about Linux. This site seems a bit like the old O'Reilly books such as 'Unix Power Tools'. There are more tips at:  bbingo.xyz/techtips/

 The 'border-radius' property in CSS can have 8 values: four horizontal radius values, a slash and then four vertical values. The 'youtube' icon at 'css.gg' uses this to have corners with longer vertical parts. See: 'css.gg/youtube'. You can also make odd-looking curved shapes.  I almost understand how to draw triangles in CSS after looking at the arrow heads in icons on 'css.gg' such as 'youtube' where it is in the ':before' element. There are more tips at:  bbingo.xyz/techtips/