 You just pull the nose hair out that way. No, it's the size of it. I thought you were just like, da, da, da. Welcome to your 30s. I'm quite proud of this one. So, keep out. So? So, it's this time of year. It is. You get the hat. You went all out and didn't tell me. I was going Christmas shopping. And I. And this is what you bought. I walked past this. And look, look, look. Oh, because Chrome. It's what Chrome says when it crashes. And I saw that and it's like, that is my Christmas sitting here for a while. You were wearing that and it did not make the connection. Well, that's what I saw on the shelf. But then when I walked to buy it, I was like, I would like this T-shirt. And the person who was saying, oh, it comes as a pair. And I was like, two T-shirts. And they went, no, they're pajamas. And they're like, oh. And they are. And of course, I've got the full set going on. There we go. Which is not going to be visible for any of these episodes. But you're wearing them for consistency sake because they do come as a pair. Do you realize that the actual thing says or snap, not oh snap, right? Oh, so it's not correct. It's not correct. You're technically incorrect. The worst kind of correct. I'm so sad, actually. I'm genuinely sad about this, because I thought it was. Right, well, that's ruined. That's Christmas ruined. Summer's ruined Christmas yet again. As every year, as is tradition. So last year, we talked about the features that were released in whatever the last year was, which was 2017. 12? 18. 2018, sure. So we thought, we didn't have any better ideas. So we thought, let's do it again. Do it again. Yeah, let's do it again. By China. But this time, we have the features from 2019. Oh, wait. I prepared 2018. Oh, that sucks for you. But I'll improvise. But this is one of the things. When we do Google I.O. or big Google events, the Android folks or the Cloud folks, they come and talk about the new stuff they're about to release. They use the events to make announcements, to unveil their new things. Yes, whereas the web just releases stuff every couple of weeks, or like six weeks in Chrome's case. So we thought this is our opportunity to celebrate some of the features. So we're going to do. What kind of time to celebrate in Christmas? In Christmas time. We've got 16 features that we're going to go through in a series of four episodes. And at the end, we will bang for the buck. And the best thing is, we get to decide the winner. Because we ran a similar thing at Chrome Dev Summit. We did not agree. Disagreed with some of the choices. So we get to just. So this is the canonical outcome. Yes, this is our opinion. Yeah. All right, so we're going to each pull a feature out of. It used to be a head. Now it's just the line on the table. We've got some pieces of paper on the table here. Grab on each in turn. So this is it. This is our first round. Yes, first round. All right, go for it. Ow. I'm going to take this one. This one looks nice. What you got? Numeric separators. Brilliant. Excellent. Boom. So we'll assign that to you. Do you want to go through the slides now before we pick the next one? Oh, interesting. Yes, I can absolutely do that. So this is a feature that was landed in Chrome Stable in 2019. Yes, as all of these features. Yes. And so numeric separators is actually one of my favorite features that landed. Right. Because every one of us has been in a situation where we go through code and we see a number like this. Yes. And we're like, what is this? And why is it so big? What number is this even? And with numeric separators, you're now able to write the number more like this. And you can see at a glance that this is 10 subtillion. And I think this will fundamentally allow us to write better code. That's cool. So when you're doing calculations with this, how does this make a difference? What's the impact of this on code? It makes it more readable. Right, yeah. But I mean, in terms of how JavaScript's going to execute this, what's the difference? None. Right. So I can just put those underscores wherever I want. Yes. Can I put two underscores in a row? Good question. I just thought of that, so I don't. OK. Or actually, a bad question. Why would you? Why would you want to do that? I mean, something actually is, yes, you can. I would assume you can. I'm not sure. I might be wrong in this. That's exciting. But nobody is forcing you to put it into groups of three. Because on a hexadecimal, you want to do it in group of soft. Two, usually. Oh, that's kind of nice. In octal, you shouldn't be doing it because why would you be using octal? Yeah, yeah, yeah. OK. Binary could actually make sense to put it in a group of eight or four. That's true. And we do have binary numbers in JavaScript now. So, OK. Well, it's very good. It's very good. So, what is that going to go up against? I'm going to pick this one, which is Intel stuff. Intel stuff. Intel stuff. There we go. Good one. So now, obviously, it is your turn to do them slides. Yes, it is. OK. So here we go. So this is a few features combined into one. We're grouping them because it all to do with internationalization. You've seen the stuff in. So the official API name is not Intel stuff. It's just many APIs. Stuff in Intel. And Intel? Intel there. So Intel. Internationalization. Intel. Yes, yes. Good. I mean, that should become obvious by the time I finish these slides. Oh. So we've got Intel relative time format. And you give, you know, like a country code there. And then you can format a number and say this is going to be seconds and it will tell you, look, put it like that. Or you can say, you know, minus 15 minutes. So let's say 15 minutes ago. This is something that we see, like, libraries like moment. Moment is like you have a canonical example that is quite big. Yes, exactly. And now it's in the browser. And you can do, yeah, different languages as well there. And that would be the entire point. Yeah, cool. Another feature of internationalization, lists. So you can put two things in there and it will say, you know, that thing and the other thing. That's how you end two things in English. Yep. And there you go. Big fan of the Oxford comma? Oxford comma, also a big fan. But again, you can say it's a disjunction rather than a re-junction. Conjunction. Conjunction, thank you. I like re-junction though. Yeah, I don't know. I knew it had junction in it. And so it's all rather than and. And again, different languages. Even speaks German. Amazing. Even speaks German, just like you. There you go. So you can already, like, you know. I can relate. I can relate to this, exactly. I can't speak German. At school, the only bit I can remember is Ich havers bei Pony. Which is a lie. Which is a lie, so it's completely useless to me. Because you have two cats, not two ponies. Yeah, but I don't know what cat is, so. I'll teach you after. Excellent, brilliant. Are there even more? There's more. Look, number four, Matting. So here we're saying, you know, a unit, like a style. And we're saying, look, there you go, 2,000, sec. I wouldn't actually write it like that, but fair enough. And again, look at that, different languages. Everyone's happy. So this is like a three for one API. Yes, it is. And we need to decide which one is the best. I mean, you know where I'm standing. Numeric separators is core, especially because. You're really fighting for. I mean, especially because it only really makes sense with big ends. Without big end, numbers can't really go that big anyway, so. You can still go in the millions, right? Yeah, but do you need numeric separators? Yes, you do. And that's why it should advance to the next round. Like, yeah, Intel, it's an absolute big hitter. Like, we don't have to load libraries for these tasks anymore. You get pretty much all the languages that Chrome provides, which is quite a bit, it turns out. Yeah. And things like Moment.js, especially if you include multiple languages, they become really big libraries. I would say there's still work to do here. Like, there's no, as far as I know, I could be wrong. Like, there's no way to give it a number and for it to split it as saying, like, this is. For the last task, if you want to convert it to, like, a language or something, like, these are 2,000 seconds. You might want to say it instead, six minutes and eight seconds, whatever it is. Yes, and the same with the relative date time. Oh, the relative as well, yeah, of course. It's the same problem. But, yeah, OK, so we're saying Intel stuff. Fine, fine, numeric separators are out. Well, that one, done. Next round. Now, Intel stuff has advanced to the next round. So now we need to find, and that's how brackets work, the opponent for Intel stuff, which means we have to go to the next matchup. I will go with this. And I have match all. Match all, OK, a strong one there. So, over to you to tell us what that is and why. Match. This is how it used to work before. You can put an array X and then you will get the matches for it. But now, with match all, you can actually get access to the capture groups that were in your regular expression. Because before you get like, this is the string that matches your regular expression. But if you had parentheses in it, you usually wanted to grab these subgroups out and reuse them. I see. So with the plain.match, you're not getting this bit here. You're not getting this. This is great. OK, I want a word that sentence us off with hello and then followed by a word. And I want to know what that word is. Right, so you have to. But match wouldn't give you that. So previously, you would have to use Reg X, EXCC or whatever to go in. But now you can just iterate over them. Oh, it's an iterator. It is an iterator. All right. I mean, at least iterable. I actually don't know. It could just be an array, couldn't it? Good point. I think it's an iterator, you know? OK, I think it's an iterator. Fine, fine. All right, excellent. And this is like, it reminds me of the string replace where it only replaces the first incident. What we really want is replace all. This is the first step in the right direction. Hopefully replace will be addressed at some point. Yeah, replace all is coming as well. Good. It's just not this year. So watch out next year. 2020 when it will win. The winning feature. Yes, excellent. All right, up against match all. Up against match all is. I'm going to phone down for this. Class. Oh, class fields. That is not weak. Let's take a look at class fields. So you've written code like this before, where you've got this.foo, whatever. And so in the constructor here, we're just setting it as a property. It seems a shame to have to use. It always weirded me out that suddenly you just start using props and don't. That you haven't declared. Yes. Start existing. And in other languages, you wouldn't see it like this. You'd see it declared somewhere else. Well, lucky for you, this is now a thing. Great. And it does exactly the same thing. It is just syntactic sugar in the end, isn't it? Yes, it is. I'm guessing this kind of assignment runs after the super constructor, but before your own constructor? Yes. Yeah, so there's a little bit of kind of magic sort of stuff going on there. But yes, like it will run, I believe. I think it actually might run at the end of the constructor. No, in between. There's a thing to look up, but we're really showing each other up in this episode of stuff we can't remember. It's either magic or not. That is the other two choices. Excellent, yes. So if you're using TypeScript, you're already doing stuff like that. Yeah, because it compiles down. Yeah, and I think there's a babble thing for this as well. But that's not all. Oh dear, Jake. I've got another one, which is just a mixture of a load of features. You've done this before. Well, because we don't have private, let's just use conventions. Yes, underscore is basically saying, don't touch this. But you really can. So you can reassign it here. Some people file issues, and they're like, well, you used a private prop, but they were like, eh. Exactly. Well, what if? What if syntax hiding completely breaks? Yes, this is so new that a syntax highlighting stops working. And yet, it has landed in Chrome in 2019. And it has landed in Chrome in 2019, so you're using this hashtag counter syntax. But it means you can refer to it like that. That's actually a separate proposal. The private class fields, isn't it? Yes. But it is compatible with the class fields proposals, and then you can declare public and private class fields without having them inside the constructor. And they both landed this year. And that means that you can only access these things within the scope of the class declaration. Which isn't ability that you couldn't really do within the JavaScript. That's a new JavaScript capability. You couldn't prevent access to properties on your object. Absolutely. Yeah, you would have to do sort of weird hacks and stuff, whereas this just makes it really simple. So as you can see here. Also, when you say no, does that mean throw? Like it's just like, if you access an undefined property, or does it actively throw? I think trying to access a private property outside of a class context will throw, that will be to that. This, if I'm going to throw, I'll see these two identifiers as being different things. I think the idea of this might be seen as different things. I wouldn't be asking if I knew the answer to that. Yeah, we'll put something in the comments that lets us play as enough. Fact check center. Yeah, exactly. So yeah, this will work fine because it's the public part. In fact, I guess that's sort of suggesting, I think this will error if not. I mean, I know. Oh, I'll tell you why this will error in this case. Yeah, because there's no setter. Because there's a getter, but no setter. So yes, it treats them as separate things. So this is it. See, I figured it out. You still didn't tell me if accessing. So ignore that one. I figured this one out. You see this, well done you. Exactly. You write JavaScript. This will error because there's a getter and no setter. They are different identifiers, which is like, actually solves this problem as well of having to have a different identifier of the setter. These are named the same. It all ties up nicely. So yeah, once again, I get two features in one. I mean, in terms of how most of us write code, class fields is going to be more interesting. Yeah, it's going to be that, hasn't it? It's going to be that. So yeah. I mean, the right thing's good. There was a hole in JavaScript there that we've now sorted. But yes, we're through to the next round. It's me versus me. Which is always a good one. Do you want to take? Should we do the slides again? Just for lolls, because we've gotten better now. No. No. OK. OK, so we're going to decide who wins this. Yeah. It's this is hard because this is, for me, it's a DX versus UX feature almost. Intel stuff is a win for the user. Less code to load, arguably better language support to be determined. While this is, the user doesn't care. So if you wanted to do the private field thing today, you would have to use weak maps to have a mapping between the class and this value. Or closures, but then you're creating so many issues. But no user cares. You shouldn't use private class as a security feature, right? No. It's supposed to catch mistakes of other developers. Yeah. Where something like TypeScript would be enough. Or a convention might also be enough where you could just punt it to a linter. Oh, that's interesting. I like your point about things like TypeScript and linters. Yeah, OK. And whereas Intel is going to make the bundle smaller because you don't have to include. Potentially faster. Arguably a bit less flexible than user-land libraries right now. I'm torn I'm leaning towards Intel because it's an actual useful capability. While we've solved the private class fields problem or the class fields problem, but now it's part of the language. Which is great. Like I'm not saying it's worthless. I'm just saying in terms of value Intel adds more. So I think you're right. The class fields thing, OK, if you're compiling that down, it is slightly more code. Fair. But only a little bit. Whereas with moment that you can have 300k or whatever, especially if you include all the languages. I actually was going to say class fields, but you've convinced me. Yeah, all right. That's that is lucky you have won this round. Yeah, me versus me. It wasn't going to go badly. But yeah, and so that is our first semi-finals. Our first semi-finals. It's a good point, I think, to cut the video. To chill. Take a breath. Take a break. And the next episode will be out soon. Join us. Join us. Please join us. We need the views. It's our job. Excellent. Shall we do another? No, that's it. That's going in. We can't edit this out. This is it now. Just all through the credits. There's going to be two overlay. The thing to click on next is going to be here or here. This is the end. This is the end of the episode. The episode's full news anchor. I'm going to keep talking until you press stop.