Bonus episode: Grid-aware Websites Project

00:09-00:12
Welcome back to SustainWP, a limited podcast series

00:12-00:14
about digital sustainability and WordPress.

00:15-00:17
I’m your host, Nahuai Badiola, a freelance WordPress developer

00:18-00:21
based in Barcelona and active WordPress community member.

00:21-00:23
In the original intro, I also said

00:23-00:25
that I was part of the sustainability team

00:26-00:28
and a Green Web Foundation fellow.

00:28-00:35
But now I’m a former Sustainability Team Rep since the team was closed and also finished

00:35-00:36
my Green Web Foundation Fellow.

00:37-00:42
This was expected and indeed I kept a relationship with the Green Web Foundation as you will see

00:43-00:43
soon enough.

00:44-00:48
As you can see, things have changed from the last episode back in November 2023.

00:49-00:53
I’m not going to expand here why or how the work with Sustainability was closed.

00:54-00:58
If you are interested on knowing more about it, I recommend you to listen the Green IO

00:58-01:05
podcast episode where Gael interviewed Nora, Csaba and I, the former team reps, about how

01:05-01:07
all the bands went down.

01:07-01:12
This podcast series has been always about sharing my journey learning about digital

01:12-01:13
sustainability and WordPress.

01:14-01:19
And I’ve been involved on a project where I learned a lot and has some potential so

01:19-01:20
I wanted to share it with you.

01:21-01:27
By the way, I was really happy to see that the podcast has had more than 15,000 listens.

01:27-01:29
Pretty pretty cool.

01:29-01:35
So the project I’m referring to is the GridAware websites proposed by, yes, you guessed it,

01:35-01:36
the GreenWebFoundation.

01:37-01:39
The project ran for almost a year.

01:39-01:45
I was part of the advisory board and as a result I created, together with Nora Ferreiros,

01:45-01:46
a GridAware WordPress plugin.

01:47-01:51
But I thought that better than listen to me rambling about this amazing project, I could

01:51-01:56
bring back Hannah Smith, who is the director of operations of the GreenWave Foundation

01:57-02:00
and one of the people behind the project to talk about it.

02:00-02:04
So without further ado, let’s welcome Hannah.

02:05-02:05
Hello, Hannah.

02:06-02:07
Happy to have you back.

02:08-02:10
It’s always a pleasure to talk with you.

02:11-02:14
And I’m going to go straight to the point.

02:14-02:20
So let’s just start from the beginning and where did you get the idea of creating a grid

02:20-02:21
aware websites project?

02:22-02:22
Yeah.

02:22-02:30
So we had a carbon aware website project in the Green Web Foundation for quite some time.

02:31-02:35
Some of you might have heard or some of the listeners might have heard of Branch Magazine.

02:35-02:39
Branch Magazine was actually one of the reasons I really wanted to come and work with the

02:39-02:44
Green Web Foundation because I kind of saw the website and thought, oh, what a cool idea.

02:45-02:53
So we’d kind of had this prototype idea for a while where we’d experimented with something

02:53-03:00
similar because what we really wanted to do was start to demonstrate to people that we

03:01-03:07
could use the internet differently, that we could have an internet that could be responsive

03:07-03:12
to the world around it, particularly say to carbon initially.

03:13-03:16
But like I said, it was a very much a prototype project.

03:16-03:20
It was done, it was up and running, but we always kind of knew that the code

03:20-03:25
and the approach was, had been done in a bit of a haste, bit hastily.

03:26-03:26
Yes.

03:27-03:28
A lot of room for improvement.

03:28-03:32
So we were kind of thinking, all right, how can we improve what we’d already

03:33-03:35
built this prototype version of branch?

03:36-03:40
And we kind of came up with, okay, well, what would the next iteration be?

03:40-03:45
And so we thought, Hmm, I think we could look at something like grid aware

03:45-03:47
websites, which would be the next iteration.

03:48-03:50
That’s really interesting.

03:50-03:56
If I recall well, we started the project as CarbonAware, right?

03:56-04:01
But that was probably the first or the second meeting that you decided to change.

04:02-04:03
And it was really interesting.

04:03-04:07
Indeed, we had really interesting conversations about it.

04:07-04:14
So do you remember when was that point where you switch or you decided it was

04:14-04:20
more interesting to move from carbon to grid because that’s a pretty interesting

04:20-04:20
pivoting?

04:21-04:22
It was a bit of a shift.

04:22-04:23
Now you’re quite right.

04:23-04:28
So when we wrote the proposal to our grant funder, we wrote the proposal about

04:28-04:32
carbon aware websites because we were thinking about, oh, how do we iterate on

04:33-04:34
the existing branch prototype.

04:36-04:39
But around the same kind of time

04:40-04:42
as we had submitted the grant application,

04:43-04:45
I had been doing some work

04:46-04:49
on the side with Ishmael Valesco,

04:49-04:52
whom I met through Climate Action Tech.

04:53-04:55
And Ishmael was throwing up some questions

04:55-04:57
around what CarbonAware was.

04:58-04:59
Was it actually useful?

04:59-05:00
Was it meaningful?

05:01-05:02
Did it actually hold the potential

05:02-05:07
to reduce emissions in the way that people were saying it was.

05:07-05:08
That work was really, really fascinating.

05:09-05:13
And I did a lot with Ismail and I took his ideas and I said, okay, well, given

05:13-05:20
these doubts and concerns that he very cleverly raised, I said, well,

05:21-05:24
what would be better than this?

05:24-05:28
You know, the, the, the concept of having our technology respond to the world

05:28-05:31
around it is a really good concept.

05:31-05:36
And I think as we move forwards in these climate crisis times,

05:36-05:38
we’re only going to need to be better at that.

05:39-05:42
We’re going to create need our tech to be more in tune with living systems.

05:43-05:47
So I kind of thought, OK, well, what would be the next best thing?

05:48-05:49
What would how would we improve this?

05:50-05:53
Because I always have a mentality if you shoot someone’s ideas down,

05:53-05:57
at least have the decency to say what you think might replace it

05:57-05:59
or might be an improvement. Yes.

05:59-06:09
was a little mean. So kind of came up with this idea of grid aware. So still thinking about carbon

