JavaScript tips

 I leave in old code but comment it out. I can quickly see the old code. The code can look a bit messy. Other people might look at old versions in the source control system instead.

 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.