I barely, ever only trim on one side. Welcome. Back to the AVP 203, world cup of what features 2018. Are you bringing new fusee awesome yeah that's very good this is the episode where we find, out who wins yes, it is cousin exciting in the previous few episodes we, figured out one finalist. Did. We reveal that now or should we know because I forgotten, and I want to keep it that way so I don't incorporate, it into my decision, that's, good thinking but we did in the last episode to figure out the other semi-finalists. Which is yeah it's like a page, lifecycle. Yes. Correct why you just get the word page it's part of the API name isn't it. I'm. Gonna try using that tactic of arguments, in, this. Next. Oh. Okay. Trim, start trim and once, again the font is making it eligible. It's. Like. Okay. Let me explain to me no trim. Mmm, gotcha remove. Them space at start an end trim. Left trim right yeah, I thought that was already left and right so I wanted if you type out a, non-standard. Oh. But. In. Pretty. Much all browsers I think except page okay. Sure. Start term end so. Go, so he said question then though mm-hmm does. Trim. Start, behave. Differently, not, in right, or left languages oh I. Was wondering that and but, because there's no language. Applied. To. A JavaScript environment yes in a web environment they're not in a JavaScript environment which this is I'm, pretty sure there is absolutely, no difference so we're calling it trim start from end because we already have trim left to right but that's not standard so and we have pad start and patterned and it's basically. To make. You, okay sure yeah. So. That's, it and you, know scanning, my notes yes. This is now in everything. Except, edge but it has landed in chakra so it would it's, likely to be in the next version of edge, going. Up against, that. Is import. Dot meta or, imported. Meta especially an object where you have meta. Data about the module, that you're currently in, okay and I think the only thing that's on there right now is the URL property, and as more. Or less equivalent to, what documented. Current, script or source used to be right. The thing you can't use that is because if you have the, document, dot current script gives you the script, tag off the, that's. In the document yeah yeah that's currently running right, now the problem is that an import, or that JavaScript, module can have an import and so. That doesn't. Have a script tag so what is current. Script supposed to be so it's giving you the URL of the current script not not exactly, super. Important, if you think about I'm gonna do some path mangling, for dynamic imports, or any kind of like module loader or maybe just do relative path resolution, all these things but so. Dir. Name thing, that you know. Okay. Kind of thing so, it's it's a simple feature but it's actually quite quite, powerful, useful all right, so. It feels like we had to quite, small simple features there okay it's a nice change. So. It feels like we could probably make a decision reasonably, quickly but. Then I. So. Trim start tremendo, new, because we already have it all so I barely, ever only, trim on one side I. Usually. Trim all the way I am. Going to vote for pretty. The same reasons you import. My yeah it's it's more of a feature it is a new thing actually it is painful once you run into the problem that um, it's. Not important all browsers yeah you cut something but lawyers are but, imported met has not and if something is really annoying so, there we go import meta let's.
Introduce. The next feature which, is this. Is a lot of letters, eggox, reg, X see, the phone is terrible, it's like beg, X beg. Ex named capture, groups yeah. I know, these um oh, I. Heard. Of them I never actually look to the syntax but, it is just this you you you, know I find. Reg X to be right. Only yeah. It's executable line noise like it's yeah, you've written emits absently. And. You go one. Two, three, what, if a. Second. Ago ain't now don't but. Being able to do this like name groups like this and then, so result groups, you get yeah stuff, out brilliant, before that you only had a numbered, array and it would be completely unclear, exactly, we're, doing and another, place that would be unclear is when you're using string dot replace oh yeah but you can use the group names there as well so in this example I'm, changing, it from being young M day to day. Mafia and because, month day year is absolutely nonsensical. And should not be used agreed, yes to people European. There we go we absolutely think that so. Yeah on that next Wednesday. Okay. We've been proven to be non trustworthy, when it comes to dating, okay first dating. It's not what I meant. Alright. Going up against, Rick, ixnay m-- captured groups yep how, did that right um is. Relative. Time format we're going well I mean the other thing wasn't strictly to do with dates but but we're still sticking we're sticking in yeah in that territory this is basically, moments. Jazz on the platform oh it's, it's it's yeah we got it so you can basically create a burst. Of time format instance. That is localized. In this case I'm using English, because you know we've been mostly speaking English in German, but I didn't okay also be mostly cup of paces and was too lazy to actually generate a German one yeah, yeah. You just pass in here's a number here's, the unit it will give you that. As a localized. String and, that's obviously many more options if you want to have like in a full, breakdown or just the highest, object. If only, have like four months three days and, two hours ago or if you want to just have one of them if. You want to have it more numeric, or spelled out as words all these options are there but basically moment. Just no platform it's, a big dependency, that you can hopefully ditch now well, I I. Mean. I felt, like it was going to be an easy one but. Now I'm less sure I. Things. Like moment Jess one of the things that leads to quite big bundle sizes because you end up with these large libraries, in for especially, if you like don't be shy can they have like all the localization, still in there and. Right, so, having that just in the platform that feels like a huge win, the. Red X thing is really useful for the readability of like X but, how, often do you use Rex I know Jason lifts, off of Ray exits, yes, you, mean colleague, Jason Jason Miller this infrasounds that you're talking about the web standard, Oh, Jason, Jason these are a guess it's like you knew should not pass you're Jason with no X turns, out you can't parse languages with reg X no I mean I'm an Jason Miller who does. All kinds, of minification, and, mini, code me micro library magic. Because. Reg X but. I'm gonna say the relative time yeah it's.
It's One of the first bits of in tools that I'm really, really, happy, with I'd. Say yeah like that sort of it I found it be it's a well-designed API it seems yes I think there's still some things that could be even better but you know what I'm gonna, cut my losses here it's a good yeah it's something that you could legitimately replace. Moment. With yeah, and, look, we have we have a new. Thing to decide so import matter also time format I'm gonna go over the time format, oh you're. Less sure. I'm. Trying to. Subjectively. That, I have run more often in to import. What meta when, writing stuff in, too much of time format that, being said, pretty. Much a lot, of apps need the right of time format mania probably don't need, import. Not matter so in terms of the average, developer, I'm gonna, I'm gonna type with you it's. The the big big hitter here though yeah the wins for for, the web by reducing, those model sizes feels, bigger that important. Meeting you could probably work, around, in a lot of cases. That's. Probably like a Babel plugin something, that does it very very possibly very possibly right okay, yeah. All right so we were you got relative time formats through. To the next stage but. Now. I want to talk about. Resize. Observer I've I've got, a feeling. This. Might go far in this contest because I it's, because I wrote the article on it you did right yeah sure and that's it's it's a really good article as well and it's such a amazing. Feature I think it's, also quite simple it. Is also it is also quite simple I would say it's, it's yeah you, give it an element and it will tell you when it changes size yeah some of the complexities, in how it handles because changes like it only only, if it's of things inside the element that I change yeah but most of the time that is something you shouldn't be running into a few but yeah most, you just say this is a resize, event for elements rather than just the window absolutely. Yeah, and and, and that you, can build like element. Queries I think they're called on top of this all these things that's right that, for me is a selling point it's it's the element containing.
The Query stuff that Gina query wanting, for ages so, okay we'll have to beat the resize observer I guess all your clicks oh okay. So another worklet the workloads I can't get a platform yes your, analyst so a little of catch-up, usually. When you do audio you create an audio context, and then you can create notes, and connect, them so in this case I'm creating a track note from an audio elements then. I'm creating a game note which allows you to adjust the gain how much louder or quieter do, I want this audio, to become right and a pen or do I want it on the left speak at the right speaker somewhere in the middle okay and then I connect these notes like it's like little data flow model it's very soon as what you do in an audio system where you're plugging things into each other like different project the reason it's written this way is because all of us is running in a different thread so. All the all this data mangling. Is happening in a different event because it's audio, has to be usually super low latency latency is one of the biggest factors when you do audio work it's kind of declarative, yeah yeah, and but, then people like well I kind of want to manipulate the buffers myself I wanna get an audio buffer and do some math myself right and they were looking at it like do it do we do events, but events are async, by default so it gets really hard with a real timeless, and now. Worklets, are a primitive that actually gives a solution because now I can do your own node so this is the same code but now there is a some node and. The some node is basically an audio record nodes and it takes a name and then, in a different file we. That. We loaded, up here I can, extend. Them audio capacitor, which is the basic note and. Create my own one and just in there I'll have access to my inputs which is an array of buffers, and I, can define. What is in the, outputs right because because there is there are ways to do this sort of processing on the main thread I think is now deprecated, API because.
You Run into all of this the, a sickness, and the yeah all the real kindness problems and then as latency for the thread Hopson as well because audio is already a different event but now you have to jump back to main thread it gets unwieldy and, the worklets can, just be migrated to different if I'd run on the same thread you can still maintain. The same declarative, API and, allow. Basically. Now to have. DSP, plugins on the web all the effects that people do can, now just be ported to an audio worklet that's that's nice it's, nice actually. But. But. But, it's. Not resizes over though is it it's not it's audio. Is still, pretty. It's, just in each use case like in general audio is actually kind of frowned upon on the web and an APIs in general like things to start playing audio are bad, that's, true and there is audio apps, and those are great and really impressed with how far, people get but the, Audion. Use these fairly. Small yeah the little bits of audio stuff I've done on the web I've really. Enjoyed I, had, loads of fun with it but it is I've only done it like once or twice big quiz the first time was one of them right yeah, that actually might be the only one and, I did a little bit of extra stuff after that but it was it was it was much like a server. It's just in. Every browser like, today, please, so I can you, know do, that sort of stuff have the. Container. Queries, the other thing stop, just attaching because what we do right now is we attach a resize, listen to the window but that doesn't necessarily mean, that you, know that's the catch-all of case no they know them all it gets on inclined track it becomes a performance, foot gun it's so hard to do right exactly. Exactly right so that goes through to the next stage and now we are coming on to the final two features, like, we're talking about I. I'm. Gonna talk about cache mode. On. On, fetch yes so this is part of request objects, because it's part of a request object you always getting this this second parameter of fetch, as well yeah and, what you're essentially, doing is is saying. How. This. Request should go through the cache if, at all so, with. Reload, I'm saying, on the, way out ignore, the cache mm-hmm, but on the way back it can go into the cache oh, you. Have control over both paths, this yes yes. No. No you say why. Not it's Christmas. Some. New words but you just made up that's fine. So. Yeah but this is a good like if you know if you know there's a more to date version but you but it's the user has, has a one, in the cache that yes yes. Yes. What's. In this. Yes. So you, can bypass the, cache my syllabus I'm basically no store would then be on the way out it can hit the cache, not. No store behaves as if the, cache, isn't doesn't exist, okay so bypasses the cache both ways and no cash yeah. Not that I'm reading this off a piece, of paper it. Will. Even. If there's. If. There's an item that, is fresh in the cache it bypasses, it but it will still do a revalidate. Potentionally. Cache fresh in the cache yeah right cool gate force. Cache means, if there's, some basically the stuff undoing the cache busting, thing where we put like random, Crary things amongst, other things but, but with force cache it means that you could take the item in the cache even if it's stale yeah, like max-age and only, have cached me and also don't hit the network at all right well force cache will still hit the network only, if cached will not interesting, that's it and. Lots of control I like it up only if cached it has to be same origin that is the future alright. Going up against that is class. Fields oh. Yeah. So it I don't know about this song it's it's pretty simple it's it's this, okay. It's so, so far which someone won it doesn't include the private no, but, well basically it's built on top of it so once this is landed in chrome the, private ones are the names. Are start with a with a hash. Hash, tag hash yes. Those. Will only be accessible but from within the function f um okay within the class not from outside and this. Is, pretty. Much just sugar over, I guess over getters and set, it getters but. The biggest beneficiary would for example be custom elements because you have the observed, attributes. Feel. That always has to be aesthetic, get, a function, and now, it could just be a proper, static attribute. And just looks nice and it's easy to it what's going on what about the instance ones that's, so, it's, that, where. Do they happen in relation to the constructor do you know I do know I'm assuming it runs before, the construction after. The super constructor but before your own constructor, I think that's what typescript does so yeah that would make sense yeah I think I maybe who knows, maybe right. Okay. So. That means away with the slides away with with. The bracket this, this is it um. So. Okay, one. Of the things that is pushing me towards the cash mode is that, it's, actually capability, right.
Well. It cost yeah clusters, of sugar and it's also sure good that I write a lot of typescript these days yeah, I just I already have it yeah, yeah I get it I get it glad that it's going to javascript proper, and I'm. More excited about the private. Instance properties, true, and and, the things of like old oh well they could be munched. In code. Minification yeah because they're, private yeah they're broke so, I'm, more excited about that so. I'd be tempted to put cache mode free I. Haven't. Run into, the problem with the cache mode very often I have to say if where I wanted, to have. Control about how the fetch is being handled that being said I think it's a very you could hope. Case is, that you've updated your serviceworker you, want to get the freshest version yeah these things and you'd be you're not in control of girls yeah I guess I mostly. Happened when I was inside myself so go but yeah I I agree it's what I would say is anything we pick now I'm. Gonna, be voting resize observer even though. Both of these lose against recess observer so going, I'll let you pick put. Cache mode through I go it's an actual capability almost missing more class fields we had a workaround for you that's been fine yes and absolutely, nice it's, nice yes, so, next bit we already said it I yeah. Yeah you agree yeah. Rattle. Through these yeah I just think resize observer like you have probably like stuff that solves, is is. Amazing, yeah. So it resize observer the amount of stuff that you can do with it yeah it's very versatile, it's so it solves just a such a long-standing problem. So. Now now. We're getting to the interesting bits yeah, so, what we go here a relative time format and resize observer. Still. Rethus observer her mean I I agree, if they agree the amount of times that I've wanted resize. Observer, in the past it, is loads yeah. Your. Life, is. Load. Loads. Yeah. Yeah. Loads. - I would say so. Let's put resizes, over through to, the next round and we'll see where that leaves us here, we go. Now. We're getting that's. A rough one, now. Yeah could have predicted this the, thing is, this. The, interesting there's a commonality here that these both, solve. Long-standing. Problems, yeah the the tab discarding, thing has existed, the. Since mobile and. There's. Only now a solution to it the. Resize observer you. Could sort of equally say that, this has been a problem since mobile as well because they can hold responsive, being exactly, came, into it to be I'm, gonna be honest I feel like life, cycle API is more, work around the ball than, resize observer. Yes. Because you could put stuff in you have session storage, annular. Has been there. For a long time and you have ID be you have local storage you have means. To persist state locally yes so. You could have done the right thing for a long long time now in business just a cherry on top for you well recess observer you had to go to get bond and client direct and other awful things I'm pressing. The button because. I absolutely, agree, with you and I think I now remember this, is our second, finalist if I remember correctly oh, and. I think I remember now who are the finalists system you have one CSS feature and one JavaScript feature in our finance which i think is amazing, that is exciting, oh you're. Right yes, I had forgotten about it so.
It's. Kind of horrible that with the amount of work that's gone into these features and the, the diversity, of the features that we now have to just declare one the best arbitrary. Based. On just some loose opinions. Okay while wearing a ridiculous jumper. We, should we feel like it's. Not going in your ear every time brilliant, excellent. Actually. Well it feels like we have to summarize, scroll. Snap again, because. No we I think we should link back to the video you would just want another view yeah yeah why not excellent, what was the video if you don't know what's called snap miss about so, we've. Got the hi I'm gonna show the demo again why not, is. It it's a tab we've got hero 9 now remember so this is scroll snap this is isn't, it great it's, it's not the best demo ever, made it slightly, underwhelming demo now that I think about it but, if. This loses then whoever made this demo is gonna feel pretty terrible. Yet. So this is like having a soar paged paginate. System, yeah, within your scrolling and you see it on the mobile your eyes right where you have you swipe between individual. Panels and you just want them to lock into view yes, I don't want to reinvent the wheel would I do just use, a scroller and just let the rest be handled. By the operating system yeah and it's nice it's in CSS so it's super smooth it's bringing, something. That is composited. Scrolling composite, it's growing it's a very native feeling, feature, yeah because the browser even. The browser might yield, to the operating system hmm so this isn't even something that animation. Work look is, going to solve right cuz animation, used to it doesn't anymore yeah okay we. Used to wanted to solve it but actually you actually can, in a way but it's quite a key you can still if so. Use. Container and then yeah like. Those gross networks animation worked with is your SK patch okay, I mean it's not as easy as it used to be but honestly. Scroll, snap covers, the 95. Percentile, I would say all, right so and I think that's where my argument, lies both, of these are there's, also a funding problems currently, powerful tools big, profits have been around for a long time, so the incise observer there's. More, types. Of UI that it solves a problem for yeah, like, I. Can there. Are definitely cases I'll use Scrolls not like the two cases we mentioned they having a carousel which is the example. We're looking at and they, having those sort of like, yeah. Paged uie yeah things. Which I have written that in JavaScript it's incredibly hard and it's, still a bit janky and slow resize. Observer, once that's in all browsers I feel, like I'm, gonna have like five, elements. On the page all doing react having their resize and never doing different things applying, class names. This. Is really difficult for me, my. Argument here is going to be. The. Amount of code, that Scrolls. Snap allows, me to not write, just. Outweighs what, rate is observable awesome really that's, a really compelling argument actually I like that because the did you if you write scrolls up yourself in JavaScript, it's on the main thread you have to do, the physics, things you and it's, going to be different from for example Android, Torres they feel different when they scroll and you either gonna be an uncanny, valley or you, have to have to implementation I mean it both perfectly.
It's. A lot of code it's very hard, to get right for. Me it's gross snap and but. Then the. Extensible. Web person, within me is looking, at two features here one, is a high-level feature yeah I can't really hook into and the other is very, much a primitive, but, that being said this is that extensible. Web doesn't say them should not be high level features no it should just be build in the they should just be taken, out of exposing, low levels first and then see the popular. Patterns and then providing easier ways for those and if we were talking about an animation, worklet where you can control school position in this way that. Feels like your next step this, is a big step that's the big asterisk in about the animation rockers story here where you can't really control, position. Anymore he used to but that's been removed from the spec but. You can still achieve, the same visual effect, yeah. By skin Epping interview, so it is, an escape, hatch for this resize, observer we can you've got the window resize listener you, could. Infer. Stuff in other ways I guess in, it's difficult code worst. Comes to worst you could have a Raph. That's. Changing layout I mean, usually you know your breakpoints in your CSS breakpoint so you could actually avoid. The get boning clanged if you do it's, all if not already now um it's. Difficult to make modules like that modules and components like that but, absolutely. This it, settled i. I. I think, i agree i think scroll snap yeah it is, it's, just how smoothly it does it and although. It's not something. I'm going to be necessary. Using on every page as you, say it's it's, a, much bigger step, in the right direction from. How we were doing it today yeah versus, resizable, we should still a massive step. So. With that our HTTP. Two or three world feature, championship. The. Apt, thing. Renderer. Is. Going to be scroll snaps across now scroll snap in. A scroll snared the emergence, the the orange carrots, i was i was, going to ask what they win, I was thinking it was nothing because, our, opinion, is essentially, meaningless other, than just, what we like would they literally gonna send them the glittery. Carrot. Root of the. 2008, glittery carrot award I. Like. It we should do it next year until, next year until next year well done scroll snap, I'm. That made good time because this is saying internal, server. Let. Me try let me try this again. Okay. It's like a backing.
2018-12-24