Grid-aware site

The concept of a grid-aware website is one where the content/user experience of a site changes depending on some fuel mix of the user's electricity grid. Implementing grid awareness on this website is part of the Grid-aware Websites project that we are developing at Green Web Foundation.

There was a bit of jargon in that first sentence, and there might be more further down the page. So here's a summary of some key terms:

• Grid-aware: A grid-aware product/tool/service reacts to certain properties of an electricity grid. These could be the types of fuel used to generate power (fossil fuels, renewables, nuclear) or other measures.
• Fuel mix: A term used to describe the balance of renewable, low-carbon, and fossil fuel energy used to generate the electricity of a particular region or electricity grid.
• Cloudflare Workers: A code execution platform that is globally deployed and runs on CDN edge nodes.

All of the magic that makes this website grid-aware is thanks to Cloudflare Workers, Electricity Maps, and the Grid-aware Websites library.

When someone visits this website, the following process is kicked off:

1. A Cloudflare Worker checks the request.
2. The Grid-aware Websites Cloudflare Plugin is run to get the origin country of the request (that is, the country the website visitor is based in).
3. The Grid-aware Websites library is then used to:
   • Fetch data about the current power breakdown of that region from the Electricity Maps API.
   • Determine if the amount of "low-carbon" power (i.e. renewables plus nuclear) is lower than 50%.
   • If so, then it will return a status of gridAware: true.
   • This tells the Cloudflare Worker that the page should be modified to make it "low impact" before it is returned to the user.

If at any point along in that process there is no data available, something goes wrong, or gridAware: false is returned then the original web page will be shown.

When the grid-aware flag is set on this website, the following changes are made inside the Cloudflare Worker before the page is returned to the user:

• Glitch animations are removed.
• The [https://departuremono.com/](Depature Mono webfont) is replaced with System Font alternatives.
• Most JavaScript is removed. That includes:
  • Filters and controls on the /writing and /reading pages.
  • Site controls to "deglitch", "depixelate", and switch themes.
  • Functionality that fetches a random image in the Film section of the homepage.
  • Functionality to refresh the list of articles on the /reading page and on the homepage.
  • The silly random emoji favicon code that runs on each page.
• Codepen embeds are replaced with links to the project on Codepen itself.

There is also a banner shown at the top of the page, which allows visitors to learn more about the grid-aware changes they're seeing (this page). It also allows them to opt-out and view the regular site. That is controlled by a cookie that expires after one day.

The Grid-aware Websites library is open-source on GitHub. There is also a repository with a demo website that can be deployed to Cloudflare Pages, which also includes an example Cloudflare Worker that's setup to help people get started.