The Week in Green Software: Greening the Front End

Chris Adams is joined by Ines Akrap from Cognizant to talk all-things sustainable web design. Together, they delve into the nuances of designing energy-efficient websites and the challenges of green coding in frontend development. Ines shares valuable insights from her experiences at the Linux Energy Foundation Summit and the SDIA Green Coding Summit. The episode also explores common mistakes in optimizing sites for carbon efficiency and discusses exciting projects in the field of green software that are generating buzz. Resources like Website Carbon, Ecograder, and Lighthouse are highlighted, alongside discussions on the Software Carbon Intensity Specification and the CarbonAware SDK. This episode is a must-listen for anyone interested in the intersection of web development and sustainability, offering practical tips and exploring new research horizons in the quest to decarbonize the digital world.

TRANSCRIPT BELOW:
Ines Akrap: You cannot fix something that you cannot measure because you just don't know that you have an issue. So being able to detect this issue and to show these numbers to the decision makers, I think this is something very important.

Chris Adams: Hello, and welcome to Environment Variables, brought to you by the Green Software Foundation. In each episode, we discuss the latest news and events surrounding green software. On our show, you can expect candid conversations with top experts in their field who have a passion for how to reduce the greenhouse gas emissions of software.

I'm your host, Chris Adams.

Hello, and welcome to another episode of This Week in Green Software, where we bring you the latest news and updates from the world of sustainable software development. I'm your host, Chris Adams. In this episode, we're joined by Ines Akrap, a developer who I first met in Paris at the Linux Foundation Energy Summit earlier on this summer, and most recently with whom I shared a stage at the SDIA. The Sustainable Digital Infrastructure Alliance Green Coding Summit in Berlin earlier on this month in November. We ended up talking about digital sustainability for front end developers, and we had such a good time that we figured it might be worth continuing this conversation on the podcast for other people who are curious too.

Ines Akrap: Hi Chris. Thank you so much for having me here. I cannot stress enough how excited I am to be here since I'm listening to you so much that it just came out on my Spotify wrapped at the end of the year.

Chris Adams: Wow, I, thank you, I did not know about that. Okay, so, and for people who are new, or who weren't at either of these events and didn't see you speaking, I figured it might be worth just briefly giving you the floor to introduce yourself and talk about some of your background for this before we dive into some of the specifics about what we'll be talking about for the front end, so optimising for carbon at the front end.

So yeah, Ines, the floor is yours.

Ines Akrap: Sure. So hi everyone. My name is Ines. I'm a web performance engineer and sustainable web consultant and cognizant and centric. And yeah, I've been doing this for a few years now with many different clients and hope that I can share some of these things with you today.

Chris Adams: Cool, thank you for that, Ines. And Ines, now, I know that we met in Paris, which for me felt really quite exotic and exciting. And then we met recently in Berlin, but as I understand it, you're based in Munich, in South Germany. Maybe we could talk a little bit about that before we dive into the inner nerdery of what we're going to be covering.

Ines Akrap: Sure. So actually I'm originally from Croatia, from Zagreb. I lived there and finished my master's degree until I was 20, 23, so more or less. Then I went for actually exchange year to Portugal, so I lived a year in Portugal. I came back and thought, Oh yeah, no, I'm not staying here. I need something more, something different. And I actually ended up in Barcelona. So I lived in Barcelona for five years and then this move happened, which people still think I'm crazy about, but I moved from Barcelona to Munich where I am now. And. I'm still very fond of this move. I am very happy to be here because my mind is way more German than people think.

I really love how things function here, but I'm definitely super fond of my memories in Barcelona as well. So yeah, currently I'm living and working in Munich.

Chris Adams: Okay, cool. Thank you for that. All right, then. So if you're new to this podcast, folks, as I mentioned before, my name is Chris Adams, I work as the chair of the policy working group at the Green Software Foundation, and I'm the executive director at the Green Web Foundation. It's a Dutch nonprofit working towards an entirely fossil free internet by 2030.

And as a reminder for people who are curious about what we discuss. Whenever there is a project or a story or a paper or a project online, we try our best to link to it in the show notes below this episode. So if there's something you hear about and want to learn more about, please do get in touch or please check the show notes because we spend a bit of time to make sure they're useful for other people who come along to this.

Okay, Ines, are you sitting comfortably?

Ines Akrap: Absolutely.

Chris Adams: Well, then let's begin. Okay, so as I first mentioned, I first came across your work when you were presenting with, I believe, your colleague Claire Thornwell at the Linux Energy Foundation Summit in Paris, where you were talking about your experiences building calculators and websites.

Tools to help clients optimize for carbon. Uh, and that was mainly for an audience of energy nerds and techies who don't really work at the web, or the web, website, and were actually really captivated by this. I figured it might be worth just talking about how that even came about in the first place.

Because yours was the only presentation specifically about web. And I enjoyed it and appreciated it. But I'm sure there's a backstory, so yeah, take it away.

