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".


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 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.

Post a comment If you post a tweet with a link to this page, it will appear here as a webmention (updated daily).


  1. CSS {IRL} CSS {IRL}
    This is a super cool idea!
  1. liked by Paul Hebert
  2. liked by Stephanie Eckles
  3. liked by CSS {IRL}
  4. liked by Kons Ti
  5. liked by CT
  6. liked by Michael Scharnagl
  7. liked by Lorem Ipsum
  8. liked by Martin Schneider
  9. liked by Kons Ti
  1. reposted by CT
  2. reposted by Martin Schneider