 So that puts, sorry, am I good, shall I go? Yeah, whenever you're ready. So that puts. No. It's Christmas, isn't it? We do the annual Christmas special. Well, yeah. I mean, it's annual in that this is the second year that we're doing it. I don't know if we can. That counts as annual. OK, it's happened. It's happening twice. It's the second time that I'm on 2.03 when it's Christmas. Oh, happy birthday. It wasn't Christmas when you started last year. True. No, it's the second Christmas that I'm on 2.03. OK, and what we did last year is we got a bit ambitious and we did the 12 days of Christmas. We did 12 mini episodes, 12 bits of content. So we changed it around this time. And what we decided to do is do the World Cup of features that were released or that went into Chrome this year. So we did 12 last time. Yeah, and we're going to do 32 this time. Great, that's it. And we're going to find out which one the best is. The best feature of 2018. Yes, arbitrarily just decided by us. And basically each feature will have its own 10 minute video. Yes, exactly. No, no, no, we're going to try and keep it short. Snappy. And one of the things that's going to be really annoying for people is that my jumper has bells on. It's a very Christmasy sound. But I'm also sweating horribly in this jumper. And when I do that, it's just wafting into my face. Like high quality polyester, isn't it? Yes, it is. The Primark special, I actually quite like this. Right, let's dig in. We want to keep it short, let's go. So the first feature that I want to talk about is display contents. OK. And this is like the title slide, but just, you know, with them CSS wrapped around it. It is, well, it's wired. And this is how it works. What it essentially means is the containing element, pretend it's not there, in terms of layout. So if you've got a flex box and then inside it, you've got an element that has display contents and that has three children inside it, it will act as if, you know, that wrapper element isn't there, they're all part of the flex box. But in terms of CSS, it's like to still respect that wrapping element, because that's where the good stuff comes in, because you can basically encapsulate the elements and style them differently. But in terms of layout, they just bubble up. Yes. So you might want an element there for semantics, but you want the children to be part of a flex box or a grid. This is how you do it. All right, so facing off against that feature is, and the feature that I want to talk about, and it is, reporting observer. All right, OK. Reporting observer. I'm trying to remember if I have a code sample for this. So reporting observer looks like many of the other observers that we have. It basically gives you a report for any kind of deprecated API that you're using or for interventions that you have triggered. OK, so is this like when we block document dot rights? You would get an entry in the reporting server describing to you that you have a report or type intervention. You will get the description and where in your source got triggered, why it got triggered, like a lot of detail. And then you can decide to send it to your analytics or do something with it. Excellent. So is it just all of them by default? Is that right? Or does it look like there's much configuration here? No, I know there's nothing. It's just whenever you use a deprecated API or you trigger an intervention, you will get a report in here. All right, I said. All right, OK. So we'll face these off against each other then. And I've been developing, I say developing, I went to a website that offers this feature already. Challenge.com. Yes, and I've set it all up. Oh, look at you. Well done. Yeah, I did a lot of copy and pasting. So let's talk about these two then. Do you have any initial feelings? No. So reporting observers is probably incredibly useful, but only for sites that actually go to production and actually work for a business. Because on my hobby sites, my little site projects, I'm not going to care. So display content seems more useful to me as a developer. To a wider set of developers, maybe reporting observers going to be more useful to big companies. And businesses. And not even big companies, just businesses, right? Jor, I am going to agree with you. All right, we're going to declare display contents. The winner of the first round of the Christmas 2018 203 World Cup of Web Features. Oh, that was good. I imagined you regretted starting that sentence as you went through it. So we now see in the next bracket, we will face it off against something else. Something else, which is totally not on screen right now. Not on screen. Yeah, there's a bit of spoilers there. But that is what I'm going to talk about. I'm going to talk about scroll snap. Scroll snap, I got one. Yeah, so it looks like this. And here we go. It's a great feature. I really dislike how we did it in CSS. It's, I find it really hard to have an intuition for it. Like I have to look it up and see what X mandatory, like what is mandatory about this. You know, and then scroll snap, I get it. Like once I've read it, I understand why we need all these options. But in terms of the choice of words, it feels alien a little bit. But that's fine. It's a good feature to have. It's an important feature to have. It is a high level feature. Let's actually demo what it does. So you can see here the element is always sort of appearing in the middle, even if I try to make it not do that. And this is essentially what scroll snap does. This is like the standard gallery example, right? Like the carousel where you want to really center on the image. Oh, it's a big element. I like it. So it handles that as well. I imagine it would be useful for, like, on Twitter where you have a list, but you want to swipe horizontally onto a different kind of list. There's some panels. Yeah, that's a very common native design layout, I think. And it was always hard to do it. So this brings you that, which is pretty cool. So facing off, I already forgot what was on the bracket. But ooh, site isolation. It doesn't have a code sample because it literally it doesn't affect how you write code really at all. It's a security feature more for the end user of browsers. Right. And now you can actually correct him because you know more about site isolation than I do. But as far as I know, you don't write code differently, except maybe an HTTP header that you add to opt into an even stronger site isolation. But that's all that it really changes. But it is a good or really important security feature in that it is our tool, again, Spectre and Meltdown. Yes, exactly. The idea of every separate site should live in its own process. It's something that kind of happened in Chrome 1. But it didn't quite happen with iFrames that you would end up with multiple sites in the same process. Because of this, we now have out-of-process iFrames, or upives, that's like a site product. And upives are actually in a way a performance primitive because it blocks iFrames from affecting the performance of the top level site. And you can actually abuse that to build little performance containers and run multiple things that are affecting the top level site. As long as all the browsers do it, which they don't. Well, but they are going to. They're working on it. It's interesting that this is not just a Chrome thing. Chrome has shown that this is the right thing to do. Security-wise. It's the only sensible thing to do in the Meltdown Inspector world. Exactly, exactly. Well, this is a hard choice. I mean, we have to define what we're looking for the best feature, best developer feature. And these are actually two really good features. Yeah, because so we're talking about a CSS feature that people have wanted for ages. It's a really nice high-level feature with great performance and all that. And we're facing it off against what is saving people from being hacked and losing their data. Yeah, I'm going to go with draw snap points. Are you? Yes. But that's because I feel like this is a web development show. And I kind of like. It's what developers will care more about. And because it doesn't affect development pretty much at all site isolation. It's just we need it. It's important, but it's just something that we need in the browser. There's nothing a developer can do or can enhance. So it's not really a developer facing features that we could maybe disqualify it on those grounds. Pretty much. Agreed. Look at that. We have the first second round face off. Exactly. OK, so we've got here display contents versus scroll snaps. That's an easy one, honestly. Really? Yeah. I like display contents, but it's not that exciting. I don't need it that often. Scroll snaps, however. I've wanted to display contents quite a bit. And I feel like I've sometimes broken HTML semantics because it wasn't there. Because I couldn't put the correct wrapper around something because I wanted it to be in the Flexbox or the other things. I guess I have a very low threshold on bridge, breaking semantic markup, honestly. But scroll snap is quite snazzy, isn't it? It is very snazzy. It looks fancy. It looks fancy. Should we put it through? Yeah. All right. OK. I'm putting scroll snap through. This is a decision being made. There we go. Will it update? This is like a little mini-gip. Ooh. There we go. It's like, whew. It's lovely, isn't it? Well done. All right. All right, so we've gone back. Your turn. My turn. I would like to talk about named workers. This is a big hitter. Are you ready? I am. Are you ready? Show me the syntax. Strap in. It's a worker with a name. Yeah. Who could have predicted this happening? What does this name do? Nothing. No, it does do things. It will improve things like stack traces. It will improve things like DevTools. Especially if you've got multiple instances of the same URL, it's a way to differentiate them. All right. No, that's it. Oh, cool. I think, maybe. All right, it is a feature. What do we pitch against it? Payment handler. Right. Disclaimer. I literally had not looked into payment request and payment handler, which are interacting with each other. And this is not my territory. This is AG. And AG would know all about it and would get super excited. And I have never written a store on the web or maintained one or had my living depend on it. So I'm guessing many people are excited. But I actually didn't get it to work. Either way, so here's roughly how it works. And it might be wrong a little bit. So you can do payment requests on the web, request a payment. And then the browser basically intervenes. Like, hey, I'm going to do like a very trusted UI that do you don't write, but the browser actually has built in. And you can select your credit cards or pay with Google or with Apple Pay, all these things. But what if I want to pay with so much totally legit bank? I don't. It sounds really suspicious. I do because it's totally legit. OK, excellent. And that is what payment handler allow you to do. Like, you can now write your own payment handler and basically hook into this machinery in the browser. So this is rather than, this allows someone like PayPal to do this without. PayPal is probably enough to already be built into most browsers, for example. But this would allow the more niche sites, maybe some Bitcoin sites or cryptocurrencies, to do these kind of payments. And the way it works is that basically you take the service worker and you register a payment handler. And you set your domain and your clear name and your method. I'm not quite sure what the difference between the first key and the method name is. But that's its code from more or less the guide. And then you have a new payment request handler. And basically what you do in here in all the samples I've seen, you do a very long running response with handler where you launch a new window and guide the users for your own payment flow. And then you resolve the problem saying, yep, the person has paid. And now the other side can't. And that can include bits of UI, if necessary or not. So this is obviously super hand-wavy because I didn't fully understand it in the short time that I tried to read everything up. But this is kind of like a big step towards making all of these payments that are more open on the web. And everybody can hook into that. Fair enough. Let's have a look at the board for this. Now what we're doing here is we're facing off payment handlers, which is really brings the web up to par with what native can do. And obviously payments are a huge part of the web. We're facing that off against workers with a name. Shall I put payment handlers through? Yeah, let's put payment handlers through because let's be honest, the name workers are. I mean, we have to stress here that we're not diminishing any features that people have worked on. These are all important things. It's great to have all of these on the platform. They became part of the platform for a reason. But I just think payment handlers are a bit bigger. Some features are bigger than others, and that's OK. Excellent. Payment handlers has won this round. So let's see what will be pitched against in round two. Now, if you notice something different here. Oh, that's a nice background. It's a nice background because I want to talk about conic gradients. Is it conic or conic? Yes. It is one of those. I thought it was conic. I don't know. I mean, I'm the, I don't, you know. I'm from the north. I can't speak English either, so. Great. OK. This is probably well known by everyone because everybody wanted to have this feature for, I don't know, how many decades. Now it's finally shipped. Now we have custom paint. We could have implemented it ourselves. Now it's shipped in Chrome. Cool. Yeah, that's all I want to say about it. Literally beautiful. And I'm pitching against AV1 decoding. Oh, triangle, triangle 1 decode. I thought we might, I thought I'd give it a fancy font because I thought it would be nice. It looks good mostly, but this is, I guess, a corner case where it's kind of unreadable. It's not very nice. No, it's not. OK. So AV1 is an upcoming being we're going to, I think, almost stable at this point video codec that is completely free and open. Anybody can use it. No royalties. And it is extremely impressive in how efficient it is. Yes. And so Chrome now has support for it. And it's all open source as well. The encoders, the decoders. It's like a collaboration between Apple and everyone. There's a committee around it and everything. That said, I think, so Chrome does support it, but obviously now need hardware to decode it faster, right, which most hardware doesn't have because it's just been standardized, so it's not been put into hardware. And because of the complexity, it's actually quite difficult. Well, it'd be a battery problem to CPU. With GPGPU, use the GPU to decode it. Oh, I see. But I don't know how that works. It's not my territory. I am quite excited about the format, but I haven't played it on with it much because it's just so new. All right, well, thanks for doing some research. Sorry. That was, thanks for coming. Get out of here. You're going to throw that back at me in some of the future things. I think this is quite a, it's another tough one because we're once again facing off quite a high-level feature that developers have been wanting for ages with a huge leap forward in not only open standards, but in video technology. Yeah, so my, I personally, I'm going to side with conic gradients. Conic gradients, conic gradients. I think people are going to use it more. Format adoption is always a hassle. YouTube's going to adopt it straight up, sure. And then detect if your browser supports it and ship that, great. But for me, as a developer, it's cool, but then it's going to take probably ages again for browsers to adopt it. I mean, WebP was open as well, and it took such a long time for other browsers to adopt it. I know there is more details and more nuances to the story. Absolutely. But I'll believe it when I see it. It's my stance on AV1, while conic gradients are something that I use, would have used a lot. I think that's right. I think once AV1 lands, when I do video stuff on the web, I tend to just dump it on YouTube or some video or some similar service. I don't have a lot of contact with the codec, so I think what I would encounter more is conic gradients. So let's put that through. Okey-dokey. Right, there it goes. Thanks for pushing the button. No problem, no problem. Let's take a look. Wait, should we do the, the, the the magic match up? Oh, you, yes. We should. Exactly. Oh, we've got a couple of rounds to go. Oh, we are rippling up. So we're now facing off payment handler with conic. Oh, that feels so unfair. Gradients. That feels really unfair to, like payment handler seems like really hard and long-standing standards work. And it's one of those things that is going to, like, it's so many things leaving the web because payment is harder on the web than it is on native. And this brings them back. And that's so crucial for the web to survive, to have these kind of things there. On the other hand. No one's made money from conic gradients. No, but I'm still more excited about them. And you know what, I am going to agree with you using the, the consistent logic of what we did before. Payment handler is something that a few web developers are going to use. Yeah. I mean, in that case, it's actually the even more niche version of payment handlers. It's not even payment request. That is a good point. It's payment handlers. Right, right. So we're going to go with conic gradients, right? I'm going to, I'm going to press the button for conic. I'm pretty sure it's conic, but conic gradients. And so we end up with two CSS features in the next round. And we can face these two off as well. So I, I'm going to give it to scroll snap. I just think it's going to be used more. I agree, straight up agree. It's visual, like conic gradients we can, you could usually solve with an SVG background image. There's many work around that are just as efficient. You could use canvas if necessary. Canvas, CSS paint, there's many things. Scroll snap, it's always has been main thread bound. And we're ugly JavaScript. We have to do all the velocity and physics implementation that the operating system usually already has. It is such a big tool for web developers. Sold, right. Yes. So that puts scroll snap into the semifinals. Interesting. So I think, I think we should stop there. Yeah, and keep the rest for the next episode. Another episode. Payments is something that a few well developed, developed, developed, feel, feel, feel, feel. Conic gradients is something payment handler is. Thank you for speaking English. Give it a try. Try that again, I reckon.