06:09-06:16
as a metric in there. But a lot of what Ishmael was saying was that if we all just went off and

06:16-06:22
did carbon aware tech, and carbon aware tech is basically something that asks,

06:22-06:27
finds out what the carbon emissions are in a given area and then responds.

06:29-06:36
And you might respond through shifting work to a different location where the carbon is lower,

06:36-06:42
or you might shift it to a different time of day where the carbon intensity might be lower.

06:42-06:47
But what Ishmael’s research made me realize and his points made me realize is that that you can’t

06:47-06:53
just do that in isolation from the realities of the way that the grid infrastructure actually

06:53-06:59
works. Just looking at carbon as the sole metric and the sole thing you’re considering isn’t enough.

07:00-07:08
You need to be thinking about how the demand works, how grid operators scale up and scale down

07:08-07:15
different types of energy sources in relation to demand. So anyway, long story short, I came up

07:15-07:20
with this kind of concept of, well, maybe the next iteration would be thinking about

07:20-07:28
things as grid aware, just carbon aware. And thinking about how tech can not only support

07:28-07:33
the goals of the environment, e.g. through the lens of carbon, but also the goal of grid

07:33-07:39
operators, who have a really difficult job to ensure that our grid is still resilient.

07:39-07:44
And, you know, I think when you work in climate and sustainability for a while, you realize

07:44-07:53
that any solution that can achieve more than one win at a time is the goal you should be

07:53-07:53
looking for.

07:54-07:56
You don’t want to be too tunnel visioned about things.

07:56-07:59
You need to accept that we live and work within systems.

08:00-08:06
So it was that work with Ishmael through CAT that brought out this concept of grid aware

08:06-08:06
websites.

08:07-08:12

• Joy indeed wrote a post together with Ismael about this.

08:12-08:14
For me, it was quite eye opening

08:15-08:17
because I was really sold on the idea of

08:18-08:21
let’s move the computational heavy stuff

08:22-08:25
to all geographically or in time

08:25-08:29
and we will do much better and it will be the future.

08:29-08:34
You basically say like, this is not as simple as it sounds.

08:34-08:36
It sounds like a very good idea

08:36-08:41
But it’s not because there is at the end, there is a limited renewable energy right now.

08:41-08:49
So if we are shifting everything to that point, the grid intensity is too high and it’s not going to make all the demands.

08:49-08:54
I’m simplifying the idea, but it’s a pretty new one for me and I think for a lot of people.

08:54-09:00
So I really like when you shift between carbon to grid because of two things.

09:00-09:08
one, we remove the carbon tunnel vision in a sense, because we are still there. And I still

09:08-09:16
talk a lot about it because it’s so easy to just share data about carbon because you have numbers

09:16-09:23
and some of them are very impactful, but it’s always good to get a step back and see the whole

09:23-09:29
thing. And the other part is to add the grid idea to the equation, which is pretty new. And it’s a

09:29-09:38
very complex idea. Indeed, it is the idea and what is behind it. So I was really excited about it.

09:38-09:45
And it was pretty new for, I think, most of the advisory board. I will ask you about the advisory

09:45-09:54
board just a bit later. But before that, what was the main goal behind this project? Was it

09:54-10:00
to raise awareness? Was it to prove an hypothesis or what was the main goal behind?

10:01-10:11
Yeah, so we’ve talked a lot about grid awareness as a concept. The idea of this project was to

10:11-10:17
see what we could do around applying grid awareness to websites. And I think it’s good

10:17-10:24
to think of a grid aware website as a subset or a, um, yeah, a subset of the

10:25-10:31
overall grid aware technology or grid aware concept, we kind of wanted to see,

10:31-10:36
all right, what happens if we tried to make a website grid aware in an

10:36-10:38
actually meaningful way.

10:39-10:41
So avoiding these pitfalls of just saying, well, you know, we’re

10:41-10:42
just shifting things around.

10:42-10:47
And because what we learned was actually that probably doesn’t have a net

10:47-10:49
reduction impact.

10:50-10:56
So the overall goal was to just be in a bit of a playground, actually.

10:57-11:03
And I think sometimes when you work in tech, you sort of get a bit, oh, you

11:03-11:05
know, you’ve got to deliver this thing for this client and you’ve got to

11:05-11:07
deliver these benefits and, you know, sell these things.

11:08-11:12
And what’s wicked about the work we get to do at Green Web Foundation was that

11:12-11:16
sometimes we do get funding to just experiment with something.

11:17-11:24
So the key things that we were trying to experiment with here were what happens if we create a website

11:25-11:31
that offers up different versions of itself based on different metrics around the grid?

11:33-11:35
What do we learn from that?

11:36-11:42
We also wanted to produce some code that other people could reuse and experiment with too.

11:42-11:45
And that was, excuse me, a very key goal for the project.

11:46-11:50
Um, you know, we, the prototype that we did with the original version of

11:50-11:52
branch wasn’t really open source code.

11:53-11:55
It hadn’t been packaged up in a way that anybody could use.

11:56-11:56
Yeah.

11:56-11:58
Um, we talk about it.

11:59-12:00
Yeah.

12:00-12:07
Um, so we really wanted this project to also bring other people along in the

12:07-12:09
journey of experimentation with us.

12:10-12:17
too. And we really wanted to apply these new ideas to to branch and kind of give branch,

12:18-12:25
you know, take branch magazine forwards as well. Yeah. So, you know, have an actual case study of,

12:25-12:30
all right, these are all very good ideas in theory, but if we actually apply them somewhere

12:30-12:36
as well. So we had quite a few different goals. But the concept of really bringing people along

12:36-12:39
on the journey with us was really important to the project.

12:40-12:46
Yeah, and that was one of the, I think, the things that I liked the most about the project,

12:47-12:55
the advisory board idea. I’ve never been before in one. I didn’t hear that much about projects

12:55-13:02
with advisory board, maybe because of my circumstances and surroundings, but where

13:02-13:09
did the idea came from? Because I think it was a brilliant one and you can expand a little bit of

13:09-13:16
what the advisory board was and yeah, the idea behind it and how it came to you first.