Ines Akrap: Sure. Okay. So how long of an origin story would you like? Yeah, actually. So I, I was working a lot years as a front end engineer and with my background, so my master degree is actually in telecommunication and information technology. So I actually do have a background in networks and all these like data transfer. So this was always a very interesting part of a front end for me. So bit by bit, I ended up in web performance also as a person who doesn't really like to wait and is a huge rage clicker. This was a logical way. You know, I want to optimize it for myself as much as for everyone else. And I think it was end of 2020 where I was looking at this, of course it was end of 2020, so it was an online conference that I was looking at from the conf comfort of my sofa about JavaScript and just about this sheer amount of unused JavaScript. And the presenter at that point showed calculated just this rough number of unused JavaScript and started comparing it, of course, to carbon emissions and to trees.

And this was actually-

Chris Adams: Just a quick one, this is JavaScript, when you say unused, like when someone visits a webpage, you're talking about a bunch of stuff that is sent as like dead code that isn't actually used by the browser, is that correct?

Ines Akrap: Exactly that. So there is, these days, there is so much JavaScript that is just not being, well, that's being processed, but it just doesn't serve for anything useful on the website. So he was talking about this because there is this tendency in web development where you just put everything on a website and with the big systems, and of course, people coming and going, a lot of people are afraid to remove these things, you know, so this is how this thing came about and it was a moment of the mind blow turnout for me and for my career, when I realized this is even a thing, no? And then I went a bit like to search into the topic to figure out what, what this sustainable web even is and realize that in my work as a web performance, I'm already covering quite some strategies and optimizations that are leading towards, towards cleaner and greener web. And at this point in time, we already had a small web performance group inside of the Cognizant and Centric and Claire was part of this group as well. So we always function really well together. We are quite a dangerous combination because I'm an engineer and she's a business design person. So especially when we go together, we have the same kind of goal. We can cover quite a broad spectrum of generally topics and like points of view, like storytelling and all that. So we'd started working towards this topic a lot together, of course, with our team as well, who was the web performance team, quite embracing this whole topic. And this is how this part slowly came about. I guess the extra just to add on top is that we were building a tool that was a real user monitoring tool. So we can go a bit inside of that, that later. But basically, this tool was originally supposed to measure, you know, core web vitals, web performance metrics, and all that. However, then we came across CO2.js and we realized that we are already collecting the data that we can just plug in and actually give users, well, give our clients in a way, almost real time assessment of the carbon of their website.

Chris Adams: Okay, if I may just check with you one thing, you use this term real user monitoring, and this is, I think it's referred to as RUM sometimes, and this is the idea that rather than using an entirely modelled approach when you might, say, have a virtual browser visit a web page, you're actually, it's much more tied to having a well, as it says, a real user tracking this, so you've got a much better idea of, okay, you're collecting information about, say, it's this particular browser that's doing this particular work, rather than just a generic browser in that sense.

And that ends up being slightly more accurate than an entirely modelled approach. Maybe we could talk a little bit about some of those things, because you mentioned being able to translate from energy to, say, carbon and stuff with CO2.js, and I'm very happy to refer to that a little bit later, but as I understand it, when you, these two approaches of using, say, a RUM based approach or a kind of synthetic based approach, this brings out this this ends up making people aware that there are assumptions that you might use in a typical kind of website carbon calculator tool that might not be, might not hold true when the real user is accessing a website, like whether they're signed in, or they've got cookies set, or stuff like this.

And this can also have an impact on visiting a site, for example. Maybe we could talk a little bit about some of that stuff there, because I realize that this is something that you end up having to deal with when you're building some kind of, uh, actual tools that provide the kind of more robust numbers for this.

Ines Akrap: Exactly. So this was, to be honest, a bit of a game changer, no? Because when you think about, you explain as well, RUM tool very well. So what happens there is just, of course, you add a very small script to the website, to every single page of a website. And this is the huge deal as well. So when you use any synthetic, uh, monitoring, which is no, things like Website Carbon, EcoGrader, or any of these tools, especially in web performance, we usually, if you're in front end development, it's usually going to be web page test, it's going to be Lighthouse, something from that you're emulating. And what's happening actually recently is that you're emulating such a bad scenario that web performance may be quite good. In the case of carbon, actually, what happens is that there is no interaction with the page. And actually, 90 percent of session is happening in these interactions, no? After this first load. So with carbon and at this point in time, kilobytes transfer being a proxy for carbon, what's happening is that there can be a huge difference in between just this first load and actual number that we get if the user is interacting with page, if they're scrolling. So if the page is implemented well, and please do that, implement lazy loading and strategies like this, if this is implemented. We don't know if users ever loaded these assets or not. And this is where the RUM tools comes very handy. So as you already mentioned, accepting cookies and then starting to scroll, starting to click, starting to open stuff. This is where the number, let's say, of the transferred, transfer size can lead up let's say from, I actually, once I examined the website, It was four megabytes on initial load, five megabytes after the cookies were transferred, and 24 megabytes if you would scroll all the way down because of the amount of images. So measuring carbon by just this first view, by just this four megabytes,

Chris Adams: be five times smaller, yeah.

Ines Akrap: inaccurate, inaccurate, number.

So even though this number is still not super accurate, we are all aware of this, it comes much closer to the real scenario than I would say the synthetic one does.

Chris Adams: Oh wow, thank you. Okay, so that's um, a useful thing to take into account for people who are starting out with this, because yes, there are tools which you can begin, but there's often, there's basically quite, there's quite a lot of depth in this rabbit hole if you were to start doing this on a kind of monthly basis or kind of really use this to manage, um, uh, the performance of a website over an extended period of time.

