Тёмный

Our favourite ES2018 features 💖 

DevTips
Подписаться 351 тыс.
Просмотров 23 тыс.
50% 1

Опубликовано:

 

28 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 91   
@OfficialDevTips
@OfficialDevTips 5 лет назад
That cool inline evaluation thing is called *Quokka* quokka.devtipsshow.com
@tyreldelaney
@tyreldelaney 6 лет назад
I really like this kind of video. Just chatting about interesting things.
@ezekielsaturday2637
@ezekielsaturday2637 4 года назад
yeah, same here
@DoktorKumpel
@DoktorKumpel 6 лет назад
Also works with arrays [first, second, ...rest] = someArray
@YamenSharaf
@YamenSharaf 5 лет назад
Arrays have the added benefit of not having to add unnecessary variables to your namespace if you only wanted to grab the third item of the array for example const [, , third, ...rest] = someArray; Now you don't have first and second variables if you don't need them.
@bramus
@bramus 6 лет назад
Thanks for the mention! :)
@shadymohammed3197
@shadymohammed3197 6 лет назад
You're awesome, guys 🔥
@jajasaria
@jajasaria 5 лет назад
OH MY GOD! How come i only know this channel just NOW? love this kind of video. Keep it up guys. SUBSCRIBE
@vinisr12
@vinisr12 6 лет назад
JS feels like it's becoming Elixir more and more. The matching scheme is there.
@j3bb9z
@j3bb9z 6 лет назад
Actually, Bluebird is still useful alternative to native promises, because it has better performance and some extra features.
@zeocamo
@zeocamo 6 лет назад
i love to see you videos, remind me of the time when i also only got like 3 years of exp. keep on coding guys, you will learn to understand the world of programing one day :)
@developingdeveloper7441
@developingdeveloper7441 5 лет назад
fluffykiiiiiins!!!
@ablanchi
@ablanchi 6 лет назад
Yoansson
@elmirmahmudov6215
@elmirmahmudov6215 6 лет назад
@imorganmarshall
@imorganmarshall 6 лет назад
"I like a lot of things people hate" -MPJ
@natluenthaisong
@natluenthaisong 6 лет назад
how you do the " //? " thing what tool is it?
@Sets_21
@Sets_21 6 лет назад
Quokka
@OfficialDevTips
@OfficialDevTips 6 лет назад
it's called Quokka. It has both a free tier and a pro tier. Check it out here ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-W4brAobC2Hc.html or on their site quokkajs.com/
@natluenthaisong
@natluenthaisong 6 лет назад
@@OfficialDevTips ,Sets, thank you very much
@ezekielsaturday2637
@ezekielsaturday2637 4 года назад
its Quokka - pretty cool stuff ⚡️✨ But depending on what you have running on your CMD, it might make you experience some system lags
@ablgmv
@ablgmv 6 лет назад
And gonna save twenty six minutes of your time 1. let { city, ...restOfTheObject } = sourceObject restOfTheObject will have all other properties of the sourceObject without 'city' property. 2. regexp match() is cool. 3. 'for ... of' is here for iterating all iterable objects. Also can be used for asynchronous operations, just insert 'await' just after the 'for'.
@ColinRichardson
@ColinRichardson 6 лет назад
I didn't know const { city, email, ...restOfObject } = originalObject; was a secret that noone knew about.. Tho, I would have done let filteredObject; { const { city, email, ...rest } = originalObject; filteredObject = rest; } That way city and email variables are not littering your active variables
@nathangek
@nathangek 6 лет назад
You could also use: Promise.all(ArrayOfItems.map(async (Item) => { const ret = await asynchronousMethod(item); // Do something with ret })); If you want to wait on a bunch of promises based on array data. I believe this is also a bit more efficient
@mtheoryx83
@mtheoryx83 6 лет назад
I don't watch this channel to really "save time". It's entertainment as well. But I understand what you meant. I think.
@ablgmv
@ablgmv 6 лет назад
@@mtheoryx83 Yeah, I'm sorry a bit for this comment. But on the other hand I wanted write it too much and couldn't do anything with myself. Sorry again. I can remove it.
@erikw4193
@erikw4193 6 лет назад
you missed the entire cookie break
@gokaygurcan5704
@gokaygurcan5704 6 лет назад
According to Wikipedia article, the first manual models, were developed in the 1860s, and the first motorized designs appeared at the turn of the 20th century.
@ljprib305
@ljprib305 6 лет назад
5:10 is great to pass React props around.
@CoryTheSimmons
@CoryTheSimmons 6 лет назад
Give me ? chaining or give me death... so damn sick of `foo && foo.bar && foo.bar.baz` littering everything.
@oktavic777
@oktavic777 5 лет назад
There is a proposal in Stage: 1 called "Optional Chaining". So `foo && foo.bar && foo.bar.baz` will be `foo?.bar?.baz`
@joel_ricci
@joel_ricci 5 лет назад
I couldn't agree more. If ES2018 should bring anything new, that should be it! 😩
@artalar
@artalar 6 лет назад
How to delete computed property with immutability? ``` const object = { key1: 1, key2: 2 }; const deletePropertyName = "key1"; const { [deletePropertyName ]: anyUnusedVariableName, ...newObjectWithoutComputedProperty } = object; newObjectWithoutComputedProperty // { key2: 2 } ```
@stephenjames2951
@stephenjames2951 6 лет назад
`let x = (...args) => { console.log(args); }` This kind of allows you to use "arguments" in an arrow function.
@ezekielsaturday2637
@ezekielsaturday2637 4 года назад
To answer David's question, for me it wasnt difficult to understand, I already use most of these Es6 features so I found it pretty cool. But the for await was a cool thing to witness tho.
@markusgattol
@markusgattol 5 лет назад
bring it on... complicated stuff is only complicated until understood... and that's why people meet here :)
@bjornkihlberg2103
@bjornkihlberg2103 5 лет назад
Excluding fields with destructuring is really nice as well because it's not mutating anything. It's all pure.
@BrianDriesenga
@BrianDriesenga 6 лет назад
Would love to see further discussion of features in ES2018 that you guys see as important. Also, please post links to the important stuff (where to order that fika food online)! By the way, the first vacuum sweepers (precursor to vacuum cleaners) were introduced in the 1860's. ;-)
@sachinthakur5493
@sachinthakur5493 6 лет назад
Which extension are you using for live logs whenever you write certain variable or functions?
@tonysmarks3578
@tonysmarks3578 5 лет назад
Sir, please tell me about the extension that you are using which can check your code.
@HygorZorak
@HygorZorak 5 лет назад
What is the vs code extension to show the contents of the variable?
@sakransaleh4110
@sakransaleh4110 6 лет назад
I love you this episode very much. Especially when you are talking about the ES6 2018 feature. Because I had today I am study little bit about destructuring. I think care if you can make you episode add different features of JavaScript base then I think that show will be more effective and more enjoyable for us.
@catwhisperer911
@catwhisperer911 6 лет назад
const {email, ...userWithoutPII} = user will unfortunately cause a linting error of assigned value is never used for email. In eslint you can turn off the rule so it won't cause the error. just thought you'd like to know :)
@MrMine2000
@MrMine2000 6 лет назад
Maybe changing it to '_email' can disable the warning?
@catwhisperer911
@catwhisperer911 6 лет назад
@@MrMine2000 it might but I personally never use pseudo visibility makers because module patterns make that unnecessary.
@catwhisperer911
@catwhisperer911 6 лет назад
Meant to say markers, not makers :)
@rothbardfreedom
@rothbardfreedom 6 лет назад
"I like a lot of things that people hate." Java programmer.
@FauroOficial
@FauroOficial 5 лет назад
what is the name of extension, less dont use console.log for see de result??
@RagePeanut
@RagePeanut 6 лет назад
11:14 Actually, if you didn't get a first name theMatch[1] would be undefined. You can even see that at 11:30 when you changed the regular expression. Still, I'm looking forward to named capturing groups, will be a game changer !
@OfficialDevTips
@OfficialDevTips 6 лет назад
Yup you're right!
@drsfn101
@drsfn101 6 лет назад
Guys thank you for the video and i really like you why of making it but realize that you focus only on the developing of the channel and you forget about the design part of it the channel name was dev tips for designers what the last time you made video about html templating or ui/ux trends or visual design ... Etc i hope you get my point
@OfficialDevTips
@OfficialDevTips 6 лет назад
We know what you mean. Problem is we are pretty terrible designers... We're hearing you though! There are many topics around design stuff tied to development that is not as techy as this video.
@ablgmv
@ablgmv 6 лет назад
Why do you still use var?
@OfficialDevTips
@OfficialDevTips 6 лет назад
It depends on if you are looking for function scope (var) or block scope (const, let). Also it is just plain old habit to use var to not have to bother about browser compatibility. Mostly being lazy to be honest.
@ablgmv
@ablgmv 6 лет назад
@@OfficialDevTips Get it, thanks)
@nikodemwrona1011
@nikodemwrona1011 6 лет назад
All of stuff was easy to follow and on point :)
@koodauskanava9096
@koodauskanava9096 5 лет назад
Video starts at 1:40
@h3rteby
@h3rteby 6 лет назад
While I understand the destructuring rest hack, I think it's pretty terrible for readability. Also, declaring the "email" variable just for the side-effect? 🤨 I'd rather see lodash.omit and lodash.pick brought in as Object.omit and Object.pick. They're dead simple to understand.
@stephenjames2951
@stephenjames2951 6 лет назад
Maybe it would be clearer if you don't assign a city variable. `let { city: _, ...newObj} = obj;` Using the _ to make it clearer that it is not used
@Victor_Marius
@Victor_Marius 6 лет назад
Wow, that RegExp feature I saw it in python few days ago and I thought I probably will never use it. But now, when I found out that is in javascript also, I changed my mind. Thanks for changing my mind :)
@RockCYP
@RockCYP 6 лет назад
A note on 'for...of' -> its used for arrays, 'for...in' is used for objects. As for the spread object yes its new but when using Arrays you could do that since es2015 i believe.
@rolfnoduk
@rolfnoduk 6 лет назад
You keep explaining destructuring but rarely use it by default. Would you be able to use it more often when doing other stuff so it's more familiar to people?
@oeschw7650
@oeschw7650 6 лет назад
The rest operator is useful to get new objects with keys removed to test react components/props when fiddling w enzyme/jest ie
@jonwalzmusic
@jonwalzmusic 6 лет назад
I guess I didn't realize people weren't already using this stuff...
@ryanf591
@ryanf591 6 лет назад
Content wasn't too complex. It's good to get info for professional JS examples. Thanks
@williamchou9067
@williamchou9067 5 лет назад
Curious what this ide plugin is to display the shape of objects!
@johanneswe
@johanneswe 6 лет назад
Oh this DEV-TIPS animation intro 👌 .... where do u got it from ? :D
@ragnarlothbrok367
@ragnarlothbrok367 5 лет назад
How to configure VSCode like that?
@compton8301
@compton8301 5 лет назад
I'm also waiting for this answer.
@compton8301
@compton8301 5 лет назад
Actually search for an extension called Quokka on vs code's marketplace and install it.
@maged.william
@maged.william 6 лет назад
Yeah yeah guys be as JS nerdy all you wan't
@szabikeresztes1157
@szabikeresztes1157 6 лет назад
Always like to be challenged mate!
@agorafobicoMusica
@agorafobicoMusica 6 лет назад
1:35 Let's create a var.. I mean...let...I mean...const
@TommiSvaerd
@TommiSvaerd 6 лет назад
I would want more videos like this! Maybe go a bit deeper into diffrent libraries/methods like promises, Observable etc? Cheers!
@OfficialDevTips
@OfficialDevTips 6 лет назад
Yay! For generators and Observable, check out MPJ's video here ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-MmRmxzrr4lk.html, David also did a video with Observable and physics here ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Gx24SikMfGw.html
@herbertk9266
@herbertk9266 6 лет назад
Thks cool tutorial
@klausklemper5987
@klausklemper5987 6 лет назад
I love the humor !!
@Chrosam
@Chrosam 6 лет назад
0:16 nice animation ;)
@tusharborole6155
@tusharborole6155 6 лет назад
how is a red and green dot on every line of code appear in your ide?
@OfficialDevTips
@OfficialDevTips 6 лет назад
Quokka
@blackbird9854
@blackbird9854 6 лет назад
So with the first thing, what if i want only small part of a huge object? is there a way to do it using ... notation?
@GifCoDigital
@GifCoDigital 6 лет назад
If you want those small parts of the huge object in their own variables just omit the ... and just use destructuring. bigObj = { name : 'Bob', age : 32, sex : 'male', lots more key value pairs} {name, age} = bigObj You now have a variable name and a variable age. If however you want those "small parts" of the huge object all in one variable in their own object just create a new object and pick the parts you want to put in it. smallObj = { name : bigObj.name, age : bigObj.age }
@blackbird9854
@blackbird9854 6 лет назад
GifCo also you can create and deconstruct object at the same time eg. const smallObj = { name, age, sex } = obj 'problem' with that is that you also create all the variables, i hope you could bo it better with ... notation, oh well thanks for answer anyways
@mtheoryx83
@mtheoryx83 6 лет назад
Really like this format as something to throw into the mix!
@jerzees
@jerzees 6 лет назад
Just watched the first few minutes, but why would call destructing with the spread operator a "sort of like a hack!"? Its the intended use, and you seem so confused about the entire feature, the other guy responds like its magic, its been around for a while. Is this just RU-vid acting or what is the intention? Sorry dont want to be a downer but I used to follow this channel with the "previous owner", I dont know who you guys are and im trying to determine if I should keep following or not. Feels like the skill level has dropped quite a bit, is this channel now targeting more like beginners?
@blackbird9854
@blackbird9854 6 лет назад
jerzees What if they do that on purpose? I'm pretty sure most of people don't watch these videos if they already know all that. So if one of them doesn't understand or pretends to, people watching this videos that acually don't understand the subject get more examples or explanation, asking questions is really good way to learn but you can't ask pre recorded video a question so they do that for you.
@jerzees
@jerzees 6 лет назад
That was kind of my question, if this is "an act". Either way, my personal preference is to watch people with knowledge talk and explain a feature, show examples in a normal way. Like Jake Archibald and Surma does in Google´s HTTP203 for example. Anyway, just gonna unsubscribe, dont feel like this channel speaks to my taste anymore, bye!
@aqua123670
@aqua123670 6 лет назад
oh god please no! now they lost 1 subscriber of 305k. That's 0.000327868%, wow !! significant ! they must be desperate
@jerzees
@jerzees 6 лет назад
@@aqua123670 well, you know there might be more people that feel the same way? And if you add them together... As a channel owner, I believe they want to know what the viewers think, and why they might leave
@jerzees
@jerzees 6 лет назад
@@dohnjoe342 well, feedback on why people leave is helpful sometimes
Далее
JavaScript Pro Tips - Code This, NOT That
12:37
Просмотров 2,5 млн
The Async Await Episode I Promised
12:04
Просмотров 1,1 млн
Это нужно попробовать
00:42
Просмотров 234 тыс.
Teaching CSS to a Coder 🙀 (How to Lazy Load Images)
25:04
Trying Docker for the First Time 📖 Many Learnings!
50:42
What is THIS in JavaScript?
33:14
Просмотров 84 тыс.
Finding a Designer + 🍪 FIKA
22:35
Просмотров 6 тыс.
JavaScript Security: Hide your Code?
9:59
Просмотров 416 тыс.
How good are class arrow functions in JavaScript?
31:31