What I learnt writing a bingo game.
I have been using the 'Wave' accessibility testing tool from WebAIM'
This tool is more thorough than 'Lighthouse'.
So far 'Wave' has told me about:
h2' headers between 'h1' and 'h3' headers 'Wave' is a project at Utah State University which is supported by big tech companies and the U.S. government
I learnt a lot about how to design the HTML and CSS of a blog from starting a blog on 'blogger.com'
My own page of tips is one long list and has too many HTML elements which makes the browser slow to lay my page out.
'blogger.com' shows a paragraph for each post and shows the whole of the post when you select it.
No-one reads my new blog except me. My blog is at: 'onecenttips.blogspot.com'
the 'caret-color' CSS property changes the color of the flashing bar which shows the point at which text will be inserted
The 'caret-color' property applies to 'input', 'textarea', and text with the 'contenteditable' HTML attribute set.
If the 'caret-color' is not set then the color is the color of the 'input' element.
It seems a good idea to set the 'caret-color' on the ':focus' CSS selector.
The 'caret-color' can be animated with 'keyframes' in CSS.
This animation does not seem to affect the performance of my page. I was worried about the performance as changing the colour will not run on the GPU
my pictures of line graphs are smaller in 'PNG' format than Webp' format
'Lighthouse' said I could reduce the size of my images by converting them to a newer file format and so reduce the time it takes to download my web pages
creating a simple minimal Progressive Web App (PWA) helped me get started with this sometimes complex topic
Chrome also helps by showing lots of information about your PWA and letting you test the 'service workers'.
I learnt a lot from the course on PWA's on 'web.dev' but the course was a bit overwhelming.
After all, PWA's are quite ambitious. You add hints to a web page, borrow a little code, and magically the page turns into something that runs by itself on a mobile phone like a native app.
Now I don't need to learn two new languages to get my game to run nicely on Android phones and iPhones and iPads.
However, I had to upgrade my website to use SSL for PWA's to work.
I have now changed all my web pages so that they can run as PWA's
I added a 'div' with 'overflow: auto, max-width: 100%' around the sample code in my tips page to avoid a warning in 'Lighthouse' about the content not being sized correctly for the viewport on a mobile
If a line of code is longer than the width of the browser, this means a scrollbar appears below the code. This keeps the content within the width of the browser.
You can put the 'overflow' CSS on the 'code' or 'pre' tags if these tags enclose all your sample code.
I also say 'contenteditable="true" spellcheck="false"' on the 'div' so the code can be easily selected and the browser does not underline in red what it thinks is misspelt
There is lots more to styling sample code like colour syntax highlighting, shadows, slight rotation, and different typefaces.
I use the 'IntersectionObserver' to only show my slow JavaScript animations when they are visible
These 'observers' are simple to use
I use the 'scope' property in my 'manifest' so I can have many 'Progressive Web Apps' from one website
It seems the 'start_url' needs to end in a slash. Luckily, my pages are called 'index.html' and are in their own subdirectory.
Here is an example:
"scope": "/techtips/",
"start_url": "/techtips/",
My ''manifest' is in the top directory of my website.
I got the idea from a post on 'stackoverflow
you can see the 'theme-color' on a desktop if you create a 'Progressive Web App' (PWA)
It is reasonably straightforward to create a minimal PWA. I had to change my website to use SSL.
You set the 'theme-color' in an HTML 'meta' tag. This colors the title bar on mobiles and tablets.
You can create a 'shortcut' to a 'standalone' copy of your PWA outside of your desktop browser
Firefox says the SSL 'issuer certificate' for my website has expired
I think I need to upgrade Firefox to refresh its database of SSL certificates. But I use Firefox in my local library.
My hosting provider uses the free SSL certificates from "Let's Encrypt"
I like to add a random negative 'animation-delay' to my CSS animations to vary where the animation starts in the 'keyframe'
adding loading="lazy" and decoding="async" to images in a web page cut the time to load the page by a third
The page has about fifty 800 x 600 images.
Adding decoding="async" makes the page 'flicker' as the text is shown before the image.
I thought about adding loading="lazy" to all my images and letting the browser decide which to show. But this is wrong as the 'above the fold' images will delay the 'first content paint'
it is best to use use self-referential 'canonical' tags
These are 'canonical' tags on pages that point to themselves.This makes it clear to Google's search crawler which page you want to have indexed. For example, deciding between 'www' and 'non-www' URL's.
The 'canonical' tag for my tips page is:
<link rel="canonical" href="https://bbingo.xyz/techtips/" />
I had wrongly just put 'canonical' tags on versions of my pages that were not 'canonical'
it is best to have 'width' and 'height' attributes on 'img' tags even if they are 'responsive' and can change their size to fit the layout
I wrongly removed the 'width' and 'height' from my 'img' tags when I made them 'responsive' by adding 'max-width: 100%' and 'height: auto' in my CSS.
The browser can calculate the size needed for the image early on from the ratio of the 'width' and 'height' in the HTML before the image is downloaded
It seems quite complicated when I read about this
I learnt a lot reading about 'Responsive Design' on Google's 'web.dev' website
increasing the contrast of a blue colour made it grey
I am checking the contrast of my colours with the 'Accessibility' section of the 'Lighthouse' tool in the Chrome 'Developer Tools'.
I click on the element in the 'Lighthouse' report, go to the 'Styles' pane, click on the color box of the active rule at the top, change the color picker to 'HSL' by clicking on the control on the right, lower the 'lightness' using the arrow key, and then changing back to 'RGB' for my old browser
adding 'contain: content' in CSS reduces the time to recalculate my stylesheet by a quarter
Using 'contain: strict' makes the content disappear as I have not specified a height.
Adding 'contains' tries to stop CSS changes within that branch of the DOM tree affecting other parts of the tree, and vice-versa.
I am changing the color of the text in the header of my 'tips' page, with a transition. This takes a long time. Maybe the browser is looking through the large body
use an empty string ("") for the 'alt' attribute of a cosmetic 'img' tag
This means screen readers will ignore cosmetic 'img' tags.
I wrongly gave the penguin illustration on my 'tips' page an 'alt' attribute of 'Penguin' but the illustration is only loosely connected to the page content.
If you use an empty string as the 'alt' attribute then if the image cannot be loaded then you won't get a missing image icon on the page. At least not on Chrome or Firefox, but you still see the missing image icon on Internet Explorer 11
Edge may give another view of performance to Chrome
Chrome tried out a summary of performance missing off some of the detail.
But I could have looked at Edge which showed lots of detail about performance, the old way
Firefox shows another view of the performance of a webpage
Firefox shows clearly which functions use the most CPU
compressing all my pages had the sixth biggest impact when speeding up my web pages
I had not realized the importance of having a small initial size for a webpage to speed up page load times. The 'ighthouse' tool showed this.
I simply run my JavaScript through 'JSMin' to remove comments and unnecessary whitespace. I compiled JSMin' from source - it is a very small C program.
I will probably run my JavaScript through 'UglifyJS' when I stop making changes to my webpages. I have to go to my library to use the online ''UglifyJS'' so it is a bigger job.
I shorten 'id' and 'class' names in CSS using 'sed':
tee scsstmp.html |
sed -n -e '/style type=/,/<\/style>/s@[ ]*[.#]\([a-zA-Z][a-zA-Z0-9_] [a-zA-Z0-9_][a-zA-Z0-9_][a-zA-Z0-9_] [a-zA-Z0-9_][a-zA-Z0-9_][a-zA-Z0-9_] [a-zA-Z0-9_] [a-zA-Z0-9_]*[a-zA-Z0-9_]\) [ ]*[{,:][^.#]*@:\1:@gp' | sed -e 's/::/:\n:/g' | sort -r | uniq | nl -v150 -n rz -w 3 | sed -n -e 's/^ *\([0-9][0-9]*\)\t:\([a-zA-Z][a-zA-Z0-9_]*\):/s;\2;Z\1;g/p' >scsstmp.lst
sed -f scsstmp.lst scsstmp.html
This shell script uses 'sed' to create a file of subsitutions and then runs them against the webpage.
Finally, I squash up all whitespace with a line cf shell script:
tr '\n' ' ' <jtjsm.html | tr -s '[:space:]' >jtmm.html
I also removed old unused code to further reduce the page size
running animations that are not at the top of the page less frequently had the fifth biggest impact when speeding up my web pages
My animations are where I change the colour of the text and where I show a slideshow of images. These animations mainly use the CPU not the GPU, so have quite an effect on performance.
I also only re-create the 'keyframes' each time the animations run for the animations at the top of the page. I re-create the 'keyframes' to fine-tune the fading in and out in the slideshows
breaking functions into steps and pausing between the steps had the fourth biggest impact when speeding up my web pages
This lets the browser respond to the user's clicks and other user interactions.
This also keeps the frame-rate high so screen changes seem smooth.
This also shortens the 'long-running tasks' shown in the 'performance' tab of the 'developer tools' in Chrome.
I also stagger the start of the slideshows so that the web server does not send the pictures back all at the same time. One page has about 20 slideshows
delaying things so that the page loads faster had the third biggest impact when speeding up my web pages
The background gradients and the SVG pictures both fade in, so you do not notice that they now start after the page loads.
On page load, I now only color the text which you first see at the top of the page. The rest of the text below is coloured after a delay.
I just use 'setTimeout' to delay things
not doing animations on a phone or tablet had the second biggest impact when speeding up my web pages
Also on a phone or tablet, I do not colour the page background with changing 'radial gradients' and do not have slideshows of SVG pictures of animals fading in and out.
I check for phone and tablets by looking at the page width and the 'user agent string'.
I have now speeded up my pages in other ways to almost run these animations fine on a mobile or tablet
reducing the number of HTML elements had the biggest impact when speeding up my web pages
I had a 'span' around every letter to pass rainbow colors through the text. Now 'below the fold' it is only each line that has a different color.
I have about 1000 tips on my tips page. I have lots of links, lots of 'abbr' elements and lots of 'spans' to highlight phrases. I will have to split my tips page into lots of separate pages, one for each section.
It is as though when I change the colors, the browser checks through all the HTML elements to see if they are affected
'closures' may take up memory and sometimes slow things down
I split up a function and moved most of its functionality out of the page load, but then the page load seemed to take longer.
I used 'setTimeout's calling 'inner functions' (or 'closures') within the original function.
The original function had large arrays of colours that I suppose had to be copied into the 'closures'.
I made these large arrays global variables so now the 'closures' need only 'capture' a reference to the arrays
I was wrongly testing for a tablet by searching for 'tablet' in the 'user agent string'
I got the idea from a post on 'stackoverflow'.
But Internet Explorer 11 on Windows7 on a desktop has 'Tablet PC' in the 'user agent string'.
I have gone back to my old regular expression for a tablet:
/android|ipad|playbook|silk|kindle|nook|bntv|xoom/i
I first test for a mobile with: /Mobi/i
'freehostingeu.com', the free webhosting site, gave the error '403: forbidden web page' because the page had the forbidden sting 'itAu'
'freehostingeu.com' has automatic content filtering.
The string was in the code 'webkitAudioContext'.
'itAu' is a bank in Brazil and a unit of the FBI.
Other forbidden words have been: 'zynga.com', 'PROXY', 'porn'
Firefox may not support all the latest media queries
Firefox sometimes says 'hover' and 'any-pointer: fine' are 'false' on a desktop PC with a mouse running Windows 7.
I was trying to test for a 'powerful computer'. Anyway, a tablet with a stylus would have a 'fine' pointer. And, of course, the latest versions of Windows support 'touch'.
I am going back to testing for 'mobi' in the 'user agent string'
all uppercase Windows filenames are converted to lowercase by my very old Linux system
I download files from 'openclipart.org' using the Windows computers at my library and upload them to my web hosting platform. But I make a list in my web page on my old Linux system whose 'vfat' file system driver converts all uppercase names to lowercase. So now the web page cannot find the lowercase files on the web server
using 'openclipart.org' reminded me that you do not have to be a Linux kernel developer to contribute to free software, open-source software or creative-commons media
A small number of artists have contributed lots of clip-art for free which is very good
the experience of the pixabay' website reminded me why I am nervous about putting my game into the 'public domain'
People were creating mirrors of 'pixabay' as the contents were in the 'public domain'.
Anyway, I cannont make my game totally 'public domain' as some of the animations are derived from those with an MIT license
I changed how I check for a 'powerful computer' in JavaScript to use a 'media query'
I check for a wide screen and a 'fine' pointer like a mouse:
var windowMatchMedia = window.matchMedia;
if (windowMatchMedia) {
var mediaQuery =
windowMatchMedia(
'screen and (min-width: 700px) and (any-pointer: fine)');
if (mediaQuery.matches) {
return true;
}
}
At first, I wrongly put brackets around the whole 'media query'.
I used to check the 'window.innerWidth' and look for the string 'mobi' in the 'user agent string'.
I find it best when timing page loads to start Chrome afresh and in 'incognito' mode and write down the results.
I got confusing results when I left browser tabs open with previous results.
I exaggerate the results by throttling the CPU six times and disabling the cache
I once got the famous error message "you don't exist" after I deleted '/etc/passwd' by mistake
surprisingly, I am always the user '
This is because I need to be 'root' to run my 'X Windows' system which I built from source. Something went wrong with the permissions.
I once started deleting my system by typing 'rm -rf /' by mistake. But I stopped it and recovered the files from a backup. Otherwise, I have been OK using 'root'
it may be a good idea to give (self-executing) anonymous functions a name to help with debugging and performance tuning
Also, I code very simply and use lots of intermediate variables that are not really needed. This lets me easily add 'alerts' to show the values of the variables. This is how I debug on my 10-year old browser. My browser crashes when I use the debugger. Of course, code runs a little quicker if you do not use intermediate variables.
I wanted to check for a powerful desktop computer
My code passes a rainbow through the letters of the text and runs badly when I mimick a mobile by throttling the CPU in Chrome's 'developer tools'. There are hundreds of 'spans' around the letters and each letter has a CSS transition.
Just checking the page width works surprisingly well. I check if 'window.innerWidth' is greater than 700. The page width of an old computer in the library is just above 700 with the 'developer tools' pane showing. Both the 'Lighthouse' tool and Google's mobile testing tool are fine with this.
I then exclude mobile phones by simply searching for 'Mobi' (case doesn't matter) in the 'userAgent' string. The Mozilla documentation suggests this. I do use the large regular expression from detectmobilebrowser.com' in my game. But this has not been updated since 2014, so I don't use it here. However, there must be a reason why commercial websites check the 'userAgent' against large databases of mobile 'userAgent' strings.
I could almost exclude tablets by just also checking for the word 'android' (case doesn't matter). But I noticed that Kindles do not have 'android' or 'mobile' in their 'userAgent' strings. So I use an old catch-all test for tablets:
/tablet|android|ipad|playbook|silk|kindle|nook|bntv|xoom/i
Of course you are really meant to check some feature of the brower or perhaps time something.
There is a long post at 'stackoverflow' about detecting mobiles.
It is true what Google says about not having too many HTML elements on a page
I had a page with over 20,000 elements which took 4 seconds to load when I reduced the CPU by 4 times using the Chrome 'developer tools', to be like a mobile phone.
The page takes 2.5 seconds to load when I remove the 20,000 elements. Also, there are now less 'long-running tasks' where I change the color of text at intervals after the page has loaded. I suppose there are now less elements to check if the color change applies to them.
I can 'format' my 64 gigabyte memory stick by running 'format /FS:FAT32 E:' from Windows7's 'powershell'. But it will take over 2 hours
Windows7 will not let me use 'fat32' if I right-click on the drive icon. I need to use 'fat32' so my very old Linux system can recognise the format of my memory stick.
I cannot run other quicker formatting programs as the computers in my libraries stop this.
I have file-system errors on my memory stick that Windows cannot fix
sometimes with my old browser I need a short delay before I can 'focus' on an HTML element
I use 'setTimeout(f, 100)'.
The delay is needed after I have made the element visible with JavaScript. I suppose the browser wants to render the element before it sets the 'focus' to the element.
Chrome and Firefox do not need the delay.
Adding a short delay fixes all sorts of problems
I had to 'format' my memory stick to get rid of the file-system errors
Windows could not fix all the file-system errors.
Quick 'formatting' my memory stick took a few seconds. I had spent several hours removing files and fixing most of the errors
Chrome struggles to render CSS 'transitions' of the colors of lots of HTML elements
I pass a rainbow of colors through the letters of the words on a page. I put 'span' elements around each letter and change the color of each letter about every 3 seconds. These 'spans' have a CSS class which has a CSS 'transition' so the colors change smoothly.
But I see lots of red warnings in the 'performance' tab of Chrome's 'developer tools'. The color 'transitions' mean there are constant 'long running tasks' of over 100 milliseconds where a third of the time is scripting and two-thirds rendering the CSS.
I am going to fix this by having the 'transition' CSS rule on only a few sentences in the introduction
I read a good old book about blogging: 'The Million Dollar Blog' by Natasha Courtenay-Smith
I got it from my local library.
(I read that the man behind 'Silk Road' was caught in a library)I am going to have to delete most of the files on my memory stick which has file system errors so that Windows can fix the errors in under an hour
I got the errors when, after copying lots of files, I typed 'sync', which seemed to hang, so I killed (-9) the sync. I should have waited for the 'sync' to finish
I deleted a 'postgres' directory when I should have renamed it and waited a few weeks to see if I needed it
Part of my browser was linked to a 'postgres' library which I deleted. My browser is now missing a panel.
I wanted to free up some space.
'postgres' is a free database but I have not used it for a while
there are some top quality SVG's of flowers by Juan Pablo Enrici at: 'openclipart.org/artist/jpenrici'
The SVG's are free and in the public domain
I am going to keep open the 'console' part of the 'developer tools' window in Chrome in future as I missed an error in a page
One of the libraries I go to has wide screens so there is space for the 'developer tools' and a narrowed main window
I decided to put the initial 'focus' on my 'start game' button so I can just press 'Return' to start a game
I used 'element.focus()'. I did not use the HTML 'autofocus' as later I am goind to change the 'focus' to other HTML elements.
It seems that setting the 'focus' can be bad for 'accessibility' as the 'focus' jumps around and may even scroll the page
I lost the 'redirect' from my old free website at '000webhost.com' pointing to my new paid website at 'Hostinger'
'000webhost.com' had deleted my account and old website. I switched about 9 months ago. I had not used my old account since switching. Maybe I should have logged in regularly to '000webhost.com'.
I get the message 'The authors have deleted this site' when I try and access my old website.
Messages in the '000webhost.com' forum say '000webhost.com' may delete accounts where you have not logged in to the 'control panel' for 3 months or even 7 days.
'000webhost.com' say they send a warning email, but this may be treated as spam and not show up. I did not see an email from '000webhost.com' in my 'gmail' account.
I had a website with '000webhost.com' for abount 7 years. I would recommend '000webhost.com' as long as you are ready to put up with the many ups and down.
The cheap four-year deal I took at 'Hostinger' seems increasinly good value if we both last 4 years
some of the SVG's from 'openclipart.org' look better in a smaller size
Some of these SVG's look a bit crude in a larger size
I am going to run 'ls -R' on my backups and look for errors
Before, I was just checking two key files and missed some errors.
My memory stick with the backups has file-system errors where I turned off the power in the middle of a backup.
I make backups with 'cp -a' to preserve timestamps on the files.
I also run 'ls -R /mnt/sd/bingo49 | grep error' to find any errors
I noticed how nice it is that SVG's keep their 'aspect-ratio' and stay centred when they are resized
My SVG was in a 'div' which had its width given as a percentage and its height given in 'ems'. The 'div' goes into some strange shapes when I resize the browser window, but the SVG still looks fine.
This contrasts with bitmap images which may be stretched and distorted to fit their container.
You can even specify how exactly you want the 'aspect-ratio' of SVG's to be preserved
I forgot about the 'load' and 'error' events when setting the 'src' of an 'img' tag with JavaScript
I was fading in the image before it had been loaded.
I also forgot to set the 'error' event to 'null' in the error handler. The page went into a loop and Chrome crashed.
I also found I had to reset the 'error' event in the handler for the 'load' event
I decided to add pictures of animals to some of my pages
This is like the covers of old O'Reilly books.
This helps brighten up dry subjects like my lists of changes and credits.
I get the pictures from 'openclipart.org'.
I go through a list of pictures, fading them in and out.
There is a good quick up-to-date introduction to SVG at:
There is a much more detailed tutorial at:
A little of this is out of date and I found it hard going.
I read a thought-provoking book: 'Surveillance Valley' by Yasha Levine
The author says the internet started with the ARPANET, used by the U.S. military. The author says this was used for counter-insurgency work in Vietnam. The author says ARPANET was used to share data on protests in the U.S.
The author says Edward Snowden leaked details of the PRISM project showing that companies such as Google and Facebook worked with the U.S. government to give the government direct access to all the very detailed information these companies hold about you.
The author says the Tor project is mainly funded by the U.S. government to encourage regime change in hostile countries. The author says Tor has holes in it. The author says the U.S. government can get around Tor and Signal by hacking your mobile phone.
The author says Tor and Signal give people a false sense of security and so prevents the regulation of Google and Facebook's data collection.
I got the book from my local library
It is good to have a dream even if it does not come true
Ten years ago, when I started writing my game, I hoped it might lead to some work.
My aim was to learn the language and have something to show for it.
I do not think it will lead to any work. My concentration and eyesight are poor.
But it is good to have a hobby. It takes your mind off your worries.
But I have become very shy spending so much time on my computer.
I support browsers until they are no longer used in the libraries I go to
Until a frew years before Covid, my local libraries had Internet Explorer 6 running on Windows XP.
Now, just after Covid, most of my local libraries have Internet Explorer 11 running on Windows 7.
One branch of my local libraries has just got new computers with the Edge browser.
My libraries also have Chrome and sometimes Firefox.
Web pages load slowly and animations are not smooth on the old library computers.
I have a library card for a neighbouring area where I used to work, so I use their computer too
JSMin cuts off the end of my regular expression: /bbingo\.xyz\/.*[^\/].*\//i
JSMin thinks there is a comment, //, at the end. But Chrome just sees the regular expression.
I changed it to: /bbingo\.xyz\/.*[^\/].*[\/]/i
The regular expression ohecks if the file is in a sub-directory of my website 'bbingo.xyz'. It looks for 2 slashes with something that is not a slash in-between. I check 'window.location' against this regular expression.
An address of 'bbingo.xyz/t' gets changed to 'bbingo.xyz/t/' somehow.
JSMin is a simple minifier, removing comments and spaces
I think I have finally found a way to nicely animate a flag to make it look as if it is blowing in the wind
I can use SVG SMIL animations and the 'feTurbulence' and 'feDisplacementMap' filters.
I got the idea from an answer to a question on Stack Overflow.
I don't think this will run on the GPU though
I am going to create sub-directories in my 'images' directory on the web-server
I should have done this sooner.
For example, I will have a sub-directory 'birds' for SVG's of birds.
There are too many files in the 'images' directory which might slow access to the files.
I might also have different files with the same name. I am collecting lots of SVG files from other websites and some just have a long number as a name like '1442343646.svg'.
I created sub-directories for my sound files using the first letter of the filename. But there are still too many files in some of these sub-directories. I got this idea from the layout of Linux 'terminfo' files.
the number of downloads of my game from Sourceforge varies more than it used to
Sometimes I panic when there are no downloads in a week. But then the downloads get into double figures which is very good for me
Sometimes I forget that there are other downloads from other sites such as 'download.com'
sometimes I think my game might be more popular if it ran nicely on mobiles as well as the desktop
Sometimes I think of 'xearth' a beautiful animated background of the sun shining on the Earth. It runs on X Windows which is less popular these days.
I was hoping that the screen sizes on mobiles would one day be large enough to run the tablet version of my game
find a method of developing that suits you and your circumstances
During the covid lockdowns, I programmed for several hours during the night, attempting big tasks. Now, I code a little at a time, maybe for 20 minutes at a time and just an hour in total in an evening
I have seen the trend for 'agile' development come and go. Object-orientated development was popular, now less so
when writing code, you keep it simple and get something working quickly. Graphic design and art takes much longer
I am probably going to spend a year working on an animation. I have spent several months working on a coloured background for my game
another way to add a tip to an inline SVG is put the SVG in a 'div' element and put the tip on the 'div'
if I want a tip on an inline SVG then I have to add a 'title' tag to the SVG
I make sure the 'title' tag is the first child of the SVG. This is to work with old versions of SVG.
I dynamically add the 'title' tag to the SVG:
var titleElement = document.createElementNS(
'http://www.w3.org/2000/svg',
'title');
titleElement.innerHTML = freedomSaying;
internalIndexImage.insertBefore(
titleElement, internalIndexImage.firstChild);
It seems I have to use 'createElementNS'
the tags are formatted nicely by some drawing programs that generate SVG
The end of the tag is on a separate line making it easier to add and remove attributes:
<svg
id="svg2"
version="1.1"
>
I may try this for my HTML tags
maybe there is a limit to the magic of the GPU (perhaps the memory of the PC and GPU)
A JavaScript animation of the color of text (using 'setTimeout') stuttered when I had 2 CSS animations of the opacity of the background of the whole page and the opacity of an image taking up about a quarter of the page.
The 2 CSS animations should run on the GPU but the JavaScript text animation will not run on the GPU.
I change the opacity to just fade in and out different radial gradients on the background of the page and to fade in and out the different images.
This was on a modest PC in my local public library.
I improved things by changing the animation of the image to just change the opacity briefly at the start and end of the animation rather than all the way through the animation
I am going to use small 10 gigabyte memory sticks for backups
I takes too long to check and fix the file system on my 64 gigabyte memoery stick
it really is best to check if you can restore from your backups, like people say
I was clearing out old backups on a memory stick and found I could not delete some because the file system was corrupt
I read a good book: 'Facebook The Inside Story' by Steven Levy
I found it in the business section of my local public library.
It is a bit biased as it was written with the cooperation of Facebook
Facebook wrote its mobile app in native code after first trying HTML5
I like the 'easeOutBack' easing function on 'easings.net'
I use this easing function on an animation of a spider. The spider comes down the screen, slowly stops and then bounces back up a it
if I 'move fast and break things' then I worry when things go wrong
This is one of Facebook's mottoes.
Other Facebook slogans have been:
'wikiquote.org' has some good quotes with a Creative Commons license
'brainyquote.com' has better quotes but they are only free to use for personal use
I fade in and out the coloured backgrounds of my pages because the lightness of the colours is different on the computers I use
This means the coloured background is not too dark for too long.
I vary the 'opacity' in a CSS animation. The backgrounds are radial gradients. The lightness is different on the computers in the two libraries that I go to
I have started using 'hsl' (hue, staturation and lightness) colours a little
Here is a color wheel:
background: conic-gradient(
hsl(360, 100%, 50%),
hsl(315, 100%, 50%),
hsl(270, 100%, 50%),
hsl(225, 100%, 50%),
hsl(180, 100%, 50%),
hsl(135, 100%, 50%),
hsl(90, 100%, 50%),
hsl(45, 100%, 50%),
hsl(0, 100%, 50%)
);
I wrongly changed 2D 'transforms' to 3D ones in a CSS animation to get them to run on the GPU
It seems 'transforms' and 'opacity' in a CSS animation always run on the GPU.
Forcing JavaScript animations onto the GPU may slow them down as the CPU has to build a picture and send it to the GPU using lots of memory
I thought I would have some fun colouring and animating the text and background of my web pages as not many people look at them
I am also going to animate the 'title' of the pages as they do not appear high up in the rankings of search engines anyway.
I am also going to add some SVG pictures that I like
I wrongly assumed my game would always have a white background
I had lightened colours by reducing the opacity in 'rgba' colours. I had made the shape of the thorns of a rose by overlaying white blocks.
I now have a background made of light coloured radial gradients
there are 'conic-gradient's in CSS
They are like radial gradients, but the colours change as you go round the centre point.
There is a lot more to radial gradients than I realised, like 'farthest-corner' and steps
I added 'viewBox' properties to a few SVG's that did not scale nicely
I set the dimensions of 'viewBox' from the 'width' and 'height' properties.
The SVG's were the 'src' of an 'img' tag. I wanted to preserve the 'aspect ratio'
I used 'calc' in CSS for the first time:
left: calc(50% + 10px)
and:
left: calc(100% - 0.2em)
I used the easing functions at 'easings.net' again
I read a good book about Artificial Intelligence (AI) going wrong
The book is 'You look like a thing and I love you' by Janelle Shane.
The book made me realise you can try out 'machine learning' for yourself these days. I am going to put my list of names into an AI and see what new names the AI comes up with
you can animate the title in the browser tab (or window title) by setting 'document.title'
I first tried setting the 'innerHTML' of the 'title' tab, but this does not work in Chrome.
I put a smiley in the page title and slowly change it. If I change the title quickly then the browser tab (or window title) changes in length which is a bit distracting.
I have read it is bad form to animate the page title.
I got the the list of smileys from the Linux 'smiley' program
I simulate 100,000 games of bingo to find out the average number of balls to get a 'line' or 'house' for a given number of players. But only about 1000 games are needed
I read a good book about Cambridge Analytica using data from Facebook to target ads at specific groups of people and help elect Donald Trump and promote Brexit
The book is 'Mindf*ck' by Christopher Wylie, the whistleblower.
You probably would not use Facebook after reading this book, at least with your real name
I added an SVG landscape as background to the first page of my game
I first looked at the SVG's at 'freesvg.org'. But the SVG's come from 'openclipart.org' so I looked there as well. The 'freesvg.org' website was created when 'penclipart.org' was under attack and unavailable. The 'openclipart.org' website is sometimes slow to load its images on the old computers in my library.
Some of the SVG's on 'openclipart.org' are based on images at 'pixabay.com' which seems a good website for free images, videos and music.
I added 'preserveAspectRatio="none"' to the 'svg' tag to make the SVG's fill up the whole screen. In the CSS, I had 'width: 100%; height: 100%'.
I said 'preserveAspectRatio="xMidYMax meet" to scale an SVG keeping to the aspect ratio and placing the SVG at the bottom of the screen.
I removed the 'inkscape' and 'sodipodi' tages to reduce the size of the SVG's I included inline in my game. I also include larger SVG's as external files using the 'src' attribute of the 'img' tag
it is a good idea to call 'preventDefault' at the start of a 'click' event handler on a link, rather than at the end
I had an error in my event handler that caused the handler to stop before it got to my call to 'preventDefault' at the end of my handler. So the default action occured which meant the browser followed the link which loaded another page.
I also put a 'try catch' construct around my event handler's code, just to be sure no error pops out
my paid hosting provider 'Hostinger' is not perfect
Sometimes my pages don't load first time and I have to reload.
But the service is not down for days like their free hosting '000webhost.com'
my paid hosting provider 'Hostinger' lets me look at the access logs from their webserver
I was surprised to find someone actually playing my online game. I thought nobody played it apart from me
Chrome lets you change the 'title' tip of an HTML element whilst the tip is shown
I change the 'title' from JavaScript.
Chrome fades out the old value for the 'title' and fades in the new value, taking about a second. So if I update the title every second, the title seems to flash.
Firefox and Internet Explorer 11 do not show the change to the 'title'
I am going to update the 'title' on a progress bar with the current value which changes about every 3 seconds
I set 'pointer-events: none' in CSS to let mouse clicks pass through an HTML element
For example, I am working on an animation of a ladybird. The ladybird sits on a 'stage' that completely covers the screen. This is partly so I can say 'overflow: hidden' in the CSS so I do not get scrollbars when the ladybird flies off the screen. But the ladybird is in front of the rest of the page. The 'stage' would stop me clicking on items behind the 'stage'. So I put 'pointer-events: none' on the 'stage' and now mouse events pass through to elements behind the 'stage'
The value for 'pointer-events' is inherited by child elements.
I say 'pointer-events: auto' on the ladybird so that its 'title' tip is shown when the mouse is over it
Chrome crashed when I tried to change the colors of 25000 'spans'
Chrome gave me the 'aw snap' message.
I had put 'span' elements around all the text on a page, so I could pass a rainbow through the letters. I only changed the colors every 3 seonds.
However, Chrome was still responsive with all the 'spans', letting me scroll through the page. Whereas, with Firefox, the scrolling was sluggish. Even without changing the colors, the scrolling stuttered on Firefox.
I decided to just color the text in the first few sections at the top of the page
my very old Konqueror browser does not create a 'text node' when there are spaces and a newline between a 'table' tag and its 'caption' tag
Chrome, Firefox do create a 'text node'.
I squashed up the HTML by removing the spaces and newlines.
I was trying to navigate the nodes using 'firstChild' and 'nextSibling'.
The same thing seems to happen between 'thead' and 'tr' tags
there were no downloads of my game on Sourceforge one week
But Chrome said the SSL certificate of Sourceforge was invalid. You needed to choose the 'advanced' option on Chrome to download my game
all plain text in a sequence is put into one 'text node in HTML even if it is across several lines
I put a few files on a memory stick so I could put live the next version of my game at short notice
I tried to only think about when I would go live when I was testing my game
I was worried about another lockdown closing the libraries where I access the internet
I did not fix most bugs that I found when testing a release
Instead I just added them to a list.
I wanted to make the release as soon as possible.
I will have more time later to better fix the bugs. I did fix a few easy bugs, but I did not include the changes in the release.
Some of the books I have read say that users want to see quick improvements even if there are some bugs left in
I read a thought-provoking book about how companies on the internet collect data about you
The book is 'The Trust Manifesto' by Damian Bradfield, co-founder of WeTransfer. I borrowed it from my local library.
He says you do not need to be a bad company to be successful on the internet. It made me think about why people write Free Software
I find background music with a bit of a beat and insistent tone is best
Some of the classical music is too gentle and does not show up against the sound of the caller reading out the numbers.
Some of the free classical music from the 'musopen.org' website varies a lot in volume
a good book suggests writing passwords down in a notebook kept at home
But the book says it is better to use a 'password manager'.
The idea is to avoid reusing simple passwords that are easy to remember.
The books suggests using a simple transformation such as changing lowercase to uppercase and vice-versa.
The book suggests keeping the notebook in a locked drawer.
I write down my passwords on a piece of card I keep in my bag which I take with me everywhere. I have left it by mistake in the library and nothing happened.
The book is 'Confident Cyber Security' by Jessica Barker
my very old Konqueror browser puts tag names in uppercase when I look at the 'innerHTML'
Chrome, Firefox and Internet Explorer leave them in lowercase
I bought the domain name of my website for one pound from 'NameCheap.com' but it costs ten pounds a year to renew
I got a 'Bad Request', '400' error when using Ajax on my hosting provider, 'Hostinger'. This was because I had a range header of '0-'
I had added the range header to try to stop Firefox getting partial content.
I did not get the error from their free hosting service, '000webhost.com'. Maybe the free and paid hosting use different web servers. Hostinger uses the 'LiteSpeed' web server whereas '000webhost.com' probably use Apache
I use 'ftp' in the file manager on Windows7
I type 'ftp://' in the address bar. It says the passwords are sent as plain text. The file managers of my hosting provider 'Hostinger' do not always work, so I use 'ftp' I bought the domain name of my website from 'NameCheap.com' because they provide better privacy. The contact details on the 'whois' record are their registars and not mine
You can find out the name, address, phone number and email of the owner of a website by looking at the 'whois' record.
I tried to buy the domain name from my hosting provider, 'Hostinger', but the registrar rejeoted my contact details as I had made them up. Hostinger offer to keep your contact details private, but the details can still slip out. Hostinger charge for this.
I 'pointed' my domain name on 'NameCheap.com>' to my hosting provider, 'Hostinger', by setting the domain name servers in NameCheap's records to be the domain name servers of 'Hostinger'. I then let 'Hostinger' know and they adjusted their records too. The changes then propagated across the internet. I did try to 'transfer' my domain name but this is the wrong thing. I also tried to set a 'personal name server' but this is wrong too.
NameCheap.com< are keen for you to use two-factor authentification to access you account, like an online bank.
Hostinger's starter hosting plan is a little cheaper than NameCheap.com's. I paid for four years hosting to get the best price. After all, I have used their free hosting, '000webhost.com', for ten years.
Hostinger copied all my files (200 megabytes) from their free hosting service, '000webhost.com'. I asked their helpdesk to do it. It would have taken me months to do this myself. The helpdesk also re-directed my website on '000webhost.com' to my website on Hostinger
if I put curly quotes in HTML, like '“line”', then the 'innerHTML' shows a single quote character for each curly quote
But Chrome and Firefox leave a ' ' in the 'innerHTML' as it is in the HTML. These browsers show the corresponding Unicode character ' ' as ' ' in the 'innerHTML'. My very old Konqueror shows both types of ' ' as just a space in the 'innerHTML'
my free hosting provider '000webhost.com' said my account was blocked due to a third-party complaint
My website said it was sleeping.
I emailed the moderator. I did not send the identity documents they wanted.
After a few days the account was OK again.
The moderator said I had exceeded the 300 megabyte limit on disk space. I had not. But I have 'MP3' and zip files which the moderator said are not allowed.
I cannot see any mention of 'MP3' and 'zip' files in the terms of service of '000webhost.com'. There is a clause where you agree not to infringe the rights of other people.
I think I will upgrade to a paid plan. If people play the online game with sound then the bandwidth limit can be exceeded. The sound is played from lots of small files. Maybe I lost my nerve as my account on '000webhost' works fine now
if a game is to be successful then it has to be one of the best in the world, which is quite hard to do
I try not to hurry
During the lockdown I had lots of time.
I have the rest of my life to make changes to my game
sometimes I 'kill' my old browser when I am finished
My browser can take a few minutes to exit after playing my game which is about 10 megabytes in size. Maybe Linux is swapping out memory. I only have 128 megabytes memory on my 20 year old computer.
I have to remove files from my browser in '/tmp' afterwards
I failed the LinkedIn JavaScript quiz, even after 10 years of coding in JavaScript
I was not able to get a badge because I do not use new features of JavaScript like 'map', 'export' and 'static'.
My browser is over 10 years old and my computer is over 20 years old.
Still, my experience shows you do not need to use the new features of JavaScript.
There are answers to the quiz on the web. But the answers did not seem completely up-to-date
I got lots of errors when I put the output of the 'UglifyJS'' minifier through the 'JSHint' code analyser
There were lots of missing semicolons. I suppose the output of 'UglifyJS' does not follow the style rules of 'JSHint'.
I was able to get a list of undefined variables from 'JSHint' by adding more 'relax' options and inreasing the maximum number of warnings. I usually mean the undefined (global) variables to be faster local variables.
The source code of my game (about 10 megabytes) is now too large for the online JSHint', even if I first put the source code through 'JSMin' to squash up white space.
Missing semicolons can stop the output of 'UglifyJS' from running. 'UglifyJS' removes all newlines which may mark the end of statements. So I wrote a program to remove most newlines from the source code. This shows up missing semicolons when the game is run. Normally 'JSHint' would point out the missing semicolons
you can pass anything as a parameter to the function 'clearTimeout'
This is useful if you are not sure if you have already cleared a timeout - you can just call 'clearTimeout' on the timeout anyway
I used to use very long names for variable and functions but the code was difficult to read, especially when the lines were wrapped in my editor
For example:
if (this.showingWarningAboutMissingoutPlayersWhenTooManyHouseOrL
ines) {
this.selectorForTextColorOfWarningAboutMissingoutPlayersWhen
TooManyHouseOrLines.setRandomStart();
if (animatetextColor) {
this.addTextColorToWarningAboutMissingoutPlayersWhenTooM
anyHouseOrLines.setColor();
}
}
Now I use shorter names, like people recommend. For example:
_.addTextColorsToWarnPressIBoxContBut =
This would have been:
_.addTextColorsToWarningToPressInformationBoxContinueButton =
Of course, the shorter names are less descriptive
I changed most of the black text in my game to color
I thought it is a game and should be fun so I use color.
I try to have the text always changing color. I try to use CSS transitions. It is hard to use transitions if the text also has a 'hover' color where you want an immediate change in color. So sometimes I just use my own detailed rainbows rather than using a transition.
Sometimes you see the transition on the first change from black to a color. So I have a small delay before adding the stylesheet with the transition, using a 'setTimeout'.
I use simple 'setTimeout's to loop and keep changing the colors.
Sometimes I color each letter in the text differently. I dynamically add HTML 'spans' around each letter.
Even my old browser is quick to change colors. I suppose browsers do not need to reflow the layout. I use closures to hold onto the HTML elements and colors to keep things quick
I tried programming at night during the summer
I wrote some amazing code but I found it difficult to sleep in the morning because of noise from the neighbours, workmen and dustmen
you can use percentages in 'rgb' colours, even fractions
For example: 'rgb(100%,50.5%,100%)'
I have been reading some PDF's of old books I found free on the web:
'CSS The Definitive Guide' by Eric A. Meyer
Surprisingly readable despite going into great detail
'CSS Cookbook' by Christopher Schmitt
This gave me lots of ideas and includes a U.S. flag made with CSS
'The CSS3 Anthology' by Rachel Andrew
An introduction to CSS. Fond memories for me as this is where I started
'Smashing CSS3' by Eric Meyer
A more advanced guide to CSS, surprisingly up-to-date
'Best of Nine Smashing Years' from Smashing magazine
A variety of articles. I liked the one on the psychology of web design
'Maintainable JavaScript' by Nicholas C. Zakas
Some interesting parts despite being meant for large projects
'Programming the Mobile Web' by Maximiliano Firtman
I wish I had read this before developing a version of my game for tablets
I used Google search. Watch out for traps: maybe just click on PDF's not links or buttons. Of course, you are really meant to buy the books