Okay, cool. I also mentioned, I also saw that you have had some involvement with the W3C Sustainable Web Design group as well. And I figured, and I think I've actually heard you talking about that on one other podcast or seen you speak about some of that before. Maybe we could talk a little bit about that as well. Maybe you could talk maybe about the motivations for that and just show, just show maybe how that's going or what some of this might be, where this might be going in the future. Because we did do an interview, I think a couple of weeks ago, with some of the people who have been very involved, but maybe It's interesting to hear your perspective as well, because I think you're speaking and you're working at a larger organization, and the two people we were speaking to were from a smaller organization there, so I was, it was, I'm, I'd be curious about your perspective and how that's been going.

Ines Akrap: Absolutely. So yeah, it actually, this whole thing came to be because one of my colleagues, he was at the web performance conference and he met Zoe from Google. So she told him about this group even existing. So the moment he came back to Munich, he was like, yes, you have to join this. So this was actually very cool.

This was how I found out about this group even. And I actually came right in time because we were still, it was actually about a year ago. It was right. It Now, I think I'm probably hitting one year mark now in W3C, Sustainable Web Community Group. And yeah, it's been very interesting because there is such a nice diversity of people talking about this topic from different perspectives. So we started first talking a lot of, there was, of course, a lot of. so much for joining me today and I look forward to having a lot of interesting discussions about this approach because of course, as you and everyone listening to this knows, it's a very complex topic, there is like so much to it, so many nuances, and I was so happy to actually be a part of this conversation, especially because I was already working with some of the organizations trying to push this topic, so thank you And yeah, a lot of times it happens. I've seen this in web performance as well. A lot of times happens that it's a, quite a different scenario when you have a control, complete control over the things you're trying to improve. And when you don't, and a lot of times in these big companies, for example, the client I'm currently working with, they don't really have control over whole, like all the code because they're inheriting some of the parts. So this is a very tricky part to be in that you have to navigate around. So yeah.

Chris Adams: So just two things there. So you mentioned, so Zoe, this is Zoe Maria Lopez, I think, at Google. Okay, yeah, she's been on the, I've seen her on the mailing list talking about this and asking some questions already. Okay, and if I understand it, there is one flip side, which is, yes, when you've got, say, a very small organization and freelancers, there is possibly a kind of, people might feel like, okay, yeah, this is very much in line with my values, but you might not have the scale.

And then at the large companies, there's this idea that, well, we have the scale, but we're also publicly traded companies, and they might have different incentives. So the idea of having different people in that group should hopefully mean that you don't end up going more towards something which is really lovely but doesn't achieve any kind of scale, or the other side which is totally scalable but not really, maybe slightly more in the interest of shareholders than the planet, or everyone else, or the entire group, basically. Okay.

Ines Akrap: I think it's a very, again, like same as web performance, like it's very tricky topic because it's such a fine balance. No, it's such a fine balance. And actually one thing that I was just discussing recently with the client is just this. Of course, installing this culture of realizing the cost of something because you see the benefits, you see the business value. However, I think a lot of times. Especially the business perspective does not see the cost when it comes down to performance of the website, UX of the website, and of course, the energy efficiency and carbon of the website.

Chris Adams: I guess it's where the costs are being shifted to, for example. You might have something which means you've got nice developer experience, but if everyone's having to download three or four megabytes of JavaScript before they can use a site, that ends up being pretty ropey experience, for example.

That's like an example of a cost in this scenario. Okay, cool. Thank you for that. And we will probably come back to the working group stuff there, because I think that's something that's of interest. But maybe we could talk a little bit about the kind of fireside chat we ended up doing in Berlin together at the SDIA Green Coding Summit because I had a lot of fun. And we ended up talking about quite a wide range of topics given the time available. And I figured before we dive into some of the specifics about common anti patterns or easy mistakes you might make that you could learn from, or good examples of, say, galleries and things like, or things to learn from other people doing this well, are there any kind of takeaways from the event that you had?

Because I really enjoyed it and it was the first time I've seen where you've got, this was largely funded by the German government actually. They were investing in this particular field in a way that I haven't seen so many other countries doing so far. So maybe I'll ask you, are there any kind of takeaways that you had that, that you'd like to share here? Because you were there for the two days with me and there was a lot to take in, wasn't there?

Ines Akrap: Yeah, I was just going this morning, I was going through my notes and I actually quite like that. A lot of talks just confirm some of the things that I also stand behind that are my opinions as well, which is I would probably emphasize the part of the three important things to to move forward that was know that the fireside chat about how to make people care the way forward is awareness responsibility and regulation, so those three I think are very the three pillars in general that we need know so awareness responsibility and regulations I think those three are definitely a way forward to have it in mind And then, of course, a bit about the fact that companies move very slowly. This is something I felt on my skin so, so many times. So it took actually many months to even put this measuring tool that we offer on the client website, just because of the privacy concerns and all that. And it's actually very, it's made in a way that collects only. So even collector script is open source.

