Validators, checkers, and a favicon
More code tinkering on my site
I decided to run the my site through some the old tools I used way-back-when. It's easy to get blasé and miss the simplest of things. Also created, and added, a favicon for the site.
Running pages through these help catch those annoying little bugs and mistakes. With this site running on Eleventy meant I could make fixes in certain template files, update all the pages at once (which was nice).
The CSS validated, apart from 47 warnings which are due to the dynamic nature of CSS variables, according to the tool.
- Moved the XFN profile link out of the
<head>to it's own
<link rel="profile" href="http://gmpg.org/xfn/11">
- Found I had pixels stated in some
heightattributes for images, and removed them
After fixing those I got a clean bill of markup.
- 4 recommendations on the feed to look into
I always try my best to conform to WCAG as much as I can. Using the really helpful Tota11y bookmarklet, recently updated by Bruce Lawson, let's me catch a few things I missed. It also helped me find an issue with my page templates too.
- Couple of pages had incorrectly nested headings
- Alt attributes were missing on some images. This was due to my template variable being
imgAltin the front matter, and
imgALTin the body
- Couple of links still had "title attribute" as the title attribute
- Contrast issue with the post date on the homepage
After seeing Andrey Sitnik's 'How to Favicon in 2021: Six files that fit most needs' post, I decided to add my own.
I created an SVG version of my profile photo, using Sketch, and followed his suggestion of using GIMP to export it as a
.ico file. Then I added the following to the
<head> of my base layout file.
<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 --> <link rel="icon" href="/icon.svg" type="image/svg+xml">
I didn't add the Apple touch icons, nor the web manifest. I really don't think anyone is dragging this to their device home screens.