Old vs New JavaScript - HTTP203

[@OhhBabyATriple]

This was a great episode, you can really see how far the language has come on over the past few years and went through all the things that made working in JS 'icky' and showed a clean modern replacement. Always enjoy Surma and Jake's banter too, really great thing you have got going on here. It reminds me of the UK Top Gear, its really hard to flow from eachother in the way they do.

[@dassurma]

[@MaxArt2501]

For a complete Top Gear, we need Paul Lewis to join the team.

[@pokojduzy5262]

ok

[@vcoppolecchia]

"T-Rex mode engaged!" 😂😂😂 Guys have you got any idea of how fantastic this episode is? Thank you!

[@PabloGaraguso]

Excellent! The showing up of the code with pre/after is great. I liked the "challenge" of figuring out what the code was doing before and after. Thank you guys! Good stuff.

[@Slackwise]

Regarding destructuring in the function parameters: consider it duck typing documentation. You are declaring what keys you expect an object to contain. You are effectively documenting an interface right on the function that requires it. Given this new perspective, I quite love it.

[@carloslfu]

A lot of things I used many years ago, I really enjoyed this episode! Good work guys.

[@ThadHumphries]

Yes, the backslash is needed on the plus sign (@ 9:10)

[@jakearchibald]

Hah, that's what I get for not-testing.

[@MaxArt2501]

You can omit the backslash if it's inside square brackets. But I bet that /[+]/ is slower than /\+/...

[@krystaldick402]

@@jakearchibald gftg

[@artemeelemann317]

Great episode, thank you, guys! By the way. Tag names are written in caps, so it should be li === 'LI'

[@BrianBest]

Ohhh can we have a dedicated copy button for styles in dev tools?

[@_mball_]

Prototypical inheritance *is* a class system. Car is a class, and c = new Car() is an instance of a car. ES6 classes don't change that. There's still an object with a prototype, and those methods still exist on that prototype. It's "merely" synaptic sugar. I think it's very useful sugar, but it doesn't actually change the mechanics of classes.

[@jakearchibald]

Absolutely. The "after" code does roughly the same thing as the "before" code.

[@JonathanGray89]

No, you're wrong. It looks like you began to read knowledgeable information on the subject but somehow completely miscomprehended it. JavaScript does not support classical inheritance, period. It only supports prototypical inheritance. The *syntactic* (not synaptic) sugar only abstracts away the prototypical inheritance model by copying the *syntax* of classical inheritance. That's the reason it's called prototypical inheritance and not classical inheritance.

[@AndrewTSq]

I liked this episode!. Even if its a bit old today, it still got a few info I did not know :) and I liked the "figure out what the code is doing".

[@K3dev]

Amazing, you should make a new section for more episodes with this format, not only new vs old, but shortcuts, snipets, tricks, like that blob trick with the response constructor, that was clever!

[@KylePolansky]

I love these episodes, keep up the great work!

[@chethelesser]

First example: 5th line - why not just Car.prototype = Object.create(Vehicle.prototype)?

[@jakearchibald]

Object.create is relatively modern. It certainly wasn't supported when I first did inheritance in JavaScript.

[@chethelesser]

@@jakearchibald Oh OK, thank you! I'm too young to know :)

[@UsmanSubhani2020]

8:00 what about event.currentTarget 🤔

[@jakearchibald]

That would be the ul, not the li.

[@UsmanSubhani2020]

@@jakearchibald wow how did i not see that 😃

[@vetobadmusic]

Is there a reason for the non-oneline solution (Car.prototype = Veichle.prototype) at 2:35? I'm thinking as the prototype still refers to the Veichle prototype in your example. 2:57 also seems a bit odd since it's still all prototypical inheritence under the transpiled hood. Don't get me wrong, I love the new synax sugar. I just find that this video could be a bit confusing for people that think they are "free" from prototypes just because of the new syntax sugar. I also don't think you should dismiss prototypes as being old and qwerky, as they do enable you to do a lot of cool stuff during runtime. This video could probably be more useful if our transpile target was WebAssembly rather than es3/es5.

[@runofthemillnpc]

Calle Bergström yes. This is because if we were to do what you said, you add anything to Car.prototype, then it also gets added to Vehicle.prototype because both are the same. When you want to extend Car, you don’t want those to also appear in Vehicle.

[@JelleDeLoecker]

Now you would just do Object.create(Vehicle.prototype) instead of the tmp workaround.

[@durchschnittlich]

That trick with Response is genius

[@emildavidkov1]

Man this show is awesome, great job, thank you guys :)

[@Norsilca]

Pretty cool stuff. Maybe some day I'll be able to use it! I tried going full ES6 recently, then discovered one of my main users is still on IE11 often..

[@EddyVinck]

I love these videos. I have been doing webdev for only a couple of years now and seeing how bad things used to be is very interesting.

[@GiovanniOrlandoi7]

I love this type of episodes

[@张四-q9w]

