British Bingo / Blog: Recent posts

I have been developing my game for fifteen years.

I only spend a few hours a day on it, at most. I mostly add animations which are fun and where you can soon see the results.

In the early days I had a clear objective: to learn the language and have something to show for it. Now, I do it because I find it calming.

The editor of 'osnews.com' said that most people working on one-person operating-system projects lose interest after a few years.... read more

I have added 'next', 'previous', 'author' and 'license' document relations to the 'head' of my web pages.

For example, I say:

<link rel="next" href="https://bbingo.xyz/credits/">

My very old browser shows these 'document relations' in the browser's main menu..

I do not see any modern browsers showing these 'document relations'.

Google search does not seem to use these 'document relations' either

There are more tips at: bbingo.xyz/t

One day, my browser showed pages with little color and thick outlines.

I thought maybe my computer had finally stopped working, or that I had deleted a shared library the browser uses.

In fact, I had accidently turned on an accessibility stylesheet option!

There are more tips at: bbingo.xyz/t

I define my own global function 'alert' that writes the message using 'console.log'.

I still use 'alerts' for debugging. I can leave the alerts in when going live and just override the 'alert' function.

I also still debug by adding colored backgrounds to HTML elements.

The debugger on my old Konqueror browser hangs the browser. The browser is 15 years old and I compiled it myself (slightly wrongly) from the sources.... read more

I wanted to lighten and shrink buttons adjacent to the button that I am hovering over. But some of the buttons are inside a containing 'div'.

For example, I have 2 'div' elements with CSS class 'outer', and each 'div' contains 'input' elements which have a CSS class 'inner'.

So I first say:

.inner:hover  ~ .inner, 
.inner:has(~ .inner:hover) {
    opacity: 0.7;
    transform: scale3d(0.9,0.9,1);
} ... [read more](/p/britbingo/blog/2025/10/tech-tip---selecting-adjacent-elements-on-hover-with-css/)

Animating the 'letter-spacing' of a centred piece of text is simple and looks nice.

There is an example on 'codepen.io': 'codepen.io/Bert-Beckwith/pen/myVBZdw'

This was one of my first animations for my game. I used JavaScript to do the animation. This looks a bit jerky but uses much less resources than the smoother simple CSS animation above.

There are more tips at: bbingo.xyz/t

I often make an error in my CSS by commenting out a chunk of CSS but forgetting about a comment already inside the chunk.

Some CSS following the chunk then does not run. But browsers soon recover and later CSS runs fine.

I like how browsers display a web page even when there are errors in the HTML or CSS.

Sometimes I also put JavaScript '//' comments in CSS which also confuses browsers.

There are more tips at: bbingo.xyz/t

If I set a 'transform-style' of 'preserve-3d' on an HTML element then 'position: fixed' does not work.

This seems similar to having 'position: fixed' under something with a 'transform'. Here, the 'fixed' behavior does not work.

There are more tips at: bbingo.xyz/t

I set the 'character set' as soon as possible in my web pages.

I had a comment before the line:

<meta charset="UTF-8">

The browser would find this line and go back to the top of the page and go through the comment again.

There are more tips at: bbingo.xyz/t

I started by using an online HTML minifier at:

toptal.com/developers/html-minifier

This minifier squashes up spaces and removes unnecessary quotes around attribute names. However, this minifier gives an error with my 'tips' page which is quite long with lots of HTML elements.

The online minifier ranked highest by Google removes whitespace that is significant and thus changes the layout of my page. This minifier is at:... read more

Adding an 'inert' attribute to the document body does not seem to speed up animations.

The 'inert' attributes stops any interaction from the user.

I thought animations started from 'view transitions' looked faster. I noticed these transitions stop all user interaction.

In fact, adding 'inert' does not seem to make much diference.

My old page transitions using regular CSS animations look jerky on old computers. Maybe it is the complex HTML that slows them down... read more

I realised you can do a reflection along the 'x' axix with a 'transform' of 'scale(-1,1)'.

I was going to rotate the element 180 degrees around the 'z' axis. This might involve more complex 'sine' and 'cosine' functions.

There are more tips at: bbingo.xyz/t

I sometimes change ':before' and ':after' pseudo elements to 'div' elements so I can reference them by 'id' in JavaScript.

For example, I am adapting a CSS icon for 'Github' that uses ':before' and ':after'.

I usually add an inner 'div' container element which has a 'position' of 'relative' and a 'width' and 'height' of '100%'. I put the ':before' and ':after' elements inside this container with a position of 'absolute'.... read more

I have been changing the text label of links to have words rather than 'bare' URL's.

It seems screen-readers 'say' each character in the URL.