So it's making a way that it's very transparent. It collects only, uh, performance data. However, it took quite some time to get all the approvals to even start measuring this data, of course, calculating carbon. So I guess that one, and what else? Oh, yeah. And a great point from Anita as well, that we need sufficiency.

We need to learn to need and to use less. I think that's like a general, even when it comes to development, even when it comes to general life, we just, I have to have a feeling that we're already sufficient. We have enough of, again, I'm a bit generalizing here. Sorry. A lot of times we kind of especially. In this kind of middle, upper middle class, we have a lot, so just to start living with less and start delivering less.

Chris Adams: There were two things you said that I think are interesting that really caught my attention as well because at various, when you see other conferences take place, and we had Decarb from the Green Software Foundation just run last week, or maybe at the time of recording, when this lands, it'll be a few weeks, so please check the website for more details to check about the dates on that.

The thing that really struck me was A, there was this idea that there were organizations basically saying, yes, we're expecting to be regulated, and we're seeing regulation coming here. And that's something that I've generally seen lots of other organizations been pushing back against. But there was an argument being made that, essentially, you need to have this, to provide a kind of level playing field, for everyone to take this first step because, in the short term agreeing to some of this stuff either will be expensive or will incur some costs that will have to happen. And that was one thing that you tend never to see inside technology companies. So seeing organizations say that for the first time was quite a thing. And also, this idea of the notion of, okay, there is a, I think there's a really lovely quote or there's actually, I've ordered, I've ordered a hoodie from an organization called Careful Trouble, and I think it's Rachel Coldicutt, she mentions this lovely quote, just enough internet.

The idea being that there's a certain amount that you do need, and you, and there, and that's not the same as having to just like, just mash the accelerator pedal and just build as much as you can, basically. This is a interesting, in my view, a contrast to how I've seen other people talk about sustainability where there's this idea that, oh, we're going to have exactly the same kind of lifestyle, and, but everything's going to be electric, for example, and we're just going to keep using more and more.

So this was something that really caught my eye, actually. I think maybe there's actually one thing we might talk about when we were there, actually, was there was a number of open projects that were, that we saw, I think we saw Cameron Casher from ThoughtWorks talking about Cloud Carbon Footprint. And, uh, one thing that he mentioned, and we'll share a link to that, which is an open project that people in the GSF may be familiar with.

That kind of caught my eye. I can't remember where, there were multiple tracks and we'll share a link to this. Were there any other kind of talks by particular people that really caught your eye that you'd want to mention? Because the cloud carbon footprint thing was interesting to me because when we had one of the financial institutions listed there, they basically came out and said about half of our emissions are associated with ICT, and we're using tools like this to track this because we are getting numbers from different providers, but we also have things on premise, and this is one of the only ways we have right now to end up with some kind of numbers that are comparable across all the different providers and organizations we do have.

Ines Akrap: Yeah, I would say that my favorite deep dive tech, tech nerd talk, uh, was the one from Florian from Florian Quèze,

Chris Adams: Ah, yeah.

Ines Akrap: pronouncing your surname wrong Florian, but yeah, it was meeting him and talking to him. So he is working on Mozilla Power Profiler. And that was for me, it was just so many insights.

I love that tool and

Chris Adams: That was really deep.

Ines Akrap: out. Yeah, that was super deep and, but it's, it was super amazing for me personally, it was like, again, I'm familiar with this tool, so learning what's behind and then also getting an opportunity to pick his brain, I think that was one of my highlights of the event.

Chris Adams: His story about reverse engineering every single operating system to come up with some numbers was like, pretty like, wow. I didn't realize there was, it was that involved to do this. We'll share a link to both his talk to the slides, and I'm not sure when the recording will be online, but we definitely can share a link to the slides straight away, because that was actually a real, that was a real faith for me as well.

And later on, we'll talk a bit about that, because well, we basically did a workshop as well, and maybe that's one thing we'll spend a bit of time touching on. So, I actually ended up leading a workshop that Fershad, one of my colleagues, Fershad Irani, had designed with me. Basically giving people a way into looking at tools around optimising for carbon on the front end.

So we spoke a little bit about coming to some of the forcing factors that you might have in terms of basically there's regulation driving some of this, like in Europe you have the CSRD, the Corporate Social Responsibility Directive, which ends up manifesting in the laws in all various countries. But even in California, there is the, there's a recent law passed with a similar alphabet soup acronym, which I'm afraid I can't remember off the top of my head as I speak, but I'll add it as soon as I can to the show notes.

But we also speak a little bit about introducing people to tools like CO2.js. And other ones, which basically track this. So we started with that. Then we showed website carbon. Then we actually did a bit of a deep dive into the profiler as well. Actually, maybe I'll ask you actually, like you, you were in that workshop with, although all the way through with me and, uh, I, I realized that you also, you helpfully shared some specifics about the differences between cookie websites and stuff like that for people.

Are there any things that you might share for other people because we've made this an open source workshop and we'll link to the all 100 slides that we did for this. But for people who were about this and coming into this front end developers, are there any things you might share for other people who are coming to this for the first time and trying to talk about, like, maybe the, their first steps of tracking this or what kind of the common things you might need to take into account, for example?

