John Allsopp in conversation with Stephanie Eckles and Fershad Irani

If so, I've done one or two questions on the on the Slido. I've got a few. And if you've got some, Chris has got the mic and he'll run that around as well. One for you to start, Stephanie. Let me see. Someone asked, are these new features, especially the visual ones, competing with or replacing Flexbox?

I think the ones we talked about today are definitely not in direct competition. I think most everything we talked about, including container queries, is a companion to the tools you already have in existence.

they're either providing something new or something like container queries, you're still going to use Flexbox or Grid or what have you. For the layout itself, container queries just allows you to orchestrate those changes at a little bit different level. If anything, you're replacing media queries in some instances, but that depends. Yeah, it sort of feels like the media query is kind of on its way out in a way. relatively crude kind of technique that served us very well, brought us responsive web design. But certainly the theme of a lot of the talks I'm seeing these days is focusing on container queries and hopefully soon style queries.

Yes. Something to keep an eye on that really mean we're thinking less about the kind of the entire page or the entire, you know, portal, viewport, and we're looking at individual components that then kind of adapt in and of themselves rather than adapting to the size of the page. So big changes there.

Now, I was going to ask a similar question of this, so we'll get onto it for Shad. Somebody asked would love to hear thoughts on AI processing and how to make that grid aware.

Obviously, you know, a big, big point is how much energy is getting used.

Sam Altman came out with like tiny numbers overnight that a lot of people were skeptical about. But yeah, what are some thoughts what's around obviously a hugely impactful technology. Yeah, AI is a fun topic.

It's harder obviously with your inference to make that grid aware because people, users expect something straight away, right? I mean, there are things you could probably do within your AI, you could within your UI, sorry, you could ask your users would they mind waiting for a response? Maybe you could email them the reply and then batch everything up and process it when the grid is cleaner. In terms of training, there's a lot of stuff around reusing data sets and not having to not retraining models from scratch, but like using stuff that's already out there in the open to train your models that kind of reduces the amount of processing and energy that's being done there.

Training is obviously a lot easier to shift as well through time and through space.

You're, you're able to pick those greener regions and run your compute there. So I think the training side is, I wouldn't say taken care of, but the training side's a lot easier to deal with. The, the inference side is going to be, you're going to need some creative UI and some batching and stuff like that.

I would Yeah, and I'll add to that because it's something I'm thinking a lot about. So increasingly, there's a lot of capability on device.

There are models that run on device. Apple yesterday at WWDC announced opening access to their on-device models if you're an iOS, and I imagine macOS developer. In the web browser itself, there's some really exciting things. So Chrome and Firefox, Firefox in the case of extensions, but Chrome exposes the Gemini models in the browser. So it's kind of in the browser there. So this inference is then happening on your device.

And then beyond that, you can run all kinds of models in WebAssembly, which Apple announced yesterday for Safari, good on them, like for in mobile devices. So they're like a lot of things can be done on device now. And I think that's an architecture I would really look at in terms of AI because a lot of that We don't need the big, heavy, quite expensive models for a lot of particular tasks. So I would really suggest going exploring, have a look on Hugging Face. A lot of those models will just run in the browser. There's all these spaces you can access as well. Very exciting area. So I don't think it's all quite as doom and gloom as some people kind of think there. So Natalie asks of you, Stephanie, how much are CSS and HTML features that we're seeing now has been developed off things that we're commonly seeing or have seen in JavaScript?

Is that sort of a pathway that we're seeing news features because we've seen the first but people exploring in JavaScript?

Yeah, I mean, though the web is informed by what people are doing, right, anywhere across the stack. So yeah, I think that's an area I'm excited about. We saw, and we also see a crossover too with HTML features, right? So popover was developed. and largely to support work for custom select. At least that's my understanding.

Custom select has been in progress for three years and definitely you need a JavaScript to do even something like that. We're getting removal there. We're getting that removal from some of the animation features I talked about. Another one that's in conjunction with HTML, a little bit older now, but something like the details summary element. as well. I am looking forward to, I hope Popover also opens the door that we get in CSS top layer access, just as an aside there.

But yeah, there's lots of functional updates. I think Kelly and Valkov has been doing a presentation of things we can do in CSS now that replace JavaScript. So there's something to look up for more ideas.

Yeah, I think the web learned the lesson that go looking for what people are doing. And we used to call it Paving the cow paths.

And increasingly, I think that's the approach to standards development rather than, Hey, this is super cool idea, and we'll spend years specking it out, then we'll implement it, and then kind of no one actually cared. That happened a bit back in the day, right? Chris, is there someone over here? All right, we got a question here. Hey, still on the topic of AI, you mentioned that there's a two to four percent carbon footprint for the tech industry. I wonder if there is. Yeah.