13:17-13:28
Yeah, I mean, it’s hard to pinpoint sort of like any exact one light bulb moment. I’d had,

13:29-13:35
I think it was a convergence of a number of different ideas, but when you work in open

13:35-13:41
source, you know that the reason why you work in open source is because people outside of you

13:42-13:45
have different perspectives. And that was one of the reasons why I always enjoyed working in

13:45-13:51
WordPress was that exposure to other people’s perspectives. You all have a common goal,

13:51-13:57
but you’re seeing things from different places. And those perspectives, when you sew them all

13:57-14:02
together creates something that’s far better and more considered and more usable.

14:04-14:10
So I think as Green Web Foundation, we’ve always really understood the importance of

14:10-14:11
other perspectives.

14:13-14:21
The other thing with this particular project was we really wanted to see how other people

14:21-14:24
would adopt these ideas and what they might do with them.

14:24-14:26
Remember it was an experimentation.

14:26-14:26
Yes.

14:26-14:30
So we kind of thought, well, you know, what are the mechanisms that we have available

14:31-14:35
to us to really encourage that adoption and experimentation?

14:36-14:40
You can put a post on social media and say, hey, we’ve built this thing.

14:40-14:41
Why don’t you have a play?

14:41-14:49
But chances are 0.001% of people are actually going to be motivated, you know, knowledgeable

14:50-14:51
enough, blah, blah, blah, to do it.

14:52-14:58
So we thought, well, let’s see if we can assemble a group of people that we know from our networks

14:59-15:05
who are willing to engage and give us their perspectives, but B, might be motivated enough

15:06-15:12
to apply these ideas into their own open source community.

15:13-15:18
So that’s probably another really important thing I would share was that we really brought

15:18-15:23
people from that advisory group who we knew were dedicated members of other open source communities,

15:24-15:29
specifically CMSs, content management systems. So you and Nora joined us from WordPress,

15:31-15:40
we had Thibaut from the Wagtail community, we had members from Umbraco, we had,

15:41-15:44
And we had members from Drupal as well.

15:44-15:44
Yeah.

15:44-15:52
Um, so, and I also had like a little side quest if I’m allowed, I mean, yeah.

15:52-15:55
I mean, why not, why not, why not make it yourself really ambitious?

15:56-16:00
Because I also felt that there was an opportunity to build some bridges

16:01-16:07
across those people working on these other open source projects or other

16:07-16:10
open source CMSs that also had an interest in sustainability.

16:10-16:14
I thought, wouldn’t it be fun to see if we could have a side quest

16:14-16:17
of seeing what relationships might develop

16:17-16:20
or what knowledge sharing might happen when we brought those people together?

16:21-16:26
Because I don’t know of any other place where you’ve got cross CMS representation.

16:27-16:27
Right.

16:28-16:28
As well.

16:28-16:31
So I thought, you know, why not?

16:31-16:36
Really ambitious and see, experiment with that aspect of things as well.

16:37-16:42
Yeah, I think I told you several times, I will keep telling you, it was a brilliant

16:43-16:49
idea. I think it worked beautifully because the feeling during the meetings and when it

16:49-16:56
was over, because we spent more or less one year meeting monthly, more or less, and spent

16:57-17:01
like almost two hours, something like that. Like talking, you were presenting how the

17:01-17:08
project was going and then there was some time for us to share feedback. We also did some small

17:08-17:16
groups to talk about specifics and it was a very enriching experience. And I remember still the

17:17-17:23
last meeting when we were all open to keep to informal meetings in the future, just because

17:23-17:30
we were enjoying sharing that space with other people. So I think that was also a very added

17:30-17:38
value. Yeah, I was like absolutely delighted with how people responded and reacted to being invited.

17:38-17:45
I think actually everybody I asked if they wanted to join in on this said yes. We also met some new

17:46-17:52
people, didn’t know Yana or Christina from the Drupal community at all. And we should also

17:52-17:57
mention as well for the listeners that the advisory group also had representation from a

17:57-17:59
a number of other different freelancers as well.

17:59-18:00
Yes.

18:00-18:06
Some other people that weren’t directly affiliated with a specific open source

18:06-18:08
CMS, but that are generally good eggs.

18:09-18:09
Yeah.

18:11-18:13
Different kinds of forms of digital sustainability.

18:14-18:19
So yeah, I have to say brilliant casting and I really enjoyed all the meetings.

18:20-18:24
And one of the ideas, I don’t know if it was from the start, but one of the

18:24-18:30
ideas that we developed during this advisory board was the creation of the

18:30-18:32
branch magazine, the issue nine.

18:33-18:39
Was it at the beginning one of the ideas or was just since we were advancing it

18:39-18:44
and you just thought that it was, that could be a good idea to…

18:46-18:51
Yeah, it’s funny that how that idea evolved, because now when I look back, I

18:51-18:54
I can’t believe that it wasn’t obvious to us

18:54-18:57
that we should do a branch issue as part of this project.

18:58-18:59
But it wasn’t obvious to us,

18:59-19:01
and it wasn’t something we set out to do

19:01-19:04
in the initial proposal for this work.

19:05-19:06
What we set out to do,

19:06-19:08
we set out to deliver three things.

19:09-19:11
One, this toolkit, basically.

19:12-19:13
As I mentioned, what we really wanted to do

19:13-19:15
was produce artifacts and assets

19:15-19:17
that other people could use and build on.

19:18-19:20
So we talked about this toolkit,

19:20-19:21
which had three parts to it.

19:22-19:23
Part one was the open source code.

19:24-19:27
Part two was the documentation around the code and part three was

19:28-19:32
like, I ideas or inspiration.

19:32-19:36
And I called it at one point a UX catalog.

19:37-19:37
Yeah.

19:37-19:37
I remember.

19:38-19:39
Yeah.

19:39-19:40
Another sort of moment.

19:40-19:43
We called it a sort of inspiration deck.

19:43-19:47
I don’t really know what it was at the beginning of the proposal, but

19:48-19:50
myself and Fershad that worked on the project

19:50-19:53
were very sure that we needed something

19:53-19:55
to really bring these ideas to life.

19:56-20:00
And I spent, oh no, I spent ages trying to work out

20:00-20:02
what this third thing was.

