Posts

Showing posts with the label web development

Scaling up the size of SVG icons in a webpage

Image
 I scale up the size of my SVG icons on 'hover' by setting the 'font-size' rather than using a 'scale3d' 'transform'. I use 'ems' for the size of my SVG icons. I keep the SVG icona centred in the same place by using a minus 'translate' 'transform'. Here is an example:     .catNearBriefIntron:hover     {         font-size: 200%;         transform: translate(-25%, -25%);     } I translate by '-25%' rather than '-50%' because I only have to move the centre of the SVG. Using 'scale3d' is quicker as it can run on the GPU. But setting the 'font-size' looks better as the SVG is completely redrawn at the new size. Increasing the 'font-size' means the icon may take up more space and nearby elements may be reflowed. So I set a parent container's 'position' to be 'relative' and then give the icon a 'position' of 'absolute' The scaling using 'font-size' can lo...

Indexed PNG images

Image
 If I resize PNG images of graphs from 'Gnuplot' using 'GIMP' then I need to change the image 'mode' from 'indexed' to 'RGB' to make the images readable when they are smaller.  The images are then nicely 'interpolated' with a 'cubic' transform. Unfortunately, changing the 'mode' makes the images much larger. So instead, I generate a fresh image from 'Gnuplot' using a smaller 'terminal size', having less 'tics' and breaking the 'title' over 2 lines. But I later decided to convert the graphs to 'RGB' to try to make them easier for the browser to resize.

Just making a release when everything works

Image
 I am finding it hard to make releases of code while I am developing. This is because I work on many things at once. I am always in the middle of something. So I just made a release after a weekend of coding, when everything worked.  In the release notes, I said I had just started one of the changes. But the code is not minimized, it is about 16 megabytes, and so takes over 10 seconds to load across the internet.  The server at my web hosting provider is also a bit slow. I could not put my latest changes into 'github.com' using the web form.  Maybe the source is too big, there are too many changes, or perhaps it was because it was Friday.

Leaving in old code, commented out

Image
 I leave in old code but comment it out. I can quickly see the old code. The code can look a bit messy. Other people might look at old versions in the source control system instead.

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

Coding in small steps can be boring

Image
 Breaking coding down into small steps can make coding boring. People sometimes say you should break down programming into small steps so as to 'keep it simple'. I have got into the habit of coding in very small steps because I am often tired in the evenings when I am coding. I spent several weeks adding an option to the settings page of my game.  Previously I might have done the whole thing in one evening. However, I work on around 7 or 8 improvements to my game at any one time. I use a very old browser at home where I have no connection to the Internet, so I need to visit my local library to test on modern browsers.  Also my game takes several minutes to load on my 25-year old Pentium computer.

Problem with mobile testing tool

Image
 My game looked strange when I tested it on mobile phones run by 'appetize.io'. There was a thick border around the boards of players. And the game seemed to hang when I pressed a button. I thought maybe Chrome was adding an outline when an 'input' element got the focus. So I tried setting 'outline: 0'. This did not fix the problem. However, when I tested my game on mobile phones at 'browserstack.com' then everything looked fine. I realised that maybe there was a problem at 'appetize.io'. However, 'browserstack.com' only gives you one free minute per device.  Whereas 'appetize.io' gives you 30 free minutes a month. 'appetize.io' worked fine for tablets. This was a few months ago. Now my game looks fine on mobiles run by 'appetize.io'.