Earth Notes: On Website Technicals (2019-06)

Updated 2021-03-18 21:12 GMT.
Tech updates: Google search favicon, loading=lazy, dateCreated for a few, podcast and other audio support, Audacity, video support.
Starting the month getting ready for lazy loading, and eking out a little more metadata. Lots of fun creating audio support for mini-podcast talking-head stuff...

2019-06-28: HTML5 Video

Since I've had such fun with audio support, I've decided to support video in a similar way, cross platform and responsive, with a VIDEO tag.

As with these other upper-cased tags that I have introduced, it should be valid (though likely non-optimal) HTML5 if completely untouched. But the system has the opportunity to be smart behind the scenes, eg finding lower-res lower-bandwidth media automatically for 'lite' or Save-Data clients, and creating captions and markup.

Here is a very short segment of an electricity supply meter spinning, with no hand-crafted alternate formats (eg low-bandwidth) or other cleverness:

Your browser doesn’t support HTML5 video.
4s "meter spin" (poster) Uploaded . Download MP4 clip 70kB (may not be available in data-saver/lite mode), download low-bandwidth MP4 clip 17kB, hi-fi/original MP4 clip 264kB.

A MotorWind turbine clip with a lower-bandwidth 'poster' image available:

Your browser doesn’t support HTML5 video.
3s "MotorWind" (poster) Uploaded . Download MP4 clip 674kB (may not be available in data-saver/lite mode), download low-bandwidth MP4 clip 126kB.

A synthetic clip with an additional information text file and a lower-bandwidth (smaller) version of the video provided:

Your browser doesn’t support HTML5 video.
20s "SPAM log" (poster) Uploaded . Download MP4 clip 2277kB (i) (may not be available in data-saver/lite mode), download low-bandwidth MP4 clip 841kB, hi-fi/original MP4 clip 2449kB.

2019-06-30: I have added code to automatically generate the poster .jpg and .jpgL from the source video. Next up: shrink oversize videos to the bounds of their display frame (but allow the user to download the full-res version)?

2019-07-01: I have added Save-Data Apache support for .mp4 L and LL under MIME type video/mp4.

2019-06-24: British Library

The British Library appears to be doing its yearly sweep of EOU.

2019-06-19: Audacity

I was pointed at the Audacity tool for preparing voice snippets, instead of GarageBand + external converter. Here is a slightly-croaky late evening one two three testing clip exported in FLAC (level 5, 16 bit), and then at default (medium quality 145--185kbps joint stereo), and then at apparently-minimum (variable bit-rate 45--85kbps variable speed mono) MP3 levels.

(I had used Audacity years and years ago: it was good to be reminded of it!)

I additionally made the very-lo-fi version from the FLAC with This is mainly to compare file sizes between the (decent-sounding) Audacity minimum and the telephony-level externally-converted minimum. For Apache I have added to mods-available/mime.conf the line AddType audio/mpeg .mp3LL also.

Your browser doesn’t support HTML5 audio.
2s "1 2 3 testing" Uploaded . Download stereo MP3 clip 30kB (i) (may not be available in data-saver/lite mode), download low-bandwidth mono MP3 clip 9kB, download very-low-bandwidth mono MP3 clip 4kB, hi-fi stereo lossless clip 99kB.
One two three testing...

I still haven't found a simple 'de-essing' filter! Mainly because such a thing doesn't exist, I am told.

2019-06-11: Podcast Lite

The transcript below was made by Google Docs' Tools -> Voice Typing (on Chrome) from a (playback of a) voice recording made in 'GarageBand' on the Mac, and then lightly edited. Listen mum, no paid tools!

Your browser doesn’t support HTML5 audio.
27s "clip1" Uploaded . Download stereo MP3 clip 421kB (i) (may not be available in data-saver/lite mode), download low-bandwidth mono MP3 clip 57kB, hi-fi stereo lossless clip 1689kB.
This is an experiment to see if it is possible to dictate a piece while also recordeding it and getting a transcription. Tthis may be useful because I've been asked for a pair of couple of voice pieces for a walk of the area that a local and member of the local person interested in nature such as bats and flowers and trees has asked for.

2019-06-12: I have created support for a simplified AUDIO tag, analogous to the IMG and SECTION tags, that is correct HTML5 (even if possibly non-optimal) as-is, but which can be recognised and re-written for AMP and optimised for lite. It has to force automatic injection of an extra AMP header for example.