20:03-20:05
I had loads of different conversations with people

20:05-20:10
and then I was like, oh my God, it’s a branch issue?

20:10-20:11
Like that’s what it is.

20:12-20:14
How silly are we to not realize?

20:15-20:16
But I will be completely honest with you,

20:16-20:23
trying to redesign branch and do an issue at the same time was incredibly

20:24-20:32
stressful and very hard work and we did it, but it was absolutely very, very

20:32-20:34
demanding to do those two things together.

20:34-20:37
And that’s probably why at the beginning of the proposal, I had never conceived

20:37-20:39
that we would do such a stupid thing.

20:43-20:50
Yeah, because you did the whole redesign and also changing all the logic behind the Carbon

20:51-20:59
Aware or the Grid Aware tool. So replacing the one that was hastily done in the past

21:00-21:06
for the new one that was using the toolkit that was created during the advisory board.

21:06-21:12
In this case, you’ve seen, if I’m not wrong, the CDNs, the workers of the Cloudflare and

21:12-21:18
and all the technical thing that I think Fersat was the main person working on that.

21:19-21:21
Fersat’s amazing.

21:21-21:22
We should give him props.

21:22-21:23
Yeah, yeah, yeah.

21:25-21:30
Yeah, the project went really fast considering that technical part was

21:30-21:32
mainly done by Fersat.

21:32-21:38
I think he had some help, but I was really surprised on how fast you were able to.

21:38-21:43
And then you combine the redesign with the whole new tool

21:43-21:44
and the new issue.

21:44-21:49
So it was a lot of work, but you maintain all the dates.

21:49-21:51
So I was surprised.

21:52-21:56
And on that note, you invited us to the advisory board

21:57-22:00
if we wanted to talk about our experience

22:01-22:03
or anything about the Grid Aware project.

22:04-22:08
and me and Nora were happy to say yes,

22:08-22:12
and we started thinking, okay, what we can explain?

22:13-22:16
And we really wanted to explain something practical,

22:16-22:20
not only like we could make this and then that,

22:21-22:22
and the world would be better.

22:23-22:27
We wanted to use the technology that was somehow there

22:27-22:29
and expand it in the WordPress site.

22:30-22:35
So we sat together and decided how we were envisioning.

22:35-22:39
I was narrating pretty much the technical parts

22:39-22:41
that we were able to do in WordPress.

22:42-22:46
So she could think how the design was going to be

22:46-22:48
because she was in charge of the design part.

22:49-22:52
And I remember how it also escalate very quickly.

22:52-22:53
(laughs)

22:53-22:56
Because we first say, yes, we want to write something.

22:56-22:59
And then we say together, let’s write something

23:00-23:03
if we are able to make a prototype of something

23:03-23:07
technical with good design so people can use it after.

23:08-23:14
And I started building the MVP of the plugin just for Nora

23:14-23:17
to see where the settings could go

23:17-23:20
and how we’re going to work.

23:20-23:23
And so she can do all the design.

23:23-23:24
And we were going back and forward.

23:24-23:29
It was like we had to start writing,

23:30-23:32
but we had to write the branch magazine

23:32-23:34
during the developing of the plugin.

23:35-23:35
(laughs)

23:35-23:38
Was like, this was a very good idea

23:38-23:41
before we arrived to the point

23:41-23:43
that we have to do the both things together.

23:44-23:47
But at the end, and I remember the final push

23:48-23:49
being from FirstShot saying,

23:49-23:53
oh, this is looking good, the draft of our branch.

23:53-23:58
and the code you are mentioning, why probably should be on the open in GitHub, right? And

23:58-24:06
I was like, yes, but not ready yet. I’m too embarrassed by the code right now to share

24:06-24:13
it as it is. And it was like, I think it would be good if the code is there. So, at the end,

24:13-24:20
I did some refactoring and I was like, okay, this is an alpha plugin, but it’s good enough

24:20-24:25
to be shared in GitHub so people can iterate or see what was doing.

24:25-24:30
So I will go very briefly explaining what we ended up doing.

24:31-24:36
So the idea was from the beginning was to have a plugin that was pretty much plug and

24:36-24:37
play.

24:37-24:42
So very easy to use because we have to lower all the barriers we can if we want people

24:42-24:46
to engage with these kinds of new tools.

24:46-24:53
So the idea would have to a very simple setting with the electricity maps that we didn’t mention

24:53-25:01
yet, but yeah, that was a key part of the whole project because we were relying on the

25:03-25:03
API that they have.

25:04-25:09
And they were kind enough to create a new API endpoint.

25:10-25:15
They were talking together with you, with the Gringo Foundation, and it was like, okay,

25:16-25:19
we don’t have to need an access to the whole API

25:19-25:22
because they are monetizing it somehow,

25:22-25:26
but maybe you can just send us three levels

25:27-25:28
of how degraded it is.

25:29-25:31
It’s low, it’s medium, or it’s intensity.

25:32-25:33
And maybe this very simple endpoint

25:34-25:38
could be used on plugins like the one that I was working on.

25:38-25:41
Indeed, I also talked with Ryan Scholling,

25:41-25:44
which is part of Electricity Maps,

25:44-25:49
And I was saying like, I will build this plugin just using this endpoint.

25:49-25:55
So it would be great if you are able to just release for free this endpoint,

25:56-26:01
maybe cap it for X requests so they don’t have to pay too much in terms of cost.

26:02-26:05
And I, I think that the idea is still there.

26:06-26:09
I didn’t hear back from the electricity maps.

26:09-26:09
Yeah.

26:09-26:13
I mean, first side was the one having the conversations with

26:13-26:18
electricity maps directly and we haven’t sort of checked in with them

26:18-26:20
for a while on where their thinking is.

26:20-26:26
So my understanding is that there is still some stuff you can access for free,

26:26-26:30
but it’s not quite what we’re hoping for.

26:30-26:36
Yeah, because the idea in the future versions was to, if that end point was

26:37-26:42
for free, the idea was even to make simpler the backend of the plugin.

26:42-26:46
Because right now, just to visualize it easily,

26:46-26:53
the field for entering the electricity maps API key.

26:54-26:57
And then there are three checkbox where you can decide

