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
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
There are more tips at: bbingo.xyz/t
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.
I use the optimizer at: 'jakearchibald.github.io/svgomg/'. The W3C HTML validator points out the conflicts.
The Node.js tool 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.... read more
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. ... read more
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.... read more
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.
There are more tips at: bbingo.xyz/t
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:
https://codepen.io/nikkk-me/pen/abvPjeG
There are more tips at: bbingo.xyz/t
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. ... read more
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. See: 'css.gg/youtube'.
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.... read more
URL fragments (or 'hashes') on a page would not work until I fixed some invalid HTML.
I used the W3C validator at: 'validator.w3.org'.
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.
There are more tips at: bbingo.xyz/t
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.... read more