Are you gonna ask, does that include AI? I was going to ask if there's data on the increase with AI being highly used. I don't know the best here. I think that figure is a few years old. So I've seen recently the Green Software Foundation put out something saying around 5% now. What we are seeing though is definitely like, I think, and it's the topic that everyone's talking about is the increase in energy use. So in a place like Ireland, one fifth to one quarter of their total national electricity is going towards data centers.

That's more than urban residential dwelling in a country. That's so, like, if you looked, I think there's a chart somewhere on LinkedIn I've seen before, like, islands, like all the way out here in terms of data center energy use and then everyone else is kind of back a bit more reasonably placed. So I think that that figure of two to four percent, the way things are going, it's on an upwards trajectory, but then obviously don't discount efficiencies that are coming in. And also don't discount the fact that renewables are coming onto the grid at a much faster rate than fossil fuels, although Some data centers are still opting to go with fossil fuels as their main source because they just need to get online as quickly as possible. Are you referring to anyone in particular there? Any brand new Elon Musk related gas-fired power station?

Yeah, right. He did well to get access to that many gas turbines, I'll tell you that, because there's a shortage on the market for that stuff as well. Yeah, and some regulations seem to have been kind of bent out of shape as well. But yeah, he's Elon. He gets away with everything, doesn't he?

So, this is obviously a very popular topic.

So, one person asked a very, I think, a very valuable question. What tools exist to do profile of energy usage when you read, for example, rendering pages? So, is there like a lighthouse? Yeah.

So, what we have at the moment. Is.

There are models, and a lot of people will first go to one of these models. So, one of the most popular websites that surfaces.

This stuff is called websitecarbon.com, and that uses a model called the sustainable web design model. It takes your page, downloads it all, and then gives you a carbon emissions score and value from that. One of the downsides of these models at the moment is that they use data transfer as a proxy.

So it's like the lighter your website is, the lower your carbon emissions are going to be, which is not an accurate reflection of how things work on the internet, right?

Firefox, the browser, does have power profiling built in into their browser. It's a very powerful tool. It's a very hidden tool.

It's not well documented. They do have really good docs on how they kind of went about making it, but in terms of how it's used, I've got a blog post on my website, and I think that's the only place I've seen that steps you through, like, how to run a profile. that's the closest we got right now to being able to like measure energy use on a device, on a user's device when rendering a website or loading a website or doing different tasks on the web. Again, limited to Firefox, the browser. So any bugs that are in Firefox will surface there as well.

But it'd be great to see if Chrome and Safari with all the money that they've got behind them could also have that in their profiling setups as well. I mean, they certainly have them in.

Their internal APIs because they're measuring those sorts of things in various ways. It's about a little project, a fun project I suggest to you, then someone take that API and maybe build a Firefox extension. I'm pretty sure it's exposed into the extension API. So, like normally those low level things get exposed to extension before they do the broader page. So, someone could go and build that. I think that would be very valuable and I imagine very popular. So I charge you with that responsibility. All right. I love handing out work to other people. Somebody suggests, I was going to grab them grid-aware CSS. Well, I'm going to argue to somebody saying, kind of CSS is probably the most energy efficient way of doing something like the declarative nature. It's not like you're sitting there trying to optimize some JavaScript to do a thing and interact with the DOM and Like the browser developers, they've really good at that. Yeah, I was just gonna say that.

Yeah, so CSS is about as efficient as you can get when you do anything in the browser. I've got grid awareness on my website and the way it's toggled is pretty much one data attribute on the body and then everything else just falls into line using CSS. I'm not building two versions of my website or anything like that. it's just data attribute, CSS. And like Stephanie's talking about stuff coming into the browser. And John, like John mentioned, like those guys are hell bent on performance for their own browsers and they don't want to release anything that's poor performance. So the more you can use the browser, the better it is, I would say.

Hello. My mind's spinning on some of the like trade-offs between if you decide to switch off styles and that delivers a white background on an OLED screen that therefore uses more power to display that white background than it would otherwise.

Like finding the right balance in between these trade-offs would be interesting. My question is around what is the potential impact of this? Like how much is caring about the energy usage of our websites at runtime in a end user's browser, a significant opportunity to have a climate impact versus how much is it a symbolic gesture that lets us explore possibilities that might open up future opportunities for big impact. So it's on an individual basis, individual page load, might be talking milliwatts, milliwatt hours of energy saving. I mean, if you're using a React website, it could be a bit more.

But no, in all seriousness, like at scale though, it's a bit like recycling, right? If one person recycles, it's not gonna make a difference. If we all recycle and do it the right way, it's gonna have an impact at scale. So there is that scaling factor that comes in. But what we're doing right now with GridAware websites is definitely about exploring this. Like we could come out of this project with a result that says, this actually doesn't do that much.

