JavaScript tips

 If I set a 'transform-style' of 'preserve-3d' on an HTML element then 'position: fixed' does not work. This seems similar to having 'position: fixed' under something with a 'transform'. Here, the 'fixed' behavior does not work.

 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 realised you can do a reflection along the 'x' axix with a 'transform' of 'scale(-1,1)'. I was going to rotate the element 180 degrees around the 'z' axis.  This might involve more complex 'sine' and 'cosine' functions.

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