Ines Akrap: Like first and foremost, I love the workshop. So for me as well, like there was a, at the same time on the, so on the green coding summit, they were on the second day, there were different workshops at the same time. So that was the, the worst part because I wanted to see them all. I gave that as a feedback. I was like, please give me, give me time to see them all. Of course I chose as well, I chose to be at yours to see as well how you approach this. So hopefully I can as well serve as an advocate for something like this because this was something I was doing this whole year was trying to raise awareness of this topic and I think what you did as well, did an amazing job. So for me, I knew most of these things. However, I think it was very well done. It was very like comprehensive and it was very, I was going through these basics of how to actually understand it and calculate it. And I think this is the biggest issue that we generally have is that people just not being aware and just not knowing how to do it and then where to start.

Chris Adams: Yeah, I think, I, thank you, first of all. The thing I, one thing that we were trying to do was give people an idea that, yes, there are models and there are tools, but there's also a lot of uncertainty in a lot of this, and there's a really nice quote that I think was shared, that Fershad added in, but that Simon Wardley has used in multiple places and goes back to the 80s, which basically says, all models are wrong, but some models are useful, with the idea being that, yes, we spoke about data transfer as a proxy right now because we currently do not have that much access to the information that you might need to come up with some more to draw more rigorous conclusions when you're trying to track the power used on a website.

And this is partly why we started with high level models, then moving into some tools like Website Carbon that you might be familiar with, and then diving into the profiling tools, because, to my knowledge, they're one of the only ways that you can get actual resource consumption figures from end user devices.

And before that workshop, we hadn't actually realized that these are usable for mobile devices as well. So that was actually a really nice thing to take away. One thing we got was that we had a couple of people from Mozilla, people who work on the Firefox profiler themselves. They joined the workshop to basically help figure stuff out.

And I think actually one thing that happened is over the weekend, the manual profiling steps we were demonstrating during the workshop, by the following weekend, some pull requests had been opened to fix some of the tools to automate this, and now there's a piece of software called Sitespeed, which now can run these on an automated basis.

So, that was actually quite cool, but it means that me and Fershad will now have to redesign the workshop for this, actually. There was also a really nice, it was a good chance to actually talk about some of the other models that we do have that are in the community right now, because we spoke a little bit about the Software Carbon Intensity, which is used by the Green Software Foundation, but it was also useful to be able to compare that to some of the other models that you might see, like the Sustainable Web Design 1 and the 1 byte model, or even Dimpact, which is like the digital impact one, where we had Daniel Schien come on a few weeks back to talk about that in a bit more detail. We'll link to that in the show notes as well for other people. But while I'm here, I figured I could ask you, are there some, there are ways we can do it right, but there's also, there's also some kind of common mistakes that you might see people making when they, when they take their first steps in this field, and I figured it might be asking you while you're here, and when you've seen people do some of this, are there like mistakes you might want to be looking out for if you are first taking a step into this field that you would give people a kind of heads up on if they were maybe a special, they know how to build websites, they might know a little bit about web performance, and they're trying to figure out how to transfer some of this knowledge into this kind of slightly new or updated domain.

Ines Akrap: Yeah, sure. I think the most important thing to have about this topic is that this topic is very vertical. So it's not one role in the development process that is responsible, which usually comes towards the developer. It's, oh yeah, they didn't implement it well. Yes and no. No, like it depends. It could be implemented, potentially not in the most optimized way.

However, a lot of times what I've seen is that no matter how good the implementation is, the moment the content comes in, it's when the things start shifting. No? Because we're talking again, there is just this sheer amount of assets, a lot of times of images, of fonts. I have a feeling that this overconsumption that we were already talking is happening without thinking what is actually beneficial to the user because now working in, in, in, in field of, well, I'm just going to call it now sustainability because the web are sometimes used interchangeably, however, green. Of course, just goes towards just reducing the energy and carbon footprint and sustainability goes more towards people as well, designing for the people, for the planet. So includes stuff like accessibility and in the end of the day, good user experience. And I think this kind of benefits the business a lot as well, because if you design something in a way that's fast, that's responsive, that's efficient, it's probably going to be better user experience, which will potentially convert into better conversions rate into better, which it's something that business is probably trying to do. So I guess my first advice here would be involve everyone. Make everyone in the process aware and make it a joint goal and not just the fight between developers or designers trying to optimize something and then let's say business kind of stopping them because it doesn't make sense on the business. It does, however, everyone has to understand how it actually does.

Chris Adams: Okay, and there was also one thing we spoke about, um, during the fireside chat was that let's say you're going to be doing some things with, say, carbon aware, this idea that websites might change or respond or functionality might be different based on the amount of fossil fuels on the grid, because this might be one way to materially or measurably reduce the carbon emissions in aggregate across a number of users, for example.

Uh, we spoke a little bit about there's some pitfalls and pratfalls around that. Yes, it's a cool idea and you can start using this, but there's, it feels like it's quite important to provide maybe a way to override some of this in many ways. You might be setting a default, but you're not setting a concrete limit in some cases because you might not understand the full context of a user.

Maybe that's something that you, we could talk a little bit about because I've, this is something we've seen done right, and then done poorly in some places, or maybe it's not done poorly, done in ways which, where there's a lot of room for improvement perhaps,

