Recent tips

Starting to use a CSS minifier
I have started using the 'CSSO' CSS minifier
It only reduces the size of my game by 2%. I already used shell and Perl scripts to remove comments and remove some spaces. 'CSSO' additionally removes spaces around '{' and '}' and removes semi-colons after the last property in a rule. Sometimes 'CSSO' combines similar rules and combines properties into a 'shorthand' rule.
CSS makes up about 20% of my game. (JavaScripts makes up about 65%). This is after my game is minimised.
The size of the CSS is halved when minimised. The minified JavaScript is about 15% of the original size. JavaScript variable names can be shortened but CSS property names cannot be easily shortened. I remove some vendor-prefixed properties.
'CSSO' wrongly changes a small stylesheet to nothing. The stylesheet is:
```
#navigationSettings {
    display: block;
}
```
I had to hide some empty CSS rules from 'CSSO' as it removes them. These rules have properties set in JavaScript.
The online 'playground' of the rival minifier 'cssnano' does not seem to work on the old browsers in my local libraries
I use the Linux 'fold' to look through minimised code
I say: 'fold -s -w120'
```
fold -s -w120
```

How a CSS fish animation works

I have been adapting an animation of fish circling as in a bowl with bubbles rising in the middle

The original is by Yusuke Nakaya. See:

The fish are made of CSS triangles:

.pfshFish-body .pfshScale {
    width: 0;
    height: 0;
    border-width: 0 0 3.125em 6.25em;

@keyframes fishColor {
  0% {
    border-color: transparent transparent #6C99C6 transparent;

The triangles are reflected around the 'x' and 'y' axes to make one side of the body of the fish:

.pfshFish-body .pfshScale.-pfshTop.-pfshFront {
    transform: scale(1, 1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg)
               translate(0.09375em, 0.15625em);
}
.pfshFish-body .pfshScale.-pfshTop.-pfshBack {
    transform: scale(-1, 1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg) 
               translate(0.09375em, 0.15625em);
}
.pfshFish-body .pfshScale.-pfshBottom.-pfshFront {
    transform: scale(1, -1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg) 
               translate(0.09375em, 0.15625em);
}
.pfshFish-body .pfshScale.-pfshBottom.-pfshBack {
    transform: scale(-1, -1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg) 
               translate(0.09375em, 0.15625em);
}

The 'scale(-1, -1)' does the reflection.

In the above, the triangles are rotated a little around the 'y' axis to make the body fatter in the middle.

The triangles are also reflected around the 'z' axis to make the other side of the body of the fish:

.pfshFish-body > .pfshHalf.pfshRight {
          transform: scaleZ(-1) translateZ(-1px);
}

There is an animation that explains CSS triangles at:

'css-tricks.com/animation-css-triangles-work/'

CSS triangles are also use for the tail:

.pfshFish-tail > .pfshScale {
    width: 0;
    height: 0;
    border-width: 0 0 2.5em 1.875em;
}

@keyframes fishColor {
  0% {
    border-color: transparent transparent #6C99C6 transparent;

.pfshFish-tail > .pfshScale.-pfshTop {
    transform: scale(-1, 1);
}
.pfshFish-tail > .pfshScale.-pfshBottom {
    transform: scale(-1, -1);
}

The bubbles are made with a large border radius

.blowing-bubbles .bubble:nth-child(1) {
    border-top: 1px solid #AFD2F7;
    border-radius: 100%;

I colored the triangles to see how the animation works. See this at:

'codepen.io/Bert-Beckwith/pen/YPXRMJz'

My final version is at:

'codepen.io/Bert-Beckwith/pen/dPoMaZv'

I use JavaScript to do the random bits rather than use a CSS pre-processor as I may want to run the animation several times with different sizes and colors

Violating Flickr's terms of service
Flickr said I had violated their terms of service by having non-photographic content
Another user had reported this.
I had not been using my Flickr account much so I experimented by adding images with captions containing tips and news. The images were drawings from 'openclipart.org'. I also made a gallery of screenshots of my game.
I removed these images. I left some graphs showing probability distributions of getting a 'line' or 'house' in bingo.
I had no more trouble for a few months.
But now, I cannot login. Flickr says my username is not valid. If I use a link to my images, then I get a a '410' HTTP code meaning the content was intentionally removed.
Yahoo! acquired Flickr in 2005. Yahoo! let you store lots of images, and even videos.
In 2018, Yahoo! (now owned by Verizon) sold Flickr to SmugMug. Now Flickr tries to be a community of photographers.
I still have all the same images on Pinterest together with the captions Pinterest only allows short caption, so I have to truncate my tips
Minifiying CSS
Over half of my game is CSS
This is after the game is minified.
Only a third of my game is Javascript when minified.
It is hard to shorten the names of properties in the CSS rules. I also have lots of icons made using CSS.
I would like to convert several individual CSS properties to 'shorthand' properties like 'animation'. Some of the CSS minifiers do something like this. But, I have empty CSS rules within which I set styles using JavaScript. The minifiers would remove these empty rules, by default. I also rely on some CSS rules being at the start and in a particular order so I can change the styles easily with JavaScript. Because of this, I only use the CSS minifiers on parts of my CSS. This can be a bit hard to manage.
I decided to remove most CSS properties with vendor prefixes when 'minimising' my game. I use a 'sed' script to do this.
The CSS minifiers do not shorten id and class names. In my other web pages, I used to have a list of names that I would shorten using 'sed'. This included CSS id's and class names. I stopped doing this when I started splitting up the JavaScript into lots of separate files. The JavaScript uses some of these CSS names. I would now have to run 'sed' on all the files. Luckily, my game is all one HTML page. For my game, I run both 'sed' scripts and a CSS minifier. Overall, my game is shrunk from about 14 megabyte to 2.5 megabytes. This reduction is not quite enough, as some free web hosting servies have a 2 megabtye limit on page size.
Manually running CSS, HTML and JavaScript minifiers takes time. I have to run online minifiers through the computers in my local public libraries. I do not have internet access at home. Using the onine minifiers makes it harded to 'move fast and break things' like Facebook's motto.
Making a demo video on Windows10
I created a video demonstration of my game using the gaming part of Windows10
I press the Windows key and 'G' to start and stop the recording.
I put the video on 'youtube.com'
Tips from using 'view transitions'
I have been using Chrome's 'view transitions'
I set the 'view-transition-name' property in CSS classes and add (or remove) these CSS classes from the 'document.documentElement' root HTML element.
I can do this when the 'view transition' ends using a promise:
```
transition =
      document.startViewTransition(play);

transition.finished.then(finishViewTransition);
```
I use a 'do nothing' 'view transition' to animate showing a dialog box without animating the whole page:
```
::view-transition-old(doNothing),
::view-transition-new(doNothing) {
    animation: none;
}
.vtDoNothing {
    view-transition-name: doNothing;
}

#confirmBox {
    view-transition-name: confirmBoxTable;
}

...
  
document.documentElement.className += 'vtDoNothing';
```
I vary the animation in a 'view transition' by creating a 'style' element in JavaScript, then setting the 'innerHTML', and finally adding this 'style' element to the 'head' element of the page.
I use an 'animation delay' to make the 'new' animation follow the 'old' animation rather than crossing. For example:
```
::view-transition-old(endGame) {
    animation: vtFadeOut   .5s linear both,
               vtZoomIn    .5s linear both,
               vtSpiralIn  .5s linear both;
}
::view-transition-new(endGame) {
    animation: vtFadeIn    .5s .5s linear both,
               vtZoomOut   .5s .5s linear both,
               vtSpiralOut .5s .5s linear both;
}
```
I keep the 'view transitions' short because the user cannot interact with the page while a 'view transition' is running. However the page can be changing while the 'view transition' animations are running. I use 'linear' animations so the page does not seem to freeze at the end of the 'view transition'.
The animations in a 'view transition' only happen when the browser has calculated the final state of the page. These calculations happen in the background and are not visible to the user. Before I used the new 'view transitions' API, I would animate away the old page state, then there would be a delay (maybe a blank screen) while the browser calculated the new page state, before I could animate in the new page state. However, in this old way, the user could interact with the page during the animations. If the user wanted to, I could stop the animation and move on. My 'old' page animations seem slow and jerky compared with the new 'view transitions'.
I also turn on a cross-fade when following links between my pages by adding to their stylesheets:
```
@view-transition {
    navigation: auto;
}
```
I can very quickly add page animations to my game with the new 'view transitions' API. It is easy to use the default 'cross-fade' and, although subtle, it looks very good. I use this when changing tabs in my 'settings' page.
Will AI ever rival our brains?
I have been reading a good picture book, 'How the brain works', published by Dorling Kindersley
I realised it will be a long time before Artificial Intelligence (AI) replicates our amazing brains with just numbers.
Our brains have evolved over millions of years and are specifically adapted for humans.
Science does not fully understand how our brains work.
Our feeling of consciousness is partly an illusion.
I suppose AI will be a different kind of intelligence to ours
I found this picture book in my local library
Adding short names for built-in functions
I add short names for frequently used built-in functions, when 'minifying' my game
I use 'sed' to append code like this to the start of my game:
```
Array.prototype.p=Array.prototype.push
Math.f=Math.floor
document.ce=document.createElement
Node.prototype.ac = Node.prototype.appendChild
var w=window;w.st=w.setTimeout;
```
I then change the code like this:
```
sed -e 's/\.push(/.p(/g'
```
But, I have not found a way of shortening the property 'Node.nextSibling'
Modifying the DOM may not work in old versions of Internet Explorer.
I get annonyed when I see repeated code when I look through my game's code after I have 'minified' it
Running minifiers twice
I ran UglifyJS twice and got a small further reduction in size.
I now set the 'passes' option of 'UglifyJS' to '3'. This further reduces the size of the JavaScript in my game by 0.5%.
I do not get much reduction in size when I run the 'CSSO' minifier twice or run the HTML minifier at 'jsonformatter.org' twice.
The 'terser' JavaScript minifier is much faster than 'UglifyJS' but produces slightly bigger results with the default options
Using 'JSMin' to remove commented-out code
I use Douglas Crockford's 'JSMin' minifier a lot
I modified it to keep newlines so I can look through the results. You can find it at:
'github.com/Bert-Beckwith/myjsmin'
'jsmin.c' is a small C program that removes JavaScript comments and excess whitespace.
I often comment out old code rather than remove the code, so I use 'JSMin' to look at what is left. Afterwards I say ':g/^$/d' in 'vim' to remove blank lines. I really should just remove the old code and learn to use my source control system better.
I also use 'JSMin' to minify my game, partly so that the input to 'UglifyJS' is smaller. I use an online version of 'UglifyJS' as my Linux system at home is a bit too old to run it. 'JSMin' is small and fast - I can run it in the background whilst playing my game
Coding in small steps can be boring
breaking coding down into small steps can make coding boring
People sometimes say you should break down programming into small steps so as to 'keep it simple'.
I have got into the habit of coding in very small steps because I am often tired in the evenings when I am coding.
I spent several weeks adding an option to the settings page of my game. Previously I might have done the whole thing in one evening.
However, I work on around 7 or 8 improvements to my game at any one time. I use a very old browser at home where I have no connection to the Internet, so I need to visit my local library to test on modern browsers. Also my game takes several minutes to load on my 25-year old Pentium computer.
Problem with mobile testing tool
my game looked strange when I tested it on mobile phones run by 'appetize.io'
There was a thick border around the boards of players. And the game seemed to hang when I pressed a button.
I thought maybe Chrome was adding an outline when an 'input' element got the focus. So I tried setting 'outline: 0'. This did not fix the problem.
However, when I tested my game on mobile phones at 'browserstack.com' then everything looked fine.
I realised that maybe there was a problem at 'appetize.io'.
However, 'browserstack.com' only gives you one free minute per device. Whereas 'appetize.io' gives you 30 free minutes a month. 'appetize.io' worked fine for tablets.
This was a few months ago. Now my game looks fine on mobiles run by 'appetize.io'
Minifying a web page containing '<pre>' tags
I had a bug when minimising a page containing '<pre>' tags
I was removing whitespace with a shell script saying:
tr '\n' ' ' | tr -s '[:space:]'
But this removes indentation and newlines from inside the '<pre>' tags, which I put around code examples.
Removing whitespace with 'tr' like this makes some of my pages considerably smaller.
I was using lots of ' ' entities and '<p>' tags but replaced these with '<pre>' tags as these seemed more correct. The minimising worked fine with the old code.
I now exclude content inside '<pre>' tags when removing excess whitespace, by saying:
sed -e'/<pre>/,/<\/pre>/!s:[ ][ ]*: :g'
Having a '<pre>' and '</pre>' tag on one line confuses the above 'sed' script, so I first uppercased these tag, by saying:
sed -e's:<pre>$.*$</pre>:<PRE>\1</PRE>:'
I have not yet found an easy way to remove newlines as well as spaces outside of '<pre>' tags.
I am now trying out online HTML minifiers
Adding screenshots shown when installing PWA
I have been adding screenshots to the manifests of my webpages that are Progressive Web Apps (PWA)
Chrome suggests doing this in the 'Application' panel of the 'developer tools'
However Chrome only shows these screenshots as small 'thumbnail' images when you go to install the PWA.
It seems each set of screenshots shown needs to have the same 'aspect ratio'
Removing unnecessary 'abbr' tags and links
I have been removing obvious 'abbr' tags from my 'tips' page
I had a lot of fun looking up abbreviations but apparently it is bad style as it interrupts the flow of the reader. This can be especially bad for screen readers.
For example, I was showing the abbreviation for 'PC' and '3d'.
I also now only mention an abbreviation once the first time it is appears in a tip rather than repeating the abbreviation in the same tip. I still repeat abbreviations in different tips as someone might be reading just one tip.
I am now removing unnecessary links for websites mentioned in the tips.
When I started writing the tips, I thought the idea of HTML, being 'hyper-text', was to have lots of links. So I added a link for every website, book and organistion that I mentioned. But over time, the number of links grew to be over 500.
Again, the links, being blue and underline, interrupt the flow of the reader.
I thought the page would be more inviting with lots of diferent colours, font styles and font families. For example, as well as underlined blue links, I used italic for technical terms and a 'mono' font for code examples. But again this apparently is bad style.
Also my 'tips' page might rank higher in Google's search with fewer links and abbreviations. The page is very long with over 1000 tips across over 30,000 lines of text. Google's search might also not like all the 'span' elements that are used to set different font styles and font families.
I remove one link each day and check the result. My 'tips' page on my website gradually improves as I upload a new version with a new tip about once a week
Smooth Scrolling
I have been adding 'smooth scrolling' to my pages which have internal links
I add this to my CSS:
:root { scroll-behavior: smooth; }
The browser now shows moving through the page to get to the link.
This even works on Firefox and on the old Chrome for Windows7.
Sometimes the page scrolls very quickly when I come 'back' to a page where I had gone to a link.
I turn 'smooth scrolling' off when the user has asked for 'reduced motion'.
I learnt about this from reading the book: 'Responsive Web Design with HTML and CSS' by Ben Frain. I found the book in a branch of my local library. I find different books in the different branches
Layout shifts with Google Fonts
I get page 'layout shifts' when I use 'Google Fonts'
If I say 'font-display: optional' to get round this then I do not see the Google fonts at all, as they do not load in time.
I tried to reduce the size of the font file by specifying a font weight and by specifyng the letters in the alphabet as the 'text' to match. But the font file still takes too long to load.
I also tried putting Google's intermediate '@font-face' rules directly in my CSS. But the font file still loads too slowly.
I also tried downloading the font file onto my website. But the web server is a bit slow and again I do not see the Google fonts. My hosting provider is 'Hostinger'.
I did not try adjusting the size of the system fonts to match the Google Fonts to remove the 'layout shifts'. This seems a bit complicated and may not work on all browsers.
I am going to try loading fonts into my game using the JavaScript API. My game takes a few seconds to load anyway and probably already has a few 'layout shifts'
Adding blog to 'blogarama.com'
I managed to get 'blogarama.com' to index my blog
I get 50 posts free. I only put my best posts on 'blogarama'. 'blogarama' did not mind when I waited 4 months before adding the next post.
'blogarama' thought I had put a reciprocal link in my blog when I had not.
However, I cannot find any of my posts on 'blogarama'. There are a lot of ads.
Many directories of RSS feeds seem to have closed in recent years. However, it seems it is still worthwhile having an RSS feed
I first put '#' before 'rm -rf'
I always put a '#' before a 'rm -rf' before clearing out old backups
I think a bit and then remove the '#' and then run the command.
I once ran '/bin/rm -rf' as the user 'root' and deleted lots of files I wanted. I even deleted the '/etc/passwd' file and got the famous 'you do not exist' error.
I work as the user 'root' because my 'X Windows' system needs this. This is because I upgraded my Linux system myself 'from scratch' and did it slightly wrong.
I get a smiley '(:0)' next to my 'root' user's 'pseudo-terminal' when I run 'who' to show who is logged on
Bug from using old version of Chrome's Lighthouse
warnings from Chrome's Lighthouse turned out to be bugs from using an old version of Chrome used for Windows7
Lighthouse said: 'heading elements are not in a sequentially-descending order'.
I can get round this by using the 'Lighthouse' option at 'webpagetest.org'. Or I can go to a neighbouring libary that runs Windows10 and the latest Chrome
Adapting a 'codepen' icon made with CSS
I adapted a 'codepen' icon made with CSS made of rectangles made with 'clip-path', with the sides rotated to form a cube.
Some of the sides are moved to the front with 'translateZ'.
I colored the sides to see how it works:
'codepen.io/Bert-Beckwith/pen/jENyyaK'
This is a different way of making a cube. Another way is to rotate 'div' elements.
Maybe there is a bug with Chrome: sometimes the sides of the cube disappear if I change the background color of their container. The sides reappear if I click the icon. I tried reflowing the cube, adding 'z-index' and adding '!important' but these did not fix the bug.
It is best to use SVG's for icons but I learn about CSS and my old browser does not show SVG's in HTML pages
Using 'cp -pR' rather than 'cp -a' when making a backup
I changed from using 'cp -a' to 'cp -pR' when making a backup of the directories I use most.
The 'cp -a' command gave an error because a symbolic link could not be created on the FAT file system of the memory-stick that was the destination of the copy.
So I removed the '-d' (no dereference) part of the '-a' option and now 'cp' copies all the files that the symbolic link references.
On second thoughts, maybe 'cp -a' is better because it means I do not get duplicate files
Problems loading pages and with FTP with my hosting provider
For about 2 months, images were sometimes not loaded into my pages when served by my hosting provider 'Hostinger'
Sometimes Chrome could not load a page at first but then found it.
Sometimes I also got errors transferring files with 'FTP'. I could not do a backup with 'FTP' because of these errors.
Maybe I should not complain as I chose a very good value 4-year deal when I moved my website from the free '000webhost' to Hostinger. Inflation since has made the deal seem even better.
So I get 'Hostinger' to generate a backup every week and download it. It is one big 'gzipped' 'tar' file. I request the backup in the middle of the week as Hostinger says the backup takes a few hours to prepare. I download the backup at the end of the week. The download takes only a few minutes. I checked this download file. However, Hostinger says there were some problems with their backups.
I tried using the web-based 'file manager' provided by 'Hostinger'. But I sometimes got network errors when I used this 'file manager' on the old Windows7 computers at my local public library. So I went back to using 'FTP'. But the 'FTP' in the 'File Explorer' of Windows7 says passwords are sent in 'plain text'.
I can now transfer files and do a backup with 'FTP' without errors. but the backup is too slow taking over an hour. I could not seem to stop the slow backup and I ended up with errors on the extended 'FAT' file system on the memory stick where I store my backups. When I got Windows to 'fix' the file system, the recovery came to the end but did not finish. Still the file system ended up fixed.
I have read good things about the hosting provider 'fastcomet.com' and they have a cheap multi-year deal
Cannot install a Progressive Web App with Firefox
I cannot install a Progressive Web App (PWA) with Firefox on Windows
It seems Firefox on the desktop removed support for installing PWA's. Maybe this feature was broken and Mozilla did not want to spend time on it.
There is an unofficial 'extension' to Firefox that lets you run Firefox with a PWA.
In February 2024, Apple said it would not support PWA's in the Ruropean Union. Apple changed its mind perhaps after developers complained. Maybe this was part of a dispute between Apple and the European regulators
My JavaScript game is too big for free web-hosting
My JavaScript game is too big for 'freehostingeu.com'
There seems to be a limit of 2 megabytes.
I use 'freehostingeu.com' as a sort of backup website
My game is about 4 megabytes. I am manually 'minimising' it at the moment with shell and Perl scripts in addition to 'UglifyJS'. But I will not be able to get it to be under 2 megabtyes.
I did split the JavaScript in my game into two for the 'InfinityFree' hosting site a year or two ago. This site has a lower limit of 1 megabtyes.
I should have developed my game as lots of separate JavaScript and CSS files. But having one 'monolithic' file made things a lot easier to start with.
Viewing the source of my large JavaScript game
I cannot see the source of my game in Chrome with the 'View source' option on the old Windows7 computers in my library
My game is about 12 megabytes.
To get round this, I note down the line number of the error in Chrome and then look at the source in Firefox which loads in my big game successfully
There probably is a better way to view a file with line numbers in Windows. The line numbers in Word wrap around to line '1' after line '65534'
Removing whitespace in JavaScript strings used for dynamic CSS
I remove excess whitespace in strings used to create dynamic CSS
My minimiser, 'UglifyJS', does not remove the excess whitespace. It would be quite difficult. So, I edit the source file by hand in 'vi' saying:
```
s:'[ ][ ]*:' :g
```
This turns:
```
'   @keyframes ppbWingRight' + birdNumber + ' { ' +
'   0% { ' +
'     transform: rotate3d(0,1,0,' + wingAngle + 'deg); ' +
'   } ' +
'   100% { ' +
'     transform: rotate3d(0,1,0,-' + wingAngle + 'deg); ' +
'   } ' +
' } ' +
```
into:
```
' @keyframes ppbWingRight' + birdNumber + ' { ' +
' 0% { ' +
' transform: rotate3d(0,1,0,' + wingAngle + 'deg); ' +
' } ' +
' 100% { ' +
' transform: rotate3d(0,1,0,-' + wingAngle + 'deg); ' +
' } ' +
' } ' +
```
I create a 'style' tag, set the 'innerHTML' to the string, and attach the 'style' tag to the 'head' element.
I often start with some 'static' CSS that I found on 'codepen.io', often written by Yusuke Nakaya. Most times, the 'pen' uses a CSS pre-processor. I instead do the random bits in JavaScript. This is so the animation can run several times, and be different each time.
I do my own 'minimising' as well as running 'UglifyJS'. I shorten object properties and CSS id's and classes. I also replace constants in the same way as the C pre-processor does. I end up looking through the resulting code and it is then that I see the spaces in the dynamic CSS.
Download sites not updating my game
the download sites 'download.com' and 'softpedia.com' did not update their entries for my game after I released a new version
I filled in entries on their online forms for the new release. These two download sites had been best for my game in the past.
Also, the 'appvisor.com' website closed in 2024. This website had the official PAD repository and validator. 'PAD' stood for 'Portable Application Description' and was an XML file with information about your program.
However, I updated the entry for my game at 'libregamewiki.org' and the change was approved within a few days. The 'libregamewiki.org' website comes quite high up in Google's search rankings. But another change I made to my entry on 'libregamewiki' is still waiting to be approved.
Also I created an entry for my game on 'github.com'. I was even able to add an update for an improvement. I pasted the new code into the online editor. I pressed '.' to get to the editor. I cannot really use 'Git' or the repositories on SourceForge because I do not have Internet access at home and the computers at the library use Windows and make it hard for you to install programs.
It seems the government regulators are trying to open up Apple's and Google's app stores. So maybe download sites will make a comeback. But I am not sure that trying to make money out of free software works that well. 'appvisor' charged for promoting your program and the download sites show adverts. It seems advertisers have switched from banner adverts on websites to targeted ads on social media.
I generate some interest myself in my game by putting tips on Facebook, LinkedIn, Pinterest, Flickr, 'blogspot.com', Sourceforge and two RSS feeds. Also, Google's search finds obscure names in my page of first names. My pages of idioms and bingo probabilities also have some visitors. I also put my animations on 'codepen'
How to do an RSS icon in CSS
I have been adapting an RSS icon made with CSS
The RSS icon came from:
'codepen.io/dazulu/pen/nwppvr'
There are 4 circles layered on top of each other, using 'z-index' values. The circles are made with 'div's and 'border-radius: 50%'. The circles are of increasing size.
The circles are centered by setting a 'left' and 'bottom' to minus half the div's width and height. The circles have 'position:absolute' within the overall icon container's 'position:relative'.
The second and fourth circles have a white background, whereas the first and third have the orange color.
Only the top-right corner of the circles is shown by putting the 4 circles in a container 'div' and giving the 'div' an 'overflow: hidden'.
Finally a small white circle is placed on top at the center of the above 4 circles.
My RSS icon is at:
'codepen.io/Bert-Beckwith/pen/YzobrmX'
This also shows the icon without 'overflow: hidden' to show how it is made up
Chrome bug when 'div' inside an anchor tag in HTML
Chrome behaved strangely when I put a 'div' inside an anchor ('a') tag
Chrome put the 'div' after the anchor tag rather than inside it.
I fixed this by changing the 'div' tags to 'span' tags and set the 'span' tags to 'display: inline-block'.
However, it seems the HTML5 specification says that you can put an anchor tag around most tags.
There are discussions about this on 'stackoverflow.com'.
My 'div' contains other 'divs'. The anchor tag is inside some complex HTML - a simpler example worked fine.
I am using an old version of Chrome: the last version on Windows7 from the start of 2024.
(My local library has not upgraded from Windows7 yet. The library has instead installed a more recent version of Firefox. Sadly some websites like 'Outlook' and 'Pinterest' do not completely work with the old version of Chrome)
The 'divs' are for an RSS icon made in CSS from:
'codepen.io/dazulu/pen/nwppvr'
I put the RSS icon alongside a few other website symbols for Facebook, X and so on.
It would be best to use an SVG, but my very old Konqueror browser at home does not show SVG's in an HTML page. Also I can learn more about CSS.
I now need to use 'currentTarget' on a 'click' event on the anchor tag because if I click on a child 'div' and the event bubbles up to the anchor then the 'target' property is the child not the parent. I want the 'href' property on the parent so I can open the link in a new tab
Encoding '#' in SVG in data URL in CSS
I had to change a '#' to '%23' in an SVG in a 'data' URL of a 'background-image' property in CSS
I had to do this when changing RGB colors to hexadecimal when 'minimising' my page using a bit of Perl:
```
s/rgb$\s*(\d+),\s*(\d+),\s*(\d+)$/sprintf("%s23%02x%02x%02x","%",$1,$2,$3)/eg;
```
(My old version of Perl does not allow '%%' in the 'sprintf' in the substitution)
All the other 'special' characters are encoded in the SVG in the 'data' URL.
The 'background-image' property looks like:
```
url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20168%...
```
There are online tools to do the encoding.
A PNG image would need full 'base64' encoding to go in a 'url' but an SVG does not
Marking up code examples
I now put code examples inside a '<pre><code>' block
I was using ' ' to indent lines.
I set the '<code>' to 'display:block' so I can indent it with 'margin-left'.
I start the example code immediately after the '<code>' tag to avoid an extra newline.
I put everything in a 'div' with contenteditable="true" and spellcheck="false" to allow 'copy and pasting' and to remove any red 'spell-check' wavy line.
I give the 'div' 'max-width:100%' and 'overflow:auto' to stop scrollbars appearing in the browser's outer window
Giving PWA icons transparent backgrounds
I changed some of my icons to have transparent backgrounds. These were the icons mentioned in the 'manifest' files of my Progressive Web Apps (PWA)
I had given the icons white backgrounds to make them clearer as recommended by the PWA tutorial on Google's 'web.dev' website. But these looked strange next to other icons on a Windows desktop.
I made all my web pages PWA's by adding a 'manifest' file and starting a 'do-nothing' service worker. Chrome warns that loading these service workers slows things down
Disable Chrome's network cache to see website changes
if I want to see changes I have made to my website in Chrome, then sometimes I have to click 'Disable cache' in the 'Network' tab of the 'Developer tools'
I noticed this when changing the icon images in 'Web App' 'manifest' files.
This may also have happened when I changed script files that I load in by creating a 'script' tag and setting the 'src'
RCS 'identification marker' comes in useful
I forgot which version of my JavaScript game I 'minimised' to produce the latest version.
Luckily I had put an RCS 'identification marker' in an HTML comment at the start of the code.
I had used the 'Revision' marker.
RCS is the free source control system that came with my old Linux system
Speeding up passing a rainbow through text
I speed up my JavaScript animations of the color of each letter in lines of text by:
- using 'IntersectionObserver' to only run the animations when the text is visible
- coloring the elements for the letters in steps with delays in-between. (I also create and get references to these elements in steps)
- sometimes coloring whole lines rather than each letter
- sometimes just coloring lines that are 'above the fold'
- only slowly changing the colors of the letters (about every 20 seconds)
- sometimes not having a 'transition' for the color changes
- delaying the start of the coloring until a few seconds after the page loads
- making the page load quicker by making the page small by putting the JavaScript in separate files. I create 'script' elements in JavaScript and set their 'src'. I use 'load' events to create dependencies between the scripts
- not coloring the text on mobiles and tablets. I look at the 'user agent string' and use 'media queries'
- having a separate page for mobiles with no coloring of text. (Google does not recommend this)
I color the letters by adding 'spans' around each letter and then getting references to each 'span'. I add a CSS class to each 'span' and add a stylesheet with the color 'transition' using JavaScript. The result looks like a rainbow passing through the letters.
There is some sample code at:
'codepen.io/Bert-Beckwith/pen/eYobEKq'
Unfortunately, coloring each letter with JavaScript is very slow. And all the 'spans' and 'transitions' make things worse.
But I did not speed up the coloring of letters of text in my JavaScript game. I do not notice the performance problems when playing my game.
A better way might be to have one 'keyframe' for the rainbow colors and different negative 'animation-delays' for each letter. The 'animation-delays' could be set with 'nth-child'. There is some sample code for this at:
'codepen.io/Bert-Beckwith/pen/ZENYmmo'
The constant coloring of the letters still makes this slow. I would have to create the CSS in JavaScript to allow for animations of a random duration.
How to do a CSS firework animation
Yusuke Nakaya makes a firework animation by moving up together lots of small pieces and then sending them off in random directions.
Here is the CSS, which uses a pre-processor:
```
@keyframes spark#{$i} {
  0% {
    transform: translateY(random(150) + 500px);
  }
 
  50% {
    transform: translateY(0);
  }
 
  100% {
    transform: rotateZ($deg) translateX(random(200) + 100px);
  }
}
```
The animation is at: 'codepen.io/YusukeNakaya/pen/zYvWGwb'
I have adapted this to use JavaScript to do the random bits rather than a CSS pre-processor.
Good CSS animations
I like the CSS animations by Yusuke Nakaya at 'codepen.io/YusukeNakaya'
I have changed two to use JavasScript for the random bits rather than a CSS pre-processor. They are the 'Paper Birds' and 'Birds' at: 'codepen.io/Bert-Beckwith'.
I use these as background animations for my game.
I learn about CSS as I change them
!important in CSS
I used '!important' in CSS for the first time
Only to discover that you are not meant to use it because it is difficult to override.
I have a problem where an element has a 'transition' on both 'color' and 'transform' but these attributes are set in different places and may or may not be present.
I set the transitions by creating dynamic stylesheets with JavaScript so the latest 'transition' overrides the earlier.
I tried using 'id' and 'class' CSS selectors so the earlier 'id' overrides the later 'class' selector but I cannot do this easily in all places because I am changing old code.
So I set: 'transition: color 3s, transform 0.5s !important' to override where I later set 'transition: transform 0.5s'
Plain references to functions lose context
Taking a reference to a function of a class object sometimes loses the context
If I say:
```
var g = obj.f;
g();
```
Then the 'this' for 'g' is 'window' not 'obj'.
To get round this, sometimes I say:
```
g.call(obj);
```
With a timeout, sometimes I say:
```
var that = this;
function callg()
{
    that.g();
}
setTimeout(callg, 1000);
```
I have been converting 'modules' to objects made with 'prototypes' and 'new'. By a 'module' I mean a self-executing anonymous function (a closure) returning references to inner functions

Darken SVG

I made an SVG darker using an SVG filter

I added the filter to the top-level 'defs' tag:

<defs id="defs4">
  <filter id="my-dark-filter" 
          color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix" 
         values="1 0 0 0 -0.5 
                          0 1 0 0 -0.5
                          0 0 1 0 -0.5
                          0 0 0 1 0"/>
  </filter>

The values in the fifth column in the matrix vary from 1 for all-white to -1 for all-black.

I then called the filter from the top-level 'g' tag:

<g filter="url(#my-dark-filter)" id="layer1">

I got the idea from 'stackoverflow.com'

The SVG came from 'openclipart.org'

Hold your nerve with free webhosting
my free website at 'freehostingeu.com' was down for several weeks
Other websites at their 'eu5.net' domain were down too.
'freehosteu.com' say the domain was suspended by the registry because the domain was abused.
You have to hold your nerve with free websites.
I used 'freehostingeu.com' as a backup to the free '000webhost.com'.
'freehostingeu.com' blocks pages with 'bad' words but sometimes these are innocent. One example was the 'itAu' in 'webkitAudioContext'.
'freehostingeu.com' used to offer the 'eu.pn' domain of the Pitcairn Islands. But the Islands said it was harming their reputation.
I was very happy with '000webhost.com' and stayed for ten years before upgrading to the cheapest paid plan with their parent 'Hostinger'. I chose a starting 4 year plan which now seems very cheap.
Hackers got 13 million passwords from '000webhost' in 2015. It was suggested that the passwords were stored in plain text and not encrypted. However, '000webhost' is free and shows no ads so I cannot complain
Use 'appetize.io' to test on tablets and phone
I use 'appetize.io' to test my game on simulated tablets and mobile phones
The trial version of 'appetize.io' gives me 30 minutes a month with a 3 minute limit on each session. However, I have just gone over my monthly limit and nothing happened.
I use the 'standalone' option where I can get to a simulated browser and run my game.
I came across 'appetize.io' while looking for a way to run mobile apps in a browser. But the app uses the Microsoft Authenticator app and this means I would have to setup the shared keys each time
Delay starting no-op service-worker
I decided to delay my 'no-op' PWA service worker rathen than remove it
Chrome give a console warning if the service worker fetch listener of a Progressive Web App (PWA) does nothing. Chrome wants you to remove these 'no-op' (no operation) service workers to avoid the time taken to start the listeners.
But Chrome only recognises the PWA if it has a service worker. Chrome puts an icon in the top right to let you install the PWA.
I delay starting my service worker with a 'setTimeout' of 3 seconds on the page 'load' event. You do not notice the delay in the PWA icon appearing.
I also delay all my animations. This also means that Google's search, Chrome's 'Lighthouse' and Webaim's 'Wave' accessibility checker do not see the bad color contrast choices of my animations.
Using ESLint instead of JSHint
I have switched from using JSHint to ESLint to find mistakes in my code
ESLint points out where a variable is assigned a value but the variable is not used. For parameters to functions, I try to remember to also change where the function is called. Sometimes these changes cascade up through parent function calls.
ESLint can process the 10 megabytes of JavaScript in my game. ESLint can do this on an old Windows7 computer with not much memory.
I use the online ESLint at 'eslint.org/play/'.
I read about ESLint in an article in 'Smashing' magazine.
Style tag in 'noscript' tag
I added a 'style' tag inside my 'noscript' tag to hide the 'loading' animations when JavaScript is disabled
I got the idea from an answer on 'stackoverflow':
'stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled'
Good book on artificial intelligence
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
calc in translate
Chrome will not let me use 'calc' in 'translate', like:
```
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
Animating checkboxes and radio buttons
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
Google chose 'full' page as 'canonical' not 'cut-down' mobile page
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
Good CSS switch
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 like 'input:checked + div'.
The 'input' element can be put inside the 'label' element.
I sometimes change the code in 'codepen' to help me understand the code. I set colors and background colors
Leading zero means integer is in octal
a leading zero can mean an integer is in octal in JavaScript
I learnt this when 'ESLint' warned about a time (in milliseconds) I had written as '0960'
Move 'noscript' tag from head to body
I moved my 'noscript' tag from within the 'head' tag to inside the 'body' tag
The W3C HTML validator pointed out that my 'noscript' tag contained 'div' tags that do not belong inside a 'head' tag.
The 'noscript' tag worked the same way in the 'body' tag
Id's conflict if SVG's optimized and inlined
the online SVG optimizer, 'svgomg', shortens id's to the same letters which conflict if the SVG's are inlined
I solved this by turning off the 'Clean up IDs' option.
The W3C HTML validator points out the conflicts.
The Node.js tool, 'svgo', that is used has a prefix option or plugin to solve this problem.
The SVG's at 'openclipart.org' by regular contributors are not shrunk that much by the optimizer. One SVG got bigger after being optimized. Another SVG was dramatically smaller after being optimized
No click action on button scaled-down if active
scaling down the size of a button on the 'active' state means the JavaScript action does not fire on the outer parts of the button
I am animating my buttons on the 'hover' and 'active' states. I use 'scale3d' and 'rotate3d' as I am already setting the background color. I have 'input' elements with a 'type' of 'button' which have no content so I cannot have ':before' or ':after' elements. I set a zero transition time for the 'active' state and a longer transition time on the button element. Therefore the button is immediately transformed and then more slowly springs back into its original shape.
My problem is that when I click on the button, it is immediately scaled down, so on the outer parts of the button the click is no longer inside the button, and so the JavaScript action does not fire.
My soluation is to instead use rotations on the 'x' and 'y' axis of 180 degrees
Have to create label with JavaScript
if I dynamically create an 'input' tag with JavaScript then I seem to have to dynamically create the 'label' tag too
If the 'label' tag is in the static HTML without the 'input' tag then the W3C HTML validator says the 'for' attribute of the 'label' tag points to an 'input' tag that does not exist.
I dynamically create the 'input' tag to avoid the browser asking me to confirm that I want to leave the page when I have entered something in the 'input' tag. The 'input' tag is not part of a form that is submitted.
Also I have to dynamically create an 'img' tag with JavaScript when I set the 'src' attribute with JavaScript.
If the 'img' tag is in the static HTML without a 'src' tag then the W3C HTML validator says there is an error.
I dynamically set the 'src' attribute because I am showing a carousel of images with JavaScript
I am worried that Google's search will see my page a bit like how the validator does. I add the 'input' tag after a delay after the page loads. I do this to speed up the page load
Outline option in W3C HTML validator
the 'W3C' HTML validator has an 'outline' option
This option showed a bug where the 'h1' tag was inside an 'h2' tag. I was using the 'h2' tag to give a name to an HTML5 'section'.
This bug was not shown by the HTML5 outliner I use. This is the old one written by Marc Hoyois
Unusual CSS switch
I found a pure-CSS switch that does not use the 'for' attribute of the label to set the 'input' element
This switch has the 'input' element as the background for the whole switch and uses 'pointer-events: none' on the label to pass clicks through to the 'input' element.
This switch is at:
codepen.io/nikkk-me/pen/abvPjeG'
Finding not-UTF8 characters
I found some characters that were not UTF8 in my webpages using Perl.
I typed:
```
perl -ne 'print if /[^[:ascii:]]/' cr.html
```
The 'W3C' HTML validator noticed the invalid characters. The validator would not work when there were invalid characters.
The invalid characters were accents and the 'a' and 'e' combined in 'Julius Caesar'. The invalid characters were in quotes I took from 'wikiquote.org'.
Several suggested checks for invalid characters did not work for me because my version of Linux is 10 years old.
I found the successful command at 'linuxhandbook.com'. This looks a good website for learning about Linux. This site seems a bit like the old 'O'Reilly' books such as 'Unix Power Tools'.
URL fragment does not work due to invalid HTML
URL fragments (or 'hashes') on a page would not work until I fixed some invalid HTML.
I used the 'W3C validator'.
I had 'p', 'code' and 'article' tags without ending tags. And ending tags without starting tags.
I had 'p' tags around 'ul' tags and 'p' tags around 'p' tags.
8 value border-radius
the 'border-radius' property in CSS can have 8 values: four horizontal radius values, a slash and then four vertical values
The 'youtube' icon at 'css.gg' uses this to have corners with longer vertical parts.
You can also make odd-looking curved shapes.
I almost understand how to draw triangles in CSS after looking at the arrow heads in icons on 'css.gg' such as 'youtube' where it is in the ':before' element
Adding more metadata for my images
adding more metadata for my images did not improve how the images appear in Google's search
I added more JSON-LD with ImageObject's for the main images in my pages.
I added license information to existing JSON-LD.
I added image information to my 'sitemap' file.
I gave my images long descriptive file names.
I type 'site:bbingo.xyz' in Google Images to see how my images appear in Google's search.
Google's Search guide recommended I add the extra metadata
Drawing lines with linear-gradient
the author of the icons at 'css.gg' has an interesting way of drawing lines
He creates a background of just one color using a linear-gradient. He then clips the background using the 'position/bg-size' syntax.
Here is an example of a red vertical line at the top of a box and a blue horizontal line at the bottom:
```
.gg-arrows-merge-alt-v {
    width: 12px;
    height: 22px;
    background:
        linear-gradient(
            to left,red 10px,
            transparent 0)
            no-repeat center top/2px 8px,
        linear-gradient(
            to left,blue 10px,
            transparent 0)
            no-repeat center 20px/10px 2px
}
```
I think this method is used because the icons at 'css.gg' are made using just a 'div' and its ':after' and ':before' elements
-webkit-tap-highlight-color
I almost used '-webkit-tap-highlight-color' to remove the blue highlight when you tap an item on a mobile with Chrome
My item had an odd shape.
But it seems you also need to set 'outline: none' on recent versions of Chrome. But this causes an accessibility problem.
So I just gave my item a regular shape and kept the blue highlight
Funnel shape
you can make a 'funnel' shape in CSS with 'perspective' and 'rotateY'
The 'volume' and 'camera' icons at 'css.gg' use this
More 'css.gg' tips
I search the icons at 'css.gg' using Google's search
For example, I search for 'button icon cas.gg'. But after a while Google puts up a check to see if you are a human and not a bot.
There seem to be more icons at 'css.gg' than those listed in the categories.
Sometimes I have to align the icons by adding a 'top' or 'left' property to the parent element which is positioned 'relative'.
Sometimes I have to add a 'top:0' or 'left:0' property to the ':before' or ':after' elements when I add the icons to a real webpage.
There is no 'cog' or 'gear' icon as this is difficult to do with the 3 elements used: the parent, the ':before' and the ':after'. I found a cog icon in an answer on 'stackoverflow.com'.
I converted the icons to 'em' units but a few icons do not scale completely perfectly. It is probably best to use inline SVG's, but I am learing a lot about CSS using the icons at 'css.gg'.
I change the 'display' property from 'block' to 'inline-block' because I mainly put the icons next to text. I also change 'rotate' to 'rotate3d' out of habit because I have done a lot of CSS animations that run on the GPU
Best to log in regularly to Facebook etc
my account at 'freeshostingeu.com' was removed because I did not log in for a year
When I next logged in, my account was reinstated, but I got errors when using the file manager.
So I just created another account using another of my email addresses.
I visit all my pages at least once a week, but I must remember to log in too
Scaling icons at 'css.gg' and more
I convert the CSS icons at 'css.gg' to units of 'ems' so they scale well
I assume one 'em' is 16px.
'css.gg' uses a 'scale' transform, but I have found this produces 'blocked steps' for the curves when scaled up.
'css.gg' removes unnecessary semi-colons at the end of a list of CSS properties for a CSS rule. But, I always get bugs when I add another property at the end of a list and forget to add a semi-colon at the end of the previous property.
It may be better to use nline SVG icons, but I learn about CSS when I modify the icons at 'css.gg' and I do not know much about modifying SVG's. There is probably less code if I use the icons from 'css.gg' rather than SVG's. I do not want to include a big online icon library.
I convert the icons at 'css.gg' from '2px'-wide lines to '1px'. I am using icons like illustrations and I do not want them to be too bold.
There is a little confusion about the license for the icons at 'css.gg', but the website says it it an MIT license
Custom 404 error page
I have been enjoying adding a custom 404 error page to my website
Google's Search guide recommends a custom 404 page. I made a page with links to the valid pages.
I used CSS rotations and scaling.
The HTML editor of my hosting provider, Hostinger, does not allow 'meta' tags. I used a CSS media query to adapt the page for mobiles as I could not use the 'viewport' meta tag. This editor works best if you add a bit of code at a time rather than trying to paste in a whole page
Very big border-radius
I was puzzled by some CSS with a very large 'border-radius'
But a 'border-radius' of more than half the width of a square is treated as a 'border-radius' width of a half the width, which makes a circle.
There might be a CSS rule with a large 'border-radius' that applies to many square elements of various sizes
Pause CSS animation with do-nothing keyframe
I can pause a CSS animation by creating a 'style' element with a 'keyframe' of the same name that does nothing
If the new 'keyframe' does something different then both Chrome and Firefox immediately change the animation
Article tag
I am putting each tip on my tips page in an 'article' tag
The 'article' HTML5 tag is for self-contained content.
I add an 'h3' heading below the 'article' tag with a title for the tip. Unfortunately, I am going to have to make up titles for about 1000 old tips. I hide the heading with 'display:none' so only HTML5 outliners see it.
I have started reading Google's guide to how to improve a website's ranking in its search results. The guide is at:
developers.google.com/search/docs
I want to find out why my tips page does not appear in Google's index. This is somewhat ironic
Get random value in range
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;
```
Rename sitemap for Google search bug
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'
Webkit-scrollbar select bug
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
```
Back button sets checkboxes
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/Practical_implementation_guides/Turning_off_form_autocompletion
This is also discussed on 'stackoverflow.com'
See compiled CSS and HTML on codepen
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
Visually hidden text
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'
Easy to forget 'contain:content'
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
Near-black backgrounds best for 'dark mode'
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
Code on the w3schools.com is copyrighted
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
Nice CSS icons at css.gg
I am doing 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
Webkit-scrollbar lags
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
Animations by Yusuke Nakaya
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
Coarse pointer media query
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
Dark mode' with 'invert'
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 colours one by one.
In my game I darken background colours by reducing the 'red', 'green' and 'blue' values by a half. I lighten text colours by increasing the 'red', 'green' and 'blue' values by a half of '255' minus the value.
In my game I am going to offer the choice of implementing 'dark mode' by changing all the colours one-by-one or by using 'invert'. I will put in a warning that 'invert' may not work on Firefox. I use 'hue-rotate(180deg)' with 'invert'. This keeps the colours more or less the same. but I also 'invert' some element again to retain their true colours.
The public libraries in a neighbouring town do not have Firefox installed at all and just offer Edge and Chrome on Windows 10
W3schools.com howto's
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
No 'prefers-color-scheme: no-preference'
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/articles/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
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
Red on white is not enought 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'
Over 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
hue-rotate with 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 on a 'dark mode' with an overall 'invert' but also borrowing some of my custom colors and inverting them again so they show through
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'
Wrongly deleted files with 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
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.
web.dev 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
Transparent background for SVG's
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'
Cut-down pages for mobiles
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 on a desktop computer
Programming or 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
Animation duration of 3 milliseconds
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
Starting somewhere when 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
Set colors in CSS not JavaScript
it really is best to set colours in CSS and not JavaScript
Then I found it is easy to change to a high-contrast colour palette by just creating a stylesheet to override the normal colours.
The idea is you change colours by addng a CSS class rather than setting the 'color' property of an HTML element.
But sometimes I calculate colours in a range between two colours or calculate the effect of overlaying one semi-transparent colour onto another. Here, I think it would be too long-winded to put the colours in CSS rules. But this means I have to re-colour all the parts of the boards in my game when I change to a high-contrast palette.
One good thing I had done was to have lots of options on a settings screen to change aspects of my game. So when I change to a high-contrast paletter all I have to do mostly is to run the code that runs when an option is changed. By contrast, some people say you should show the user just a few options.
Another good thing about adding a high-contrast palette was that it got me back into lots of old code.
I dynamically create stylesheets a lot, a bit like this:
```
var stylesheet = document.createElement('style');

var mHeadElement = document.getElementsByTagName('head')[0];
  
mHeadElement.appendChild(stylesheet);
```
And it is similarly easy to remove these stylesheet afterwards
SFTP with web hosting
my cheap hosting plan with Hostinger does not offer SFTP (SSH File Transfer Protocol)
My cheap plan costs about one dollar a month for four years. To get SFTP I have to upgrade to a $10 a month plan which is currently on offer at $3 a month.
I am using FTP because the computers in the libraries where I use the internet cannot reach the server with Hostinger's new file browser.
I understand FTP sends passwords and data as plain text, unencrypted, which is not secure
Steve Jobs quotes
there are some good quotes from Steve Jobs at 'wikiquote.org'.
Here are some:
- "I would trade all of my technology for an afternoon with Socrates"
- "Real artists ship"
- "Do you want to spend the rest of your life selling sugared water or do you want a chance to change the world?"
- "It's more fun to be a pirate than to join the Navy"
- "The only problem with Microsoft is they just have no taste"
- "We hired truly great people and gave them the room to do great work"
- "The management philosophy here really is to give people enough rope to hang themselves"
- "You've got to start with the customer experience and work backwards to the technology"
- "Nobody has tried to swallow us since I've been here. I think they are afraid how we would taste."
- "It looks like it's from another planet. A good planet. A planet with better designers"
- "A lot of times, people don't know what they want until you show it to them"
- "The system is that there is no system"
- "We made the buttons on the screen look so good you'll want to lick them"
- "There are sneakers that cost more than an iPod"
- "We used to dream about this stuff. Now we get to build it. It's pretty great"
- "Pixar is the most technically advanced creative company; Apple is the most creatively advanced technical company"
- "I make 50 cents for showing up and the other 50 cents is based on my performance"
- "I wish developing great products was as easy as writing a check. If that was the case, Microsoft would have great products"
- "Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes"
- "Your time is limited, so don't waste it living someone else's life"
- "Don't be trapped by dogma - which is living with the results of other people's thinking"
- "The only way to do great work is to love what you do. If you haven't found it yet, keep looking"
- "You can't connect the dots looking forward; you can only connect them looking backwards"
- "Sometimes life hits you in the head with a brick. Don't lose faith"
- "Live every day as if it were going to be your last. One day, you're sure to be right"
- "Remembering that I'll be dead soon is the most important tool I've ever encountered to help me make the big choices in life"
- "Stay hungry, stay foolish"
- "Good artists copy; great artists steal"
- "The musicians play their instruments. I play the orchestra"
I make a random quote the 'title' attribute of an image. The quotes at 'wikiquote.org' are in the public domain.
There are also some inspiring quotes from Nelson Mandela
Working on many tasks at the same time
I have been working on over seven tasks at the same time for the last few months whilst developing my computer game
By contrast, 'Agile' developers like to work on one task at a time.
Each day I make a list of what I will do on each task the next day as I go through the tasks. I try not to think about all the tasks all at once as it can get a bit confusing.
However I liked working on one task for a few days when I stayed at home recently when I had Covid.
I have tried lots of different ways of working over the years. During the summer of the pandemic I even tried working through the night but I did not sleep well afterwards due to the daytime noises. I recommend you just pick whichever way of working suits you at the current time
Replacing generic nodes with HTML5 tags
I try to change a 'generic' node in the 'accessibility tree' to a 'section' or 'figure' element
A 'generic' node is usually a 'div' element. I add an 'h2' header element after a 'section' to describe the 'section' element. I hide the 'h2' element by setting 'display: none'. I add a 'figcaption' after a 'figure'.
I try to replace the 'generic' 'div' element with a 'section' or 'figure' element but sometimes my 10 year-old browser gets confused so I just put the 'section' or 'figure' around the 'div'.
The 'accessiblity true' is an extended version of the DOM tree meant for screen readers.
I also hope that if I add more HTML5 tags then Google's search bot will like my pages a bit more. But I really need third-party links to my pages to get in the search rankings.
Getting to the 'accessibility tree' is a bit complicated in Chrome. Go to the 'developer tools' then choose 'Accessiblity' from the 'Elements' tab, then click 'Enable full-page accessibility tree', then click 'Reload DevTools', and then click the icon of a person with outstretched arms
First go at a Content Security Policy
I had a first go at a 'Content Security Policy' (CSP)
I added HTTP headers to the '.htaccess' file on my website:
```
Header add Content-Security-Policy "default-src 
'unsafe-inline' https://bbingo.xyz data:;"

Header add Access-Control-Allow-Origin "*"
```
I really need to put my styles and scripts in separate files. Allowing inline styles and scripts is unsafe, so I have to say 'unsafe-inline'. A workaround would be to put hashes of the scripts in the CSP headers. I say 'data:' as I have some SVG's encoded inline in a data URL.
Content Security Policies are meant to stop cross-site scripting attacks and work by telling the browser to only use resources from specific locations.
My tips page is attached to my pages on Sourceforge so I need to allow access to the favicon and manifest which are on my website at 'bbingo.xyz'. So I include the second header
media queries for prefers-reduced-motion and prefers-contrast
I have been adding 'prefers-reduced-motion' and 'prefers-contrast' media queries to my webpages
The accessibility course on 'web.dev' says I should have my animations off by default and let the user turn on the animations if desired.
Chrome lets you emulate these media settings. The computers at my library do not let you set these media settings in Windows.
'web.dev' says these two accessibility media queries are the two best supported by browers
Main, header and footer tags
the 'main' HTML tag comes between the site 'header' and 'footer' tags
There can be a page 'header' and a page 'footer' within a 'main' tag.
There can also be 'header's and 'footer's wihin 'article' and 'section' tags.
I wrongly put my site 'header' and 'footer' tags within my 'main' tag and Chrome did not mark the 'header' and 'footer' as 'landmark' tags in the accessibility tree
Lang tag values for screen-readers
I changed the 'lang' attribute of my 'html' tags to be 'en-GB' rather just 'en' to help screen-readers
I also removed 'text-align: justify' as the uneven spacing can make the text harder to read
Online HTML5 outliner
I am using the online HTML5 outliner by Marc Hoyois at: 'hoyois.github.io/html5outliner/'
I used to use the outliner at: 'gsnedders.html5.org/outliner/'. This got confused by HTML5 tags like 'header' and 'nav'. This outliner seemed to break and stop working
Adding semantic HTML5 tags
I have been adding more semantic HTML5 elements to my webpages
I have added 'header', 'section', 'main' and 'nav' elements.
The 'accessiblity' course on 'web.dev' says to add semantic elements before adding ARIA attribues.
I do use an ARIA label to distinguish two identical links. One link is big for small screens. The other link is small for big screens
Delay in seeing uploaded pages
if I upload files to my website then they do not always immediately appear when I look at my webpages in a browser
My hosting provider is 'Hostinger'
Cryptocurrency book
I have been reading 'Cryptocurrencies all-in-one for dummies' by Kiana Danial et al
The book put me off buying some bitcoin. It seems so difficult to keep your 'private keys' secure.
I learnt a lot about keeping online investing secure
I borrowed the book from my public library
Accent-color
I have been using 'accent-color' in CSS to set the background color of checkboxes and radio buttons
I found one quirk.
I have a set of checkboxes with a CSS animation taking the 'accent-colors' through a rainbow. The background colors start off all in sync. But if I check and un-check some boxes then the colors get out of sync. It is as though un-checking a box restarts the animation afresh
web.dev HTML forms course
I enjoyed reading the course about HTML forms on Google's 'web.dev'
The course was an easy read and brought me up-to-date.
The course has lots of links to related articles
Wave accessibility testing tool
I have been using the 'Wave' accessibility testing tool from WebAIM'
This tool is more thorough than 'Lighthouse'.
So far 'Wave' has told me about:
- bad colour contrast that 'Lighthouse' had missed
- too long text of the 'alt' attribute of images
- the same links being repeated near to one another,
- making screen readers unecessarily repeat the link text
- text of a link being too general: 'more details'
- badly forcing the text of links to be underlined
- no 'h2' headers between 'h1' and 'h3' headers
'Wave' is a project at Utah State University which is supported by big tech companies and the U.S. government
Design of blogger.com
I learnt a lot about how to design the HTML and CSS of a blog from starting a blog on 'blogger.com'
My own page of tips is one long list and has too many HTML elements which makes the browser slow to lay my page out.
'blogger.com' shows a paragraph for each post and shows the whole of the post when you select it.
No-one reads my new blog except me. My blog is at: 'onecenttips.blogspot.com'
Caret-color
the 'caret-color' CSS property changes the color of the flashing bar which shows the point at which text will be inserted
The 'caret-color' property applies to 'input', 'textarea', and text with the 'contenteditable' HTML attribute set.
If the 'caret-color' is not set then the color is the color of the 'input' element.
It seems a good idea to set the 'caret-color' on the ':focus' CSS selector.
The 'caret-color' can be animated with 'keyframes' in CSS.
This animation does not seem to affect the performance of my page. I was worried about the performance as changing the colour will not run on the GPU
PNG smaller than Webp
my pictures of line graphs are smaller in 'PNG' format than Webp' format
'Lighthouse' said I could reduce the size of my images by converting them to a newer file format and so reduce the time it takes to download my web pages
Minimal PWA
creating a simple minimal Progressive Web App (PWA) helped me get started with this sometimes complex topic
Chrome also helps by showing lots of information about your PWA and letting you test the 'service workers'.
I learnt a lot from the course on PWA's on 'web.dev' but the course was a bit overwhelming.
After all, PWA's are quite ambitious. You add hints to a web page, borrow a little code, and magically the page turns into something that runs by itself on a mobile phone like a native app.
Now I don't need to learn two new languages to get my game to run nicely on Android phones and iPhones and iPads.
However, I had to upgrade my website to use SSL for PWA's to work.
I have now changed all my web pages so that they can run as PWA's
Long Lines
I added a 'div' with 'overflow: auto, max-width: 100%' around the sample code in my tips page to avoid a warning in 'Lighthouse' about the content not being sized correctly for the viewport on a mobile
If a line of code is longer than the width of the browser, this means a scrollbar appears below the code. This keeps the content within the width of the browser.
You can put the 'overflow' CSS on the 'code' or 'pre' tags if these tags enclose all your sample code.
I also say 'contenteditable="true" spellcheck="false"' on the 'div' so the code can be easily selected and the browser does not underline in red what it thinks is misspelt
There is lots more to styling sample code like colour syntax highlighting, shadows, slight rotation, and different typefaces.
IntersectionObserver
I use the 'IntersectionObserver' to only show my slow JavaScript animations when they are visible
These 'observers' are simple to use
Scope property in PWA manifest
I use the 'scope' property in my 'manifest' so I can have many 'Progressive Web Apps' from one website
It seems the 'start_url' needs to end in a slash. Luckily, my pages are called 'index.html' and are in their own subdirectory.
Here is an example:
```
"scope": "/techtips/",
"start_url": "/techtips/",
```
My 'manifest' is in the top directory of my website.
I got the idea from a post on 'stackoverflow
Theme-color on desktop if PWA
you can set the 'theme-color' on a desktop if you create a 'Progressive Web App' (PWA)
It is reasonably straightforward to create a minimal PWA. I had to change my website to use SSL.
You set the 'theme-color' in an HTML 'meta' tag. This colors the title bar on mobiles and tablets.
You can create a 'shortcut' to a 'standalone' copy of your PWA outside of your desktop browser
Old Firefox says SSL certificate expired
Firefox says the SSL 'issuer certificate' for my website has expired
I think I need to upgrade Firefox to refresh its database of SSL certificates. But I use Firefox in my local library.
My hosting provider uses the free SSL certificates from "Let's Encrypt"
Negative animation-delay
I like to add a random negative 'animation-delay' to my CSS animations to vary where the animation starts in the 'keyframe'
Lazy loading images
adding loading="lazy" and decoding="async" to images in a web page cut the time to load the page by a third
The page has about fifty 800 x 600 images.
Adding decoding="async" makes the page 'flicker' as the text is shown before the image.
I thought about adding loading="lazy" to all my images and letting the browser decide which to show. But this is wrong as the 'above the fold' images will delay the 'first content paint'
Self-referential canonoical tags
it is best to use use self-referential 'canonical' tags
These are 'canonical' tags on pages that point to themselves.
This makes it clear to Google's search crawler which page you want to have indexed. For example, deciding between 'www' and 'non-www' URL's.
The 'canonical' tag for my tips page is:
```
<link rel="canonical" href="https://bbingo.xyz/techtips/" />
```
I had wrongly just put 'canonical' tags on versions of my pages that were not 'canonical'
Width and height on responsive images
it is best to have 'width' and 'height' attributes on 'img' tags even if they are 'responsive' and can change their size to fit the layout
I wrongly removed the 'width' and 'height' from my 'img' tags when I made them 'responsive' by adding 'max-width: 100%' and 'height: auto' in my CSS.
The browser can calculate the size needed for the image early on from the ratio of the 'width' and 'height' in the HTML before the image is downloaded
It seems quite complicated when I read about this
Web.dev responsive design tutorial
I learnt a lot reading about 'Responsive Design' on Google's 'web.dev' website
Checking colour contrast
increasing the contrast of a blue colour made it grey
I am checking the contrast of my colours with the 'Accessibility' section of the 'Lighthouse' tool in the Chrome 'Developer Tools'.
I click on the element in the 'Lighthouse' report, go to the 'Styles' pane, click on the color box of the active rule at the top, change the color picker to 'HSL' by clicking on the control on the right, lower the 'lightness' using the arrow key, and then changing back to 'RGB' for my old browser
contain: content
adding 'contain: content' in CSS reduces the time to recalculate my stylesheet by a quarter
Using 'contain: strict' makes the content disappear as I have not specified a height.
Adding 'contains' tries to stop CSS changes within that branch of the DOM tree affecting other parts of the tree, and vice-versa.
I am changing the color of the text in the header of my 'tips' page, with a transition. This takes a long time. Maybe the browser is looking through the large body
Empty string for alt of cosmetic image
use an empty string ("") for the 'alt' attribute of a cosmetic 'img' tag
This means screen readers will ignore cosmetic 'img' tags.
I wrongly gave the penguin illustration on my 'tips' page an 'alt' attribute of 'Penguin' but the illustration is only loosely connected to the page content.
If you use an empty string as the 'alt' attribute then if the image cannot be loaded then you won't get a missing image icon on the page. At least not on Chrome or Firefox, but you still see the missing image icon on Internet Explorer 11
Edge has old performance tools
Edge may give another view of performance to Chrome
Chrome tried out a summary of performance missing off some of the detail.
But I could have looked at Edge which showed lots of detail about performance, the old way
Firefox shows another view of performance
Firefox shows another view of the performance of a webpage
Firefox shows clearly which functions use the most CPU
Compressing pages
compressing all my pages had the sixth biggest impact when speeding up my web pages
I had not realized the importance of having a small initial size for a webpage to speed up page load times. The 'ighthouse' tool showed this.
I simply run my JavaScript through 'JSMin' to remove comments and unnecessary whitespace. I compiled 'JSMin' from source - it is a very small C program.
I will probably run my JavaScript through 'UglifyJS' when I stop making changes to my webpages. I have to go to my library to use the online ''UglifyJS'' so it is a bigger job.
I shorten 'id' and 'class' names in CSS using 'sed':
```
tee scsstmp.html |
sed -n -e '/style type=/,/<\/style>/s@[ ]*[.#]$[a-zA-Z][a-zA-Z0-9_] 
[a-zA-Z0-9_][a-zA-Z0-9_][a-zA-Z0-9_] 
[a-zA-Z0-9_][a-zA-Z0-9_][a-zA-Z0-9_] [a-zA-Z0-9_] 
[a-zA-Z0-9_]*[a-zA-Z0-9_]$ [ ]*[{,:][^.#]*@:\1:@gp' | 
    sed -e 's/::/:\n:/g' | sort -r | uniq | nl -v150 -n rz -w 3 | 
    sed -n -e 's/^ *$[0-9][0-9]*$\t:$[a-zA-Z][a-zA-Z0-9_]*$:/s;\2;Z\1;g/p' >scsstmp.lst
sed -f scsstmp.lst scsstmp.html
```
This shell script uses 'sed' to create a file of subsitutions and then runs them against the webpage.
Finally, I squash up all whitespace with a line cf shell script:
```
tr '\n' ' ' <jtjsm.html | tr -s '[:space:]' >jtmm.html
```
I also removed old unused code to further reduce the page size
Running animations less often below the fold
running animations that are not at the top of the page less frequently had the fifth biggest impact when speeding up my web pages
My animations are where I change the colour of the text and where I show a slideshow of images. These animations mainly use the CPU not the GPU, so have quite an effect on performance.
I also only re-create the 'keyframes' each time the animations run for the animations at the top of the page. I re-create the 'keyframes' to fine-tune the fading in and out in the slideshows
Optimise by breaking functions into steps with pauses
breaking functions into steps and pausing between the steps had the fourth biggest impact when speeding up my web pages
This lets the browser respond to the user's clicks and other user interactions.
This also keeps the frame-rate high so screen changes seem smooth.
This also shortens the 'long-running tasks' shown in the 'performance' tab of the 'developer tools' in Chrome.
I also stagger the start of the slideshows so that the web server does not send the pictures back all at the same time. One page has about 20 slideshows
Optimise by delaying tasks until after page lad
delaying things so that the page loads faster had the third biggest impact when speeding up my web pages
The background gradients and the SVG pictures both fade in, so you do not notice that they now start after the page loads.
On page load, I now only color the text which you first see at the top of the page. The rest of the text below is coloured after a delay.
I just use 'setTimeout' to delay things
Optimise with no animations for phones
not doing animations on a phone or tablet had the second biggest impact when speeding up my web pages
Also on a phone or tablet, I do not colour the page background with changing 'radial gradients' and do not have slideshows of SVG pictures of animals fading in and out.
I check for phone and tablets by looking at the page width and the 'user agent string'.
I have now speeded up my pages in other ways to almost run these animations fine on a mobile or tablet
Optimise with less HTML elements
reducing the number of HTML elements had the biggest impact when speeding up my web pages
I had a 'span' around every letter to pass rainbow colors through the text. Now 'below the fold' it is only each line that has a different color.
I have about 1000 tips on my tips page. I have lots of links, lots of 'abbr' elements and lots of 'spans' to highlight phrases. I will have to split my tips page into lots of separate pages, one for each section.
It is as though when I change the colors, the browser checks through all the HTML elements to see if they are affected
Optimise by moving large arrays out of closures
'closures' may take up memory and sometimes slow things down
I split up a function and moved most of its functionality out of the page load, but then the page load seemed to take longer.
I used 'setTimeout's calling 'inner functions' (or 'closures') within the original function.
The original function had large arrays of colours that I suppose had to be copied into the 'closures'.
I made these large arrays global variables so now the 'closures' need only 'capture' a reference to the arrays
Wrong test for tablet in user agent string
I was wrongly testing for a tablet by searching for 'tablet' in the 'user agent string'
I got the idea from a post on 'stackoverflow'.
But Internet Explorer 11 on Windows7 on a desktop has 'Tablet PC' in the 'user agent string'.
I have gone back to my old regular expression for a tablet:
```
/android|ipad|playbook|silk|kindle|nook|bntv|xoom/i
```
I first test for a mobile with: /Mobi/i
Forbidden words with free web hosting
'freehostingeu.com', the free webhosting site, gave the error '403: forbidden web page' because the page had the forbidden sting 'itAu'
'freehostingeu.com' has automatic content filtering.
The string was in the code 'webkitAudioContext'.
'itAu' is a bank in Brazil and a unit of the FBI.
Other forbidden words have been: 'zynga.com', 'PROXY', 'porn'
Old Firefox does not support latest media queries
Firefox may not support all the latest media queries
Firefox sometimes says 'hover' and 'any-pointer: fine' are 'false' on a desktop PC with a mouse running Windows 7.
I was trying to test for a 'powerful computer'. Anyway, a tablet with a stylus would have a 'fine' pointer. And, of course, the latest versions of Windows support 'touch'.
I am going back to testing for 'mobi' in the 'user agent string'
Old Linux converts vfat uppercase filenames to lowercase
all uppercase Windows filenames are converted to lowercase by my very old Linux system
I download files from 'openclipart.org' using the Windows computers at my library and upload them to my web hosting platform. But I make a list in my web page on my old Linux system whose 'vfat' file system driver converts all uppercase names to lowercase. So now the web page cannot find the lowercase files on the web server
Contribute to free software without coding
using 'openclipart.org' reminded me that you do not have to be a Linux kernel developer to contribute to 'free software', 'open-source' software or 'creative-commons' media
A small number of artists have contributed lots of clip-art for free which is very good
Problems with putting things into public domain
the experience of the 'pixabay' website reminded me why I am nervous about putting my game into the 'public domain'
People were creating mirrors of 'pixabay' as the contents were in the 'public domain'.
Anyway, I cannont make my game totally 'public domain' as some of the animations are derived from those with an MIT license
Use media query to check for powerful computer
I changed how I check for a 'powerful computer' in JavaScript to use a 'media query'
I check for a wide screen and a 'fine' pointer like a mouse:
```
var windowMatchMedia = window.matchMedia;

if (windowMatchMedia) {

     var mediaQuery = 
      windowMatchMedia(
         'screen and (min-width: 700px) and (any-pointer: fine)');

    if (mediaQuery.matches) {
        return true;
    }
}
```
At first, I wrongly put brackets around the whole 'media query'.
I used to check the 'window.innerWidth' and look for the string 'mobi' in the 'user agent string'.
Incognito mode for testing performance
I find it best when timing page loads to start Chrome afresh and in 'incognito' mode and write down the results.
I got confusing results when I left browser tabs open with previous results.
I exaggerate the results by throttling the CPU six times and disabling the cache
Famous error after deleting /etc/passwd
I once got the famous error message "you don't exist" after I deleted '/etc/passwd' by mistake
Always root use on my Linux
surprisingly, I am always the user 'root' on my Linux system
This is because I need to be 'root' to run my 'X Windows' system which I built from source. Something went wrong with the permissions.
I once started deleting my system by typing 'rm -rf /' by mistake. But I stopped it and recovered the files from a backup. Otherwise, I have been OK using 'root'
Give names to self-executing anonymous functions
it may be a good idea to give (self-executing) anonymous functions a name to help with debugging and performance tuning
Also, I code very simply and use lots of intermediate variables that are not really needed. This lets me easily add 'alerts' to show the values of the variables. This is how I debug on my 10-year old browser. My browser crashes when I use the debugger. Of course, code runs a little quicker if you do not use intermediate variables.
Testing for a powerful desktop computer
I wanted to check for a powerful desktop computer
My code passes a rainbow through the letters of the text and runs badly when I mimick a mobile by throttling the CPU in Chrome's 'developer tools'. There are hundreds of 'spans' around the letters and each letter has a CSS transition.
Just checking the page width works surprisingly well. I check if 'window.innerWidth' is greater than 700. The page width of an old computer in the library is just above 700 with the 'developer tools' pane showing. Both the 'Lighthouse' tool and Google's mobile testing tool are fine with this.
I then exclude mobile phones by simply searching for 'Mobi' (case doesn't matter) in the 'userAgent' string. The Mozilla documentation suggests this. I do use the large regular expression from 'detectmobilebrowser.com' in my game. But this has not been updated since 2014, so I don't use it here. However, there must be a reason why commercial websites check the 'userAgent' against large databases of mobile 'userAgent' strings.
I could almost exclude tablets by just also checking for the word 'android' (case doesn't matter). But I noticed that Kindles do not have 'android' or 'mobile' in their 'userAgent' strings. So I use an old catch-all test for tablets:
```
/tablet|android|ipad|playbook|silk|kindle|nook|bntv|xoom/i
```
Of course you are really meant to check some feature of the brower or perhaps time something.
There is a long post at 'stackoverflow' about detecting mobiles.
Too many HTML elements
It is true what Google says about not having too many HTML elements on a page
I had a page with over 20,000 elements which took 4 seconds to load when I reduced the CPU by 4 times using the Chrome 'developer tools', to be like a mobile phone.
The page takes 2.5 seconds to load when I remove the 20,000 elements. Also, there are now less 'long-running tasks' where I change the color of text at intervals after the page has loaded. I suppose there are now less elements to check if the color change applies to them.
Trying to re-format 64gig memory stick
I can 'format' my 64 gigabyte memory stick by running 'format /FS:FAT32 E:' from Windows7's 'powershell'. But it will take over 2 hours
Windows7 will not let me use 'fat32' if I right-click on the drive icon. I need to use 'fat32' so my very old Linux system can recognise the format of my memory stick.
I cannot run other quicker formatting programs as the computers in my libraries stop this.
I have file-system errors on my memory stick that Windows cannot fix
Short delay before give element focus
sometimes with my old browser I need a short delay before I can 'focus' on an HTML element
I use 'setTimeout(f, 100)'.
The delay is needed after I have made the element visible with JavaScript. I suppose the browser wants to render the element before it sets the 'focus' to the element.
Chrome and Firefox do not need the delay.
Adding a short delay fixes all sorts of problems
Quick format fixes file system error on memory stick
I had to 'format' my memory stick to get rid of the file-system errors
Windows could not fix all the file-system errors.
Quick 'formatting' my memory stick took a few seconds. I had spent several hours removing files and fixing most of the errors
Chrome struggles with lots of color transitions
Chrome struggles to render CSS 'transitions' of the colors of lots of HTML elements
I pass a rainbow of colors through the letters of the words on a page. I put 'span' elements around each letter and change the color of each letter about every 3 seconds. These 'spans' have a CSS class which has a CSS 'transition' so the colors change smoothly.
But I see lots of red warnings in the 'performance' tab of Chrome's 'developer tools'. The color 'transitions' mean there are constant 'long running tasks' of over 100 milliseconds where a third of the time is scripting and two-thirds rendering the CSS.
I am going to fix this by having the 'transition' CSS rule on only a few sentences in the introduction
Good book about blogging
I read a good old book about blogging: 'The Million Dollar Blog' by Natasha Courtenay-Smith
I got it from my local library.
(I read that the man behind 'Silk Road' was caught in a library)
Deleting files to speed up fixing file system errors
I am going to have to delete most of the files on my memory stick which has file system errors so that Windows can fix the errors in under an hour
I got the errors when, after copying lots of files, I typed 'sync', which seemed to hang, so I killed (-9) the sync. I should have waited for the 'sync' to finish
Rename and wait rather than delete
I deleted a 'postgres' directory when I should have renamed it and waited a few weeks to see if I needed it
Part of my browser was linked to a 'postgres' library which I deleted. My browser is now missing a panel.
I wanted to free up some space.
'postgres' is a free database but I have not used it for a while
Flower SVG's
there are some top quality SVG's of flowers by Juan Pablo Enrici at: 'openclipart.org/artist/jpenrici'
The SVG's are free and in the public domain
Keep open console of Chrome's developer tools
I am going to keep open the 'console' part of the 'developer tools' window in Chrome in future as I missed an error in a page
One of the libraries I go to has wide screens so there is space for the 'developer tools' and a narrowed main window
Setting the focus
I decided to put the initial 'focus' on my 'start game' button so I can just press 'Return' to start a game
I used 'element.focus()'. I did not use the HTML 'autofocus' as later I am goind to change the 'focus' to other HTML elements.
It seems that setting the 'focus' can be bad for 'accessibility' as the 'focus' jumps around and may even scroll the page
Free hosting site deletes inactive account
I lost the 'redirect' from my old free website at '000webhost.com' pointing to my new paid website at 'Hostinger'
'000webhost.com' had deleted my account and old website. I switched about 9 months ago. I had not used my old account since switching. Maybe I should have logged in regularly to '000webhost.com'.
I get the message 'The authors have deleted this site' when I try and access my old website.
Messages in the '000webhost.com' forum say '000webhost.com' may delete accounts where you have not logged in to the 'control panel' for 3 months or even 7 days.
'000webhost.com' say they send a warning email, but this may be treated as spam and not show up. I did not see an email from '000webhost.com' in my 'gmail' account.
I had a website with '000webhost.com' for abount 7 years. I would recommend '000webhost.com' as long as you are ready to put up with the many ups and down.
The cheap four-year deal I took at 'Hostinger' seems increasinly good value if we both last 4 years
Free SVG'S look best when smaller
some of the SVG's from 'openclipart.org' look better in a smaller size
Some of these SVG's look a bit crude in a larger size
Run ls -R to check backups
I am going to run 'ls -R' on my backups and look for errors
Before, I was just checking two key files and missed some errors.
My memory stick with the backups has file-system errors where I turned off the power in the middle of a backup.
I make backups with 'cp -a' to preserve timestamps on the files.
I also run 'ls -R /mnt/sd/bingo49 | grep error' to find any errors
SVG's keep aspect-ratio
I noticed how nice it is that SVG's keep their 'aspect-ratio' and stay centred when they are resized
My SVG was in a 'div' which had its width given as a percentage and its height given in 'ems'. The 'div' goes into some strange shapes when I resize the browser window, but the SVG still looks fine.
This contrasts with bitmap images which may be stretched and distorted to fit their container.
You can even specify how exactly you want the 'aspect-ratio' of SVG's to be preserved
Load and error events when loading images
I forgot about the 'load' and 'error' events when setting the 'src' of an 'img' tag with JavaScript
I was fading in the image before it had been loaded.
I also forgot to set the 'error' event to 'null' in the error handler. The page went into a loop and Chrome crashed.
I also found I had to reset the 'error' event in the handler for the 'load' event
Adding pictures of animals to pages
I decided to add pictures of animals to some of my pages
This is like the covers of old 'O'Reilly' books.
This helps brighten up dry subjects like my lists of changes and credits.
I get the pictures from 'openclipart.org'.
I go through a list of pictures, fading them in and out.
SVG tutorials
There is a good quick up-to-date introduction to SVG at:
flaviocopes.com/svg/
There is a much more detailed tutorial at:
w3.org/Graphics/SVG/IG/resources/svgprimer.html
A little of this is out of date and I found it hard going.
Book says internet is for government surveillance
I read a thought-provoking book: 'Surveillance Valley' by Yasha Levine
The author says the internet started with the ARPANET, used by the U.S. military. The author says this was used for counter-insurgency work in Vietnam. The author says ARPANET was used to share data on protests in the U.S.
The author says Edward Snowden leaked details of the PRISM project showing that companies such as Google and Facebook worked with the U.S. government to give the government direct access to all the very detailed information these companies hold about you.
The author says the 'Tor' project is mainly funded by the U.S. government to encourage regime change in hostile countries. The author says Tor has holes in it. The author says the U.S. government can get around Tor and Signal by hacking your mobile phone.
The author says Tor and Signal give people a false sense of security and so prevents the regulation of Google and Facebook's data collection.
I got the book from my local library
Dreams often don't come true
It is good to have a dream even if it does not come true
Ten years ago, when I started writing my game, I hoped it might lead to some work.
My aim was to learn the language and have something to show for it.
I do not think it will lead to any work. My concentration and eyesight are poor.
But it is good to have a hobby. It takes your mind off your worries.
But I have become very shy spending so much time on my computer.
Supporting the browsers used in local libraries
I support browsers until they are no longer used in the libraries I go to
Until a frew years before Covid, my local libraries had Internet Explorer 6 running on Windows XP.
Now, just after Covid, most of my local libraries have Internet Explorer 11 running on Windows 7.
One branch of my local libraries has just got new computers with the Edge browser.
My libraries also have Chrome and sometimes Firefox.
Web pages load slowly and animations are not smooth on the old library computers.
I have a library card for a neighbouring area where I used to work, so I use their computer too
JSMin bug
'JSMin' cuts off the end of my regular expression: /bbingo\.xyz\/.*[^\/].*\//i
JSMin thinks there is a comment, //, at the end. But Chrome just sees the regular expression.
I changed it to: /bbingo\.xyz\/.*[^\/].*[\/]/i
The regular expression ohecks if the file is in a sub-directory of my website 'bbingo.xyz'. It looks for 2 slashes with something that is not a slash in-between. I check 'window.location' against this regular expression.
An address of 'bbingo.xyz/t' gets changed to 'bbingo.xyz/t/' somehow.
JSMin is a simple 'minifier', removing comments and spaces
SVG animations for flag
I think I have finally found a way to nicely animate a flag to make it look as if it is blowing in the wind
I can use SVG SMIL animations and the 'feTurbulence' and 'feDisplacementMap' filters.
I got the idea from an answer to a question on Stack Overflow.
I don't think this will run on the GPU though
Sub-directories in images directory
I am going to create sub-directories in my 'images' directory on the web-server
I should have done this sooner.
For example, I will have a sub-directory 'birds' for SVG's of birds.
There are too many files in the 'images' directory which might slow access to the files.
I might also have different files with the same name. I am collecting lots of SVG files from other websites and some just have a long number as a name like '1442343646.svg'.
I created sub-directories for my sound files using the first letter of the filename. But there are still too many files in some of these sub-directories. I got this idea from the layout of Linux 'terminfo' files.
Downloads from Sourceforge varies more
the number of downloads of my game from 'Sourceforge' varies more than it used to
Sometimes I panic when there are no downloads in a week. But then the downloads get into double figures which is very good for me
Sometimes I forget that there are other downloads from other sites such as 'download.com'
Better if my game ran on mobiles
sometimes I think my game might be more popular if it ran nicely on mobiles as well as the desktop
Sometimes I think of 'xearth' a beautiful animated background of the sun shining on the Earth. It runs on 'X Windows' which is less popular these days.
I was hoping that the screen sizes on mobiles would one day be large enough to run the tablet version of my game
Develop software however it suits you
find a method of developing that suits you and your circumstances
During the covid lockdowns, I programmed for several hours during the night, attempting big tasks. Now, I code a little at a time, maybe for 20 minutes at a time and just an hour in total in an evening
I have seen the trend for 'agile' development come and go. Object-orientated development was popular, now less so
Keep it simple when developing software
when writing code, you keep it simple and get something working quickly. Graphic design and art takes much longer
I am probably going to spend a year working on an animation. I have spent several months working on a coloured background for my game
Add tip to SVG
another way to add a tip to an inline SVG is put the SVG in a 'div' element and put the tip on the 'div'
Add dynamic tip to SVG
if I want a tip on an inline SVG then I have to add a 'title' tag to the SVG
I make sure the 'title' tag is the first child of the SVG. This is to work with old versions of SVG.
I dynamically add the 'title' tag to the SVG:
```
var titleElement = document.createElementNS(
                       'http://www.w3.org/2000/svg', 
                       'title');

titleElement.innerHTML = freedomSaying;

internalIndexImage.insertBefore(
    titleElement, internalIndexImage.firstChild);
```
It seems I have to use 'createElementNS'
Nicely formattig SVG tag
the tags are formatted nicely by some drawing programs that generate SVG
The end of the tag is on a separate line making it easier to add and remove attributes:
```
<svg
    id="svg2"
    version="1.1"
    >
```
I may try this for my HTML tags
Limits to the power of GPU's
maybe there is a limit to the magic of the GPU (perhaps the memory of the PC and GPU)
A JavaScript animation of the color of text (using 'setTimeout') stuttered when I had 2 CSS animations of the opacity of the background of the whole page and the opacity of an image taking up about a quarter of the page.
The 2 CSS animations should run on the GPU but the JavaScript text animation will not run on the GPU.
I change the opacity to just fade in and out different 'radial gradients' on the background of the page and to fade in and out the different images.
This was on a modest PC in my local public library.
I improved things by changing the animation of the image to just change the opacity briefly at the start and end of the animation rather than all the way through the animation
Use small memory sticks
I am going to use small 10 gigabyte memory sticks for backups
I takes too long to check and fix the file system on my 64 gigabyte memoery stick
Check backups
it really is best to check if you can restore from your backups, like people say
I was clearing out old backups on a memory stick and found I could not delete some because the file system was corrupt
Facebook book
I read a good book: 'Facebook The Inside Story' by Steven Levy
I found it in the business section of my local public library.
It is a bit biased as it was written with the cooperation of Facebook
Facebook app after trying HTML5
Facebook wrote its mobile app in native code after first trying HTML5
easeOutBack easing function
I like the 'easeOutBack' easing function on 'easings.net'
I use this easing function on an animation of a spider. The spider comes down the screen, slowly stops and then bounces back up a it
Facebook slogans
if I 'move fast and break things' then I worry when things go wrong
This is one of Facebook's mottoes.
Other Facebook slogans have been:
- done is better than perfect
- proceed and be bold
- every day feels like a week
- what would you do if you weren't afraid?
wikiquote.org
'wikiquote.org' has some good quotes with a Creative Commons license
'brainyquote.com' has better quotes but they are only free to use for personal use
Fade in and out the coloured backgrounds
I fade in and out the coloured backgrounds of my pages because the lightness of the colours is different on the computers I use
This means the coloured background is not too dark for too long.
I vary the 'opacity' in a CSS animation. The backgrounds are radial gradients. The lightness is different on the computers in the two libraries that I go to

HSL colours

I have started using 'hsl' (hue, staturation and lightness) colours a little

Here is a color wheel:

background: conic-gradient(
    hsl(360, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(0, 100%, 50%)
);

Wrongly changed 2D transforms to 3D
I wrongly changed 2D 'transforms' to 3D ones in a CSS animation to get them to run on the GPU
It seems 'transforms' and 'opacity' in a CSS animation always run on the GPU.
Forcing JavaScript animations onto the GPU may slow them down as the CPU has to build a picture and send it to the GPU using lots of memory
Fun with coloured backgrounds and text
I thought I would have some fun colouring and animating the text and background of my web pages as not many people look at them
I am also going to animate the 'title' of the pages as they do not appear high up in the rankings of search engines anyway.
I am also going to add some SVG pictures that I like
Assumed page background would always be white
I wrongly assumed my game would always have a white background
I had lightened colours by reducing the opacity in 'rgba' colours. I had made the shape of the thorns of a rose by overlaying white blocks.
I now have a background made of light coloured 'radial gradients'
conic-gradien
there are 'conic-gradient's in CSS
They are like 'radial gradients', but the colours change as you go round the centre point.
There is a lot more to 'radial gradients' than I realised, like 'farthest-corner' and 'steps'
SVG viewBox
I added 'viewBox' properties to a few SVG's that did not scale nicely
I set the dimensions of 'viewBox' from the 'width' and 'height' properties.
The SVG's were the 'src' of an 'img' tag. I wanted to preserve the 'aspect ratio'
CSS calc function
I used 'calc' in CSS for the first time:
```
left: calc(50% + 10px)
```
and:
```
left: calc(100% - 0.2em)
```
Good easing functions
I used the easing functions at 'easings.net' again
Book about AI going wrong
I read a good book about Artificial Intelligence (AI) going wrong
The book is 'You look like a thing and I love you' by Janelle Shane.
The book made me realise you can try out 'machine learning' for yourself these days. I am going to put my list of names into an AI and see what new names the AI comes up with
Animating page title
you can animate the title in the browser tab (or window title) by setting 'document.title'
I first tried setting the 'innerHTML' of the 'title' tab, but this does not work in Chrome.
I put a smiley in the page title and slowly change it. If I change the title quickly then the browser tab (or window title) changes in length which is a bit distracting.
I have read it is bad form to animate the page title.
I got the the list of smileys from the Linux 'smiley' program
Sample size for statistics
I simulate 100,000 games of bingo to find out the average number of balls to get a 'line' or 'house' for a given number of players. But only about 1000 games are needed
Cambridge Analytic book
I read a good book about Cambridge Analytica using data from Facebook to target ads at specific groups of people and help elect Donald Trump and promote Brexit
The book is 'Mindf*ck' by Christopher Wylie, the whistleblower.
You probably would not use Facebook after reading this book, at least with your real name
SVG as page background
I added an SVG landscape as background to the first page of my game
I first looked at the SVG's at 'freesvg.org'. But the SVG's come from 'openclipart.org' so I looked there as well. The 'freesvg.org' website was created when 'penclipart.org' was under attack and unavailable. The 'openclipart.org' website is sometimes slow to load its images on the old computers in my library.
Some of the SVG's on 'openclipart.org' are based on images at 'pixabay.com' which seems a good website for free images, videos and music.
I added 'preserveAspectRatio="none"' to the 'svg' tag to make the SVG's fill up the whole screen. In the CSS, I had 'width: 100%; height: 100%'.
I said 'preserveAspectRatio="xMidYMax meet" to scale an SVG keeping to the 'aspect ratio' and placing the SVG at the bottom of the screen.
I removed the 'inkscape' and 'sodipodi' tages to reduce the size of the SVG's I included inline in my game. I also include larger SVG's as external files using the 'src' attribute of the 'img' tag
Put preventDefault at start of event handler
it is a good idea to call 'preventDefault' at the 'start' of a 'click' event handler on a link, rather than at the 'end'
I had an error in my event handler that caused the handler to stop before it got to my call to 'preventDefault' at the end of my handler. So the default action occured which meant the browser followed the link which loaded another page.
I also put a 'try catch' construct around my event handler's code, just to be sure no error pops out
Hosting provider is not perfect
my paid hosting provider 'Hostinger' is not perfect
Sometimes my pages don't load first time and I have to reload.
But the service is not down for days like their free hosting '000webhost.com'
Access logs of hosting provider
my paid hosting provider 'Hostinger' lets me look at the 'access logs' from their webserver
I was surprised to find someone actually playing my online game. I thought nobody played it apart from me
Updating the title HTML attribute
Chrome lets you change the 'title' tip of an HTML element whilst the tip is shown
I change the 'title' from JavaScript.
Chrome fades out the old value for the 'title' and fades in the new value, taking about a second. So if I update the title every second, the title seems to flash.
Firefox and Internet Explorer 11 do not show the change to the 'title'
I am going to update the 'title' on a progress bar with the current value which changes about every 3 seconds
pointer-events: none
I set 'pointer-events: none' in CSS to let mouse clicks pass through an HTML element
For example, I am working on an animation of a ladybird. The ladybird sits on a 'stage' that completely covers the screen. This is partly so I can say 'overflow: hidden' in the CSS so I do not get scrollbars when the ladybird flies off the screen. But the ladybird is in front of the rest of the page. The 'stage' would stop me clicking on items behind the 'stage'. So I put 'pointer-events: none' on the 'stage' and now mouse events pass through to elements behind the 'stage'
The value for 'pointer-events' is inherited by child elements.
I say 'pointer-events: auto' on the ladybird so that its 'title' tip is shown when the mouse is over it
Changing colour of 25000 spans crashes Chrome
Chrome crashed when I tried to change the colors of 25000 'spans'
Chrome gave me the 'aw snap' message.
I had put 'span' elements around all the text on a page, so I could pass a rainbow through the letters. I only changed the colors every 3 seonds.
However, Chrome was still responsive with all the 'spans', letting me scroll through the page. Whereas, with Firefox, the scrolling was sluggish. Even without changing the colors, the scrolling stuttered on Firefox.
I decided to just color the text in the first few sections at the top of the page
Text nodes between table and caption tags
my very old Konqueror browser does not create a 'text node' when there are spaces and a newline between a 'table' tag and its 'caption' tag
Chrome, Firefox do create a 'text node'.
I squashed up the HTML by removing the spaces and newlines.
I was trying to navigate the nodes using 'firstChild' and 'nextSibling'.
The same thing seems to happen between 'thead' and 'tr' tags
No downloads on Sourceforge due to invalid SSL certificate
there were no downloads of my game on Sourceforge one week
But Chrome said the SSL certificate of 'Sourceforge' was invalid. You needed to choose the 'advanced' option on Chrome to download my game
Multi-line text becomes one text node
all plain text in a sequence is put into one 'text node' in HTML even if it is across several lines
Emergency go live files
I put a few files on a memory stick so I could put live the next version of my game at short notice
I tried to only think about when I would go live when I was testing my game
I was worried about another lockdown closing the libraries where I access the internet
Fix bugs after release
I did not fix most bugs that I found when testing a release
Instead I just added them to a list.
I wanted to make the release as soon as possible.
I will have more time later to better fix the bugs. I did fix a few easy bugs, but I did not include the changes in the release.
Some of the books I have read say that users want to see quick improvements even if there are some bugs left in
Book about internet companies collecting data
I read a thought-provoking book about how companies on the internet collect data about you
The book is 'The Trust Manifesto' by Damian Bradfield, co-founder of 'WeTransfer'. I borrowed it from my local library.
He says you do not need to be a bad company to be successful on the internet. It made me think about why people write Free Software
Background music with a beat is best
I find background music with a bit of a beat and insistent tone is best
Some of the classical music is too gentle and does not show up against the sound of the caller reading out the numbers.
Some of the free classical music from the 'musopen.org' website varies a lot in volume
Write passwords down
a good book suggests writing passwords down in a notebook kept at home
But the book says it is better to use a 'password manager'.
The idea is to avoid reusing simple passwords that are easy to remember.
The books suggests using a simple transformation such as changing lowercase to uppercase and vice-versa.
The book suggests keeping the notebook in a locked drawer.
I write down my passwords on a piece of card I keep in my bag which I take with me everywhere. I have left it by mistake in the library and nothing happened.
The book is 'Confident Cyber Security' by Jessica Barker
Tag names in innerHTML are uppercased on old browser
my very old Konqueror browser puts tag names in uppercase when I look at the 'innerHTML'
Chrome, Firefox and Internet Explorer leave them in lowercase
Expensive to renew domain name
I bought the domain name of my website for one pound from 'NameCheap.com' but it costs ten pounds a year to renew
Bad Request code from web server for range header
I got a 'Bad Request', '400' error when using Ajax on my hosting provider, 'Hostinger'. This was because I had a range header of '0-'
I had added the range header to try to stop Firefox getting partial content.
I did not get the error from their free hosting service, '000webhost.com'. Maybe the free and paid hosting use different web servers. 'Hostinger' uses the 'LiteSpeed' web server whereas '000webhost.com' probably use Apache
FTP with web hosting
I use 'ftp' in the file manager on Windows7
I type 'ftp://' in the address bar.
It says the passwords are sent as plain text.
The file managers of my hosting provider 'Hostinger' do not always work, so I use 'ftp'
NameCheap.com gives better privacy for domains
I bought the domain name of my website from 'NameCheap.com' because they provide better privacy. The contact details on the 'whois' record are their registars and not mine
You can find out the name, address, phone number and email of the owner of a website by looking at the 'whois' record.
I tried to buy the domain name from my hosting provider, 'Hostinger', but the registrar rejected my contact details as I had made them up. Hostinger offer to keep your contact details private, but the details can still slip out. Hostinger charge for this.
I 'pointed' my domain name on 'NameCheap.com>' to my hosting provider, 'Hostinger', by setting the 'domain name servers' in NameCheap's records to be the 'domain name servers' of 'Hostinger'. I then let 'Hostinger' know and they adjusted their records too. The changes then propagated across the internet. I did try to 'transfer' my domain name but this is the wrong thing. I also tried to set a 'personal name server' but this is wrong too.
NameCheap.com are keen for you to use two-factor authentification to access you account, like an online bank.
Hostinger's starter hosting plan is a little cheaper than NameCheap.com's. I paid for four years hosting to get the best price. After all, I have used their free hosting, '000webhost.com', for ten years.
Hostinger copied all my files (200 megabytes) from their free hosting service, '000webhost.com'. I asked their helpdesk to do it. It would have taken me months to do this myself. The helpdesk also re-directed my website on '000webhost.com' to my website on Hostinger
Curly quotes in innerHTML
if I put curly quotes in HTML, like '“line”', then the 'innerHTML' shows a single quote character for each curly quote
But Chrome and Firefox leave a ' ' in the 'innerHTML' as it is in the HTML. These browsers show the corresponding Unicode character ' ' as ' ' in the 'innerHTML'. My very old Konqueror shows both types of ' ' as just a space in the 'innerHTML'
Free hosting account blocked
my free hosting provider '000webhost.com' said my account was blocked due to a third-party complaint
My website said it was sleeping.
I emailed the moderator. I did not send the identity documents they wanted.
After a few days the account was OK again.
The moderator said I had exceeded the 300 megabyte limit on disk space. I had not. But I have 'MP3' and zip files which the moderator said are not allowed.
I cannot see any mention of 'MP3' and 'zip' files in the terms of service of '000webhost.com'. There is a clause where you agree not to infringe the rights of other people.
I think I will upgrade to a paid plan. If people play the online game with sound then the bandwidth limit can be exceeded. The sound is played from lots of small files. Maybe I lost my nerve as my account on '000webhost' works fine now
Online game needs to be one of best in world
if a game is to be successful then it has to be one of the best in the world, which is quite hard to do
Easy does it
I try not to hurry
During the lockdown I had lots of time.
I have the rest of my life to make changes to my game
Kill browser to exit fast
sometimes I 'kill' my old browser when I am finished
My browser can take a few minutes to exit after playing my game which is about 10 megabytes in size. Maybe Linux is swapping out memory. I only have 128 megabytes memory on my 20 year old computer.
I have to remove files from my browser in '/tmp' afterwards
I failed LinkedIn JavaScript quiz
I failed the LinkedIn JavaScript quiz, even after 10 years of coding in JavaScript
I was not able to get a badge because I do not use new features of JavaScript like 'map', 'export' and 'static'.
My browser is over 10 years old and my computer is over 20 years old.
Still, my experience shows you do not need to use the new features of JavaScript.
There are answers to the quiz on the web. But the answers did not seem completely up-to-date
Putting output of UglifyJS into JSHint
I got lots of errors when I put the output of the 'UglifyJS' minifier through the 'JSHint' code analyser
There were lots of missing semicolons. I suppose the output of 'UglifyJS' does not follow the style rules of 'JSHint'.
I was able to get a list of undefined variables from 'JSHint' by adding more 'relax' options and inreasing the maximum number of warnings. I usually mean the undefined (global) variables to be faster local variables.
The source code of my game (about 10 megabytes) is now too large for the online JSHint', even if I first put the source code through 'JSMin' to squash up white space.
Missing semicolons can stop the output of 'UglifyJS' from running. 'UglifyJS' removes all newlines which may mark the end of statements. So I wrote a program to remove most newlines from the source code. This shows up missing semicolons when the game is run. Normally 'JSHint' would point out the missing semicolons
Parameter to clearTimout can be anything
you can pass anything as a parameter to the function 'clearTimeout'
This is useful if you are not sure if you have already cleared a timeout - you can just call 'clearTimeout' on the timeout anyway

Very long variable names

I used to use very long names for variable and functions but the code was difficult to read, especially when the lines were wrapped in my editor

For example:

if (this.showingWarningAboutMissingoutPlayersWhenTooManyHouseOrL
ines) {

    this.selectorForTextColorOfWarningAboutMissingoutPlayersWhen
TooManyHouseOrLines.setRandomStart();

    if (animatetextColor) {
    this.addTextColorToWarningAboutMissingoutPlayersWhenTooM
anyHouseOrLines.setColor();
    }
}

Now I use shorter names, like people recommend. For example:

_.addTextColorsToWarnPressIBoxContBut =

This would have been:

_.addTextColorsToWarningToPressInformationBoxContinueButton =

Of course, the shorter names are less descriptive

Colouring most text
I changed most of the black text in my game to color
I thought it is a game and should be fun so I use color.
I try to have the text always changing color. I try to use CSS transitions. It is hard to use transitions if the text also has a 'hover' color where you want an immediate change in color. So sometimes I just use my own detailed rainbows rather than using a transition.
Sometimes you see the transition on the first change from black to a color. So I have a small delay before adding the stylesheet with the transition, using a 'setTimeout'.
I use simple 'setTimeout's to loop and keep changing the colors.
Sometimes I color each letter in the text differently. I dynamically add HTML 'spans' around each letter.
Even my old browser is quick to change colors. I suppose browsers do not need to reflow the layout. I use closures to hold onto the HTML elements and colors to keep things quick
Programming at night
I tried programming at night during the summer
I wrote some amazing code but I found it difficult to sleep in the morning because of noise from the neighbours, workmen and dustmen
Percentages in rgb() colours
you can use percentages in 'rgb' colours, even fractions
For example: 'rgb(100%,50.5%,100%)'
Free programming books
I have been reading some PDF's of old books I found free on the web:
- 'CSS The Definitive Guide' by Eric A. Meyer
  Surprisingly readable despite going into great detail
- 'CSS Cookbook' by Christopher Schmitt
  This gave me lots of ideas and includes a U.S. flag made with CSS
- 'The CSS3 Anthology' by Rachel Andrew
  An introduction to CSS. Fond memories for me as this is where I started
- 'Smashing CSS3' by Eric Meyer
  A more advanced guide to CSS, surprisingly up-to-date
- 'Best of Nine Smashing Years' from Smashing magazine
  A variety of articles. I liked the one on the psychology of web design
- 'Maintainable JavaScript' by Nicholas C. Zakas
  Some interesting parts despite being meant for large projects
- 'Programming the Mobile Web' by Maximiliano Firtman
  I wish I had read this before developing a version of my game for tablets
I used Google search. Watch out for traps: maybe just click on PDF's not links or buttons. Of course, you are really meant to buy the books

Recent tips

Starting to use a CSS minifier

How a CSS fish animation works

Violating Flickr's terms of service

Minifiying CSS

Making a demo video on Windows10

Tips from using 'view transitions'

Will AI ever rival our brains?

Adding short names for built-in functions

Running minifiers twice

Using 'JSMin' to remove commented-out code

Coding in small steps can be boring

Problem with mobile testing tool

Minifying a web page containing '<pre>' tags

Adding screenshots shown when installing PWA

Removing unnecessary 'abbr' tags and links

Smooth Scrolling

Layout shifts with Google Fonts

Adding blog to 'blogarama.com'

I first put '#' before 'rm -rf'

Bug from using old version of Chrome's Lighthouse

Adapting a 'codepen' icon made with CSS

Using 'cp -pR' rather than 'cp -a' when making a backup

Problems loading pages and with FTP with my hosting provider

Cannot install a Progressive Web App with Firefox

My JavaScript game is too big for free web-hosting

Viewing the source of my large JavaScript game

Removing whitespace in JavaScript strings used for dynamic CSS

Download sites not updating my game

How to do an RSS icon in CSS

Chrome bug when 'div' inside an anchor tag in HTML

Encoding '#' in SVG in data URL in CSS

Marking up code examples

Giving PWA icons transparent backgrounds

Disable Chrome's network cache to see website changes

RCS 'identification marker' comes in useful

Speeding up passing a rainbow through text

How to do a CSS firework animation

Good CSS animations

!important in CSS

Plain references to functions lose context

Darken SVG

Hold your nerve with free webhosting

Use 'appetize.io' to test on tablets and phone

Delay starting no-op service-worker

Using ESLint instead of JSHint

Style tag in 'noscript' tag

Good book on artificial intelligence

calc in translate

Animating checkboxes and radio buttons

Google chose 'full' page as 'canonical' not 'cut-down' mobile page

Good CSS switch

Leading zero means integer is in octal

Move 'noscript' tag from head to body

Id's conflict if SVG's optimized and inlined

No click action on button scaled-down if active

Have to create label with JavaScript

Outline option in W3C HTML validator

Unusual CSS switch

Finding not-UTF8 characters

URL fragment does not work due to invalid HTML

8 value border-radius

Adding more metadata for my images

Drawing lines with linear-gradient

-webkit-tap-highlight-color

Funnel shape

More 'css.gg' tips

Best to log in regularly to Facebook etc

Scaling icons at 'css.gg' and more

Custom 404 error page

Very big border-radius

Pause CSS animation with do-nothing keyframe

Article tag

Get random value in range

Rename sitemap for Google search bug

Webkit-scrollbar select bug

Back button sets checkboxes

See compiled CSS and HTML on codepen

Visually hidden text

Easy to forget 'contain:content'