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.

Just. I think that clip what is good yeah. It's. It's not bad, often that you need type to M directly. You, need them for a lot of you guys, and if you need type to them it is so huge to have it, yes and then, again you don't need clip-on that often as well I guess unless in certain circumstances so, and yeah I'm gonna eat a ton okay. Okay, I agree. So, acing clipboard it's, a big improvement to what we had. But. It's just a lot going on in type 2 a listen though it feels like it wins just for being a bigger feature it's definitely something I would have loved in the past like even, you have small parts of that yeah, I love when I get excited, and there works ding ding and, there, were some experiments where they had like animation, heavy sights and. They basically rewrote, them with type term it actually got 80%, faster it's, a big, number that's a big, number I I'm, gonna put it through that goes, for it. Right. Next. You, know steady on because the next feature is, update. Via cash. Okay. Yeah. So. This is a. Serviceworker, feature I'm. Not surprised what happened we had the ruinous problem where we. Were checking, for updates on the serviceworker using, the HTTP, cache how's, things normally happen everywhere, for everything all that cash back a cache the HTTP, cache, but. We. Would always time, things out after 24 hours you. Know if it was over 24 hours old we would go to the network regardless, of what was yeah cash the only the caching headers a, lot. Developers still had a lot of issues with that because, they. Didn't have control over their. Headers, for like one particular javascript file like, the serviceworker, yeah good up pages but I think is a good example we don't have control or you had us exactly. Exactly, yeah they have a default, cache of like 10 minutes or something random, yeah so, we introduced update via cache where you can tell, the serviceworker. What. To go. To the HTP cache for what to ignore so for the sauce you got you tell the browser whether, to respect, the HTTP cache for the server file specifically, yes I guess, so you, go, to every cache all which was the old default and it's. Not the, default anymore. There's, imports. Which is saying don't, go to the cache for the main serviceworker file but anything it imports, you can go to this that's, cool that's the new default or you can say ignore, the cash for everything right. That's. That's my future my, feature I am what was my feature. Desktop. PW yes, so I have no code samples because it's once again something. That doesn't. Really change the. Way you write code or gives you any nucleus but it's basically the whole install. To home screen but, on desktop, make it its own window make it its own button. In the launch, or on the Start menu or whatever you have nowadays yeah um and. We. Etch, has, it kind of with allowing you to submit PWA to the store yeah they were ahead of everyone and do but you still couldn't just, install something, from edge to your, desktop that wasn't possible yet. To submit it to the store I think I'd approved I think oh and, I got in there so now with Chrome on Chrome, OS and on, Windows, and I think on Mac, behind the flag yeah it's kind of like um you.

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.

Via, A DB or something, else has shared across your origin, the serviceworker for example yes and and. So you have some code and it does some thing you don't need to lock and we need a lock you request a lot by a name it's just a string name and then. An async, function will get invoked with a lock once you have, that lock and then you run your code because that might not be straightaway because something else gotta look right and then once. That acing for interest and running the. Lock, will be released and you can continue, normally and there is also a concept of shared, locks and exclusive, locks shared, locks if you request a shared lock and you. Can get it if there's only other shared locks right, okay an exclusive one you have to wait until there's no other locks and you like an exclusive lock cuz, shared locks are fine if lots of things are reading from thing so a Gusev lock is for writing I like that when we shared an exclusive. Though because there's multiple patterns not just to read write pattern okay right so and because, sometimes you might be reading and writing but on and disjoint, parts, of an array okay. So that would write I saw it work yes. Okay so yes so this is something that lots. Of people have requested I. Think. The more thing that people I think it's actually necessary I think there's also as we've done without, this insuk using the actor pattern where you have one designated threads. But that's a different story yeah. Because I, why have you done underscores, this is not very because I copy pasted from Indian, good. Excuse. Excuse that's a good way out of it because I dislike. That in JavaScript it's not like any of, our api's right. I mean. It. Feels, to me like web, blocks is just, a more, it. Probably, has on. Average more use cases then, the bitmap ran right hey but that Brenner is kind of niche for. Probably. Game engines probably, some image processing it's. Good if you've got an off-screen canvas and you want to transfer. Code but, yeah. Let's say we put web declare, web locks the winner of round. Number seven round number seven, okay. All. Right so web blocks is screw, to the next round. One. We what are we going to look at now I, want, to talk about. Reach. Reach, oppose defeat, okay it's the font again this, is feature policy, lots. Of buzz around future policies at CES yes, there was so. Here's basically how it works this is a header, and. You serve this on your page and it's essentially, it's. Like CSP, CSP. For fugitives exactly. So, here I'm saying this, page may not use to your location it's, so you're declining, yourself, access, to the geolocation API, oh just good because that means what somebody, evil. Injects JavaScript code they, can't do these things exactly, exactly, and you can also specify, it for an iframe so, you're. Saying this iframe may not use, geolocation and there's, lots of events I would presume yes. Exactly, yeah you, probably wanna put quite a lot of this and if you really want to restrict, what if you've got me and there's a massive, set of future policy so I'd like for like if your images are too big for this so, that one yes that is one but that's an experimental one that's not released the. Ones that are released is autoplay. Camera. Document.domain. Stopping, that which, I quite like because that might come with performance, benefits later in life okay, eme fullscreen, geolocation.