26:57-27:00
if you want the matches to be grid aware,

27:01-27:03
if you want the videos to be grid aware,

27:04-27:06
or if you want the fonts to be grid aware.

27:07-27:11
We decided to tackle these three elements

27:11-27:14
before going deeper because images is,

27:15-27:17
you have to tackle them always

27:18-27:21
because it’s usually half of the weight of the page

27:21-27:22
is an image.

27:22-27:24
So probably if you can do modifications,

27:25-27:27
there are an opportunity.

27:27-27:29
And another one that are videos,

27:29-27:36
but we were going specifically for the YouTube embeds

27:36-27:37
because they are really huge.

27:38-27:40
If you just embed and you do nothing else,

27:40-27:41
is more than a megabyte.

27:42-27:45
So if you have several embeds, it’s like crazy big.

27:45-27:49
And then the fonts is something that usually people

27:49-27:54
think that is not so heavy, or there is not so much megabytes,

27:55-27:57
kilobytes loading.

27:57-28:01
But depending on the website, it could

28:02-28:06
arrive to half megabyte if you are not careful.

28:06-28:09
So those were the three elements that we decided.

28:09-28:16
So you could just set up in the general settings

28:16-28:23
that every element would be grid aware or not.

28:24-28:28
And the other thing we did is, since this

28:28-28:35
is very difficult to see what the–

28:35-28:36
yeah, let me rewind a bit.

28:37-28:42
So in this case, when we are talking about grid-aware

28:42-28:47
websites, we are thinking on how is

28:47-28:49
the intensity of the grid of the person that

28:49-28:52
is visiting the web.

28:54-28:58
So in this sense, it’s very important for the plugin

28:59-29:01
to explain how the people is going

29:01-29:05
to see if they are in a high-intensity grid,

29:06-29:07
or in a medium or a low.

29:08-29:11
Because for example, I was doing all this stuff in Spain,

29:11-29:15
which we usually have a low intensity

29:15-29:17
because we have quite a lot of renewable.

29:18-29:23
So I couldn’t see how the high intensity

29:23-29:25
and medium intensity were displaying.

29:25-29:29
So we had to build a preview for the people to understand,

29:29-29:33
okay, so people, when they exit from a location

29:33-29:35
that they have high intensity,

29:35-29:37
they will see it like this.

29:37-29:39
And that was really important because if not,

29:40-29:42
if the person that is setting all these things

29:43-29:45
is not able to understand how it’s going to visualize

29:46-29:47
in different locations,

29:48-29:49
that was going to be very difficult

29:49-29:51
to get them to start using.

29:52-29:54
So we build it in a way that is,

29:54-29:56
everything is like very WordPress native

29:57-30:01
because I really like to be on top of all the news

30:02-30:03
about WordPress.

30:03-30:06
So it was just inside the block editor.

30:06-30:10
There was like three new links that you could go

30:10-30:13
and preview the things, the page.

30:13-30:16
So that was one of the things that we were happy about it.

30:17-30:21
Also, we, since there is usually pages

30:21-30:23
that are more important, like a checkout

30:24-30:26
or a landing page or whatever,

30:26-30:28
we also added in the editor,

30:28-30:32
the ability to change the setting for the images,

30:32-30:35
fonts or video in that page.

30:35-30:40
So maybe you want to be grid aware in the whole website,

30:40-30:44
but not in your landing page or in your checkout or whatever.

30:44-30:48
So you could also change it in a very granular way

30:49-30:49
in this sense.

30:50-30:53
And also we added a small display

30:53-30:56
that when you were going to add an image

30:56-31:00
and you had the image grid aware checkout,

31:01-31:04
a notification of saying, okay, this image is going to be added

31:04-31:07
and it’s going to be displayed in a different way

31:07-31:09
depending of the grid intensity.

31:10-31:13
So, we put a lot of effort trying to be like very,

31:15-31:20
yeah, very didactic and try to also get easy to the person

31:20-31:24
that is using it to visualize what was going to happen when.

31:25-31:28
And of course, we added also a banner

31:28-31:30
that was going to be in the backend

31:31-31:34
all the time till they close it saying,

31:35-31:39
you just activated a plugin that is changing things

31:39-31:43
in the front end based on great intensity.

31:43-31:44
So be aware.

31:45-31:50
And yeah, and that was all the back end part.

31:50-31:54
And in the front end, the idea was to have a top bar,

31:54-31:56
very similar to the one that is displaying

31:56-31:57
in Branch Magazine.

31:58-31:59
And indeed, we were–

32:00-32:04
Nora, in this case, was inspired by that,

32:04-32:06
because it was already pretty well designed.

32:06-32:10
So we thought we don’t have to reinvent the wheel.

32:10-32:12
And the idea was also quite simple,

32:12-32:17
just to say the grid intensity, the location,

32:18-32:23
and then have in the other part have the ability

32:23-32:26
to change through the intensity.

32:26-32:28
so you can also see the difference between them.

32:29-32:31
So, and all the logic that was behind,

32:31-32:35
pretty much I was using server-side filters in WordPress.

32:36-32:40
So, because one of the ideas of this project

32:40-32:45
was to move from JavaScript or client-side code

32:45-32:50
that was doing the first version of branch to the servers

32:50-32:53
or to the CDNs in the case of the workers.

32:54-32:59
And yeah, pretty much the idea was not to load anything

32:59-33:02
in the intensity when the intensity was high,

33:02-33:05
but place it at a good placeholder,

33:05-33:07
explaining why it’s not loading it,

33:07-33:11
and then give the opportunity of if you are clicking it

33:11-33:13
and you really need to see it because you want it,

33:14-33:15
they have this possibility.

33:16-33:21
So yeah, I don’t think I want to go much deeply on this

33:21-33:24
because I will leave the link to the plugin,

33:24-33:30
also to the Sustainable WP page as an example,

33:30-33:33
so you can visualize it, because I think it’s easier to see.

33:34-33:37
And that was a pretty interesting journey for me,

33:39-33:43
because, yeah, I guess there are some similarities

33:44-33:47
with your idea of, yeah, it should be a branch issue.

33:47-33:49
That’s a really good idea.