Ines Akrap: Yeah, for sure, because so this is something that I definitely advocate for is this progressive enhancement, which also goes towards the part of respecting your user's decisions, like what your user wants, what their current status is, because of course there is such a differentiation between the user, like just put yourself in the place of a user, which is something I usually try to do, since I'm quite a user of internet myself. It's just when you see this point of just trying to get this information. No, I just need an address of the place I want to go to on my phone. That's let's say in a Metro and my battery is dying. And then it's definitely not the same if I'm planning this trip in advance and I can see this website, whatever it is on my M1 MacBook Pro with my wifi in Germany.

So these are definitely different conditions that users have, and I have a feeling that this is something that's not being accounted for at all in general and going towards this road where we decide to design in a way that progressively enhance, that kind of respect these usual decisions, because not only this, so I worked on a small open source project that's called ProgUX, so of course it's out there, it's on the NPM, we can also link it.

So. Its point is that it adds to your website, adds a few of these parameters. So it adds the user network conditions. It adds data saving mode, if it's on or off. It adds the prefer, reduce motion. It's very important because some of the animations can trigger medical conditions at people. And not respecting this

Chris Adams: Wow,

Ines Akrap: only be mindless, but can be dangerous for some people.

So people can access this so they can enable this on their devices that they don't want the motion to happen. And I'll, well, most of the website now may, there may be some, some edge cases, but most of the website don't respect this. So what we created is just, it's very just few lines of code that just add this to your, to your local storage as well to CSS, however, the useful part is the developer part, which offers you a bit of a simulation of changing between these modes to help you develop faster, switch into these modes. It's been a while that we changed anything because it's, again, it's quite simple. It's quite straightforward. So we didn't improve it a lot, but again, feel free as well.

It's open source. Feel free to build on top of that. So having something like this, where we take these choices into consideration, know the network, the phone, the memory, the current data saving. And of course, these reduced motion stuff could make a huge difference in user experience and of course, with that, no, if we respect data saving and reduce, no, amount of processing, we're also again, reducing amount of energy consumed and working towards something greater.

See, okay.

Chris Adams: I can see a scenario where you might use some tooling like this to essentially simulate, okay, here's what someone's going to experience in a kind of low carbon version or a high carbon version, because one thing that we've seen is that, uh, either people might look at, say, a low carbon version of a website as an afterthought, rather than being something you progressively start with and then progressively enhance, like you mentioned.

But there's also this idea of, like, the ability to override is actually extremely important, because we, as designers or developers, we don't or we don't always know the context something's being consumed in and uh leaving the leaving that at the end user is actually very important and there's a really nice example that i think from Apple was that's worth looking at so Apple rolled out carbon aware charging leeron this year for all their phones which sounds like a cool idea with the idea being that on average, if you were to use this, what happens is that Apple devices, if the energy, if the grid has a particularly high amount of fossil fuels being burned on it, Apple's devices won't try to charge up right now.

They'll wait for the grid to become a little bit cleaner. So, over time, the average carbon intensity for the power you're using in a phone becomes somewhat lower. The thing is, when this was first introduced, because people were by default opted into this, the idea was that if you maybe were to go home, you plug your phone in, or which like you said, is on a really low battery, you leave it overnight, and then there's a like high amount of carbon, high carbon hours when you're asleep.

When you wake up, your phone isn't charged in anymore, and then you've basically had a really, really terrible experience of anything related to grid aware or carbon aware usage of tools. This is why this override seems like quite important. And being able to, like, make this more accessible to users, so they can see what it might be, think through some of the edge cases, actually sounds very helpful, actually. I didn't know that existed. Thank you for sharing that.

Ines Akrap: Yeah, yeah, I completely agree with you. And I think again, it's super important to stress without naming names as well, is that this progressive enhancement is more important than graceful degradation, where we do want to serve the lightest version first and then give an option to enhance it. You can, let's say.

Not serve images and then give users options. Okay, you have data, you have whatever you want. Do you want these images? Yes or no? Yes. Okay. No worries. We'll deliver them to you and not other way around because once the images are downloaded, the fact that you hide them, you didn't do much. No, in a way of this kind of processing power and transferring and all that, because they're already there. So they might as well be there.

Chris Adams: Okay, I work in a non profit and so there's, so I can say this, the, we're just about, I think we've just started COP28 and COP28 is a really good example of this right now. COP28 is the, for the first time we've ever seen, is a very high profile website that has a kind of green mode for this. But unfortunately, the way it was initially implemented was basically to serve the full fat version of a website so that any device that has actually used it has basically done all the hard work and used all the energy for the first time.

And then once you've done it, you've got the option to switch off the images, which does feel like it defeats somewhat some of the point of some of this. And I feel like this feels like a kind of concrete example of the opposite of this progressive enhancement. The idea would be that rather than do that, you would have a nicer experience where you start, and then you would gradually layer on the kind of more consumptive and resource intensive elements.

Is that what you're referring to here?

Ines Akrap: Exactly. That's the exact one, because let's go again in the, for example, the off motion, there's so many, for example, animations on the page that can trigger some people conditions, like you already triggered a condition. So the option that you can turn it off, it doesn't really make sense. The point would be like, okay, you don't serve them at first, but then if someone wants this kind of enhanced performance, no, and again, there is definitely a cool ways to automate that.

