Posts

Online HTML minifiers

Image
 I started by using an online HTML minifier at:     toptal.com/developers/html-minifier This minifier squashes up spaces and removes unnecessary quotes around attribute names. However, this minifier gives an error with my 'tips' page which is quite long with lots of HTML elements. The online minifier ranked highest by Google removes whitespace that is significant and thus changes the layout of my page. This minifier is at:       codebeautify.org/minify-html One way other minifiers give smaller output is by changing HTML entities to single UTF-8 characters. These characters appeared as weird characters until I saved the minified HTML with 'Notepad' with 'Save as' with the 'encoding' as 'UTF-8'. I then tried the minifier at:     10015.io/tools/html-minifier I noticed that this minifier also leaves out closing '</p>' tags for paragraphs. This causes my 15-year old browser to incorrectly show spacing between lines. However, this works f...
Post a Comment
Read more

Adding 'inert' HTML attribute does not speed up animations

Image
Adding an 'inert' attribute to the document body does not seem to speed up animations. The 'inert' attributes stops any interaction from the user. I thought animations started from 'view transitions' looked faster.  I noticed these transitions stop all user interaction. In fact, adding 'inert' does not seem to make much diference. My old page transitions using regular CSS animations look jerky on old computers. Maybe it is the complex HTML that slows them down  
Post a Comment
Read more

Reflection with CSS

Image
 I realised you can do a reflection along the 'x' axix with a 'transform' of 'scale(-1,1)'. I was going to rotate the element 180 degrees around the 'z' axis.  This might involve more complex 'sine' and 'cosine' functions.
Post a Comment
Read more

Changing ':before' and ':after' elements to 'div' elements

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

Replacing 'bare' URL's from the text of links

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

Starting to use a CSS minifier

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

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