JavaScript tips

 Gnuplot gave an error about being unable to open the 'arial' font, causing Gnuplot to use a 'blocky' internal non-scaleable font. I used 'strace' to find where it was looking for fonts. I saw there was a 'UTRG____.pfa' file in an X Windows directory. I now add 'font "UTRG____,12"' after the 'set terminal', 'title' or 'label' commands. I get the 'Utopia' font at a 12 point size.

 I now make the text on charts and graphs really big. This is because mobiles shrink the charts because the mobiles have 2 or 3 times pixel density. Their browsers choose a large size of a chart and scale it back. Also mobile browsers may be set to a 'desktop view' which again shrinks down a large size chart. The idea of a 'desktop view' is stop the browser showing a 'cut-down' view of a website coded for mobiles. I check for 'desktop view' with:     'window.innerWidth > screen.availWidth' The text includes chart titles, axis titles, numbers on tics and legends. I am trying using JavaScript to set the 'src' of images to force the browser to choose more readable smaller-sized charts. But this makes the browser load all the charts when the page loads - no more easy 'lazy loading'. Also there needs to be a bit of code to handle resizing the page.

 I use the 'jspaint.app' website to get screenshots into a file. There is no Windows Paint program on Windows 11. I have to choose 'edit | paste' to enter the screenshot. Just pressing 'Ctrl V' gives an error. I have to remove a light grey border that 'jspaint' adds. Some other online paint program have limits on how many images you can save. I take a screenshot by pressing the 'Ctrl' and 'PrintScreen' keys together on Windows.

 I use an 'aria-label' attribute of a link to give an accessible name that is read by a screen reader when I do not want to change the link's text. In one case I split up the letters of the link text using JavaScript so I can color the letters individually. I really want to put the word after the link text inside the link text, but I use this word as an anchor when I parse the HTML and I do not want to change this old code. The 'Wave' tool from 'webaim.org' shows the accessible names of all navigable page elements in its 'Order' tab.

 Chrome's Lighthouse said there was an error with the links on my page. I checked the links. I thought maybe I had some generic link text such as 'click here'. I thought maybe the problem was that one of links is hidden on mobiles. Then I noticed the tip on the error message:     Required AnchorElements gatherer encountered an error: Cannot read properties of undefined (reading 'objectId') I found an issue raised with Chrome on 'github'. I tried removing non-breaking spaces from the page and the error went away. I will leave the spaces in and wait until the bug is fixed in Lighthouse.

 I add a 'vt' prefix to the names of my 'view transitions' This makes it easier to search for a 'view transition' name in the code. I found using a 'view transition' name such as 'settings' brings up lots of other matches with elements and CSS class names. The ' vtbag.dev ' website has lots of tips about CSS 'view transitions'.