Thanks Jake and Surma. Very excited to know about the clean way of the FileReader part. So I have a question about this one: Does Response just apply to readAsArrayBuffer() and readAsText() of FileReader, how about the readAsBinaryString() and readAsDataURL()?

[@jakearchibald]

Just array buffer really, but once you have the array buffer you can pretty easily convert that to a binary string or data url.

[@张四-q9w]

@@jakearchibald thanks Jake

[@danielmatejka1976]

I just love your sense of humor ;)

[@promatik]

Great episode! Thank you guys

[@Yamgirly]

Who does the captions on these videos, there's a bunch of stuff that's marked as INAUDIBLE that is relatively audible, and would be useful to actually have in the captions for that reason exactly

[@bread8176]

All the tutorials and SO answers showing the old ways haven't gone anywhere... 🙁

[@max8hine]

does anyone know what's the name of syntax of { duration = 1000 } = {} ??

[@Elite7555]

Destructuring.

[@rw7799]

are making these chats easier to follow or am i getting better at coding ? i understand most of the chat with examples. What you guys think of react?

[@jakearchibald]

No intentional dumbing down. Although this episode, by definition, concentrates on shipped features whilst we often talk about upcoming or experimental features. In terms of React, Mariko and I talked about squoosh, which we built using Preact kzbin.info/www/bejne/n6GxiGmif62Je9U

[@rw7799]

Ha.. quicker then react!!.. never ending

[@Scio_]

Surma's reaction was so pure.

[@mmahgoub]

Why Surma is having a job interview every episode?! This is excruciating!

[@jakearchibald]

Because I prepare the examples 😀. I'm actually dreading us doing it the other way around, because I don't think I can pick up on code as quickly as he does.

[@mmahgoub]

@@jakearchibald Surma deserves that compliment 🤗

[@rw7799]

its better now he is a more playing the student ,,he used to double answer before ,which was confusing.. it must take a lot of control as he is obvious genius in this field ....

[@AtacamaHumanoid]

I feel like he would ace any interview, so it's kind of cool to watch for me.

[@yuyokk]

like as usual! Thanks, guys 🙏

[@paulsammut999]

I'll twit at you Jake for the missing animation.finished promise in Chrome, although it was pretty easy just to wrap my animation in a promise and resolve it in onFinish

[@nqobastevennovukuza9775]

@2:08 😂😂😂 "But that's disgusting"

[@tankian8829]

What pad you guys using in the show?

[@jakearchibald]

It's an old Pixel C. We wanted to use a Pixelbook, but we got weird strobing on the camera that we couldn't get rid of.

[@AtacamaHumanoid]

All this stuff works in the browser right now?

[@AtacamaHumanoid]

...all except the last example, it seems. Cool.

[@puruvijay6185]

This episode is historic.

[@二宮章子-n7z]

What should I do?

[@hypersonic12]

Nice-looking glasses, Surma!

[@gigawebsurfer]

8:45 should use reduce instead of forEach!

[@jakearchibald]

absolutely not twitter.com/jaffathecake/status/1213077702300852224?lang=en

[@SteveUrlz]

That was awesome! Keep it up

[@LarsRyeJeppesen]

Very informative, Coach

[@LOL-hc5fv]

TIL about destructuring with default values. Never had to do it but cool that can do.

[@maloukemallouke9735]

I never understood javascript, however, I have not stopped trying.

[@danylogudz]

looks like there is not only JS here

[@bibibobs]

I already used the new animations api, it's super sweet for micro animations like clicking a favorite or like button 🔥

[@john_p]

i just bypassed all that inheritance stuff completely .. never used it, mainly because i never saw an example that demonstrated real world application/benefits ... ill show myself out

[@k1ngjulien_]

probably since there is rarely a real benefit to inheritance in js. maybe on a gigantic project but in everyday use not really.

[@olavgg]

I've written an introduction to frontend development with vanilla javascript where I use inheritance to build a form for state management, creating and editing objects. Check it out! github.com/olavgg/vanillajs

[@GenghisD0ng]

Looking in to SOLID design principles is a good start to see where you could use it. Sometimes its much cleaner and easier to maintain code later on

[@ViktorGrandgeorg]

As JavaScript's prototype system is at the heart of the language and things like classes, extends and constucors are only syntactic sugar over that in ES6, one could say, that if somebody does not understand the prototype system, he/she does not understand JavaScript at all.

[@Elite7555]

@@ViktorGrandgeorg, that may be true, but what's the point? I take this nice abstraction anytime. Prototype inheritance is just obscure and no other language I know of does it this way and I don't see any benefit.

[@NomanHasan09]

Learned a lot, Thanks.

[@petecapecod]

Thanks this episode was 🔥🔥 Look we have nice things now 🤔😁👍

[@juanluisclaure6485]

Gracias por tanto, eso fue muy iluminador. Saludos desde Bolivia

[@slidewineder3953]

Thanks bros

[@khe_sanh]

