JavaScript tips

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

 I save space by setting a variable called '_' to 'this' at the start of a function that uses 'this' a lot. Saying 'background: aqua' is shorter than saying 'background-color: aqua'.

 If I have '</style>' inside a comment in a stylesheet then Chrome thinks I am ending the styleheet. I put a commented out SVG in a stylesheet above where the SVG was encoded as a data URL . The SVG has a stylesheet within it However, another time, I had an extra '</head>' inside the 'head' tag and nothing happened.

 Fading in and out an animation by setting the overall opacity flattens the 3D effects. I am adapting an animation of going through a star field. The stars move forwards with 'translateZ'. A 'transform-style' of 'preserve-3d' is set. I added a 'keyframe' to the outer 'stage' changing the opacity from zero to one at the start, and one to zero at the end. But this changes the 'preserve-3d' in the children to 'flat' and the stars no longer move forwards. I got around the problem by instead setting the opacity on each star.

 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.

A 'div' with 'position: fixed' was not visible when I forgot to give a 'top' or 'left' and other content filled the screen.  The 'div' is visible and below the other content if this content only partly fills the screen. If I say 'position: absolute' then the 'div' is at the bottom of the other content even if this content fills the screen.