33:49-33:54
So they are good ideas, but you don’t have into account

33:54-33:58
all the space that they are going to take to generate it.

33:59-34:01
So, yeah, the plugin is in the GitHub.

34:01-34:04
I also will share the link of it.

34:05-34:06
Right now it’s still in alpha.

34:07-34:10
I didn’t have time to develop more about it

34:11-34:15
after the Grid Aware project finished,

34:15-34:17
And that’s also one of the things

34:18-34:22
that is one of the learnings of these things,

34:22-34:27
that if you don’t have some sponsoring

34:27-34:29
or some kind of project,

34:29-34:31
like the one you got in the Gringo Foundation,

34:33-34:37
it’s difficult to put the time to make these tools definitive

34:38-34:40
or going forward.

34:40-34:43
I have a to-do list of really good ideas

34:43-34:47
that they would like to do, but since I’m a freelancer,

34:47-34:50
I have to juggle a lot of things.

34:50-34:54
Right now, I cannot develop it, but it’s open source.

34:55-34:59
And one of the ideas of this bonus episode of Sustainable

35:00-35:04
P, one is explain about this super cool project,

35:04-35:07
also explain about this cool plugin.

35:08-35:11
If there is someone interested on sponsoring it,

35:11-35:14
I would be happy to continue developing.

35:15-35:17
But if there is no one with money,

35:17-35:19
but there is people with time that

35:19-35:22
want to continue developing, I’m super open to it.

35:22-35:24
That’s the idea of these kind of things.

35:25-35:26
So yeah.

35:26-35:31
And yeah, I think that’s pretty much the part more

35:31-35:32
close to WordPress.

35:32-35:34
And it was really interesting.

35:36-35:41
I remember those days working a lot, a bit more

35:41-35:48
that I’m used to maybe because I try to balance, but being also happy because the result was

35:49-35:55
looking kind of good. And I think that there is a very good foundation for doing cool things.

35:55-36:03
And I really think that the grid aware concept, it’s a really interesting one. And I see benefits,

36:04-36:12
Even if you can discuss if running it on a server is much more efficient than running

36:12-36:21
it in a client way, even if it’s similar, since you are stopping to load a lot of assets

36:22-36:29
depending on the grid intensity, you are already doing two things good.

36:29-36:38
are loading less data, which usually is less CO2 and energy required. And also you are exposing

36:39-36:45
that this, that loading has an impact and you have, you can decide if you want to load everything,

36:46-36:52
but there is something there explaining it to you that right now the grid is in intensity is high.

36:52-36:59
So we are deciding not to load everything and you maybe it’s the first impact for you

36:59-37:06
and you say, okay, so this digital thing, it’s still has some relation with the physical world

37:07-37:11
and we should maybe change our behavior depending on how the grid is.

37:11-37:15
So the awareness part I think is also really interesting.

37:15-37:16
So, yeah.

37:19-37:23
That was really, really cool to hear you talk through all of that because yeah,

37:23-37:29
I mean, ultimately you and Nora were able to take these concepts that we’d

37:29-37:36
been talking about and apply them in quite a different way, um, into, uh,

37:37-37:40
a plugin that in theory, anybody could, could use.

37:40-37:46
I mean, the way that we implemented the code into branch is undoubtedly you do

37:46-37:50
need to have good developer skills in order to have a play around with this.

37:50-37:52
I really love what you did.

37:53-37:56
I think one of the things we talked about with this project was how can we lower

37:56-38:01
the barrier to entry of people experimenting here and I think what you and Nora did

38:01-38:07
was an amazing example, I’m blown away by what you were able to produce.

38:08-38:08
Yeah.

38:09-38:09
Yeah.

38:10-38:16
I remember trying to deploy, indeed I deployed the worker in my own website and

38:16-38:21
everything using the toolkit that Fairchart created, because the documentation was pretty

38:21-38:30
good. But I was thinking, I spent more than an hour or two hours to set it up. I had to

38:30-38:36
set up the APK for the CloudFair. So people that never heard about APKs, you can ask for

38:36-38:42
one APK, maybe the electricity maps that right now is still necessary. But if you are going

38:42-38:46
to us to create a new account in Cloudflare.

38:46-38:50
Not everyone is using CDNs because some people just

38:50-38:53
had like 90% of the traffic from the same country.

38:53-38:54
So maybe it’s not needed.

38:55-38:57
So when I was creating the plugin

38:57-39:00
and thinking on lowering as much as possible the barrier was

39:00-39:07
like, I think I have to check how I can do everything server

39:07-39:07
side.

39:08-39:14
And maybe we can remove one friction, the Clover API and the whole setup.

39:14-39:19
And yeah, at the end, I think I’m not sure if there is a parity one to one

39:21-39:27
with the branch, but I think it’s pretty close and I was happy to, to have something

39:27-39:30
that is easier to set up right now.

39:30-39:32
And yeah, that was interesting.

39:33-39:33
Yeah.

39:33-39:33
Yeah.

39:33-39:38
I mean, I think, you know, you’ve done some really important groundwork here

39:38-39:43
for making this possible for others and inspiring others and showing them what’s

39:43-39:48
possible. I mean, you touched on so many things that I could just rabbit on about

39:49-39:55
all day long. But I do think one of the key things that Fershad in particular was

39:55-40:01
interested in, in experimenting on was what happens when you apply grid awareness or

40:01-40:08
carbon awareness at a CDN level or the server level rather than in the user’s

40:08-40:13
device using JavaScript, because that was what the first version of branch did.

40:14-40:16
And that was the example that people were copying.

40:17-40:21
Um, and Phish is just about finished doing some testing with the good

40:21-40:22
people at green coding Berlin.

40:23-40:27
Um, and we’ve actually got some really good metrics that show.

40:28-40:31
Yeah, it’s about a 7% difference.

40:31-40:31
Okay.

40:31-40:40
So if you were running that JavaScript to implement grid awareness versus doing it

40:40-40:44
on a CDN, we think there’s about an overall 7% reduction.

40:45-40:49
And that’s because user devices are not particularly well optimized to do this,

40:50-40:54
but CDNs are, so that’s assuming that there is still energy being used on the CDN.

