Posts

How a CSS fish animation works

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

Violating Flickr's terms of service

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

Minifying CSS

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

Making a demo video on Windows

Image
 I created a video demonstration of my game using the gaming part of Windows10. I press the Windows key and 'G' to start and stop the recording. I put the video on 'youtube.com'

Tips from using 'view transitions' in JavaScript

Image
 I have been using Chrome's 'view transitions'. I set the 'view-transition-name' property in CSS classes and add (or remove) these CSS classes from the 'document.documentElement' root HTML element. I can do this when the 'view transition' ends using a promise:     transition =         document.startViewTransition(play);     transition.finished.then(finishViewTransition); I use a 'do nothing' 'view transition' to animate showing a dialog box without animating the whole page:     ::view-transition-old(doNothing),     ::view-transition-new(doNothing) {         animation: none;     }     .vtDoNothing {         view-transition-name: doNothing;     }     #confirmBox {     ...     document.documentElement.className += 'vtDoNothing'; I var...

Will AI ever rival our brains?

Image
 I have been reading a good picture book, 'How the brain works', published by Dorling Kindersley. I realised it will be a long time before Artificial Intelligence (AI) replicates our amazing brains with just numbers. Our brains have evolved over millions of years and are specifically adapted for humans. Science does not fully understand how our brains work. Our feeling of consciousness is partly an illusion. I suppose AI will be a different kind of intelligence to ours. I found this picture book in my local library.

Adding short names for built-in functions

Image
 I add short names for frequently used built-in functions, when 'minifying' my game. I use 'sed' to append code like this to the start of my game:     Array.prototype.p=Array.prototype.push     Math.f=Math.floor     document.ce=document.createElement     Node.prototype.ac = Node.prototype.appendChild     var w=window;w.st=w.setTimeout; I then change the code like this:     sed -e 's/\.push(/.p(/g'  But, I have not found a way of shortening the property 'Node.nextSibling'. Modifying the DOM may not work in old versions of Internet Explorer. I get annonyed when I see repeated code when I look through my game's code after I have 'minified' it