JavaScript tips

 If I use a near-black background for 'dark mode' then I can have more colorful foreground colors. Otherwise, if text is to be clear then I need almost white foreground colors for dark-but-colorful backgrounds. Things can get a bit scrappy when I am changing lots of colors for 'dark mode' when I am changing old code I do not quite remember. I think it will take all year to change my game to offer a 'dark mode' - truly a labour of love. There are more tips at:  bbingo.xyz/t

 The example code on the 'w3schools.com' website is copyrighted with no open-source license. I used their code for a CSS switch. I had to start somewhere. I am going to change to use code from 'codepen.io' which has more interesting CSS switches anyway. 'codepen.io' uses an MIT license. I might try to vary the switches shown using various designs. There are more tips at:  bbingo.xyz/t

 I make my search icon using CSS from the 'css.gg' website. There are lots of nice CSS icons at 'css.gg'. An SVG icon might be simpler but my old browser does not show SVG images in HTML. There are more tips at:  bbingo.xyz/t

 The scroll-bar lags behind my mouse movements if I use the '-webkit-scrollbar' properties. This happens when I have many JavaScript animations and a long page. This happens even with the latest version of Chrome on Windows 10 The '-webkit-scrollbar' properties let you color the scroll-bar or use patterns. I am going to show a custom scroll-bar after about a minutes on pages where the lag is small. There are more tips at:  bbingo.xyz/t

 I enjoy looking at the animations by Yusuke Nakaya on 'codepen' at 'codepen.io/YusukeNakaya'. I look for animations that can run on the GPU during my game. These are CSS animations that use 'transform' and 'opacity'. I put a few animations together that I find on 'codepen'. I try to make them more random and make them fit on different screen sizes. I learn about the animations as I make changes. The animations on 'codepen' have a MIT license There are more tips at: bbingo.xyz/t

 I now turn on my animations if there is a wide screen and not a 'coarse' pointer'. I used to check the 'user agent string' for 'Mobi', 'Android' or 'iPad' etc A 'coarse' pointer is a finger on a mobile or tablet. I also check for 'prefers-reduced-motion' and 'prefers-contrast'. I also check 'userAgentData.mobile' on Chrome. I am going to check the screen size using a media query as well. My media query for mobiles in my CSS is now:     @media (max-width: 699px), (pointer: coarse)  The comma in the media query above means 'or'. In the above, I am trying to include mobiles or tablets with wide screens There are more tips at:  bbingo.xyz/t

 Implementing 'dark mode' with 'invert' on the 'html' tag does not seem to work on the old Firefox used in my local libraries. This version of Firefox does not invert the background. This Firefox just inverts the elements you add. The Firefox developers feel they are following the specification. Using 'invert' when there is an 'overlay' scrollbar on Chrome sometimes makes the scrollbar disappear. I am using the last version of Chrome on Windows7. I understand 'overlay' scrollbars have been removed from the latest versions of Chrome. Of course, a dark scrollbar on a black background does not make sense. So I would need to use 'color-scheme' to change the color of the scrollbar. But 'invert' does not work well with 'color-scheme'. I could not set the colour of this 'overlay' scrollbar with properties like '-webkit-scrollbar-thumb'.  So I am going to have to implement 'dark mode' by setting the...