Posts

Showing posts from February, 2023

Hamburger menu icon with HTML and CSS

 I enjoy looking through the example code at 'w3schools.com/howto'. For example, I was looking for an SVG for a 'hamburger' menu icon before I saw a 'howto' making a 'hamburger' icon with just CSS and HTML. There are more tips at:  bbingo.xyz/t

No no-preference color scheme

 I cannot tell if the user really wants a light color scheme or the default just applies. There is no longer a 'no-preference' value. There is a good article at 'web.dev/prefers-color-scheme/'. I wish I had read it first. You can use transitions on filters such as 'invert'. They look very nice and do not seem to slow things down. I am going to try inverting the colors on my web pages at intervals. This may be annoying. But I can experiment because very few people look at my pages. There are more tips at:  bbingo.xyz/t

Release less often

 Release late and less often. I did not release a new version of my game last year but recently the number of downloads on SourceForge has gone up ten times. Maybe this is because Google's search now finds a third-party link to my list of first-names. Or maybe because I now post my tech tips on SourceForge, Facebook, LinkedIn and blogspot.com. Or perhaps because I have made my tips, probabilities and idioms pages more mobile friendly. There are more tips at:  bbingo.xyz/t

Red has not enough contrast

 Red text on a white background does not have enough contrast. In other words, red text has a contrast ratio of less than 4.5:1. I coloured red the first letter of paragraphs. I now use a darker red: 'rgb(235,0,0)'. I check the contrast of colours with the 'Wave' tool from 'webaim.org'. There are more tips at:  bbingo.xyz/t

30+ IntersectionObserver's

 Having over 30 IntersectionObserver's on one of my pages does not slow the page down. I show a carousel of images next to each section when the section is visible.  Before I added observers, all the carousels were running all the time. All these animations was slowing the page downa a little. It was simpler for me to code each observer to observe just one target element. There are more tips at:  bbingo.xyz/t

hue-rotate and invert for dark mode

 For my quick 'dark mode' I say 'hue-rotate(180deg)' as well as 'invert(100%)'. Inverting colors makes the strongest of the red, green and blue channels the weakest, changing the color or 'hue'. If you rotate the color wheel by 180 degrees, you get back to something near the original color or 'hue'. I tried reversing the order of 'invert' and 'hue-rotate' when I invert images again.  But the order did not seem to make any diference.  If I invert images again then I do not seem to get back to the exact original colors. I tried reducing the brightness after inverting the colors but this reduced the contrast of the text. For my game, I have started on a custom 'dark mode', changing all the colors rather than using a quick 'invert' filter. If I make the colors lighter or darker rather than inverting then I can keep much closer to the original color scheme. But this is going to take me a long time. So I am also working

navigator.userAgentData

 I added a check on 'navigator.userAgentData.mobile' as well as searching for 'Mobi' in 'navigator.userAgent'. But I did not need to, as the high-level browser information will still be in the 'userAgent' string when Chrome reduces the information in the the 'userAgent' string.  All the information in the old 'userAgent' string can be used to uniquely identify you so Chrome is reducing the information.  Firefox does not support 'userAgentData'. Still, 'userAgentData' offers another way of testing for mobiles on Chrome. I do not want to run animations on a mobile even if the mobile has a wide screen and supports the animations. You are really meant to use feature detection and responsive design. There are more tips at:  bbingo.xyz/t

Deleting and backups with Windows FTP

 It is easy to delete the wrong files on my website when using the FTP in Windows File Explorer. But it is also easy to make backups of my website with FTP. I selected a few files to delete but I still had my 'images' directory selected so I deleted lots of my images by mistake. I am going to delete just one file at a time in future when using FTP.   It takes one and a half hours to backup my one gigabyte website using FTP. My cheap hosting plan with 'Hostinger' does make weekly backups but I cannot access the server where the backups are from the computers in my library - a DNS problems maybe. I can now easily switch to another cheap introductory offer with another hosting provider now I have my own backups. There are more tips at:  bbingo.xyz/t