JavaScript tips

 I learnt a lot about how to design the HTML and CSS of a blog from starting a blog on 'blogger.com' and 'blogspot.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'. There are more tips at:  bbingo.xyz/t

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

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

 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 webpages so that they can run as PWA's. There are more tips at:  bbingo.xyz/t

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

 I use the 'IntersectionObserver' to only show my slow JavaScript animations when they are visible. These 'observers' are simple to use. There are more tips at:  bbingo.xyz/t

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

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

 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':     stackoverflow.com/questions/50548573/are-pwa-sites-in-same-domain-not-able-to-install-both-on-home-screen There are more tips at:  bbingo.xyz/t

 I use 'ftp' in the file manager on Windows. 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'. There are more tips at:  bbingo.xyz/t

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