Damn it even closed captions doesn't catch everything they say

[@jakearchibald]

Ah sorry. Is there a particular bit that's missing, or is it throughout?

[@SashNone]

I do not like chrome browser, and I cant even say why.. just so.... but you guys are great :-)

[@dikatok]

This is why i subscribed

[@Textras]

I want a square. That's how a human would say that 😂

[@AssemblyWizard]

I think you forgot: new Array(n+1).join(s) :)

[@samirsaeedi74]

3:08 I'd write it as var duration = options.duration || 1000;

[@jakearchibald]

That means if the user calls spin({ duration: 0 }) it'll have a duration of one second, which doesn't seem right.

[@samirsaeedi74]

@@jakearchibald Fair enough

[@wwhill8033]

Well done

[@omri9325]

Best episode

[@MehmetAliPeker]

I need subtitles :/

[@jakearchibald]

Apologies. All our videos should have subtitles. Not sure what happened here, I'll look into it

[@MehmetAliPeker]

@@jakearchibald Thanks

[@XCSme]

I think it's gonna be another 5 years until `el.animate` is well supported, future generations will have to suffer trying to implement programmatic CSS animations. The thing I'm most excited (and will probably be better supported than web animations) is OffscreenCanvas.

[@jakearchibald]

I'm excited about OffscreenCanvas too. We tried to use it for Squoosh, but we hit a blocking bug bugs.chromium.org/p/chromium/issues/detail?id=906619

[@pokojduzy5262]

ok

[@quintinmaseyk6975]

So good!

[@adasjdaksjdlkasldjas]

I always though that obscure class inheritance was a JavaScript feature 😜As it made you write more simple and easier to maintain code. eg. not using Classes. To check function parameters/options-paramter you can make use of the truthy/falsy feature of javaScript where any value *except* false, null, undefined, 0, NaN or a empty string - is truthy. Example: var foo = options.foo || default.foo; For the event handler example you can use li.onclick = foo; on all list-elements, this is very powerful as you can make use of closures. Async/await will give you very terse and beautiful small code examples, especially if you ignore all possible errors. But when you need to handle edge cases, errors, and customize - the event emitter pattern is probably more useful. You can still abstract and return a Promise (and callback) for the consumer though. I don't think it's a good idea to add new features that can already be easily implemented and abstracted in user-land. You'll end up in feature-bloat. It's better to focus on features that you *can not* or has performance issues when implemented in existing language spec.

[@pablomunoz4995]

Loved it

[@MijeshDeuja]

Classes are out now which might make it easier for learning js for students like me who learnt C++ before but University exams are not up to date with current technology.

[@masaltascream7484]

Douglas Crawford called an anonymous function of this kind (function () {}) () dog eggs. I agree with him))

[@jimcolabuchanan6579]

Don't think it is gonna get replaced by web assembly. Too easy to use. Great video guys.

[@VitalySergeev]

Native typescript support? )))

[@naythaniel]

You don't know how happy I was when Jake said he designs in devtools and then just copies the stuff back to the editor. OMG! So do I!

[@jacksonlenhartmusic]

The first example: AAARRRRGHGHGGGHGH MY FUCKING BRAIN!!!! *sees class* ahhhhh, life is good again :) *sips tea*

[@an_experienced_guy]

You should have just done Car.prototype = new Vehicle();

[@jakearchibald]

That only works if Vehicle can be called without arguments. In this example it requires an object detailing the number of doors/wheels

[@vetobadmusic]

That gets clunky as you have to pass the super args again (e.g. Car.prototype = new Vehicle({ doors: doors, wheels: 4 }); . Besides you only want the prototype, not everything defined in that closure. You could oneline this though, just with Car.prototype = Veichle.prototype.

[@JelleDeLoecker]

You can't just do Car.prototype = Vehicle.prototype, because anything you would add to the car prototype would obviously end up on the Vehicle prototype... Because they're the same thing. Nowadays you would do Car.prototype = Object.create(Vehicle.prototype)

[@b3rakesh11]

Awesome

[@iagobruno6539]

Interesting 😮

[@doug2279]

I hate the new stuff since i felt so good knowing all the old stuff and learning so much only for it all to be rendered useless as the new js any child can code

[@simonfarrugia26]

padding-top: 100% and you get a square.

[@jakearchibald]

But no space for content

[@simonfarrugia26]

@@jakearchibald position: absolute child. Yes I know it's disgusting.

[@bibibobs]

@@jakearchibald position absolute ;)

[@jakearchibald]

Yeah, I use that hack for images, but sometimes it doesn't make sense, or you want to avoid a wrapping element etc etc.

[@mrwho2513]

And that has nothing to do with js, neither DOM APIs

[@Berkedavinci]

REDUCE THE RAM USAGE I BEG YOU

[@janeteorquideascactosesucu8340]

Olá boa noite! Like

[@pokojduzy5262]

sok

[@Oswee]

Things will be perfect when gRPC natively will land into Chrome... :)