British Bingo / Blog: Recent posts

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.... read more

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 'positon:absolute' within the overall icon container's 'position:relative'.... read more

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.... read more

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. ... read more

I now put code examples inside a '<pre><code>' block

I was using '&nbsp;' 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.... read more

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'. 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.... read more

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'.

There are more tips at: bbingo.xyz/t

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.

There are more tips at: bbingo.xyz/t

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'... read more

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);
  }
}... [read more](/p/britbingo/blog/2024/04/tech-tip---how-to-do-a-css-firework-animation/)

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

There are more tips at: bbingo.xyz/t... read more

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. ... read more

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, sometime 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.... read more

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>... [read more](/p/britbingo/blog/2023/12/tech-tip---darken-svg/)

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'.... read more

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.... read more

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.... read more

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.... read more

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'

There are more tips at: bbingo.xyz/t

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.... read more

Chrome will not let me use 'calc' in 'translate', like:

transform: 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'... read more

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;
}... [read more](/p/britbingo/blog/2023/10/tech-tip---animating-checkboxes-and-radio-button/)

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.... read more

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.... read more

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'.

There are more tips at: bbingo.xyz/t