 Basically, if you're an app, you sometimes want to Hang on. This is a video that should be playing. Oh, this is the flag thing. Isn't that we need to interact with the thing once? My bad, folks. Not my fault for once. There you go. Look at that. So in the last episode, we were looking at features that were released in 2019 in stable Chrome, like web platform features. In this episode, we're doing the exact same thing. Yes, but we have four different features because Intel stuff, which is free APIs in one, made to the semifinals. Yeah, maybe choosing, but that's sort of roughly the same. And yeah, it's time for the next round. I think we should keep the symmetry and know you have to pick first. Oh, oh, so you're a reflectional symmetry. Yeah. OK, OK, OK. I'm going to pick image aspect ratio. That's a good one, isn't it? It is a good one. Boom. Why don't you tell us about it a bit, or Jake? I absolutely shall tell you about it a bit. In fact, maybe even a lot. It probably does what it says on the tin, doesn't it? Well, I think you could question what the tin actually says, and I will tell you. I will tell you exactly what the tin says. This, we've all written stuff like this before, where you have an image inside a thing, right? Yeah, you with me? Yes. OK, good. The div has a width, and we're saying the image is 100% So it is also 400 pixels, because it is inside the div. Yes. Now, I know CSS. Traditionally on the web, until very, very recently, this is a very new feature. On the web, what would happen is your content would appear, and then the image would load. And point, yeah. Bad. Sad times. Layout instability, because it would wait for the image metadata to load before it knew how to lay out. Time for the aspect ratio hack. And yes, and there's the horrible thing where you put a position, where you put a padding top with the ratio. I always use the before things. Oh, to set the elements on top. Right, to set height, yeah, OK. And then you use position absolute to put the thing over the top, blah, blah, blah. Horrible, horrible hack. But if you want layout stability, it's what you had to do. But no longer. Now, if you do this, the key here really is that the height auto. Explicitly set to auto. Yes. It will take the width and the height that is set here, and it will use that to determine the initial aspect ratio. So even though it will not be 800 pixels wide, because it will obviously be 400 pixels wide, the browser will use these values to calculate the aspect ratio and then. Yes. I mean, I could have just put 8 and 6 here, because whatever. It doesn't matter so much if you lie about the content. But as long as it makes the correct aspect ratio, what will happen now is the content will appear and then the image will appear. You don't have to do any of these hacks. Amazing. Just that. So this is in Firefox and Chrome. This show landed in Firefox first. We should make sure to acknowledge that. Yeah, all of them. Yeah. But it's just landed. Just landed for us. It's a December feature. There you go. So what are you going to battle that with? So we have, let's take this, blob reading. Blob reading, excellent. Perfect. So are you going to tell us? I'm going to tell you a bit about blob reading. Looking forward to it. Although once again, it is what it says on the title. So you can get blobs in very many ways. One very typical use case is that if you have an input element type file, once you select something, you will get a blob or actually a file, which is just a subclass of blob from that input field. Now, in the olden days to get the contents of that file, you would have to use the file reader API, which didn't know about promises and was kind of backwards in general. It was bad. And you would have to have a separate callback for the error and you'd have to do horrible, horrible. So one workaround was that the response constructor actually takes files and blobs and they have the really nice text or array buffer methods that just give you a promise for that file in that format, which was really convenient. We use this in Squoosh quite a lot. We do. And now we can simplify it even more because the blob people were like, huh, that's nice. Let's just add these methods directly. Nice. So you can see we saved like 12 bytes. So this is really a high impact feed. And of course, they also can do streams, which actually, oh no, so yeah, responses are already streams, but array buffers is also there. I don't think Jason is on a blob, but only on a resource. No, it's not. Yeah, yeah, Jason is not on there. So if you want Jason, you'll have to go back to the text. Well, you get it as a text and then get it as a JSON parse. That's interesting. But yeah, but I do like, even though it's not a massive impact, it's just so much less mental overhead to keep in your decision. Oh, it's just a blob. I can just turn it into a text. The thing I like about it is that, although we had a relatively simple way of doing it, it was recognized that this is a gap. And a pattern. And actually, I think it's probably all, I would assume, hashtag I'm not a browser engineer, but that this was a fairly low effort addition for most browsers. But it just makes things cleaner. Because if you're new to the web and you were told about the other hack, people were like, why, why is it like this? Why, why, why, why, why? Well, now it's not. It's nice and simple and it works. But fine, let's move on. It's like, I don't know. Yeah, yeah, that's, yeah, there's, yeah. That's just so useful. Moving on. OK, OK, OK. This is me again, isn't it? Maybe I'll get one feature. You've been really unlucky so far. But maybe this time, this is images in the clipboard. Images in the clipboard. Boom for Jake. Going up against. Well, no. Oh, sorry. I forgot. Chill. I just want to see if I have a. Go on. Do you want to go on? Go on. Just break the system. Go on. I'm interested. Sharing. Against sharing. Fair enough. OK. Do your slides, mate. All right, all right, all right. So this is images in clipboard, right? With. Done. Done. Thank you. Do you need to know more? So this is, you fetch an image, you turn it to a blob. Yeah, yeah, yeah. As we did before. But now I can write it to the clipboard. This is something that requires permission from the user to be able to change their clipboard stuff. And it needs to be coming from a user interaction as well. So NativeF has been able to do this for a while. When you press, you know, copy and Photoshop or whatever, it would actually put the image in the clipboard. But on the web, you were not able to put. You could only put text in the clipboard. Yes. Yes. Unless you use, like, flash plugins or something weird. Exactly. Yeah, so this is another way around that. You can, you provide a type and provide the blob there, and it will put that in the clipboard. This is quite interesting because you actually provide a map from the type to the content. You can, like, that's for same content in different formats? Yeah, yeah, because the clipboards are complicated, right? Yeah. So you can provide the same thing in multiple formats. And that is one of the things that will happen when you copy something in Photoshop, right? True. You will copy it in ways Photoshop understands with the extra stuff. True. And then it will also just give you the bit. Right, so if you copy, like, multiple layers, it will keep a format that has multiple layers, but externally also a version, it's just a flat and bit map that you can paste into paint or whatever. Now, there is an interesting detail here that the browser will provide, like, it will sanitize what you do, like the image you provide here. Oh, really? Yes, because there are sort of hacks you can do where, like, certain kinds of image compression you can create, like, a bomb. Oh, like, PNG can be quite small, but decompressed to a massive bitmap. To massive things. So sanitization happens here. OK. Yeah, anyway. The other side of it is getting images from the clipboard. So again, use a permission, use a gesture. But here I'm going through all of the items in the clipboard. And, you know, for image types, you can now get them. Good. Again, sanitization happens. And this is just to stop things like XIF data leaking out that you might not expect from the web. OK. There is another proposal, which will. Oh, sometimes I might want to have that, right? Like, maybe I'm an app that wants the XIF data. Yes. And so there is proposals for raw clipboard access, like, to get other kinds of formats and other things as well. So that means you actually have to opt in that you are now taking over the responsibility for the resilience to weird data and whatnot. That part, so this part. Has landed. Has landed. The other part is still in discussion. I see. And that is it. So over to you with sharing. Over to me with the sharing. Yeah. So sharing is also a two-fold, a two-for-one, if you'd like. OK, so sharing. OK. So sharing, you know, you're a website and you shop for a thing. And you think, oh, you know what? I actually want to tweet about the thing that I found. And that is now possible with the Web Share API, where you can actually tap into all the other apps that are available by triggering this kind of. So that was triggering the Android built-in sharing system. Right, right, right, right. And iOS has the same kind of a similar system where you can say, hey, I have this piece of data. I want to give it to another app, which apps can take it. And this is basically something that sits on Navigator and you just say, hey, I want to share this. And here is a bit of text. And you can even put files in it. And then from there on, basically, the user flow takes over. Interesting. So I think we've been able to, is the sharing thing this year? No, I think the share itself has been around for a while. But now we can actually share images. And right, excellent. OK, right, so you can share an image to Twitter or something. And correct when I'm wrong. I think the operations actually inspects the MIME types of the files. And through that decides which apps can actually handle. Yes, yes, that is typical. Yeah, that is exactly how it works. So this is the use case where you are an app and you want to share to another. But what if you want to declare that you can actually receive these kind of share operations? We did an episode on this at some point. And so this is basically the TLDR, because we're in the native photos app, Android photos app. And we can see that Scrooge is actually in the list of apps that can handle it. So what you see here, we just shared from a native app to an installed web app, a PWA. Excellent, yes. And this is exactly the case we did in a whole episode about this. Because for us, it's a major use case in Scrooge that we actually are now in the drawer. Like, you're in any app, and you're like, this image, I like it, but I want to compress it or crop it or whatever. And you can just use Scrooge. Brilliant. And that is done by declaring yourself as a shared target in the manifest, where you say, if you ever have a share, dear operating system, please post it to me on this endpoint. And I accept files of this MIME type. I accept other files of other types. You're all declared in there. The operating system knows which endpoint to target. So this is PWA only, right? Yes, you need to be installed. Like, you can't just visit a site. That alone won't make you appear in the drawer. Only installed apps will actually have the privilege. So these features together, it means you can share from a web property to a native app via the standard operating system way. But you can also do it from a native app to a website. But it also means you can do it from two web people. You can go from web to web. You can share from Squoosh to the Twitter web app or vice versa. That works. And so once you've done this, just to complete this. So the other part of this is how you would catch this post in your service worker to make it all work offline. But we don't need to cover that here. We've done a whole episode on it. Yeah, we should link to that in the description. All right. All right. All right. Cool. So that leaves us with a, ah. Will I? Will I now, for the first time, win around? Because I think I will. I think you've won this one. I mean, images in clipboard is cool. But it is also definitely more niche than sharing. I think it's straight up the sharing thing. Like when we did that thing with Squoosh, where we were able to share from Google Photos straight into Squoosh, that was like, wow. Such a new capability. Yeah, this is the web app feeling as native as I've ever seen it. Yeah, I agree. Go on. Give yourself the win. Boom. There we go. Sharing will advance to the next round, meaning that we have the aspect of sharing versus image aspect ratio. Two aspects there. So this is a difficult one, because we hit against, and we had this problem last year when we were looking at features, is we end up with quite a sort of a large feature that you use in maybe a few places versus something that a problem hit all of the time. It's like a low level, powerful capability versus high level, very simple, but incredibly impactful and effective attribute almost. Yeah. So like I said, when I first, especially sharing from native to web, that just blew my mind about how like this is a native experience. People would use this without realizing they're on the web. And the image aspect ratio thing, though, there is every website I run into this. True. However, I would argue that the workaround for image aspect ratio is not horrible enough to outweigh the benefits of the new capability that is sharing. That's true. There is no workaround for the sharing thing. And so I would argue that sharing should advance. Because I know the aspect ratio hack with the pseudo and whatever is horrible, but it is also fairly doable and contained. It's a small piece of argument. Shut up, I'm thinking. Oh, oh, that really happens. Shut up! I'm trying to think. I'm trying to think. Yeah, you're right, sharing. Yeah, sharing. Yeah, sharing. OK, fair enough. Boom. And that means we will now have. Oh, we can figure out our first finalist. First finalist. Look at this. Because this was in the previous episode where we selected. Intel stuff was our first semi-finalist. We found our second semi-finalist, which is sharing. So to summarize, Intel stuff was ways of moment JS. It's turning numbers into, like, 15 seconds ago, or like. Into strings in different languages. In five minutes. Into strings in different languages. Units. I have definitely, I mean, even on the Chrome Dev Summit website, I messed up some of the code it takes. Because I didn't want to include the whole of moment because I just had a little bit of time display. And I didn't mess up the code quite spectacularly for that. Something like Intel would have solved that for me. It's not a bit of code I feel like I need often. No. But it would have saved me there. Then again, sharing also not that often, not every. Like, if you're a PWA. Yeah. And it is PWA only, the sharing. Well, OK, no, sharing from a website to native. That would work without being installed. Just receiving shares is for installed PWAs. But then if you're on a platform where it has a native sharing API, that horrible set of icons you get for sharing to all of the other services that you see on new sites and the amount of code that that adds that goes away with this. Again, here I would argue that Intel stuff can be polyfilled in a way. Yeah, big polyfill, though. I don't know if they're smaller ones. It can be big. I would argue that something could be small, depending on how many languages you want to support. That's true. If you are just supporting a single language. But sharing is an actual capability that was impossible to do. Again, I'm going back to that feeling I had when I was able to share a photo straight into the app. And it's not just photos, it's any kind of files. So you'll be able to take the raw stuff. Because I know you've been messing around with a raw image processor. So you'd be able to, like, if you've taken raw images which you now can with phones, you'd share that straight into it. Yeah, OK. Yeah, I think I agree. I'm not, I'm not, yeah. I think this is a really, really close one. But yes. So we've found our first finalist. And it's one of yours. I know, the reverse sweep. I like it. All right, so in the next episode, we're going to whittle four or more down to our other semi-finalists. And then we're going to find out. All right, until the next episode then. Over to you to tell us what that is from why. We can cut out those gaps. Fine, isn't it? I'll try to keep it quiet so it's obvious it needs cutting. But no, Jake has to talk over it. And to actually have to make it explicit. Sorry. Cut. Action. Is Lucas going to edit this? Hi, Lucas. Hope you're enjoying, once again, doing four Christmas episodes on top notice. I'm going to keep this in my hand for continuity. Action.