Posts

One-person projects

Image
 I have been developing my game for fifteen years. I only spend a few hours a day on it, at most.  I mostly add animations which are fun and where you can soon see the results. In the early days I had a clear objective: to learn the language and have something to show for it. Now, I do it because I find it calming. The editor of 'osnews.com' said that most people working on one-person operating-system projects lose interest after a few years.
Post a Comment
Read more

Document relations in HTML

Image
I have added 'next', 'previous', 'author' and 'license' document relations to the 'head' of my web pages. For example, I say:     <link rel="next" href="https://bbingo.xyz/credits/"> My very old browser shows these 'document relations' in the browser's main menu.. I do not see any modern browsers showing these 'document relations'.  Google search does not seem to use these 'document relations' either
Post a Comment
Read more

Mistaking accessibility styles for an error

Image
 One day, my browser showed pages with little color and thick outlines. I thought maybe my computer had finally stopped working, or that I had deleted a shared library the browser uses. In fact, I had accidently turned on an accessibility stylesheet option!
Post a Comment
Read more

Overriding 'alert' to write to 'console.log'

Image
 I define my own global function 'alert' that writes the message using 'console.log'.  I still use 'alerts' for debugging. I can leave the alerts in when going live and just override the 'alert' function. I also still debug by adding colored backgrounds to HTML elements. The debugger on my old Konqueror browser hangs the browser. The browser is 15 years old and I compiled it myself (slightly wrongly) from the sources.
Post a Comment
Read more

Selecting adjacent elements on :hover with CSS

Image
 I wanted to lighten and shrink buttons adjacent to the button that I am hovering over. But some of the buttons are inside a containing 'div'. For example, I have 2 'div' elements with CSS class 'outer', and each 'div' contains 'input' elements which have a CSS class 'inner'. So I first say:     .inner:hover  ~ .inner,      .inner:has(~ .inner:hover) {         opacity: 0.7;         transform: scale3d(0.9,0.9,1);     }  The above works for 'inner' elements within the same 'outer' element. The '~' is the 'sibling selector'. Then for the 'hover' to affect following 'outer' elements:     .outer:has(.inner:hover)  ~ .outer .inner {         opacity: 0.7;         transform: scale3d(0.9,0.9,1);     }  The above saya: "if an 'outer' element has an 'inner' child that is being hovered over, and is followed by an 'outer' element then apply t...
Post a Comment
Read more

Simple animation spacing out letters in an centred phrase

Image
 Animating the 'letter-spacing' of a centred piece of text is simple and looks nice. There is an example on 'codepen.io':     'codepen.io/Bert-Beckwith/pen/myVBZdw' This was one of my first animations for my game. I used JavaScript to do the animation. This looks a bit jerky but uses much less resources than the smoother simple CSS animation above. 
Post a Comment
Read more

Commenting out CSS already commented out

Image
 I often make an error in my CSS by commenting out a chunk of CSS but forgetting about a comment already inside the chunk. Some CSS following the chunk then does not run. But browsers soon recover and later CSS runs fine. I like how browsers display a web page even when there are errors in the HTML or CSS. Sometimes I also put JavaScript '//' comments in CSS which also confuses browsers.
Post a Comment
Read more