Earth Notes: On Website Technicals (2019-08)
Updated 2022-10-23.2019-08-30: Visual Tweaks to links and floats
I am making a couple of visual tweaks today.
The first is to visibly mark external links (those that take a visitor away from this site) which I have long wanted to do. I only do this on desktop to save bytes and the browser CPU. Thanks to ideas from various sites such as: 1, 2, 3, 4, 5. I only want to do this in navigation lists, not general body prose.
In the end it boils down to just this CSS fragment:
li a[href*='//']::after{content:'^'}
That is, add a trailing '^' to any link in a list that contains '//' such as http://... and https://... and even //.... This is simple and small and nearly every page will use it, but does not add too much to the CRP (Critical Rendering Path).
The second change is to automatically convert left-floated images to right-floated for narrow screens. This lets text flow better on mobile where for a desktop images would float to alternate sides.
This also has the benefit of usually reducing the inline CSS size for such simplified pages, and so can be applied as an emergency measure for desktop pages with too much in the CRP.
2019-08-31: I have changed the CSS to match this behaviour by default, ie lite/amp 'left' floats are always on the right, and on desktop they are left only for wider (>640px) screens. Thus the layout semantics are preserved entirely for non-desktop pages, and 'mobile' float layout is enforced on desktop pages with an oversized head.
2022-06-19: almost three years on I'm still really pleased with this one simple ^ trick!
2019-08-27: Podcast City
I am not convinced that I'll actually make any more 'podcast' episodes. But, in the hope that I do, I have made them first class citizens.
- There is now a podcast home page as Google requires.
- There is now a dedicated RSS feed as Google requires.
- I have made 'podcast' a 'major' tag with its own colour!
- I have added the new RSS file to
robots.txt.
Work is still on progress on automatically populating the podcast home page. In particular, creation dates still have to be added to the page and RSS, and the results sorted by date.
2019-08-27: I have told Google about the RSS feed through GSC, I have told a couple of other podcast services that I found on the Web, and I'll tell Apple in the next few days. Apple probably drives most of the available traffic. (Though I'm not expecting much!)
2019-09-01: attempting to submit my RSS feed to Apple spat out a couple of validation errors initially (both now resolved):
Podcast artwork must be between 1400 x 1400 and 3000 x 3000 pixels, JPG or PNG, in RGB color space, and hosted on a server that allows HTTP head requests.
Can't submit your feed. There is no explicit tag in your feed, or the explicit tag is empty.
2019-09-05: I received an email last night from iTunes telling me that my podcast has been approved and should appear soon at an Apple podcast URL.
The podcast also seems to just be 'in' Google Podcasts without formal submission, as hoped. I used the tool to generate a direct link, and it all worked.
2019-08-25: Path Too Wide
GSC started complaining a few days ago in Mobile Usability
about one particular Apache-generated directory listing page. Allegedly it had Clickable elements too close together
.
I assume that in fact the long unwrappable directory path was upsetting GSC. Whatever the error reported!
I tried adding minimum-scale=1 to the meta name=viewport ... already present for IndexHeadInsert that I had previously inserted into Apache's mods-available/autoindex.conf. The minimum-scale=1 fixed another problem apparently from an updated Chrome.
What actually seemed to work was further appending <style>h1{word-wrap:break-word}</style>. That allowed the long h1 containing the path to be forcibly wrapped.
The whole IndexHeadInsert line now reads:
IndexHeadInsert "<meta name=viewport content=\"width=device-width,initial-scale=1,minimum-scale=1\"><style>h1{word-wrap:break-word}</style>"
2019-08-24: Replacing JSON-LD
I have decided to replace some of the JSON-LD used for Dataset structured data. I will use in-line microdata instead.
That should allow more such data to be visible (without duplication).
It should also allow more pages to have unified structured data, with only a single top-level item as seen in GSC and the Structured Data Testing Tool.
2019-08-22: Spatial Coverage and Google Maps
I am testing a limited roll-out of available spatial coverage information in the foot of each page. For the moment this is only for pages not at/about 16WW itself. (The more interesting cases.)
The footer displays lat/lon and elevation as text if present. The footer also links to Google Maps in a simple way if lat/lon is present.
Update 2018-08-23: 16WW-located pages now show '16WW' as the location in the footer. They link to the "about 16WW" page.2019-08-09: Neither lazy nor cheap yet, or am I?
At the moment I can't make lazy loading work in mainline or Canary Chrome on my laptop at all, so a step back from where I was in July.
(Test page.)
It seems that work continues on Chromium component:Blink>Loader>LazyLoad, Merely that a step back has been taken to gather stats from the field from 'lite' mode mobile (Android) only.
Update 2019-08-14: while complaining to various people at Google how lazyload had stopped working for me, I pulled the very latest mainline Chrome. It does now seem to have a full working implementation as of 76.0.3809.100. Woot!