But at least we've explored that and the whole digital sustainability community now knows, okay, let's not go down that path.

W3C is looking at this. Let's try following that path instead.

So one of the nice things about being an NGO is we do get to kind of go down these meandering paths and see what we can find and hopefully it's of benefit to the community.

Fantastic. Stephanie, so somebody asks, and I've got a little follow on from this, can anyone get, because you're on the CSS working group, can anyone get involved in the CSS working group?

There are a few ways. I'm involved now because I happen to be part of a member organization.

That's the primary way. It is a financial obligation or There's a financial component to be involved.

The other primary way is by being an invited expert, which usually they then have some sort of funding as well to enable their membership. I don't know too many more details beyond that.

So it's not as easy to just be an individual and join, unfortunately. However, all of the current things in progress are publicly available on the CSS Working Group drafts GitHub. So that is a way that absolutely everybody can get involved. You can file issues, you can go find issues that you're currently dealing with, add your comments, even just add an emoji to things that you support and would like to see in the web platform. So that is how everybody can get involved. And I do very strongly encourage that, especially for a lot of the things that I talked about that are very new or have an interop or that you want to see an interop coming up.

you can also respond to that project when the call comes out later this fall, well, fall in the US, later this year, and give your opinions that way. Also contacting and communicating with various browser engineers that are really public, like Una from Google or Jen Simmons from Apple and many others. So there are ways as an individual to get involved, to make your voice heard. And as I said, you know, it's informed by what people in the community are doing.

So equally, if you feel that there would be harm caused by a decision that might be in progress, then that's a time like in the working draft groups, GitHub issues to also speak up on those things too. Yeah, and certainly some of the people I know who are in the working group have got their become invited because of their ongoing involvement in kind of firstly just reporting bugs, maybe doing test cases, maybe writing about things. And so there is a pathway, something you're particularly passionate about. There are definitely pathways to be involved and help shape that.

And I, you know, I think about, feels like a third of the work on the working groups done by Miriam Suzanne a lot of the time. And she came and spoke at our conference late last year. And Miriam's invited expert has basically been a web developer for the last 20-odd years, and by her involvement and passion for the technology has become heavily involved in Champagne. So there are definitely lots of ways to participate.

Chris, you've got a thought. If I can add to that, as Steph said, as an individual, you can do an awful lot.

We had Chen Huizing here last year who has done massive amounts of things for Text Direction because she native Chinese speakers saw things were not right and did something about it. It's surprising what you can do when you find something. I've fixed several obscure browser bugs or at least raised them. It's very, very possible.

Yeah, there's lots of ways. It's definitely a lost way to be involved.

And there's also the CSS, the State of CSS survey, which just came out. Go search it up. And she was involved. She's been involved that. Basically, it gives really strong signal to the browser developers of the sorts of things that developers are actually using. and are interested in using. So there's lots of ways to give signal and it is a, it's quite a flat kind of structure. You know, there isn't a long way between, you know, mere mortals like us and the kind of folks actually kind of specing out and implementing this stuff. So do, if you're interested, do get involved and shoot me a line or shoot, I'm sure, Stephanie a line. And we'll give you lots of suggestions of work that can be done that would be really valuable.

Now, any other thoughts out there? I don't want to hog the well, I am asking your questions, but it's also like to hear from other people out there.

Any more? All right, I'm gonna keep going then.

We've got time for a few more questions.

Oh, a question again from Natalie. How do end users react to grid-aware features? Do you get any feedback from that? Not yet.

I think on branch, the target audience for branch is people who care about digital sustainability or sustainability in general. So the reaction towards that is kind of like, well, this is really cool.

The grid aware websites project that we've started right now is we're still looking for folks to start adopting that on actual real world websites. So I'm talking to a few folks in the Netherlands. having Dutch funding, it's one of the requirements of that funding proposal is that we have some impact on the Dutch internet. So we're looking at some Dutch websites to pick it up. If any of you guys want to explore ideas on how you might apply that to your own websites, I'm more than happy to talk as well.

We've got an advisory group as well, which has folks from Wagtail, Umbraco, WordPress, a few other CMSs and independents as well.

And they're also helping us go through this process of like, how do we communicate this to the user? Because that's actually something that's really important is how do you communicate to the user what they're seeing?

How does the user indicate to you like, I don't actually care about this, or I would like to see a different version of the website, perhaps. And we're kind of working that through with our working group. And that's-- there's some ideas around that at the moment, like maybe a web component that could surface this, the talk tomorrow. I'm gonna show a little preview of that. But yeah, in terms of getting feedback from actual users at the moment, we haven't got this project in the hands of folks deploying it to websites to get meaningful traffic. My website is not, unfortunately. getting meaningful traffic. So.

