JavaScript tips

 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. There are more tips at:  bbingo.xyz/t

 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. There are more tips at:  bbingo.xyz/t

 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". There are more tips at:  bbingo.xyz/t

 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. There are more tips at:  bbingo.xyz/t

 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 There are more tips at: bbingo.xyz/t

 '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. There are more tips at:  bbingo.xyz/t

 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. There are more tips at:  bbingo.xyz/t

 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 don't think this will run on the GPU though There are more tips at:  bbingo.xyz/t

 I like to add a random negative 'animation-delay' to my CSS animations to vary where the animation starts in the 'keyframe'. There are more tips at:  bbingo.xyz/t

 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 color changes 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 There are more tips at:  bbingo.xyz/t

 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'. There are more tips at:  bbingo.xyz/t

 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 Th...

 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 more tips at:  bbingo.xyz/t

 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 ...

 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. There are more tips at:  bbingo.xyz/t

 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.  There are more tips at:  bbingo.xyz/t   

 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. There are more tips at:  bbingo.xyz/t

 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. There are more tips at:   bbingo.xyz/t

 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="http://bbingo.xyz/techtips/" /> I had wrongly just put 'canonical' tags on versions of my pages that were not 'canonical' There are more tips at:  bbingo.xyz/t

 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. There are more tips at:  bbingo.xyz/t

 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. There are more tips at:  bbingo.xyz/t

 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. There are more tips at:  bbingo.xyz/t

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. There are more tips at:  bbingo.xyz/t  

I learnt a lot reading about  'Responsive Design' on Google's 'web.dev' website. There are more tips at:  bbingo.xyz/t