JavaScript tips

 I found some characters that were not UTF8 in my webpages using Perl. I typed:     perl -ne 'print if /[^[:ascii:]]/' cr.html The W3C HTML validator noticed the invalid characters. The validator would not work when there were invalid characters. The invalid characters were accents and the 'a' and 'e' combined in 'Julius Caesar'.  The invalid characters were in quotes I took from 'wikiquote.org'. Several suggested checks for invalid characters did not work for me because my version of Linux is 10 years old.  I found the successful command at 'linuxhandbook.com'. This looks a good website for learning about Linux. This site seems a bit like the old O'Reilly books such as 'Unix Power Tools'. There are more tips at:  bbingo.xyz/techtips/

 The 'border-radius' property in CSS can have 8 values: four horizontal radius values, a slash and then four vertical values. The 'youtube' icon at 'css.gg' uses this to have corners with longer vertical parts. See: 'css.gg/youtube'. You can also make odd-looking curved shapes.  I almost understand how to draw triangles in CSS after looking at the arrow heads in icons on 'css.gg' such as 'youtube' where it is in the ':before' element. There are more tips at:  bbingo.xyz/techtips/

 URL fragments (or 'hashes') on a page would not work until I fixed some invalid HTML. I used the W3C validator at: 'validator.w3.org'. I had 'p', 'code' and 'article' tags without ending tags. And ending tags without starting tags. I had 'p' tags around 'ul' tags and 'p' tags around 'p' tags. There are more tips at: [bbingo.xyz/t](http://bbingo.xyz/t) There are more tips at:  bbingo.xyz/techtips/

 Adding more metadata for my images did not improve how the images appear in Google's search. I added more JSON-LD with ImageObject's for the main images in my pages. I added license information to existing JSON-LD. I added image information to my 'sitemap' file. I gave my images long descriptive file names. I type 'site:bbingo.xyz' in Google Images to see how my images appear in Google's search. Google's Search guide recommended I add the extra metadata. There are more tips at:  bbingo.xyz/techtips/

 The author of the icons at 'css.gg' has an interesting way of drawing lines. He creates a background of just one color using a linear-gradient. He then clips the background using the 'position/bg-size' syntax.  Here is an example of a red vertical line at the top of a box and a blue horizontal line at the bottom:     .gg-arrows-merge-alt-v {         width: 12px;         height: 22px;         background:             linear-gradient(                 to left,red 10px,                 transparent 0)                 no-repeat center top/2px 8px,             linear-gradient(                 to left,blue 10px,                 transparent 0)                 no-repeat center 20px/10px 2px     } I think this method is used because the icons at 'css.gg' are made using just a 'div' and its ':after' and ':before' elements There are more tips at:  bbingo.xyz/techtips/