JavaScript tips

 I could not get Chrome's Lighthouse tool to see my small responsive images. Also, if I toggled the device to be a mobile then Chrome did not load in the smaller images meant for a mobile. But if I simply shrunk the size of Chrome's pane which shows the page, then Chrome did load the responsive images. I think the reason is that the mobile that Chrome simulates has an image density greater than 'one'. So Chrome wants a large image that 'shrinks' down into the image density. I want to show the smaller images because the images are graphs and if a larger image is shrunk by the browser then the text becomes too small to read. I have redrawn most of my images specifically for smaller image sizes.  It is easy to redraw images made with Gnuplot, but harder to redraw 3D graphs made with Excel. I tried using a 'picture' tag rather than an 'img' tag. This is like 'art direction' where a completely different image is shown for different screen size...

 I have been adding 'fetchpriority="high"' to the HTML of images that are visible when the page is first shown. Chrome's 'Lighthouse' tool suggested this. But I show slightly different sets of images for mobiles and desktop computers.  If I set fetchpriority' in JavaScript then it may be too late.

 I often add blank lines around HTML that I am modifying to make things clearer.   Most times it does not make any difference. An HTML minifier will remove the blank lines.   I also often comment out old HTML code with '<!--' an '-->'

 An SVG would not show when it was hidden in a 'div' with 'display: none' and referenced later in a 'use' tag. To fix this, I put the SVG in a 'defs' tag inside an outer 'svg' tag. I hide this outer 'svg' by saying: 'position: absolute', 'height: 0' and 'width: 0'. 

 Twitter seems to need an 800 by 800 pixel image for the image in its 'meta' open graph tags. Twitter says just to create a post and put in a link to see how the 'card' for the meta tags look. Sometimes the 'card' is shown but sometimes it is not. Twitter has an old tool to show which 'meta' tags are being used, but Twitter now says this is not always correct on all devices. At first I scaled down some old 1280 x 720 pixel screenshots to 800 x 800. But the text looks a bit tall and narrow, so I will have to take fresh screenshots that are square. Facebook seems to look for an image in the page referenced in the 'og:url' tag rather than the current page. Facebook has a tool to check which 'open graph' tags are used. I have added 'open graph' meta tags to all my pages.

 If a webpage is a 'Progressive Web App' (PWA) then someone may have an installed copy of the webpage that is old. I copied some images into a sub-directory to try to speed up the access time. But I cannot remove the original images from the top directory because an old PWA might use the original images. So it is just a little bit slower accessing the new copies of the images in the sub-directory. I tell Chrome the webpage is a PWA by registerng a 'do-nothing' service-worker.  Chrome warns about having a 'do-nothing' service-worker as it needs to be loaded which takes time. 

I have added 'next', 'previous', 'author' and 'license' document relations to the 'head' of my web pages. For example, I say:     <link rel="next" href="https://bbingo.xyz/credits/"> My very old browser shows these 'document relations' in the browser's main menu.. I do not see any modern browsers showing these 'document relations'.  Google search does not seem to use these 'document relations' either

 I set the 'character set' as soon as possible in my web pages. I had a comment before the line:     <meta charset="UTF-8"> The browser would find this line and go back to the top of the page and go through the comment again.

 I started by using an online HTML minifier at:     toptal.com/developers/html-minifier This minifier squashes up spaces and removes unnecessary quotes around attribute names. However, this minifier gives an error with my 'tips' page which is quite long with lots of HTML elements. The online minifier ranked highest by Google removes whitespace that is significant and thus changes the layout of my page. This minifier is at:       codebeautify.org/minify-html One way other minifiers give smaller output is by changing HTML entities to single UTF-8 characters. These characters appeared as weird characters until I saved the minified HTML with 'Notepad' with 'Save as' with the 'encoding' as 'UTF-8'. I then tried the minifier at:     10015.io/tools/html-minifier I noticed that this minifier also leaves out closing '</p>' tags for paragraphs. This causes my 15-year old browser to incorrectly show spacing between lines. However, this works f...