So at the conference, I was at last week, Huda de Vries, who is now on the W3C advisory board as of a few weeks ago. And so he's Dutch and involved with this project. He talked about a set of principles that W3C are drafting at the moment. Can you speak a little to those? So was it last It's one of those COVID time things. I can't remember if it was last year or the year before. The W3C released the first draft of the Web Sustainability Guidelines. And so these are, it's long, it's long. But they cover all different aspects of web sustainability, not just on the front end, but on the back end on how you manage your websites and projects and all that type of stuff. And there's a lot of overlap between this web sustainability and performance, security, accessibility, and these guidelines call that out.

That was back when the sustainability group was a community group. It is now taken a next step. It's grown up and become an interest group, which is not quite a full-fledged working group like the CSS one is, but it's a toddler in the W3C, I would say. And they are now going through the process of revising those guidelines and making them more approachable.

There's a website, sustainablewebdesign.com, and on that website, they really do a really good job of actually showing those guidelines and giving you a way to filter them. Because if you just go to the guidelines themselves right now, it is just one long document that no one wants to read that.

There's like 50 principles. Yeah, there's a lot. And I think they're doing some work at the moment to consolidate those. because there was some overlap between some of the principles and there's a lot of work being ongoing with that. And the Green Web Foundation, we're there as invited experts in that process. So that's something that we're hopeful from a standards perspective can really move things forward on the front end especially. And as an interest group, that's something people can... it's easy to get involved with community groups and interest groups. It's easier, yes. Then working groups, which can be a bit of a challenge to be involved in.

We got any more questions from the floor? I'm gonna [Mm] let me have a look. Any recent ones?

Any more questions from the floor? Let me see if I've got any more in my set that I put together.

Edge function. So we got a sense of our edge functions.

If you move something to edge, like, you know, your Cloudflare works, for example.

Are they typically less like less energy intensive than a fully fledged server, like the round trip on the network? Yeah. I'm glad you asked that question because it's vibes for me. Okay.

Right. I say they're hyper optimized and stuff, but it's a vibe that I've got just because the information isn't out there. Just like we don't really have a clear understanding of how much energy AI uses. how much energy data centers use. The edge providers as well don't really make that information public. We're starting conversations with some of them to try and see if they're willing to share like just ballpark-ish how much wall time, like how much energy would 100 milliseconds of all time use of an edge function be. It would be really nice even just to have something like that. shown in a dashboard. But yeah, right now it's a vibe just that these machines are built to do this stuff, whereas a user's device could be anything and running something there versus running something on an optimized box just seems to be a more efficient way of doing this. So is there a sense that then the hierarchy of the vibe at least of the hierarchy of kind of energy efficiency might be Edge local server or because I'm thinking in part this kind of local first architecture is starting to, and we got to talk about it tomorrow, I think bracketed with your talk tomorrow morning. But, you know, they're starting to take hold and I'm, you know, wondering whether, you know, it doesn't use any network.

Where, where as developers, if we can place kind of, you know, in, you know, calculation.

Where do you think it makes sense to make it seats? I would still say Edge and server would be, would be one, two, primarily because you can have more control over the energy that is being used in that you can select a green provider, you can select a green host, you can try and run it in a region that is run it somewhere in Iceland or Norway where the energy is always green.

Or for me in Taiwan, I could run it in the middle of the day when there's more solar power on my grid. Right.

Whereas on a user's device, you've got so little control over where that energy is coming from. So for me, it would be.

It would still be, if you can, off the device onto the server. But, yeah, I mean, as a developer, still, like, that local first stuff is really cool, and I'd love to do more of that as well. All right, so final chance. Any questions for Stephanie or for Faisal before we wrap up for today? All right, going once.

Oh, we have one over here. Thanks, Chris.

Ask about the knowing how much the data centers are using electricity. It's hard to find out, isn't it? It is. The nature of data center itself is already a very secretive place. And then on top of it, you want this information.

Yeah. So the European Union has got a law or directive in place called the Energy Efficiency Directive, which compels data centers over a certain size to report their total energy use. But it doesn't specify how it's supposed to be reported. So from what I've I've heard, and there's a really good episode of the Environment Variables Podcast with Chris Adams and Max Schulz, where they talk about this, like some of the energy, some of the data centers are reporting it by just sticking the information on their front door, on a piece of paper, saying, here's, we've published the information, we made it public, anyone can come and find it. This is what I've heard, like, don't take it as fact, because I haven't seen it, but yes, it is extremely hard to find that information, because even when they are compelled to report, they withhold the information because it's commercially sensitive for whatever reason. And so it's really hard to get those kind of underlying metrics and information. Yeah. All right, well, we're gonna wrap up that for today. So would you please thank once again, Stephanie and Faisal for their wonderful talks and their Q&A?