Earth Notes: On Website Technicals (2019-06)
Updated 2024-02-08.2019-06-28: HTML5 Video
Since I have had such fun with audio support, I have 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-resolution lower-bandwidth media automatically for 'lite' or Save-Data clients, and creating captions and schema.org 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:
A MotorWind turbine clip with a lower-bandwidth 'poster' image available:
A synthetic clip with an additional information text file and a lower-bandwidth (smaller) version of the video provided:
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-resolution 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 plus 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 Online-Convert.com. 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.
One two three testing...
I still haven't found a simple 'de-essing' filter! Mainly because such a thing does not 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!
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 apair ofcouple of voice pieces for a walk of the area that alocal and member of thelocal 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.
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/hd.org 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.
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 seemingly 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.)