Adding an 'inert' attribute to the document body does not seem to speed up animations. The 'inert' attributes stops any interaction from the user. I thought animations started from 'view transitions' looked faster.  I noticed these transitions stop all user interaction. In fact, adding 'inert' does not seem to make much diference. My old page transitions using regular CSS animations look jerky on old computers. Maybe it is the complex HTML that slows them down  

 I sometimes change ':before' and ':after' pseudo elements to 'div' elements so I can reference them by 'id' in JavaScript. For example, I am adapting a CSS icon for 'Github' that uses ':before' and ':after'.    I usually add an inner 'div' container element which has a 'position' of 'relative' and a 'width' and 'height' of '100%'. I put the ':before' and ':after' elements inside this container with a position of 'absolute'. But if the 'Github' icon is very small then the ':before' and ':after' elements are too far down. So instead, I set a parent element of the ':before' and ':after' elments to have a 'position' of relative'. The icon uses 'em' sizes and I reduce the size by setting the 'font-size'.

 I have been changing the text label of links to have words rather than 'bare' URL's.  It seems screen-readers 'say' each character in the URL. I have a lot of links to 'openclipart.org' on my 'credits' page. The text labels of the links were all bare URL's. But these bare URL's describe the 'SVG'. I will have to add more words to the text label of the links to make each description unique. In fact, content on 'openclipart.org' is in the 'public domain' and does not need attribution Also I found out that the symbols for links to Facebook, X, LinkedIn and so on on the first page of my game are too small for some disabilities. Instead I could have used words like 'Facebook'. Also a long link might be better than the big fat links I use for mobiles.

 I ran UglifyJS twice and got a small further reduction in size. I now set the 'passes' option of 'UglifyJS' to '3'. This further reduces the size of the JavaScript in my game by 0.5%. I do not get much reduction in size when I run the 'CSSO' minifier twice or run the HTML minifier at 'jsonformatter.org' twice. The 'terser' JavaScript minifier is much faster than 'UglifyJS' but produces slightly bigger results with the default options.

 I have been removing obvious 'abbr' tags from my 'tips' page I had a lot of fun looking up abbreviations but apparently it is bad style as it interrupts the flow of the reader. This can be especially bad for screen readers. For example, I was showing the abbreviation for 'PC' and '3d'. I also now only mention an abbreviation once the first time it is appears in a tip rather than repeating the abbreviation in the same tip. I still repeat abbreviations in different tips as someone might be reading just one tip.  I am now removing unnecessary links for websites mentioned in the tips.  When I started writing the tips, I thought the idea of HTML, being 'hyper-text', was to have lots of links. So I added a link for every website, book and organistion that I mentioned.  But over time, the number of links grew to be over 500.  Again, the links, being blue and underline, interrupt the flow of the reader. I thought the page would be more inviting with lot...

 Warnings from Chrome's Lighthouse turned out to be bugs from using an old version of Chrome used for Windows7. Lighthouse said: 'heading elements are not in a sequentially-descending order'. I can get round this by using the 'Lighthouse' option at 'webpagetest.org'. Or I can go to a neighbouring libary that runs Windows10 and the latest Chrome

 I cannot see the source of my game in Chrome with the 'View source' option on the old Windows7 computers in my library. My game is about 12 megabytes. To get round this, I note down the line number of the error in Chrome and then look at the source in Firefox which loads in my big game successfully. There probably is a better way to view a file with line numbers in Windows. The line numbers in Word wrap around to line '1' after line '65534'. There are more tips at:  bbingo.xyz/techtips/

 Chrome behaved strangely when I put a 'div' inside an anchor ('a') tag. Chrome put the 'div' after the anchor tag rather than inside it. I fixed this by changing the 'div' tags to 'span' tags and set the 'span' tags to 'display: inline-block'. However, it seems the HTML5 specification says that you can put an anchor tag around most tags. There are discussions about this on 'stackoverflow.com'. My 'div' contains other 'divs'. The anchor tag is inside some complex HTML - a simpler example worked fine. I am using an old version of Chrome: the last version on Windows7 from the start of 2024.  (My local library has not upgraded from Windows7 yet. The library has instead installed a more recent version of Firefox. Sadly some websites like 'Outlook' and 'Pinterest' do not completely work with the old version of Chrome) The 'divs' are for an RSS icon made in CSS from:     'codepen.io/da...

 I now put code examples inside a '<pre><code>' block I was using '&nbsp;' to indent lines. I set the '<code>' to 'display:block' so I can indent it with 'margin-left'. I start the example code immediately after the '<code>' tag to avoid an extra newline. I put everything in a 'div' with contenteditable="true" and  spellcheck="false" to allow 'copy and pasting' and to remove any red 'spell-check' wavy line. I give the 'div' 'max-width:100%' and 'overflow:auto' to stop scrollbars appearing in the browser's outer window There are more tips at: [bbingo.xyz/t](http://bbingo.xyz/t) There are more tips at:  bbingo.xyz/techtips/

 I forgot which version of my JavaScript game I 'minimised' to produce the latest version. Luckily I had put an RCS 'identification marker' in an HTML comment at the start of the code. I had used the '$Revision$' marker. RCS is the free source control system that came with my old Linux system. There are more tips at:  bbingo.xyz/techtips/

 I decided to delay my no-op PWA service worker rathen than remove it. Chrome give a console warning if the service worker fetch listener of a Progressive Web App (PWA) does nothing. Chrome wants you to remove these no-op (no operation) service workers to avoid the time taken to start the listeners.   But Chrome only recognises the PWA if it has a service worker. Chrome puts an icon in the top right to let you install the PWA. I delay starting my service worker with a 'setTimeout' of 3 seconds on the page 'load' event.  You do not notice the delay in the PWA icon appearing. I also delay all my animations. This also means that Google's search, Chrome's Lighthouse and Webaim's Wave accessibility checker do not see the bad color contrast choices of my animations. There are more tips at:  bbingo.xyz/techtips/