Best web features of 2018: Part 2/4 - HTTP203
Welcome, back to the 28, th EP 203, world cup of web features. So. In the previous episode we looked, at eight features and we. Whittled them down to our favorite, like one of them off those eight features yeah of those eight features and if you haven't seen that video then. You, should yeah, this. Will maybe make more sense and, if you haven't seen it so, yeah. It was scroll. Snap yeah, was our favorite one we don't need, what. Who were all snap one against but no, but. We're. Gonna take a look at the next feature and. I would like to talk about. Async. Clipboard. Probably. Dealt it says on the tin there is well do you remember clipboard remember, doing this an. Exit command that is some API designed straight, of a hell yes yes it is and, you would have to if you want to copy some text you would have to create, an input element because that's where you could do the focus and selecting properly it allows we're contending selling markers in the dom text, selection marcus which gets, even worse which is horrible if, you copy you've, changed focus, you've changed selection this is very destructive, things and supporting. A fee then you had like your fallback flash, plugin, until, last. Support yeah. Horrible. So. This is it's, a sync so it's for, large content it's less likely to be. Blocking on, the main thread which is great but I think the main sell here is isn't, that nice isn't. That nice and I'm guessing there it's not just write text and read text but there's also going to be files. And images and because you know screenshots on many, operations, you just go onto the clipboard first, yes potentially in many formats so that bit, is not there yet yeah, that's something that's it's, just text for now so. Winning already but, absolutely. Absolutely. Winning, so. That, brings us on to the, next one, which, is, typed. Om that's a whole that's typed on that's that's a good any bit so it's. Actually one of the the lower. Almost, less exciting, API so you're, really selling it yeah that, it's very necessary there to make all the other ones happen and it's actually interesting a huge pain point I think of when you developers because okay it gives types. To. CSS. Stylings. Okay, so. You. Might know get. Computer styles or just the, dot style property on an elements and there is now the. Typed. Versions, which are either, element, computer, style map or the attribute. Style map okay, and so now we have a style map so what does it actually mean a style map basically has getters and gives. You, separate. Number values and their units so, now you don't need to do a string concatenation and. Like somebody it's splitting or all these different things to figure out what is the actual numeric value much, easier to do math with which is sometimes have to do or just analyze. Them and you, know figure certain things before you I really, like what they've done here so you got units px, which is nice and short it's it's what you write, in CSS now you have that and then here we have percent. React. I don't remember why but there was a reason it was a reason okay that's good that's good it. Actually goes further than that because you can also create, these. Types this way so you can you, now have X and basically a small. Part. Of the CSS parser exposed, and that you can just put in the string and it gives you back that kind of typing you can create them yourselves and then set them this way but. Even more excitingly, you. Have add and, subtract. On this you can actually do math oh so. You're the same way the calc works yes. So this actually if it's the same type. The same unit, length it will just call s if you, have different. Like here I'm adding five, percent to ten pixels it will actually give you a proper. Arithmetic. Tree so we can do all these. Analysis. Or like, reorder, them obviously you sometimes. Want to do without, having to re-implement a CSS Pazza okay, and I'm. I'm feeling, that I might know what has one and maybe here let's, go back to the tree I don't remember to talk about oh yeah oh it's so exciting you can't remember it even 30 seconds later whatever it was I.
Can Let it open the menu and say install. This and then it gets. Into the launcher with its own window its own I can it's on a command, tab spot and all these things so, becoming a proper, application. On your desktop, it's kind of replacing electron, for a lot of sample simpler, cases. Hopefully. Hopefully. Okay. So. This. Is. Is. It a difficult one because what. When, I talk about update via cash the, big news there is that we change the default yeah not a new feature it's a change, mmm. Shaky ground desktop. Pwace. It's. Not developer facing feature well it kind of is because it's something you can talk about my app can, year on desktop it's, not even on all operating systems yeah it's a. Week round if two things are actually we've. Been really well received I think a bit fair cache solves, oh really. So I was gonna say like, oh you think desktop pwace, it's, it's. Such. A major thing it's something that it's moving, the, web into. Native space I guess I think I guess you're actually you're right it just doesn't feel as a real to me yet because, there's no direct api's, for it yeah let's not install Branagh I think on desktop it doesn't prompt you to do it so you need to set up and have. A button for it I'm fine, with lying that's it that's what people debates through okay, well I find in these sort of things like I feel that you've done me a favor by siding with me which is weird because it's against the serviceworker feature, you. Said yourself mate I did didn't I I worried, that I now owe you one, in a lay around oh yes, I'll call, in that favor when I need it okay so that moves desktop. Ahead of us into, the. Next round into round two which, so, type 2 and desktop here to be waste I've done. I'm. Not really talking about this and then what yeah actually the more I think about well. You know Titan because. It doesn't allow me to write. Better code like that sort of PWS don't give me. Necessarily. New capabilities, I'm not I don't make your life easier as a web developer yeah they might, make it easier to like. Get. More work because you're because you're able to do things that are more like native apps and also, I feel like lots, of other features are still missing to make most, of things I do want to have in a separate app actually possible, in a web app file, access it's one of the main things that comes to mind so, many apps I would like to have as a proper, app are. Still not possible on the web so, the the exceptions, would be like yeah what's up web can, I can, install I guess I'm. Also quite not, too sad about that being a tab yeah I feel like a lot of people are going to be screaming, at the screen right now I, mean. It. Is YouTube after all go, nuts in the comments okay. So. Next, up as you may have seen on the screen there but. I usually find this really difficult to read because I kind. Of got bitmap rear end, map. Pre-render. Or every, renderer, okay its bitmap pre-render bitna pre renderer yeah check, it out look at this I can. Says bitmap renderer here. What. I'm. Now wondering if I I think it spoke about Brendan or bitmap pre renderer because I think, it. Is bitmap renderer and I fit my pre-race okay yes, see it's difficult, to read. Okay. So. The jingles are they get angry as well its. Bitmap renderer of course it hit my friend row right here it is create. A canvas but, get context, oh also. Know get get context, type it's a new context, type and. What you can do with this is you, can you. Create, an image bitmap we, should existing feature hmm, feature. Nothing do with this you can transfer it onto the canvas, so just a fast path for basic canvas bro image yeah. That's. Pretty cool it's like like blitek I'm guessing, with this super fast another hood where there's like all the other layers are skipped it's. A little bit faster it, is very efficient on memory because, this is a this is transfer, yeah. Like this image object is now oh yeah. It's been transferred in the same ways if you were crossing, over to occur it's, solely the image of the data, buffer is now neutered. As its called neutered exactly, great, and. And and then game. Engines are gonna be happy all right yeah, going. Up against the bitmap. Pre-render, or a rather yeah is, web. Locks I have. Many fields both good and bad about web logs let's. Take a look at the at the API basically um sometimes. You have a resource, it might be shared between multiple. Workers or even multiple tabs, of, your. Web, app yes.
Right, It's, so, I guess, we. Should have a think about those features. This. Is a tough one is it I think. Was I was gonna go straight in with CSS. Pain yeah it's lean. Towards feature policy, but it's not to me to be honest that's mostly because of the projected, future and, not. Off what it gives you right now because right now it's mostly development, debugging. Slash develop and feature like opting, out of features but, I have the hope that it, is our way out of supporting, legacy. Stuff for long amounts of time well document.domain, that's yeah that's, one of those and I think if feature, policy today. Like. It's Eddie you put this combination of things in this. Stuff is gonna be twice as fast yeah then, I think I would be putting it through. Yeah. But that's not what it is today the range of things that CSS pay a API sort of comes up if it. Feels like the I'm more excited about tonight. You, know it's it's, more excited about what it can do today flutter, is using it as well for their web port for example where they publish a blog post about to do all the the mask imaging, and form. Morphing, and all these things is actually pretty impressive the uses that I didn't, necessarily think of myself so it's, it's quite good so that's called CSS, paint API I'm gonna put it for free. So, now we have web locks versus. Caesars, paint API the, CSS, paint API, to. Developer features one of them many. More use cases in my opinion on average then the other one which. Because I like. For me it would be suspended, it was more use cases yeah. It. Makes a lot of new things possible, but also makes of all things much more efficient and especially, on low-end devices where your under memory constraints it, just gives. You, makes. More visual, things possible, it may, feels though gives the weapon more and high-fidelity, feel and. It's more - of the UI so I guess and it's the first feature is really opening up CSS, yeah I can see there being more little, micro libraries released with with CSS it's a very sensible, ones API in that you are now, hooking. Into the actual engine I really like web locks I really do but I I think, you're right I'm going to put a, CSS. Paint API, through to the next round and that gives us another, semi-finalists. To decide as well and now we have to decide between. Typed, om incidents, - Houdini API versus. Houdini API, oh this, is unfortunate, isn't it I mean it was it's gonna happen at some point yeah. Depends. On how we judge them on, average. The problems, that I encounter. When. Building, a web app, paint. API is, more. Useful than type to him and both, of them are currently as heart I know pretty much chrome only, time. To em has a lot of. Lower. Level use cases right like if you were if, you're trying to figure out layout, stuff this is gonna become handy even the map times I've written little, rubbish, pauses, just to take those.