No, it's one of my favorite example is that like for shots Carbon Aware Edge Delivery, which is also a very cool thing. Link in the notes. So yeah, which is basically on the edge, it decides how clean or dirty your energy is. And then depending on that, it delivers something different. So you are already taking into consideration user's journey, user's conditions.

And of course, you will get a notification that says you're seeing the downgraded version. Would you like to be, so it leaves this decision to a user, which I think it's a very crucial part in this designing for people part. It's give users a choice. Yeah.

Chris Adams: We'll link to that, that thing in particular, the one that Fershad Irani has worked on, because this was something he did in his spare time, which I think is quite cool. It's essentially some of this carbon aware stuff, but rather than happening at the, um, client side inside the browser, it happens at the server side, so it decides to make a decision to possibly change some of the functionality at that point, rather than having to do something at the client side, where All, in some cases, you might have already downloaded all the information, so it's a little bit late at that point.

Okay, I'm really glad you mentioned that, because I was playing with that last night, and I thought, wow, that's cool. You also said something interesting about motion, and this actually made, it reminds me of one of the things that Florian Quèze, Florian, I'm so sorry if I've mispronounced your surname, Florian's talk, when he was talking about the profiler, yeah, about, he was showing that there is a, he was talking about how basically, depending on how you see these CSS gradients sometimes, like you might have a page which gradually changes colour over time.

He was saying, how basically, if that's done incorrectly, you can essentially cook a laptop, because you're just changing the colour of so many pixels and, oh, so many times, uh, in a given, uh, uh, If you're changing something maybe 120 times a second, and it's a 4K display, and you don't have any way of knowing what you had changed before, something just as innocent seeming as like a CSS transition can end up generating like a lot of power usage.

And like, that was cool, but the thing that was really exciting I saw was the fact that he was able to share a profile of this. So you could visit the page, and we'll share the link to the page so you can cook your own laptop or trigger your own fans if you want to, but he also shared a profile showing exactly where the energy, where this was happening.

So if you don't want to cook your own laptop, you can basically see a jump in power usage as reported using his profile run. That was so, so cool. I hadn't seen, I didn't know that was actually possible.

Ines Akrap: I love that, especially also because it shows as well a bit of this limitations at the moment with the models now, because what we were saying that also you still don't know this processing energy of the laptop and like basically one kilobyte. I don't think the CSS code was big, so I think it was around, no, like the CSS transition could have been like a kilobyte or two and it cooks your laptop.

So this is again, I think this is a huge topic to move forward with now, like to actually figure out how do we see that? But it was quite a cool thing to see with all of also with all of these, his gadgets, he has such a cool gadgets.

Chris Adams: Yeah, we didn't, I, the thing that really blew my mind was him explaining how, now that he's built these profiling tools, he's using it for all kinds of unexpected uses, so the profilers, so we'll show a link to the Mozilla Profiler for this because it's an open tool that you can use on any website, but the thing that was actually interesting is that it It doesn't just work for websites.

So he was showing how he can use it for basically Linux. Linux has a performance tool called Perf. So you can use it to track any kind of piece of software. And he was talking about how, yeah, you can use that. But after this talk, he said, well, Chris, I've also used this to profile my own house. And, uh, it turns out that if, because he knows where the data is from, say, a fridge, or solar panels on his house, or stuff like that, he's been able to just have a track, so like you see a track for, maybe, a web renderer, or something like that, he's got fridge, solar panel, front room, or something, and he's been using this to figure out, okay, well, where are the power hogs in my house, for example?

And the idea that you've actually been able to use, essentially, industrial grade profiling tools to figure out how to optimize your house was I think that was the nerdiest point of the entire conference, but that was pretty mind blowing when I saw that. There's a blog post about it that has to come out, and I think he might be presenting about FOSDM about some of this, because I didn't know that was possible, but it was very fun to see that.

Ines Akrap: Yeah, absolutely.

Chris Adams: Okay, we're coming up to time, and we've been, we've mentioned in a few, we've been nerding out over a couple of projects that we've that's been, that we're both excited about, but I wanted to give a bit of space. Which projects, open source projects, are in this kind of growing field have you excited right now that you would like to give a bit of time to talk about before we wrap up for this?

Ines Akrap: Yeah, I don't know. It's a on the spot. Well, I guess like my still all time favorite and again, like huge kudos to you is co2.js. No, I'm, I'm actually super excited as well about the prospect of having some more time towards the end of the year and to help out possibly with some. And what I've seen now in the pipeline of doing this no actually making it even better and better in a way of providing better carbon intensity data, so I think that's a huge thing no, specially with someone who actually uses this in real life . Also having this huge conversation with the client yesterday, about this measurement reporting and like let's say correct air quotes, correct these number from the ROM tool that we built are actually are having this underlying technology, which in our case is CO2.js getting more and more precise and giving us more and more power and flexibility. This is something I'm super excited about, because again, you cannot fix. Something what you just said with Florian, like you cannot fix something that you cannot measure because you just don't know that you have an issue. So being able to detect this issue and to show these numbers to the decision makers, I think this is something very important. And then improving these tools, especially again, I'm working the front end. So this is for me, big deal. I'm also quite, quite sure that the Green Software Foundation is, is doing quite an amazing job.