I have a lot of links to 'openclipart.org' on my 'credits' page. The text labels of the links were all bare URL's. But these bare URL's describe the 'SVG'. I will have to add more words to the text label of the links to make each description unique. In fact, content on 'openclipart.org' is in the 'public domain' and does not need attribution... read more

I have started using the 'CSSO' CSS minifier

It only reduces the size of my game by 2%. I already used shell and Perl scripts to remove comments and remove some spaces. 'CSSO' additionally removes spaces around '{' and '}' and removes semi-colons after the last property in a rule. Sometimes 'CSSO' combines similar rules and combines properties into a 'shorthand' rule.

CSS makes up about 20% of my game. (JavaScripts makes up about 65%). This is after my game is minimised.... read more

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

The original is by Yusuke Nakaya. See: codepen.io/YusukeNakaya/pen/WNopRwX

The fish are made of CSS triangles:

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

@keyframes fishColor {
  0% {
    border-color: transparent transparent #6C99C6 transparent;... [read more](/p/britbingo/blog/2025/07/tech-tip---how-a-css-fish-animation-works/)

Flickr said I had violated their terms of service by having non-photographic content.

Another user had reported this.

I had not been using my Flickr account much so I experimented by adding images with captions containing tips and news. The images were drawings from 'openclipart.org'. I also made a gallery of screenshots of my game.

I removed these images. I left some graphs showing probability distributions of getting a 'line' or 'house' in bingo.... read more

Over half of my game is CSS.

This is after the game is minified.

Only a third of my game is Javascript when minified.

It is hard to shorten the names of properties in the CSS rules. I also have lots of icons made using CSS.

I would like to convert several individual CSS properties to 'shorthand' properties like 'animation'. Some of the CSS minifiers do something like this. But, I have empty CSS rules within which I set styles using JavaScript. The minifiers would remove these empty rules, by default. I also rely on some CSS rules being at the start and in a particular order so I can change the styles easily with JavaScript. Because of this, I only use the CSS minifiers on parts of my CSS. This can be a bit hard to manager.... read more

I created a video demonstration of my game using the gaming part of Windows10.

I press the Windows key and 'G' to start and stop the recording.

I put the video on 'youtube.com'

There are more tips at: bbingo.xyz/t

I have been using Chrome's 'view transitions'.

I set the 'view-transition-name' property in CSS classes and add (or remove) these CSS classes from the 'document.documentElement' root HTML element.

I can do this when the 'view transition' ends using a promise:

transition =
    document.startViewTransition(play);

transition.finished.then(finishViewTransition);

I use a 'do nothing' 'view transition' to animate showing a dialog box without animating the whole page:... read more

I have been reading a good picture book, 'How the brain works', published by Dorling Kindersley.

I realised it will be a long time before Artificial Intelligence (AI) replicates our amazing brains with just numbers.

Our brains have evolved over millions of years and are specifically adapted for humans.

Science does not fully understand how our brains work.

Our feeling of consciousness is partly an illusion.... read more

I add short names for frequently used built-in functions, when 'minifying' my game.

I use 'sed' to append code like this to the start of my game:

Array.prototype.p=Array.prototype.push
Math.f=Math.floor
document.ce=document.createElement
Node.prototype.ac = Node.prototype.appendChild
var w=window;w.st=w.setTimeout;

I then change the code like this:

sed -e 's/\.push(/.p(/g'

But, I have not found a way of shortening the property 'Node.nextSibling'.... read more

I ran UglifyJS twice and got a small further reduction in size.

I now set the 'passes' option of 'UglifyJS' to '3'. This further reduces the size of the JavaScript in my game by 0.5%.

I do not get much reduction in size when I run the 'CSSO' minifier twice or run the HTML minifier at 'jsonformatter.org' twice.

The 'terser' JavaScript minifier is much faster than 'UglifyJS' but produces slightly bigger results with the default options.... read more

I use Douglas Crockford's 'JSMin' minifier a lot.

I modified it to keep newlines so I can look through the results. You can find it at:
'https://github.com/Bert-Beckwith/myjsmin'

'jsmin.c' is a small C program that removes JavaScript comments and excess whitespace.

I often comment out old code rather than remove the code, so I use 'JSMin' to look at what is left. Afterwards I say ':g/^$/d' in 'vim' to remove blank lines. I really should just remove the old code and learn to use my source control system better.... read more

Breaking coding down into small steps can make coding boring.

People sometimes say you should break down programming into small steps so as to 'keep it simple'.

I have got into the habit of coding in very small steps because I am often tired in the evenings when I am coding.

I spent several weeks adding an option to the settings page of my game. Previously I might have done the whole thing in one evening.... read more