JavaScript tips

 To get a random value, say from 17 plus or minus 3, I can say:        20 - Math.random() * 6 I was saying:      d = Math.random() * 3;      if (Math.random() < 0.5) {          d *= -1;      }      v = 17 + d; There are more tips at:  bbingo.xyz/techtips/

 I had to rename my 'sitemap' file to get around Google's search saying it could not fetch it. I renamed 'sitemap.xml' to 'sitemap2.xml'. There are more tips at:  bbingo.xyz/techtips/

If I set the colors of scrollbars using properties like 'webkit-scrollbar' then my single-item 'select' is not colored and the 'select' behaves strangely.  If I make it a 'multiple' 'select' then the colors and behaviour are fine. I fixed this by excluding 'selects' with CSS selectors like: :not(select)::-webkit-scrollbar

 I got a surprise when I pressed the back button and my page set the checkboxes to their previous values. I could turn this off by saying 'autocomplete="off"' on the checkboxes. Instead, when the page loads, I look at the 'checked' values and run the relevant actions.  Firefox also 'autofills' the checkboxes when I refresh the page. There is a discussion of this at:   'developer.mozilla.org/en-US/docs/Web/Security/      Securing_your_site/Turning_off_form_autocompletion' This is also discussed on 'stackoverflow.com'. There are more tips at:  bbingo.xyz/t

 I realised that I can see the compiled HTML and CSS on 'codepen.io' where examples use preprocessors. There are options in the menus I get from the 'down arrow' icon in the top right corner of the HTML and CSS editors. There are more tips at:  bbingo.xyz/t

 I had my first go at 'visually hidden text'. This is content that is meant for screen readers but which is not visible on the screen.  I had an icon as the label for a search term 'input' field. The 'Wave' accessibility testing tool pointed out that the label had no text. One solution is add some text to the label but give the text a '1px' size with 'overflow: hidden' and 'clip' it. This is discussed at:   'webaim.org/techniques/css/invisiblecontent' and, of course, on 'stackoverflow.com' There are more tips at:  bbingo.xyz/t

 I have had a bug twice where content will not overflow outside its container. I forget that I had set 'contain: content' in the CSS. 'contain' in CSS isolates a part of the HTML allowing the browser to speed up the rendering partly by stopping content overflowing into other areas. . I was changing the color of each letter of the text with Javascript. I wanted to separate this from the large main content of the page which did not change. So I added 'contain'. It made a small diference. There are more tips at:  bbingo.xyz/t