-
Custom 404 error page
I have been enjoying adding a custom 404 error page to my website
Google's Search guide recommends a custom 404 page. I made a page with links to the valid pages.
I used CSS rotations and scaling.
The HTML editor of my hosting provider, Hostinger, does not allow 'meta
' tags. I used a CSS media query to adapt the page for mobiles as I could not use the 'viewport
' meta tag. This editor works best if you add a bit of code at a time rather than trying to paste in a whole page
-
Very big border-radius
I was puzzled by some CSS with a very large 'border-radius
'
But a 'border-radius
' of more than half the width of a square is treated as a 'border-radius
' width of a half the width, which makes a circle.
There might be a CSS rule with a large 'border-radius
' that applies to many square elements of various sizes
-
Pause CSS animation with do-nothing keyframe
I can pause a CSS animation by creating a 'style
' element with a 'keyframe
' of the same name that does nothing
If the new 'keyframe
' does something different then both Chrome and Firefox immediately change the animation
-
Article tag
I am putting each tip on my tips page in an 'article
' tag
The 'article
' HTML5 tag is for self-contained content.
I add an 'h3
' heading below the 'article
' tag with a title for the tip. Unfortunately, I am going to have to make up titles for about 1000 old tips. I hide the heading with 'display:none
' so only HTML5 outliners see it.
I have started reading Google's guide to how to improve a website's ranking in its search results. The guide is at:
I want to find out why my tips page does not appear in Google's index. This is somewhat ironic
-
Get random value in range
to get a random value, say from 17 plus or minus 3, I can say:
20 - Math.random() * 6
I was saying:
d = Math.random() * 3;
if (Math.random() < 0.5) {
d *= -1;
}
v = 17 + d;
-
I had to rename my 'sitemap' file to get around Google's search saying it could not fetch it
I renamed 'sitemap.xml
' to 'sitemap2.xml
'
-
if I set the colors of scrollbars using properties like 'webkit-scrollbar
' then my single-item 'select
' is not colored and the 'select
' behaves strangely
If I make it a 'multiple
' 'select
' then the colors and behaviour are fine.
I fixed this by excluding 'selects
' with CSS selectors like:
:not(select)::-webkit-scrollbar
-
I got a surprise when I pressed the back button and my page set the checkboxes to their previous values
I could turn this off by saying 'autocomplete="off"
' on the checkboxes. Instead, when the page loads, I look at the 'checked
' values and run the relevant actions.
Firefox also 'autofills' the checkboxes when I refresh the page.
There is a discussion of this at:
This is also discussed on 'stackoverflow.com'
-
I realised that I can see the compiled HTML and CSS on 'codepen.io' where examples use preprocessors
There are options in the menus I get from the 'down arrow' icon in the top right corner of the HTML and CSS editors
-
I had my first go at 'visually hidden text'
This is content that is meant for screen readers but which is not visible on the screen.
I had an icon as the label for a search term 'input
' field. The 'Wave' accessibility testing tool pointed out that the label had no text.
One solution is add some text to the label but give the text a '1px
' size with 'overflow: hidden
' and 'clip
' it.
This is discussed at:
'webaim.org/techniques/css/invisiblecontent'
and, of course, on 'stackoverflow.com'
-
I have had a bug twice where content will not overflow outside its container. I forget that I had set 'contain: content
' in the CSS
'contain
' in CSS isolates a part of the HTML allowing the browser to speed up the rendering partly by stopping content overflowing into other areas. .
I was changing the color of each letter of the text with Javascript. I wanted to separate this from the large main content of the page which did not change. So I added 'contain
'. It made a small diference
-
if I use a near-black background for 'dark mode' then I can have more colorful foreground colors
Otherwise, if text is to be clear then I need almost white foreground colors for dark-but-colorful backgrounds.
Things can get a bit scrappy when I am changing lots of colors for 'dark mode' when I am changing old code I do not quite remember.
I think it will take all year to change my game to offer a 'dark mode' - truly a labour of love
-
the example code on the 'w3schools.com' website is copyrighted with no open-source license
I used their code for a CSS switch. I had to start somewhere.
I am going to change to use code from 'codepen.io' which has more interesting CSS switches anyway. 'codepen.io' uses an MIT license. I might try to vary the switches shown using various designs
-
I am doing my search icon using CSS from the 'css.gg' website
There are lots of nice CSS icons at 'css.gg'.
An SVG icon might be simpler but my old browser does not show SVG images in HTML
-
the scroll-bar lags behind my mouse movements if I use the '-webkit-scrollbar
' properties
This happens when I have many JavaScript animations and a long page.
This happens even with the latest version of Chrome on Windows 10
The '-webkit-scrollbar
' properties let you color the scroll-bar or use patterns.
I am going to show a custom scroll-bar after about a minutes on pages where the lag is small
-
I enjoy looking at the animations by Yusuke Nakaya on 'codepen' at 'codepen.io/YusukeNakaya'
I look for animations that can run on the GPU during my game. These are CSS animations that use 'transform
' and 'opacity
'.
I put a few animations together that I find on 'codepen'. I try to make them more random and make them fit on different screen sizes. I learn about the animations as I make changes.
The animations on 'codepen' have a MIT license
-
I now turn on my animations if there is a wide screen and not a 'coarse' pointer'. I used to check the 'user agent string' for 'Mobi
', 'Android
' or 'iPad
' etc
A 'coarse' pointer is a finger on a mobile or tablet.
I also check for 'prefers-reduced-motion
' and 'prefers-contrast
'.
I also check 'userAgentData.mobile
' on Chrome.
I am going to check the screen size using a media query as well.
My media query for mobiles in my CSS is now:
@media (max-width: 699px), (pointer: coarse)
The comma in the media query above means 'or'. In the above, I am trying to include mobiles or tablets with wide screens
-
implementing 'dark mode' with 'invert
' on the 'html
' tag does not seem to work on the old Firefox used in my local libraries
This version of Firefox does not invert the background. This Firefox just inverts the elements you add. The Firefox developers feel they are following the specification.
Using 'invert
' when there is an 'overlay' scrollbar on Chrome sometimes makes the scrollbar disappear. I am using the last version of Chrome on Windows7. I understand 'overlay' scrollbars have been removed from the latest versions of Chrome. Of course, a dark scrollbar on a black background does not make sense. So I would need to use 'color-scheme
' to change the color of the scrollbar. But 'invert
' does not work well with 'color-scheme
'. I could not set the colour of this 'overlay' scrollbar with properties like '-webkit-scrollbar-thumb
'.
So I am going to have to implement 'dark mode' by setting the colours one by one.
In my game I darken background colours by reducing the 'red', 'green' and 'blue' values by a half. I lighten text colours by increasing the 'red', 'green' and 'blue' values by a half of '255' minus the value.
In my game I am going to offer the choice of implementing 'dark mode' by changing all the colours one-by-one or by using 'invert'. I will put in a warning that 'invert
' may not work on Firefox. I use 'hue-rotate(180deg)
' with 'invert
'. This keeps the colours more or less the same. but I also 'invert
' some element again to retain their true colours.
The public libraries in a neighbouring town do not have Firefox installed at all and just offer Edge and Chrome on Windows 10
-
I enjoy looking through the example code at 'w3schools.com/howto'
For example, I was looking for an SVG for a 'hamburger' menu icon before I saw a 'howto' making a 'hamburger' icon with just CSS and HTML
-
I cannot tell if the user really wants a light color scheme or the default just applies
There is no longer a 'no-preference
' value.
There is a good article at 'web.dev/prefers-color-scheme/'. I wish I had read it first.
You can use transitions on filters such as 'invert
'. They look very nice and do not seem to slow things down.
I am going to try inverting the colors on my web pages at intervals. This may be annoying. But I can experiment because very few people look at my pages
-
release late and less often
I did not release a new version of my game last year but recently the number of downloads on SourceForge has gone up ten times.
Maybe this is because Google's search now finds a third-party link to my list of first-names.
Or maybe because I now post my tech tips on SourceForge, Facebook, LinkedIn and blogspot.com.
Or perhaps because I have made my tips, probabilities and idioms pages more mobile friendly
-
red text on a white background does not have enough contrast
In other words, red text has a contrast ratio of less than 4.5:1.
I coloured red the first letter of paragraphs.
I now use a darker red: 'rgb(235,0,0)
'.
I check the contrast of colours with the 'Wave' tool from 'webaim.org'
-
having over 30 IntersectionObserver
's on one of my pages does not slow the page down
I show a carousel of images next to each section when the section is visible.
Before I added observers, all the carousels were running all the time. All these animations was slowing the page downa a little.
It was simpler for me to code each observer to observe just one target element
-
for my quick 'dark mode' I say 'hue-rotate(180deg)
' as well as 'invert(100%)
'
Inverting colors makes the strongest of the red, green and blue channels the weakest, changing the color or 'hue'. If you rotate the color wheel by 180 degrees, you get back to something near the original color or 'hue'.
I tried reversing the order of 'invert
' and 'hue-rotate
' when I invert images again. But the order did not seem to make any diference. If I invert images again then I do not seem to get back to the exact original colors.
I tried reducing the brightness after inverting the colors but this reduced the contrast of the text.
For my game, I have started on a custom 'dark mode', changing all the colors rather than using a quick 'invert
' filter. If I make the colors lighter or darker rather than inverting then I can keep much closer to the original color scheme. But this is going to take me a long time. So I am also working on a 'dark mode' with an overall 'invert
' but also borrowing some of my custom colors and inverting them again so they show through
-
I added a check on 'navigator.userAgentData.mobile
' as well as searching for 'Mobi
' in 'navigator.userAgent
'
But I did not need to, as the high-level browser information will still be in the 'userAgent
' string when Chrome reduces the information in the the 'userAgent
' string.
All the information in the old 'userAgent
' string can be used to uniquely identify you so Chrome is reducing the information.
Firefox does not support 'userAgentData
'.
Still, 'userAgentData
' offers another way of testing for mobiles on Chrome. I do not want to run animations on a mobile even if the mobile has a wide screen and supports the animations. You are really meant to use feature detection and responsive design
-
it is easy to delete the wrong files on my website when using the FTP in Windows File Explorer
But it is also easy to make backups of my website with FTP.
I selected a few files to delete but I still had my 'images
' directory selected so I deleted lots of my images by mistake. I am going to delete just one file at a time in future when using FTP.
It takes one and a half hours to backup my one gigabyte website using FTP. My cheap hosting plan with 'Hostinger' does make weekly backups but I cannot access the server where the backups are from the computers in my library - a DNS problems maybe.
I can now easily switch to another cheap introductory offer with another hosting provider now I have my own backups
-
I find the text is clearer if I set the text to be bold when I setup 'dark mode'
I say: '* { font-weight: bold; }
'
-
I have just finished reading the very good CSS tutorial on Google's 'web.dev' at: web.dev/learn/css/
It brought me up-to-date and gave me lots of ideas
-
I have been trying to make some SVG's have transparent backgrounds
I could just remove a white 'rect
' in a small number of cases.
More often, I had to remove a white 'path
' going from the outside edges to around the figure.
Sometimes this 'path
' is off-white like '#fefefe
'.
However, sometimes a white background is needed to show through inside the figure, like for the whites of eyes.
Sometimes a white background is needed as a black figure will not show up against a black background, like for a black cat.
I found it is a good idea to comment out parts of the SVG with XML comments ('<!--
', '-->
') rather than remove the parts, in case I make a mistake.
I have a black background when the user wants 'dark mode'. I invert the 'html
' tag and then invert again the SVG images to get back to the original colors. I use the CSS 'invert
' filter.
The SVG's are of animals and are from 'openclipart.org'
-
I am creating 'cut-down' copies of my web pages which perform better, are more accessible, and which put mobiles first
These 'cut-down' pages have much less content. The tips page just shows the latest tips, for example.
I remove all the JavaScript animations and CSS animations from the 'cut-down' pages.
I change some colors to have more contrast in the 'cut-down' pages.
I remove any index and any search boxes from the 'cut-down' pages. I will add them back when I have learnt how to do 'slide-in' options for mobiles.
I add a link in the 'cut-down' page to the original page.
I rename the original page and make the 'cut-down' page take on the orignal name of the original page. Now all external links, like Google's search, point to the 'cut-down' page.
However, my most popular page is an old-fashioned page with lots of animations, badly contrasting colours and badly spaced-out elements. The page is best viewed on a desktop computer
-
when I would rather read the paper, I tell myself I will just do some programming for an hour
But often I end up spending several hours programming.
I sometimes end up readng the paper while waiting for my browser to load my game, which takes a few minutes on my 20-year-old computer.
I try not to do too much programming all at one time, so I don't get bored with it. I try to a little at a time, but aim to carry on doing it for many years
-
I thought a CSS animation with a duration of 3 milliseconds was too quick. But maybe I was wrong
I thought our eyes could see changes at up to about 60 frames per second, meaning a minimum animation duration of about 16.666 milliseconds. On the computers I use, Chrome uses a frame rate of 60 per second.
But there are monitors with refresh rates of 144Hz and 240Hz, which Chrome supports.
Also our brain can improve on what our eyes see. And some people can see the flicker in lights. And our peripheral vision is better at seeing motion.
The animation was of a flame flickering
-
I find I do not need to fully understand how a fix to a program works
Sometimes it's a bit like magic.
I have to start somewhere and I understand more as I work on that part of the program.
I find many bugs as I develop new features rather than through testing
-
it really is best to set colours in CSS and not JavaScript
Then I found it is easy to change to a high-contrast colour palette by just creating a stylesheet to override the normal colours.
The idea is you change colours by addng a CSS class rather than setting the 'color
' property of an HTML element.
But sometimes I calculate colours in a range between two colours or calculate the effect of overlaying one semi-transparent colour onto another. Here, I think it would be too long-winded to put the colours in CSS rules. But this means I have to re-colour all the parts of the boards in my game when I change to a high-contrast palette.
One good thing I had done was to have lots of options on a settings screen to change aspects of my game. So when I change to a high-contrast paletter all I have to do mostly is to run the code that runs when an option is changed. By contrast, some people say you should show the user just a few options.
Another good thing about adding a high-contrast palette was that it got me back into lots of old code.
I dynamically create stylesheets a lot, a bit like this:
var stylesheet = document.createElement('style');
var mHeadElement = document.getElementsByTagName('head')[0];
mHeadElement.appendChild(stylesheet);
And it is similarly easy to remove these stylesheet afterwards
-
my cheap hosting plan with Hostinger does not offer SFTP (SSH File Transfer Protocol)
My cheap plan costs about one dollar a month for four years. To get SFTP I have to upgrade to a $10 a month plan which is currently on offer at $3 a month.
I am using FTP because the computers in the libraries where I use the internet cannot reach the server with Hostinger's new file browser.
I understand FTP sends passwords and data as plain text, unencrypted, which is not secure
-
there are some good quotes from Steve Jobs at 'wikiquote.org'.
Here are some:
- "I would trade all of my technology for an afternoon with Socrates"
- "Real artists ship"
- "Do you want to spend the rest of your life selling sugared water or do you want a chance to change the world?"
- "It's more fun to be a pirate than to join the Navy"
- "The only problem with Microsoft is they just have no taste"
- "We hired truly great people and gave them the room to do great work"
- "The management philosophy here really is to give people enough rope to hang themselves"
- "You've got to start with the customer experience and work backwards to the technology"
- "Nobody has tried to swallow us since I've been here. I think they are afraid how we would taste."
- "It looks like it's from another planet. A good planet. A planet with better designers"
- "A lot of times, people don't know what they want until you show it to them"
- "The system is that there is no system"
- "We made the buttons on the screen look so good you'll want to lick them"
- "There are sneakers that cost more than an iPod"
- "We used to dream about this stuff. Now we get to build it. It's pretty great"
- "Pixar is the most technically advanced creative company; Apple is the most creatively advanced technical company"
- "I make 50 cents for showing up and the other 50 cents is based on my performance"
- "I wish developing great products was as easy as writing a check. If that was the case, Microsoft would have great products"
- "Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes"
- "Your time is limited, so don't waste it living someone else's life"
- "Don't be trapped by dogma - which is living with the results of other people's thinking"
- "The only way to do great work is to love what you do. If you haven't found it yet, keep looking"
- "You can't connect the dots looking forward; you can only connect them looking backwards"
- "Sometimes life hits you in the head with a brick. Don't lose faith"
- "Live every day as if it were going to be your last. One day, you're sure to be right"
- "Remembering that I'll be dead soon is the most important tool I've ever encountered to help me make the big choices in life"
- "Stay hungry, stay foolish"
- "Good artists copy; great artists steal"
- "The musicians play their instruments. I play the orchestra"
I make a random quote the 'title
' attribute of an image. The quotes at 'wikiquote.org' are in the public domain.
There are also some inspiring quotes from Nelson Mandela -
I have been working on over seven tasks at the same time for the last few months whilst developing my computer game
By contrast, 'Agile' developers like to work on one task at a time.
Each day I make a list of what I will do on each task the next day as I go through the tasks. I try not to think about all the tasks all at once as it can get a bit confusing.
However I liked working on one task for a few days when I stayed at home recently when I had Covid.
I have tried lots of different ways of working over the years. During the summer of the pandemic I even tried working through the night but I did not sleep well afterwards due to the daytime noises. I recommend you just pick whichever way of working suits you at the current time
-
I try to change a 'generic' node in the 'accessibility tree' to a 'section
' or 'figure
' element
A 'generic' node is usually a 'div
' element. I add an 'h2
' header element after a 'section
' to describe the 'section
' element. I hide the 'h2
' element by setting 'display: none
'. I add a 'figcaption
' after a 'figure
'.
I try to replace the 'generic' 'div
' element with a 'section
' or 'figure
' element but sometimes my 10 year-old browser gets confused so I just put the 'section
' or 'figure
' around the 'div
'.
The 'accessiblity true' is an extended version of the DOM tree meant for screen readers.
I also hope that if I add more HTML5 tags then Google's search bot will like my pages a bit more. But I really need third-party links to my pages to get in the search rankings.
Getting to the 'accessibility tree' is a bit complicated in Chrome. Go to the 'developer tools' then choose 'Accessiblity' from the 'Elements' tab, then click 'Enable full-page accessibility tree', then click 'Reload DevTools', and then click the icon of a person with outstretched arms
-
I had a first go at a 'Content Security Policy' (CSP)
I added HTTP headers to the '.htaccess
' file on my website:
Header add Content-Security-Policy "default-src
'unsafe-inline' https://bbingo.xyz data:;"
'Header add Access-Control-Allow-Origin "*"
I really need to put my styles and scripts in separate files. Allowing inline styles and scripts is unsafe, so I have to say 'unsafe-inline
'. A workaround would be to put hashes of the scripts in the CSP headers. I say 'data:
' as I have some SVG's encoded inline in a data URL.
Content Security Policies are meant to stop cross-site scripting attacks and work by telling the browser to only use resources from specific locations.
My tips page is attached to my pages on Sourceforge so I need to allow access to the favicon and manifest which are on my website at 'bbingo.xyz'. So I include the second header
-
I have been adding 'prefers-reduced-motion
' and 'prefers-contrast
' media queries to my webpages
The accessibility course on 'web.dev' says I should have my animations off by default and let the user turn on the animations if desired.
Chrome lets you emulate these media settings. The computers at my library do not let you set these media settings in Windows.
'web.dev' says these two accessibility media queries are the two best supported by browers
-
the 'main
' HTML tag comes between the site 'header
' and 'footer
' tags
There can be a page 'header
' and a page 'footer
' within a 'main
' tag.
There can also be 'header
's and 'footer
's wihin 'article
' and 'section
' tags.
I wrongly put my site 'header
' and 'footer
' tags within my 'main
' tag and Chrome did not mark the 'header
' and 'footer
' as 'landmark' tags in the accessibility tree
-
I changed the 'lang
' attribute of my 'html
' tags to be 'en-GB
' rather just 'en
' to help screen-readers
I also removed 'text-align: justify
' as the uneven spacing can make the text harder to read
-
I am using the online HTML5 outliner by Marc Hoyois at: 'hoyois.github.io/html5outliner/'
I used to use the outliner at: 'gsnedders.html5.org/outliner/'. This got confused by HTML5 tags like 'header
' and 'nav
'. This outliner seemed to break and stop working
-
I have been adding more semantic HTML5 elements to my webpages
I have added 'header
', 'section'
, 'main
' and 'nav
' elements.
The 'accessiblity' course on 'web.dev' says to add semantic elements before adding ARIA attribues.
I do use an ARIA label to distinguish two identical links. One link is big for small screens. The other link is small for big screens
-
if I upload files to my website then they do not always immediately appear when I look at my webpages in a browser
My hosting provider is 'Hostinger'
-
I have been reading 'Cryptocurrencies all-in-one for dummies' by Kiana Danial et al
The book put me off buying some bitcoin. It seems so difficult to keep your 'private keys' secure.
I learnt a lot about keeping online investing secure
I borrowed the book from my public library
-
I have been using 'accent-color
' in CSS to set the background color of checkboxes and radio buttons
I found one quirk.
I have a set of checkboxes with a CSS animation taking the 'accent-colors
' through a rainbow. The background colors start off all in sync. But if I check and un-check some boxes then the colors get out of sync. It is as though un-checking a box restarts the animation afresh
-
I enjoyed reading the course about HTML forms on Google's 'web.dev'
The course was an easy read and brought me up-to-date.
The course has lots of links to related articles
-
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:
- bad colour contrast that 'Lighthouse' had missed
- too long text of the 'alt' attribute of images
- the same links being repeated near to one another,
- making screen readers unecessarily repeat the link text
- text of a link being too general: 'more details'
- badly forcing the text of links to be underlined
- no '
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 '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 'Lighthouse' 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 'root' on my Linux system
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.comHostinger'
'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:
flaviocopes.com/svg/
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;
Z188.insertBefore(
titleElement, Z188.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:
- done is better than perfect
- proceed and be bold
- every day feels like a week
- what would you do if you weren't afraid?
-
'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:
and:
-
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 'openclipart.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._ZO();
if (animatetextColor) {
this.addTextColorToWarningAboutMissingoutPlayersWhenTooM
anyHouseOrLines.__YD();
}
}
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