40:54-40:59
It’s not just like, oh, it’s 7% off the user device.

40:59-41:05
Like we think it’s actually a 7% reduction in the approach, um, which is pretty cool.

41:05-41:06
It is.

41:06-41:06
It is.

41:07-41:07
Yeah.

41:08-41:11
You rightly say it’s complicated to set up and that’s the trade-off.

41:11-41:13
That’s what we’ve learned, you know?

41:13-41:14
Yeah.

41:14-41:15
We can have some efficiencies.

41:16-41:16
Sorry, go on.

41:16-41:23
No, I want to think that the approach that I’m using in the WordPress plugin is more

41:23-41:28
similar to the one in the CDN because everything is happening, not in the client,

41:28-41:32
But I would guess that it was a bit more efficient,

41:33-41:36
but we didn’t have data still in the last meeting we had.

41:37-41:39
I’m so happy to hear that we have it

41:39-41:43
and that is pointing that probably it has some benefits.

41:43-41:46
So yeah, I think that’s really good.

41:47-41:47

• Absolutely.

41:48-41:51
And I think the whole exciting thing about this project is,

41:53-41:56
as you rightly said, this, for me,

41:56-42:00
the kind of whole reason why you’d implement a grid aware website or why

42:00-42:07
you’d care about this is to create those nudges and that association between the

42:07-42:10
fact that your digital usage does have an impact.

42:10-42:14
And that’s not to say you shouldn’t use it, but you should use it more

42:14-42:19
mindfully and consider how it could be used in different ways to reduce the

42:19-42:24
impact and the whole process of this project, working with the advisory group,

42:24-42:27
developing the code and applying it to branch,

42:28-42:31
you know, doing the followups with, you know,

42:32-42:34
calls like this or summaries like this is,

42:35-42:39
I think we have some really great potential here

42:39-42:43
to raise awareness and create that link in people’s minds

42:43-42:46
and nudge more positive behaviors.

42:47-42:51
And I think, you know, that’s a massive contribution

42:52-42:54
to the realm of digital sustainability,

42:54-42:55
showing people what’s possible.

42:56-42:58
So I love that, and I love what you and Nora did,

42:58-43:03
’cause I really feel that your work took these concepts

43:03-43:06
and really inspires, you know,

43:06-43:08
how does this work in practice?

43:08-43:09
How would we actually tackle these

43:10-43:13
for a larger audience of people?

43:13-43:14
So kudos to you.

43:14-43:15
Yeah, thank you.

43:16-43:18
Yeah, maybe for closing up,

43:18-43:26
we can, uh, point to the right tools that were generated by the, by the project.

43:26-43:30
One of them is the plugin that I mentioned, WordPress, but there is

43:30-43:36
also really nice and good documented toolkit from the, from the project.

43:36-43:40
So can you summarize what, what is there to, for people to use?

43:40-43:41
Yeah, absolutely.

43:42-43:47
So there are a suite of code bases that you can use.

43:47-43:52
There’s one which we call the core grid aware websites library, which enables

43:52-43:57
you to set up the connection with electricity maps, which is the key data.

43:57-43:58
So we’ve got that.

43:59-44:03
There’s then, um, a separate set of plugins that are specifically

44:04-44:06
for people using CDNs.

44:06-44:11
So there’s a CloudFlare worker plugin and Netlify plugin, which kind of creates,

44:12-44:16
um, a bridge between the data and your website.

44:16-44:20
And then there’s a third layer of things which Phish developed, which

44:20-44:21
is the Grid-Aware Websites component.

44:22-44:22
Yes.

44:22-44:25
And so we learned loads about web components in this project too,

44:25-44:27
neither of us had done it before, so that was quite exciting.

44:28-44:32
And that came through, uh, and a suggestion through the advisory group

44:32-44:34
as well, actually to take that approach.

44:34-44:35
So yay for the advisory group.

44:36-44:41
But the third thing is a kind of, it’s as close to a drag and drop web

44:42-44:46
component as we could get it with the money and funding, and so it

44:46-44:50
this little tool, well, little, yeah, I suppose it is quite little.

44:50-44:54
This toolbar that you can put actually anywhere in the website, top, middle,

44:54-44:59
or bottom that gives you then gives the user centered controls.

44:59-44:59
Yeah.

44:59-45:03
So you’ve kind of got these three, three layers of plugins and each one can be

45:03-45:06
used separately or integrated together.

45:06-45:10
And the integration together is what you can see in our final version of branch.

45:11-45:11
Yeah.

45:11-45:12
Those three things playing.

45:12-45:15
Indeed, one of the things that I wanted to do

45:16-45:21
in the next steps was to change the one that I’m using

45:21-45:22
that is not a component,

45:22-45:25
it’s just built by HTML and everything in WordPress

45:25-45:26
by the component.

45:27-45:29
So it would be using that.

45:30-45:32
That was one of the idea, I was talking with fish

45:32-45:36
and it just arrived, the idea arrived

45:36-45:39
when I was not able to put more time to it.

45:39-45:42
But yeah, that’s a really good component

45:42-45:46
can use it in any, in any place.

45:46-45:50
So it hasn’t, it doesn’t have to be a WordPress and can be any kind of web

45:51-45:54
that you just can call the web component and add it.

45:55-45:58
So yeah, that’s a really cool tool that to use it.

45:59-45:59
Yeah.

45:59-45:59
Yeah.

45:59-46:01
We were pretty, pretty proud of that one.

46:01-46:04
And we also have to give props to Tom Jarrett, who was the designer

46:05-46:10
worked with us on that as well, because what you see is the final version

46:10-46:15
about 60 million different iterations and versions and ideas and things

46:15-46:17
and that we were playing around with.

46:17-46:24
Um, ultimately I think what we ended up with is quite a bit, you know, obviously

46:24-46:25
there’s always room for improvement.

46:25-46:28
I can’t wait to get funding so we can do version three.

46:30-46:35
Really, really happy with the massive leaps forwards that we had in terms of

46:35-46:39
the design and the communication to the user and yeah, big props to

46:39-46:40
Tom for helping us with that.

46:40-46:47
Yeah, I really invited the listener to go to Branch Magazine or to the SustainWP