Chris Adams: The CarbonAware SDK, which is, which is on the server side primarily. Uh, so that's, uh, there's a somewhat slightly different area that they tend to do. But, and there's a couple of other projects. There's one called the Impact Engine Framework, which was actually introduced at Decarb conference, which does actually, which is extendable in this way.

So it can take data from a number of different providers or models or things like that. But yeah, thank you. That's very nice of you to actually say. This ProgUX thing, I I didn't realize there was actually a tool to make it that easy to simulate these different scenarios in such a fast way. Uh, we definitely should share a link for that one, actually.

Ines Akrap: It's not a simulation of actually how it's, how this reflects, but it's just a simulation of an implementation. So basically the small simulator just changes these CSS classes so you can see, of course, how your implementation changes in different scenarios.

Chris Adams: I see. Okay. Thanks, Ines. So, we spoke a little bit about ProgUX, and you mentioned CO2.js, and we spoke a little bit about the CarbonAware SDK, which is looking to graduate, to be a kind of graduated project inside the GSF, and we also mentioned the Impact Engine. I wanted to ask, if you're coming to this field for the first time, one thing that, maybe I'm showing my age when I say this now, is that when I was first messing around with CSS and realizing I didn't need to use tables for everything, was a website called the CSS Zen Garden that let me show and learn from other people.

And there was tools like CodePen and stuff where I could view source and understand this. I haven't been able to find something for sustainable web design, or kind of low carbon design, or anything like that. And I figured I might ask you, have you seen anything that you might direct people's attention to so they could learn from copying, or at least, or try and figure out where they start, because like we all know, this is open source. We learn from imitation before we create something ourselves for the first time, for example.

Ines Akrap: Absolutely. I'm actually very glad you asked because I just found out recently about this site called A lowwwcarbon. Link in the show notes. And yeah, it showcases all of these low carbon web designs and developments. So it's very cool. I haven't had time to see how I get featured there because I tried to do that with my website, but yeah.

Chris Adams: Okay, so this is low carbon, so it's low with three w's, like the www, so low www carbon dot com. That seems what it is. Okay, wow, this is cool. This is actually really nice, because it's These are real world websites, and some of these are run by actual large companies, as well as just personal pages. So this might be a thing for people who are curious, and want to look at this and see for the first time, see how it's being done by other people, if you're looking for inspiration.

Okay, well, thank you for that, Ines! All right, Ines, we're coming up to time now, and I just want to check with you. For people who are interested in some of the things we've discussed, we'll be talking, we'll be sharing these things in the show notes, but if people want to follow your work, where would you direct people's attention to if they wanted to do this?

Ines Akrap: Sure. So if you're interesting, of course, I'm always happy to answer any questions about web performance, about sustainable web. So I guess, of course, LinkedIn, Twitter, because I just still refuse to call it X. And as well, so also you have my, my, uh, my personal website. So it's InesAkrap.com. However, there is a shortcut to it, which is Ines.codes. So it will also redirect you to there.

And.

Chris Adams: Ines.codes?

Ines Akrap: Exactly. It will give you the bigger URL, but yeah, I have that domain for a while now. So yeah, but also I would definitely, if you want to learn more about this topic in general, I would direct you to W3C Sustainability Guidelines. So again, I think this is a great place to start.

So we put quite some, like a lot of effort in this. Also sustainablewebdesign.org Implemented recently these guidelines. So in the last podcast I was giving, I was, I said, bear with us. It's going to be implemented. So a kudos to sustainablewebdesign.org team. They implemented these guidelines. So it's a bit more user friendly because as you may imagine, W3C documents are not really a beach read.

So it takes some time to go through everything. So it's actually 93 guidelines. So there is quite something, but it's also, it's segmented by roles. So every single role can find their own starting point and to see they're also quite, they don't have a way, like it's not one, two, three, four, five, it's just. Pick one that you like, I guess our personal goal on this would be like, choose the one that says high impact, low effort. This is a pro tip, but yeah, basically I think this is the first place that you can of course learn something. There is also a huge pool of resources added to the guidelines that we used in shaping them.

So I think this is a good place to start familiarizing yourself with the topic.

Chris Adams: Brilliant, thank you for that Ines. I will also mention that for people who are coming to this, the Green Software Foundation actually has a free course available which will get you a kind of nice certified badge with a series of videos to provide a bit of helpful context for this. That's something that's of use, but Ines.codes, I N E S dot C O D E S. Okay, excellent. Thank you so much for this. I really enjoyed this, Ines, and um, thank you again for taking the time to, well, share a stage with me and share a podcast with me. Thank you.

Ines Akrap: Thank you so much for having me.

Chris Adams: All right, have a lovely weekend, Ines. Bye!

Ines Akrap: You too. Ciao!

Chris Adams: Hey everyone, thanks for listening. Just a reminder to follow Environment Variables on Apple Podcasts, Spotify, Google Podcasts, or wherever you get your podcasts.

And please, do leave a rating and review if you like what we're doing. It helps other people discover the show, and of course, we'd love to have more listeners. To find out more about the Green Software Foundation, please visit greensoftware. foundation. That's greensoftware.foundation in any browser.

Thanks again, and see you in the next episode!