Posts

How to do an RSS icon in CSS

Image
 I have been adapting an RSS icon made with CSS. The RSS icon came from:      ' codepen.io/dazulu/pen/nwppvr ' There are 4 circles layered on top of each other, using 'z-index' values. The circles are made with 'div's and 'border-radius: 50%'. The circles are of increasing size. The circles are centered by setting a 'left' and 'bottom' to minus half the div's width and height. The circles have 'positon:absolute' within the overall icon container's 'position:relative'. The second and fourth circles have a white background, whereas the first and third have the orange color. Only the top-right corner of the circles is shown by putting the 4 circles in a container 'div' and giving the 'div' an 'overflow: hidden'. Finally a small white circle is placed on top at the center of the above 4 circles. My RSS icon is at:      ' codepen.io/Bert-Beckwith/pen/YzobrmX ' This also shows the icon wit
Post a Comment
Read more

Chrome bug when 'div' inside an anchor tag in HTML

Image
 Chrome behaved strangely when I put a 'div' inside an anchor ('a') tag. Chrome put the 'div' after the anchor tag rather than inside it. I fixed this by changing the 'div' tags to 'span' tags and set the 'span' tags to 'display: inline-block'. However, it seems the HTML5 specification says that you can put an anchor tag around most tags. There are discussions about this on 'stackoverflow.com'. My 'div' contains other 'divs'. The anchor tag is inside some complex HTML - a simpler example worked fine. I am using an old version of Chrome: the last version on Windows7 from the start of 2024.  (My local library has not upgraded from Windows7 yet. The library has instead installed a more recent version of Firefox. Sadly some websites like 'Outlook' and 'Pinterest' do not completely work with the old version of Chrome) The 'divs' are for an RSS icon made in CSS from:     'codepen.io/da
Post a Comment
Read more

Encoding '#' in SVG in data URL in CSS

Image
 I had to change a '#' to '%23' in an SVG in a 'data' URL of a 'background-image' property in CSS. I had to do this when changing RGB colors to hexadecimal when 'minimising' my page using a bit of Perl:     s/rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\)/sprintf("%s23%02x%02x%02x","%",$1,$2,$3)/eg; (My old version of Perl does not allow '%%' in the 'sprintf' in the substitution) All the other 'special' characters are encoded in the SVG in the 'data' URL.  The 'background-image' property looks like:     url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20168%... There are online tools to do the encoding. A PNG image would need full 'base64' encoding to go in a 'url' but an SVG does not. There are more tips at:  bbingo.xyz/techtips/
Post a Comment
Read more

Marking up code examples

Image
 I now put code examples inside a '<pre><code>' block I was using '&nbsp;' to indent lines. I set the '<code>' to 'display:block' so I can indent it with 'margin-left'. I start the example code immediately after the '<code>' tag to avoid an extra newline. I put everything in a 'div' with contenteditable="true" and  spellcheck="false" to allow 'copy and pasting' and to remove any red 'spell-check' wavy line. I give the 'div' 'max-width:100%' and 'overflow:auto' to stop scrollbars appearing in the browser's outer window There are more tips at: [bbingo.xyz/t](http://bbingo.xyz/t) There are more tips at:  bbingo.xyz/techtips/
Post a Comment
Read more

Giving PWA icons transparent backgrounds

Image
 I changed some of my icons to have transparent backgrounds. These were the icons mentioned in the 'manifest' files of my Progressive Web Apps (PWA). I had given the icons white backgrounds to make them clearer as recommended by the PWA tutorial on Google's 'web.dev'. But these looked strange next to other icons on a Windows desktop. I made all my web pages PWA's by adding a 'manifest' file and starting a 'do-nothing' service worker. Chrome warns that loading these service workers slows things down. There are more tips at: bbingo.xyz/techtips/
Post a Comment
Read more

Disable chrome's network cache to see website changes

Image
 If I want to see changes I have made to my website in Chrome, then sometimes I have to click 'Disable cache' in the 'Network' tab of the 'Developer tools'. I noticed this when changing the icon images in 'Web App' 'manifest' files. This may also have happened when I changed script files that I load in by creating a 'script' tag and setting the 'src'. There are more tips at: [bbingo.xyz/t](http://bbingo.xyz/t) There are more tips at:  bbingo.xyz/techtips/
Post a Comment
Read more

RCS 'identification marker' comes in useful

Image
 I forgot which version of my JavaScript game I 'minimised' to produce the latest version. Luckily I had put an RCS 'identification marker' in an HTML comment at the start of the code. I had used the '$Revision$' marker. RCS is the free source control system that came with my old Linux system. There are more tips at:  bbingo.xyz/techtips/
Post a Comment
Read more