Posts

How I speed up passing a rainbow through text

Image
 I speed up my JavaScript animations of the color of each letter in lines of text by:  using 'IntersectionObserver' to only run the animations when the text is visible coloring the elements for the letters in steps with delays in-between. (I also create and get references to these elements in steps) sometimes coloring whole lines rather than each letter  sometimes just coloring lines that are 'above the fold' only slowly changing the colors of the letters (about every 20 seconds) sometimes not having a 'transition' for the color changes delaying the start of the coloring until a few seconds after the page loads making the page load quicker by making the page small by putting the JavaScript in separate files. I create 'script' elements in JavaScript and set their 'src'. I use 'load' events to create dependencies between the scripts not coloring the text on mobiles and tablets. I look at the 'user agent string' and use 'media qu
Post a Comment
Read more

How to do a CSS firework animation

Image
 Yusuke Nakaya makes a firework animation by moving up together lots of small pieces and then sending them off in random directions. Here is the CSS, which uses a pre-processor:     @keyframes spark#{$i} {       0% {         transform: translateY(random(150) + 500px);       }       50% {         transform: translateY(0);       }       100% {         transform: rotateZ($deg) translateX(random(200) + 100px);       }     } The animation is at: ' codepen.io/YusukeNakaya/pen/zYvWGwb '. I have adapted this to use JavaScript to do the random bits rathen than a CSS pre-proessor. There are more tips at:  bbingo.xyz/techtips/
Post a Comment
Read more

Good CSS animations

Image
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/
Post a Comment
Read more

!important in CSS

 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/
Post a Comment
Read more

Plain references to functions lose context

 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/
Post a Comment
Read more

Darken SVG

 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/
Post a Comment
Read more

Hold your nerve with free webhosting

Image
 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
Post a Comment
Read more