British Bingo / Blog: Recent posts

I leave in old code but comment it out.

I can quickly see the old code.

The code can look a bit messy.

Other people might look at old versions in the source control system instead.

There are more tips at: bbingo.xyz/t

An SVG would not show when it was hidden in a 'div' with 'display: none' and referenced later in a 'use' tag.

To fix this, I put the SVG in a 'defs' tag inside an outer 'svg' tag. I hide this outer 'svg' by saying: 'position: absolute', 'height: 0' and 'width: 0'.

There are more tips at: bbingo.xyz/t

I save space by setting a variable called '_' to 'this' at the start of a function that uses 'this' a lot.

Saying 'background: aqua' is shorter than saying 'background-color: aqua'.

There are more tips at: bbingo.xyz/t

If I have '</style>' inside a comment in a stylesheet then Chrome thinks I am ending the styleheet.

I put a commented out SVG in a stylesheet above where the SVG was encoded as a data URL. The SVG has a stylesheet within it

However, another time, I had an extra '' inside the 'head' tag and nothing happened.

Fading in and out an animation by setting the overall opacity flattens the 3D effects.

I am adapting an animation of going through a star field. The stars move forwards with 'translateZ'. A 'transform-style' of 'preserve-3d' is set.

I added a 'keyframe' to the outer 'stage' changing the opacity from zero to one at the start, and one to zero at the end. But this changes the 'preserve-3d' in the children to 'flat' and the stars no longer move forwards.... read more

Twitter seems to need an 800 by 800 pixel image for the image in its 'meta' open graph tags.

Twitter says just to create a post and put in a link to see how the 'card' for the meta tags look. Sometimes the 'card' is shown but sometimes it is not. Twitter has an old tool to show which 'meta' tags are being used, but Twitter now says this is not always correct on all devices.

At first I scaled down some old 1280 x 720 pixel screenshots to 800 x 800. But the text looks a bit tall and narrow, so I will have to take fresh screenshots that are square.... read more

A 'div' with 'position: fixed' was not visible when I forgot to give a 'top' or 'left' and other content filled the screen.

The 'div' is visible and below the other content if this content only partly fills the screen.

If I say 'position: absolute' then the 'div' is at the bottom of the other content even if this content fills the screen.

There are more tips at: bbingo.xyz/t

The 'encodeURI' function on my old browser does not give the right output for a data URL for a background image of an SVG.

So I use the free online URL encoder at: yoksel.github.io/url-encoder/

My browser's 'encodeURIComponent' function does not give the right output either.

Chromes's 'encodeURIComponent' function does not give the right output either.

I tried changing all double quotes in the SVG to single quotes, but this did not give the right output either... read more

I used 'setTimeout' to run a 20 second animation again two minutes after it first starts.

But if I change tabs in Chrome after a a few seconds and come back to the original tab after a few minutes, then the first and second animations run together.

It seems the hidden tab freezes but 'setTimeout' still counts down the seconds.

There are more tips at: bbingo.xyz/t

I had a bug where using 'setAttributeNS' and "xlink:href" on a 'use' tag of an SVG would not override the plain 'href' set in the HTML.

It seems I should always use plain 'href's as 'xlink:href' is not used now.

There are more tips at: bbingo.xyz/t

Putting SVG's of animals near buttons draws the eye to the buttons.

The SVG's also look nice and are fun which is OK as my main page is a game.

But some SVG's do not look clear at the small size needed to sit next to a button.

The idea came from GIMP where the walrus mascot appears in the icons. Also my old KDE desktop has a green dragon sitting above the letters 'KDE'.

There are more tips at: bbingo.xyz/t

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