Posts

Bold text for 'dark mode'

 I find the text is clearer if I set the text to be bold when I setup 'dark mode'. I say: '* { font-weight: bold; }' But the bigger text sometimes overlaps items that follow. There are more tips at:  bbingo.xyz/t

Tech tip - Good CSS tutorial

 I have just finished reading the very good CSS tutorial on Google's 'web.dev' at: 'web.dev/learn/css/'. It brought me up-to-date and gave me lots of ideas. There are more tips at:  bbingo.xyz/t

Making SVG's have transparent backgrounds

 I have been trying to make some SVG's have transparent backgrounds. I could just remove a white 'rect' in a small number of cases. More often, I had to remove a white 'path' going from the outside edges to around the figure. Sometimes this 'path' is off-white like '#fefefe'. However, sometimes a white background is needed to show through inside the figure, like for the whites of eyes. Sometimes a white background is needed as a black figure will not show up against a black background, like for a black cat. I found it is a good idea to comment out parts of the SVG with XML comments ('<!--', '-->') rather than remove the parts, in case I make a mistake. I have a black background when the user wants 'dark mode'. I invert the 'html' tag and then invert again the SVG images to get back to the original colors. I use the CSS 'invert' filter. The SVG's are of animals and are from 'openclipart.org'. T...

Mobile-first pages

 I am creating 'cut-down' copies of my web pages which perform better, are more accessible, and which put mobiles first. These 'cut-down' pages have much less content. The tips page just shows the latest tips, for example. I remove all the JavaScript animations and CSS animations from the 'cut-down' pages. I change some colors to have more contrast in the 'cut-down' pages. I remove any index and any search boxes from the 'cut-down' pages. I will add them back when I have learnt how to do 'slide-in' options for mobiles. I add a link in the 'cut-down' page to the original page.  I rename the original page and make the 'cut-down' page take on the orignal name of the original page. Now all external links, like Google's search, point to the 'cut-down' page. However, my most popular page is an old-fashioned page with lots of animations, badly contrasting colours and badly spaced-out elements. The page is best viewed ...

Programming versus reading the paper

 When I would rather read the paper, I tell myself I will just do some programming for an hour. But often I end up spending several hours programming. I sometimes end up readng the paper while waiting for my browser to load my game, which takes a few minutes on my 20-year-old computer. I try not to do too much programming all at one time, so I don't get bored with it. I try to a little at a time, but aim to carry on doing it for many years. There are more tips at:  bbingo.xyz/t

CSS animation too quick?

 I thought a CSS animation with a duration of 3 milliseconds was too quick. But maybe I was wrong. I thought our eyes could see changes at up to about 60 frames per second, meaning a minimum animation duration of about 16.666 milliseconds. On the computers I use, Chrome uses a frame rate of 60 per second. But there are monitors with refresh rates of 144Hz and 240Hz, which Chrome supports. Also our brain can improve on what our eyes see. And some people can see the flicker in lights. And our peripheral vision is better at seeing motion. The animation was of a flame flickering. There are more tips at:  bbingo.xyz/t

Fixing bugs

 I find I do not need to fully understand how a fix to a program works. Sometimes it's a bit like magic. I have to start somewhere and I understand more as I work on that part of the program. I find many bugs as I develop new features rather than through testing. There are more tips at:  bbingo.xyz/t