46:48-46:59
example page to see these two. They are quite similar, the toolbox on the top bar.

47:00-47:06
But yeah, I think that’s pretty clean and understandable design to understand what’s

47:06-47:12
going on about the intensity and the idea that you can change it to even understand

47:12-47:14
better what’s going on.

47:14-47:15
I think it’s also really cool.

47:16-47:16
Yeah.

47:17-47:22
So, yeah, I think we covered pretty much everything I wanted to cover with you.

47:23-47:27
It was a whistle-stop tour of the GridAware websites project.

47:27-47:28
I mean, it was amazing, wasn’t it?

47:28-47:33
I mean, there’s still so much we could unpack and get into, but I think we touched on a

47:33-47:35
lot of the most important aspects.

47:35-47:37
Yeah, the last question would be if you

47:37-47:42
think that the concept of grid-aware websites has legs.

47:42-47:45
And do you see it evolving in the near future?

47:46-47:49
Of course, if we get some funding, I think it would.

47:50-47:52
But yeah, how do you see it?

47:53-47:56
Spoiler, I see legs on this, because I

47:56-48:02
think it really makes sense to keep playing with this

48:02-48:07
and see how also people react to this new information.

48:07-48:11
Because we are not used to go to a website

48:11-48:15
and have different display options

48:17-48:18
depending on the grid.

48:18-48:19
This is a really, really new concept.

48:20-48:22
And I think it’s a powerful one.

48:22-48:24
But of course, I’m biased.

48:25-48:26
So I don’t know.

48:26-48:29
How do you see– do you see that there is–

48:29-48:32
that the project has legs or can evolve in some direction?

48:33-48:35

• Yeah, I mean, I’ll tell you a story.

48:35-48:38
So as we were wrapping up the project,

48:38-48:42
the summary of the project, we had a power cut.

48:44-48:45
Now, I know you know this,

48:45-48:46
but the listeners might not know this.

48:47-48:49
I live in the forest in Exmoor National Park,

48:49-48:51
and it’s quite a remote place,

48:52-48:54
and we have lots of trees and lots of wind.

48:55-48:56
And those two things combined together

48:56-48:58
I mean, pylons come down quite often.

48:59-49:02
And so we had a power cut right as I was,

49:03-49:04
a whole day power cut.

49:04-49:05
It’s actually quite short for us.

49:05-49:07
We’ve had them for five or six days before.

49:08-49:13
But it reminded me of how we take for granted

49:14-49:16
the power to power our devices.

49:16-49:18
So this one particular day,

49:18-49:20
my phone had very little charge on it.

49:21-49:24
And I was very, very, very conscious

49:24-49:26
of where my electricity was going.

49:27-49:29
And it really made me think, I was like, wow,

49:29-49:31
I really wish that every website

49:31-49:33
was a grid aware website right now.

49:33-49:35
And every website I go on,

49:35-49:37
I could opt to go into low impact mode

49:37-49:41
and have a stripped back simple version of the site.

49:41-49:43
Because I know that that would mean

49:43-49:45
my phone would use less energy.

49:46-49:49
So not really so bothered about the wider grid right now.

49:49-49:52
What mattered to me as that particular individual

49:52-49:55
facing the consequences of blinking climate change.

49:55-49:58
I didn’t have ready access to power

49:58-50:00
and I wanted low impact websites.

50:00-50:03
So for me, that experience came along

50:03-50:05
at just the right time to remind me that,

50:06-50:12
we are going to be dealing with crises, with storms,

50:12-50:14
with things that disrupt our infrastructure

50:14-50:15
and we need to be better prepared for it.

50:15-50:17
And we need to think about our users.

50:18-50:21
And I think GridAware websites really is

50:21-50:25
has power there to help people out in these difficult times.

50:27-50:35
So for me, I think there’s a very practical usage that I hate to think we’re going to have to need, but I do believe we will.

50:36-50:43
And then of course, you know, going back to some of the points we discussed earlier, there is right now in this immediate time,

50:44-50:49
the opportunity to raise awareness about these relationships and to nudge different.

50:49-50:58
And when I say this relationship, I mean the relationship between what’s powering our digital experiences and the impact on the environment around us.

50:58-51:09
So we still have the opportunity with Grid Aware to raise awareness of that relationship and I think provide more nudges on how people could do things differently.

51:10-51:17
And those nudges need to come at the point when you’re using something, not be disconnected from that.

51:17-51:22
So for those two reasons, I really am very proud of what we’ve done with the GridAware

51:23-51:23
websites.

51:23-51:24
I think there are legs.

51:24-51:34
I want to see more designers, more academics, more creative design studios, more businesses

51:34-51:40
experiment with these ideas and help us build up the use cases for this kind of approach

51:40-51:45
of websites that are part of a living system and not divorced from it.

51:46-51:51
So yeah, I felt like, as you can tell, I’m quite passionate and quite excited by the

51:51-51:54
legs that this idea has.

51:55-51:57
Yeah, and I really hope we can work on it some more.

51:59-52:00
That was a beautiful ending.

52:00-52:03
So I think we can close it here.

52:04-52:05
Thanks a lot, Hannah.

52:05-52:07
It was a pleasure to talk with you as always.

52:08-52:14
Yeah, and to you, Noah, as well for always being such a fantastic source of inspiration

52:14-52:21
and action in these spaces as well. I admire so much of what you do and I know as a freelancer

52:21-52:26
it’s hard to find the time and energy for these things but you manage to and I think that’s really

52:26-52:31
inspiring for others to see as well. Thank you. Bye. Bye for now.

52:35-52:40
Thanks for listening. I hope you found this bonus episode interesting and you want to learn more

52:40-52:46
about GridAware websites. Remember that you can find all the resources mentioned during the episode

52:46-52:52
in the show notes, including the article where Nora and I explain in more detail how the GridAware

52:53-52:59
WordPress plugin works and also the plugin repository in case you want to test it. I would

52:59-53:05
love to hear your opinions on this topic. For that, you can leave a comment on the website or share it

53:05-53:10
in the social media platform you are more comfortable on. And if you think that the

53:10-53:16
episode could be interesting to our WordPress colleague, please share it. Stay curious. Bye bye!