Climate Change is one of the leading risks to global health and we're on track for irreversible global catastrophe by 2030 if we do not make large shifts in humanity's impact on the environment. On the bright side, there are many actions we can take individually that scale to significant impact on our collective chances to succeed.

In this post we'll walk through taking one of these actions with just a few lines of code - raising awareness for climate change via the Climate Clock.

What is the Climate Clock?

The Climate Clock is an activist-run project aimed at raising awareness for climate change. The idea is that if you can raise awareness for the problem - and particularly the urgency of the problem - you can drum up more support via direct action / donations / votes etc to solve it.

It works by embedding a clock onto your website which displays things like:

• Time until 1.5 C degrees warming
• Amount of world energy coming from renewable sources

When you click on it, it navigates to the Climate Clock website with resources on the science behind the numbers, organizations you can support, and groups to get involved with. Think of it like a first step into climate action.

It looks something like this:

Adding the Climate Clock to SvelteKit

The Climate Clock is easy to embed on most websites. It's served as a simple javascript embed via CDN.

On most websites, you can just add this code to your site's HTML (code source):

<script src="https://climateclock.world/widget-v2.js" async></script>
<climate-clock />

This script:

• Loads the Climate Clock widget from the script tag
• Creates a placeholder climate-clock tag that the script will insert the Climate Clock into when it loads

However if we try to do that with SvelteKit (esp. with Server Side Rendering), we'll likely get a broken clock that:

• Doesn't show up at all
• Shows up briefly then disappears

The reason for this is we're loading an unmanaged, asynchronous script into our website that will look for a specific html tag and attempt to modify it. Because SvelteKit doesn't know about this script, if it renders the page server-side, the script load and modification will happen outside of its rendering pipeline thus leading to a likely outcome of failure to render properly.

To fix this, we can wrap the Climate Clock code in a check for browser which tells Svelte we only want to run this code in the client which should allow rendering to happen as expected.

ClimateClock.svelte

<script>
    import { browser } from "$app/environment"
</script>

{#if browser}
    <div> 
        <script src="https://climateclock.world/widget-v2.js" async></script>
        <climate-clock />
    </div>
{/if}

With any luck, your Climate Clock should now work on your site.

If you want to learn more about the code, check out the Climate Clock GitHub.

How much does this actually help?

It's true that adding 1 widget to 1 website probably has limited impact on solving the issue of climate change. But that should never be a reason to do nothing - just inspiration to find something more effective!

Here are a few common arguments for not doing small actions like this and my responses:

• Low Traffic: Adding 1 widget to 1 low traffic website likely has a small impact
  • True, but it does add up - 10, 100, 1000 views / sites
• No Impact: Awareness doesn't actually do anything
  • True, we need people to also take more direct action. Yet to do something you first need to be aware that the action exists, thus awareness leads to action.
• Low Impact: The impact of one action is minimal
  • True, yet one action is infinitely more impactful than zero action and all large impacts are the result of some stimuli somewhere - thus small actions very much can lead to large impacts.

Next Steps

• Other ways to fight climate change with software: 7 ways to fight Climate Change as a Software Engineer.
• Dive deeper into effective, pragmatic Climate Change activism with All We Can Save
  • (or read my summary: All We Can Save - We need you to solve climate change)