JavaScript tips

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

 I sometimes check if other 'view transitions' are running before starting a 'view transition'. I check the property:     'document.activeViewTransition'  Otherwise this error appears in Chrome console:     'Uncaught (in promise) AbortError: Transition was skipped' I often use a 'promise' to clear up after the 'view transition':     transition =         document.startViewTransition(...);     transition.finished.then(finishVT); However, sometimes I want the second 'view transition' to actually run so I have to make the first 'view transition' not run at all. In the end, I added a check for active 'view transitions' to all of my 'view transitions'.  I don't like seeing an error in the browser's console. Also if 'view transition' clash then the promise may not run and the CSS classes triggering the 'view transitions' may not be removed from the HTML elements.

 Combining animations into one keyframe makes the animations perform better. I had an animation using 'scale3d' on a parent element and an animation using 'rotate3d' on a child. The performance was bad but improved when I put the parent's 'scale3d' in the child's keyframe.

 I mistakenly put a large angle in a 'rotate3d' transform and noticed the animation looked nice. A nice animation has a 1080 degree rotation and a scale transform from zero to 1 and opacity going from 0 to 1.