Building on the shoulders of giants

Two weeks ago, I noticed a tweet by Jason Lengstorf about a Netlify project called Dusty Domains. The idea: use a domain that you registered but never actually used, "ship a site to Netlify and turn that dusty domain you’ve been squatting on into real money for charity".

Well.

I have plenty domains, most of them unused. And I had had an idea about a particular one a few days earlier.

In 2019, when the world was … not good, but hey, pre-COVID! Anyways, in 2019 I registered heilpragmatiker.de as a joke. It plays on the term Heilpraktiker, which is German for non-medical or alternative healing practitioner. I am extremely sceptic of most alternative or complementary health care methods and much prefer hard science. Heilpragmatiker is a pun in that vein, translating to "the pragmatic healer".

I decided to go with my tongue-in-cheek idea and launch a super tiny one-pager with a simple message: "Lasst euch impfen!" (Get vaccinated!).

I created an HTML file, put my message in there, centered it in the viewport (with CSS, no less) and drag & drop deployed it to Netlify (yes, really).

Done and dusted, I thought. But while I was waiting for DNS changes to propagate (they don't, actually, the waiting is for caches to expire) so Netlify could issue a SSL certificate, I got restless.

A proper Heilpragmatiker should do more than just shout something into the void. They should base their message on hard facts. Facts like current COVID data. I thought, "API!" and DuckDuckGo quickly gave me the Robert Koch-Institut COVID-19 API by Marlon Lückert.

The API has tons of data, but I only wanted the current 7-day incidence. The significance of the incidence as a data point is debatable for a lot of reasons, but it is still used widely in the media and easily recognisable.

I went back to my HTML file and got into a proper flow for a few hours. In the end, I did a bit more than only adding a single number:

• I switched to Eleventy, a static site generator, and query the API via JS data files during the HTML build step. The actual website remains pure HTML and CSS, no JavaScript needed.
• I noticed that the API also has an endpoint for the colour ranges used in maps. I like colours, so I decided to use the current applicable incidence colour as the website's background colour. I also like accessibility, so I have a function that (rather simplistically) determines whether my text needs to be black or white to achieve sufficient contrast against the dynamically determined background colour.
• With all that colour, the text could use a bit more oomph. I used fluid type with clamp() and viewport units to tie my font-size to the viewport size (careful here: make sure that text zoom is still possible!). clamp() is one of the many recent additions to CSS that are going to change the way we build the web.
• When I set up the Netlify site to automatically deploy from my Github repository and checked out a deploy preview of my pull request, Firefox warned me about a missing favicon. Point to you, Firefox. I remembered something @derSchepp said in a recent podcast (WWSIV #33): you can use inline SVG data urls as placeholders for to-be-lazy-loaded images. I meshed this with another new capability of the web platform: SVG favicons. Browser support for SVG favicons is still dodgy, but hey, YOLO. It's a fun pet project. With a bit of tweaking, I got a SVG data string that always contains the incidence and colour currently shown on the website.
• The elegant synchronicity of favicon and website content pushed me towards a related topic: social images. Of course I wanted Heilpragmatiker to shout their message in website previews around social media. Turns out that's not a hard problem: there is a runtime service API built by Zach Leatherman (also creator of Eleventy) that you can deploy to Netlify and query with URLs to receive a screenshot of the website. Mind-boggling, I know. I attach build timestamps to the URLs to get fresh images every day.
• Speaking of builds: I used Zapier to set up a scheduler that triggers a Netlify build every morning at 06:00 am – about three hours after the COVID API data is refreshed.

And there you have it: A really tiny website with a few hidden tricks. You can have a look around the code, if you like.

I had a lot of fun going down this rabbit hole – thanks for the push, Netlify!

PS: Get vaccinated, people.