British Bingo / Blog: Recent posts

I remove unused 'id' attributes from SVG's I get from 'openclipart.org'.

I say: '%s:id="[^"]*"::gc' in 'vim'.

I leave in the id's for gradients and filters used within the SVG. I add a unique prefix to these id's so they do not clash with other inline SVG's.

I also remove 'label' attributes.

I also remove 'inkscape' and 'sodipodi' attributes, and 'metadata' which is usually about the 'author' and license.... read more

I could not login into my hosting provider, Hostinger, with my Facebook login.

Facebook gave the message: 'Facebook Login is currently unavailable for this app'.

It seems this is because Facebook needs to verify Hostinger as a business.

Codepen.io and Pinterest also stopped offering Facebook logins.

When I created my acoount on Hostinger, I used a Facebook login because I had previously created an account with Hostinger using just my email address.... read more

My debit card company declined to pay a renewal of my hosting plan with Hostinger.

The text message with the code did not come at all to start with. When the code came, Hostinger seemed to think the transaction had not succeeded. Then I got a text message from my bank saying they thought the transaction was a scam and asked me to reply 'Y' to confirm the transaction. But this was several minutes after the transaction seemed to fail with Hostinger. My bank said to first check my bank account to see if the money had been debited before trying to pay again.... read more

I try to move around if I am falling asleep in the evenings while coding.

At first, I wrongly tried having a nap.

I drink lots of decaffeinated tea when coding.

Normal tea makes my anxiety worse. I tried hot milk for a while. I like Yorkshire tea.

There are more tips at: bbingo.xyz/t

I could not set the 'class' of an SVG element using the 'className' property in JavaScript.

For example:

var bfyvSVG = 
        document.createElementNS('http://www.w3.org/2000/svg', 'svg');
bfyvSVG.id = 'bfyvSVG';
bfyvSVG.className = 'bfyvSvg-defs';

One answer is to use 'setAttribute':

bfyvSVG.setAttribute("class","bfyvSvg-defs");

I found the answer on 'stackoverflow.com': stackoverflow.com/questions/37943006/unable-to-change-class-name-of-svg-element... read more

You can draw ellipses and other curved shapes by giving two values to 'border-radius' in CSS.

For example:

 border-radius: 50% 49% 40% 40% /
                45% 45% 45% 45%;

The first set of values are horizontal radii and the second are vertical radii.

This is used in a Github icon that I adapted. See: https://codepen.io/Bert-Beckwith/pen/yyNYeZm... read more

If a webpage is a 'Progressive Web App' (PWA) then someone may have an installed copy of the webpage that is old.

I copied some images into a sub-directory to try to speed up the access time. But I cannot remove the original images from the top directory because an old PWA might use the original images. So it is just a little bit slower accessing the new copies of the images in the sub-directory.

I tell Chrome the webpage is a PWA by registerng a 'do-nothing' service-worker. Chrome warns about having a 'do-nothing' service-worker as it needs to be loaded which takes time. ... read more

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