2019-06-13: the uncompressed lossless (RIFF (little-endian) data, WAVE audio) 44.1kHz sample rate stereo audio clip as exported from GarageBand is 4708538 bytes. (This losslessly compresses with xz -e -9 to .wav.xz at 3430368 bytes.) It has also been captured losslessly as FLAC at 1729105 bytes, and FLAC mono at 1116627 bytes.

A 128kbps ("medium quality") MP3 exported from GarageBand is 431251 bytes and probably captures the full gamut of my laptop microphone in practice. A variable bit rate (~24kbps), mono, 8kHz sample rate MP3 is 58797 bytes and a bit muddy but 7x smaller than the main MP3 and 80x smaller than the uncompressed form. I intend to serve the 128kbps MP3 by default, and the final MP3 as the Save-Data option, though possibly also with the 'lite' page by default.

2019-06-15: I created my first (two-minute) mini-podcast about solar panels in my garden. I have decided to retain a lossless FLAC alongside the MP3s so that I can make edits or share the best-possible source as necessary. It is a little extravagant to do so at over 3MB/minute (note that the WAV version would be 3x the size), but hey!

2019-06-16: Interestingly, with a (quiet) ambient sound recording, FLAC can be smaller than reasonable MP3.

Your browser doesn’t support HTML5 audio.
51s "20190616T1305 16WW back garden ambient" Uploaded . Download stereo MP3 clip 1190kB, hi-fi stereo lossless clip 1105kB.

For the Apache support I have added to mods-available/mime.conf the line AddType audio/mpeg .mp3L alongside .jpgL and .pngL, and similarly extended to .mp3 in sites-available/ for Save-Data.

2019-06-17: Alison F has sent over a clip of sparrows squabbling in the hedge at the front of 16WW mid-December 2018, with a new (to this support) audio file format (ALAC/AAC-LC, .mp4; file supplied as .m4a). There is no lossless version of this sound.

Your browser doesn’t support HTML5 audio.
57s "16WW front garden Pyracantha sparrows AF" Created/encoded . Uploaded . Download stereo M4A clip 448kB.

2019-06-08: dateCreated

For those few (~6) pages created significantly ahead of their first publication, I am adding dateCreated markup to the page. These were typically cases when I wanted to prepare as much as possible ahead of time.

(Avoided for 'lite' pages to save weight, as only of marginal interest!)

2019-06-02: Lazy and Cheap

I asked why Chrome's still-experimental loading=lazy was apparently not using the width and height attributes of an image where present, rather than an expensive load of meta data from the first 2kB, and it seems that the team is already on it!

2019-06-04: downloading and testing "Version 77.0.3814.0 (Official Build) canary (64-bit)" shows it to be vastly improved, eg avoiding any 206s at all, and now quickly loading the things that need to be seen for this page of lots of graphs.

Indeed, on the test run that I did, 80% of downloads are avoided if no scrolling is done, and I see no reason to expect any extra costs, eg in bandwidth, even if the entire page is viewed. Hurrah!

2019-06-01: Google Search Favicon

Google has a new search feature (placing the site favicon next to a search result) and describes how to define a favicon to show in search results. Oddly, Google wants something a multiple of 48px (square), of which only exactly 48x48 would be compatible with normal favicon use, and will seemlingly downsize it to 16x16 for display but specifically does not want to be supplied with a 16x16 image. Uh?

I have added a copy of my 48px intensity button .png as a test. The same file is svn cpied to the lite and AMP site roots. (Currently a 'red' one, but I'll try to capture a green one.)

Google only requires a link rel=icon from the home page, it seems. I have left the current .ico image file in place. That may give some browsers a brain-ache as to which to use!

2019-06-02: this also requires the lite and AMP sites not to redirect the request for the new icon back to the main site in the Apache config. I may instead change this for the lite/AMP sites to rewrite to same underlying file as for www (ie no file copies) and maybe have that point to somewhere under img/ or out/.

2019-06-03: From How to optimise your favicon for Google's new organic results? (and looking at how another site of mine appears in Google mobile SERPs) it looks like Google will fall back to using the 16x16 favicon.ico. So I will for now kill off the special 48px .png and consider building a better multi-resolution .ico instead. (Links below.)