JavaScript tips

I like the CSS animations by Yusuke Nakaya at ' codepen.io/YusukeNakaya '. I have changed two to use JavasScript for the random bits rather than a CSS pre-processor. They are the 'Paper Birds' and 'Birds' at: ' codepen.io/Bert-Beckwith '. I use these as background animations for my game. I learn about CSS as I change them There are more tips at:  bbingo.xyz/techtips/

 I used '!important' in CSS for the first time. Only to discover that you are not meant to use it because it is difficult to override. I have a problem where an element has a 'transition' on both 'color' and 'transform' but these attributes are set in different places and may or may not be present. I set the transitions by creating dynamic stylesheets with JavaScript so the latest 'transition' overrides the earlier.  I tried using 'id' and 'class' CSS selectors so the earlier 'id' overrides the later 'class' selector but I cannot do this easily in all places because I am changing old code. So I set: 'transition: color 3s, transform 0.5s !important' to override where I later set 'transition: transform 0.5s' There are more tips at: [bbingo.xyz/t](http://bbingo.xyz/t) There are more tips at:  bbingo.xyz/techtips/

 Taking a reference to a function of a class object sometimes loses the context. If I say:       var g = obj.f;       g(); Then the 'this' for 'g' is 'window' not 'obj'. To get round this, sometime I say:     g.call(obj); With a timeout, sometimes I say:           var that = this;           function callg()           {               that.g();           }           setTimeout(callg, 1000); I have been converting 'modules' to objects made with 'prototypes' and 'new'. By a 'module' I mean a self-executing anonymous function (a closure) returning references to inner functions. There are more tips at:  bbingo.xyz/techtips/

 I made an SVG darker using an SVG filter I added the filter to the top-level 'defs' tag:     <defs id="defs4">       <filter id="my-dark-filter"                color-interpolation-filters="sRGB">         <feColorMatrix type="matrix"                         values="1 0 0 0 -0.5                                 0 1 0 0 -0.5                                0 0 1 0 -0.5                                0 0 0 1 0"/>       </filter> The values in the fifth column in the matrix vary from 1 for all-white to -1 for all-black. I then called the filter from the top-level 'g' tag:     <g filter="url(#my-dark-filter)" id="layer1"> I got the idea from 'stackoverflow.com' The SVG came from 'openclipart.org' There are more tips at:  bbingo.xyz/techtips/

 My free website at 'freehostingeu.com' was down for several weeks. Other websites at their 'eu5.net' domain were down too. 'freehosteu.com' say the domain was suspended by the registry because the domain was abused. You have to hold your nerve with free websites. I used 'freehostingeu.com' as a backup to the free '000webhost.com'. 'freehostingeu.com' blocks pages with 'bad' words but sometimes these are innocent. One example was the 'itAu' in 'webkitAudioContext'. 'freehostingeu.com' used to offer the 'eu.pn' domain of the Pitcairn Islands. But the Islands said it was harming their reputation. I was very happy with '000webhost.com' and stayed for ten years before upgrading to the cheapest paid plan with their parent 'Hostinger'. I chose a starting 4 year plan which now seems very cheap. Hackers got 13 million passwords from '000webhost' in 2015. It was suggested that the pas

 I use ' appetize.io ' to test my game on simulated tablets and mobile phones. The trial version of 'appetize.io' gives me 30 minutes a month with a 3 minute limit on each session. However, I have just gone over my monthly limit and nothing happened. I use the 'standalone' option where I can get to a simulated browser and run my game.  I came across 'appetize.io' while looking for a way to run mobile apps in a browser.  But the app uses the Microsoft Authenticator app and this means I would have to setup the shared keys each time. There are more tips at:  bbingo.xyz/techtips/