JavaScript tips

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

 I have been changing the text label of links to have words rather than 'bare' URL's.  It seems screen-readers 'say' each character in the URL. I have a lot of links to 'openclipart.org' on my 'credits' page. The text labels of the links were all bare URL's. But these bare URL's describe the 'SVG'. I will have to add more words to the text label of the links to make each description unique. In fact, content on 'openclipart.org' is in the 'public domain' and does not need attribution Also I found out that the symbols for links to Facebook, X, LinkedIn and so on on the first page of my game are too small for some disabilities. Instead I could have used words like 'Facebook'. Also a long link might be better than the big fat links I use for mobiles.

 I have started using the 'CSSO' CSS minifier It only reduces the size of my game by 2%. I already used shell and Perl scripts to remove comments and remove some spaces. 'CSSO' additionally removes spaces around '{' and '}' and removes semi-colons after the last property in a rule. Sometimes 'CSSO' combines similar rules and combines properties into a 'shorthand' rule. CSS makes up about 20% of my game. (JavaScripts makes up about 65%). This is after my game is minimised. The size of the CSS is halved when minimised. The minified JavaScript is about 15% of the original size. JavaScript variable names can be shortened but CSS property names cannot be easily shortened. I remove some vendor-prefixed properties. 'CSSO' wrongly changes a small stylesheet to nothing. The stylesheet is:     #navigationSettings {         display: block;     } I had to hide some empty CSS rules from 'CSSO' as it removes them. These rules have prope...

 I have been adapting an animation of fish circling as in a bowl with bubbles rising in the middle. The original is by Yusuke Nakaya. See:      'codepen.io/YusukeNakaya/pen/WNopRwX' The fish are made of CSS triangles:     .pfshFish-body .pfshScale {         width: 0;         height: 0;         border-width: 0 0 3.125em 6.25em;     @keyframes fishColor {       0% {         border-color: transparent transparent #6C99C6 transparent; The triangles are reflected around the 'x' and 'y' axes to make one side of the body of the fish:     .pfshFish-body .pfshScale.-pfshTop.-pfshFront {         transform: scale(1, 1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg)                    translate(0.09375em, 0.15625em);     }     .pfshFish-body .pfshScale.-pfshTop.-pfshBack...

 Flickr said I had violated their terms of service by having non-photographic content. Another user had reported this. I had not been using my Flickr account much so I experimented by adding images with captions containing tips and news.  The images were drawings from 'openclipart.org'. I also made a gallery of screenshots of my game. I removed these images. I left some graphs showing probability distributions of getting a 'line' or 'house' in bingo. I had no more trouble for a few months. But now, I cannot login. Flickr says my username is not valid. If I use a link to my images, then I get a a '410' HTTP code meaning the content was intentionally removed. Yahoo! acquired Flickr in 2005. Yahoo! let you store lots of images, and even videos. In 2018, Yahoo! (now owned by Verizon) sold Flickr to SmugMug. Now Flickr tries to be a community of photographers. I still have all the same images on Pinterest together with the captions Pinterest only allows short...

Over half of my game is CSS. This is after the game is minified. Only a third of my game is Javascript when minified. It is hard to shorten the names of properties in the CSS rules. I also have lots of icons made using CSS. I would like to convert several individual CSS properties to 'shorthand' properties like 'animation'. Some of the CSS minifiers do something like this. But, I have empty CSS rules within which I set styles using JavaScript. The minifiers would remove these empty rules, by default. I also rely on some CSS rules being at the start and in a particular order so I can change the styles easily with JavaScript. Because of this, I only use the CSS minifiers on parts of my CSS. This can be a bit hard to manager. I decided to remove most CSS properties with vendor prefixes when 'minimising' my game. I use a 'sed' script to do this. The CSS minifiers do not shorten id and class names. In my other web pages, I used to have a list of names that I ...