JavaScript tips

 I read a good book on AI: ' Smart until it's dumb ' by Emmanuel Maggiori. The author shares his stories of working on AI in business and academic research. The author says the power of AI is often exaggerated and the author predicts a mild AI winter. The author's biggest fear is that AI will be used for safety-critical tasks like self-driving cars where machine-learning can make silly mistakes. I borrowed the book from a public library  There are more tips at:  bbingo.xyz/techtips/

 Chrome will not let me use 'calc' in 'translate', like:      transform: translate3d(0,calc(-100vh-10em),0) But Chrome allows the equivalent:     transform: translate3d(0,-100vh,0) translate3d(0,-10em,0) There is an answer about this on 'stackoverflow.com' at:       'stackoverflow.com/questions/21469350/not-possible-to-use-css-calc-with-transformtranslatex-in-ie' I am using an old version of Chrome on Windows7 dating from the start of 2023. There are more tips at:  bbingo.xyz/techtips/

 I make my checkboxes and radio buttons rotate when they are clicked. If the checkbox is clicked ('active') then the checkbox is immediately rotated 180 degrees.  When the click is over, then the checkbox slowly rotates back to its original position.     input[type="checkbox"] {         transition: transform 1s;         display: inline-block;     }     input[type="checkbox"]:active {         transform: rotate3d(0,0,1,180deg);         transition: 0s;     } This is on 'codepen' at:  codepen.io/Bert-Beckwith/pen/OJrYLLN There are more tips at:  bbingo.xyz/techtips/

 Google's search set a 'full' page to be 'canonical' rather than the 'cut-down' version I had made for mobiles. I fixed this by putting the full content back in the mobile version.  Maybe Google's search wants to index some of the phrases in this page of 'idioms'. I know Google indexes some of the names in my 'names' page. The mobile version still does not have some features of the 'full' page like: being able to search the phrases, having an index, having animations, and showing carousels of images. Most of these extra features are only shown with JavaScript after a delay after the page loads. Google recommends not having a separate page for mobiles. I could use 'accordians' to show the extra content There are more tips at: [bbingo.xyz/t](http://bbingo.xyz/t) There are more tips at:  bbingo.xyz/techtips/

 There is a good CSS switch that looks like a light switch at: 'codepen.io/marcusconnor/pen/QJNvMa'. This switch uses 'em' units so it is easy to scale. The 'on' side is at the left which is the reverse of most switches. I removed the words and colored the sides red and green. I start off with the 'input' element being 'checked' and reverse the sense of the action in the JavaScript of the handler for a click.  I found it too difficult to change the CSS and HTML to swap the left and right sides. One trick with all pure-CSS switches is that clicking the label sets the related 'input' element. So you hide the 'input' field and style the label with maybe 'span' elements inside the label and the 'spans' can have a 'display' value of 'inline-block'.  Another trick is to use the ':checked' state on the 'input' element to change the style of the adjacent 'label' with a CSS selector l...