Posts

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

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

Adding screenshots shown when installing PWA

Image
 I have been adding screenshots to the manifests of my webpages that are Progressive Web Apps (PWA). Chrome suggests doing this in the 'Application' panel of the 'developer tools'. However Chrome only shows these screenshots as small 'thumbnail' images when you go to install the PWA. It seems each set of screenshots shown needs to have the same 'aspect ratio'.
Post a Comment
Read more

Removing unnecessary 'abbr' tags and links

Image
 I have been removing obvious 'abbr' tags from my 'tips' page I had a lot of fun looking up abbreviations but apparently it is bad style as it interrupts the flow of the reader. This can be especially bad for screen readers. For example, I was showing the abbreviation for 'PC' and '3d'. I also now only mention an abbreviation once the first time it is appears in a tip rather than repeating the abbreviation in the same tip. I still repeat abbreviations in different tips as someone might be reading just one tip.  I am now removing unnecessary links for websites mentioned in the tips.  When I started writing the tips, I thought the idea of HTML, being 'hyper-text', was to have lots of links. So I added a link for every website, book and organistion that I mentioned.  But over time, the number of links grew to be over 500.  Again, the links, being blue and underline, interrupt the flow of the reader. I thought the page would be more inviting with lot...
Post a Comment
Read more

Smooth scrolling

Image
 I have been adding 'smooth scrolling' to my pages which have internal links. I add this to my CSS:     :root { scroll-behavior:smooth; }  The browser now shows moving through the page to get to the link. This even works on Firefox and on the old Chrome for Windows7. Sometimes the page scrolls very quickly when I come 'back' to a page where I had gone to a link. I turn 'smooth scrolling' off when the user has asked for 'reduced motion'. I learnt about this from reading the book: 'Responsive Web Design with HTML and CSS' by Ben Frain. I found the book in a branch of my local library. I find different books in the different branches.
Post a Comment
Read more

Layout shifts with Google Fonts

Image
 I get page 'layout shifts' when I use 'Google Fonts'. If I say 'font-display: optional' to get round this then I do not see the Google fonts at all, as they do not load in time. I tried to reduce the size of the font file by specifying a font weight and by specifyng the letters in the alphabet as the 'text' to match. But the font file still takes too long to load. I also tried putting Google's intermediate '@font-face' rules directly in my CSS. But the font file still loads too slowly. I also tried downloading the font file onto my website. But the web server is a bit slow and again I do not see the Google fonts. My hosting provider is 'Hostinger'. I did not try adjusting the size of the system fonts to match the Google Fonts to remove the 'layout shifts'. This seems a bit complicated and may not work on all browsers. I am going to try loading fonts into my game using the JavaScript API. My game takes a few seconds to load an...
Post a Comment
Read more

Adding blog to 'blogarama.com'

Image
 I managed to get 'blogarama.com' to index my blog. I get 50 posts free. I only put my best posts on 'blogarama'. 'blogarama' did not mind when I waited 4 months before adding the next post.  'blogarama' thought I had put a reciprocal link in my blog when I had not. However, I cannot find any of my posts on 'blogarama'. There are a lot of ads. Many directories of RSS feeds seem to have closed in recent years. However, it seems it is still worthwhile having an RSS feed.
Post a Comment
Read more