Obviously. The. Microphone MIDI payments. Stuff VR. Written. Speaker here can't remember what that is. Synchronous. Xhr as, well so I think yeah, that's, all good stuff absolutely, because yeah that's something you would definitely want to stop and I hear a plan future is like if you opt out and of a certain subset of features you actually get if they, could be the option to enable a faster path in the browser because if you can opt, out of legacy stuff the brother oh don't need the legacy stuff I can be faster like the enable certain optimizations potentially, in the future yes absolutely, absolutely right, what, you got coming. That's see that's paint API oh, yeah. Okay I want four people to my CD s talk oh. Yeah. But. Maybe that's, it's a 50 minute video if you want to see the unedited, version yeah and, is it wrong for you yeah. Version. Of C the paint API basically, it allows you to, define. Your own paint, routine whenever, CSS, expects an image so. Just. Before the skwerkel is is the, point where your talk failed it's either yes we. Had a catastrophic laptop. Meltdown I'd it and you've yet you've brought it up here yes I I wanted, to absorb, the squirrel from the curse that is crushing, it sorry. I interrupted um yes. So skwerkel is basically a square it is mathematically closer to a circle then, and. It's a way to paint, a rectangle. With rounded corners, but it looks a bit more natural than how rounded corners for example and and browsers can do that you have Auto radius and if you don't like how it looks then you're kind of screwed and now with Cesar's paint you can basically hook into the actual paint, part of the rendering pipeline and define. Your own paint. Routine so here I basically load a module which, is a JavaScript file into, the paint worklets, and I username and then in that file, I can, define. The paint routine ever basic at the same context, like a canvas right, and just refine what what I'm gonna, draw and you get the geometry which is going to be telling you stuff like how big is the element and the properties were other styles on this element and you can like incorporate, all of those in your JavaScript code and the good thing is that in the very near future this code is gonna run off the main threads basically, not costing you any main thread budgets that you only have like 60 milliseconds per frame okay, because previously if you use canvas it could, end up costing your, friend but is it on main for it now currently. It is okay okay there's the furniture of worklets, and all three needs that they're migrating all so whenever we think it's, feasible to move it to a different thread we can we can without you having to change your code okay, okay, right, so this allows you to reduce the Dom and stuff.

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.

Values, And break them so that's where I guess, my experience. Differs because me the. Problems. That typed themselves. I encounter, much less than the problems that paint API sauce. Would. You just do that for 15, minutes an, extended. Cut. All. Right let's. Find so you would say tapped on, your. You're leaning towards type done. Let's. Let's go pay API it is I, I'm. More, interested in the tooling that's gonna be built around CSS, paint, yeah yeah I think it's, that's um I'm hoping it would be really tough one yeah, I'm hoping there will be like an ecosystem of off-the-shelf modules, with all the effects like a ripple and like you know all the things that you can potentially build yeah I do think that's interesting and it. Also means we. Can all say, yeah, our first like, semi-finalists. We, can come up with so, so and this this is to I mean see let's max say this is two good ones you, would hope this. Later stage in the competition that. If this would be two good ones but, it definitely to CSS features once again I see, a pattern I think yeah that's, interesting um. This. Is a really tough one actually I, I. Would. The amount of times that I've, wanted. Scroll, snap and I've ever had to implement it in JavaScript and it's been horrible yeah, because it's been laggy. Like. It's so those things are moving it's fast because you're on the compositor but that initial picking. Of the touch event is starting to do the movement it often involves like setting up a lot of layers in the compositor, and then you do pretend physics, and you have to like do touch and pointer events and mouse events, yes and there's a horrible moment where that user swipes and then because. It's time to go into your Co you physically it kind of is a bit of a break before it any ethylenes and then you figure out this the the ramp up curves and everything and no I agree. Scroll so it removes, so much gold and it's much more cross browser than and see there's paint currently is that is true actually scroll Snap is around. In Chrome. And Safari but, there is a sort of all the standard death of Elbe and all the other browsers so, okay. Yeah I'll give it extra points because it is something that you can use to do much today like it in projects, okay so. Our finalists. So. We are 50% through, we, have 50 we have we have whittled down 16 features to one, and we will do all of that all over again with another sixteen features. I regret, doing this already, well, done yep. How. Do we sign this off, see. You next time it's not right so it's video next on. The other so on the flip side on yeah. Sooo next one subscribe. Keep. Getting people back every day why don't we do one episode per one of these though they've been everything. Much better anyway. So good at this we're, so good at see you next time.

2018-12-21 16:25

Other news