Recent tips

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 'ESList' 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/Securing_your_site/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/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
JSMinb 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

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'

Near-black backgrounds best for 'dark mode'

Code on the w3schools.com is copyrighted

Nice CSS icons at css.gg

Webkit-scrollbar lags

Animations by Yusuke Nakaya

Coarse pointer media query

Dark mode' with 'invert'

W3schools.com howto's

No 'prefers-color-scheme: no-preference'

Release less often

Red on white is not enought contrast

Over 30 IntersectionObserver's

hue-rotate with invert for dark-mode

userAgentData

Wrongly deleted files with FTP

Bold text for dark-mode

web.dev CSS tutorial

Transparent background for SVG's

Cut-down pages for mobiles

Programming or reading the paper

Animation duration of 3 milliseconds

Starting somewhere when fixing bugs

Set colors in CSS not JavaScript

SFTP with web hosting

Steve Jobs quotes

Working on many tasks at the same time