Yes that's it. Destructuring works for objects attributes OR even positional properties of Array with Const keyword const [first, second] = [1,2] const {f, s} = {f:1, s:2}
@@cipherxen2 ok let me know when it changes from calling it destructuring and this comment thread will become irrelevant. Until such a time as that occurs, the thing is called destructuring.
3:37 I'd like to add that it's worth remembering that using spread operator on arrays have iteration cost attached to it, so the larger the array the slower this works. So, if your code is called many times over it's better to merge arrays in traditional way by pushing elements of one into another. It doesn't matter on small arrays, but on actually large ones (thousands of items) this may cause a noticeable lag. 6:33 6-digit hexadecimal number. In decimal (default representation in console) it can go up to 8 digits. ;)
Another approach is to have a third array that is updated at the same time as the other two. The downside would be that it has to search for the entries, but if using a map, that can be solved through using proper keys.
This is a nice list, but I would strongly recommend w this being a teaching channel, to mention the technical name of some of these patterns and operators as you go. Spread operator, object destructuring syntax, guard blocks, etc.
I created a random background-color generator with copy-to-clipboard inside a hex code div (the hex code shows inside the div). Click the button to generate a random colour and if you like it, click the hex field div to copy it. Great little video that has definitely improved my abilities and knowledge, ta Ed 😀😎
Cool tricks! Fun fact: You can make `const copy = (text) => navigator.clipboard.write(text)` even shorter `const copy = navigator.clipboard.write` no need to wrap in another function that takes text and passes text to it.
Super important to note that the Navigator.Clipboard API only works locally or in HTTPS. So if you want to make an insecure HTTP website, copying text won't work!
I guess that explains why it was not working for me on codepen. Sure, codepen does use HTTPS but i guess it has something to do with it... Because it is not working at all on codepen
// SuerySelector .............................................. function Selector(selector) {return document.querySelector(selector)} // QuerySelectorAll .............................................. function SelectorAll(selector) {return document.querySelectorAll(selector)} With this code, you can call any element in an easy and short way Example: let Element = Selector('Target_Element') // return Element or let Element = SelectorAll('Target_Element') // Return Array Of Element
0:47 Design Mode - awesome feature, I like it! Almost all rest poor, because it is something like part of ECMA standards. Also last one looks impressive. Good job, man, anyway! Thank you!
2:45 you aren't merging two arrays, what you're doing is concatenation. Merging two arrays is more like a zip operation. Loop over one and and use the current index to get the corresponding element in the other array, then combine both values as a tuple, or whatever structure you need.
9:22 or you just set the visibility to hidden aswell. This will not transition by itself, so you'll still need opacity, but it will change the value once the transition is done.
Setting visibility to hidden will disable pointer events on the element, but other elements in the DOM will be affected by its positioning (unless it's set to an absolute or fixed position). To keep the element on the page, you should set it to "display: none;" so that way it will not affect the layout of other DOM elements and be removed from visibility.
Well there is a better option for single line if to only run if not null using ?? operator known as null coalescing operator. However it is best to use for value assignment, similar to ternary operator
7:50 Code won't work for final zeroes which may be left out in the string conversion, so taking care of these edge cases the correct code is : const generateRandomColor = _ => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`.padEnd(7,'0')
@syedabuthahirkaz... Actually, the correct implementation should be: `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`; This handles the edge cases of six-digit hexadecimal numbers with leading zeros, such as 00aabb. Using .padEnd(6, '0') would add zeros as trailing zeros, potentially excluding certain numbers from being picked. Conversely, .padEnd(7, '0') would shift all digits one place to the left, resulting in the most significant digit being discarded. This ensures a more accurate and comprehensive random color generation.
Nice video, Blender in combination with Babylon js would be awesome. Not many people make tutorials about Babylon js while it is a great 3D engine for in the browser
Hey ED :) ! I saw in one of your other video that you had a vs code theme with a gradient up in the title bar in one of your recent videos and i thought it looked SO cool that i figured out how to do it myself :D ... But now you dont have it anymore i see .
Could anyone please explain where the duration was set for the button to fade out before being transitioned to a display of none? (Transitionend 8:47) Thankyou
Is it only me or anyone else had problem to get the copy to clipboard function to work? i tried on codepen and i write the code exactly the same. It is not working...
Isn't it better to add .padStart(6, '0') to the fifth oneliner? I mean, if u have generated a number less than 0x100000, it would have less than six digits and you need to add zeros into first registers.
Why anonymous fat arrow function as a variable instead of a "normal" function with a name? It's a strange trend nowadays. It makes sense only if 'this' needs to be bound (or maybe to avoid hoisting but in that case there are bigger problems in the code already) in any other cases a normal function is better. easier to read, it has a name => easier to debug, etc.
Also functions declarations are hoisted. It means you can call them before they are defined to the eyes of the person reading the code. This means you can somewhat handle the order of reading based of what's more relevant to the reader in order to understand or follow the code.
Are your courses up-to-date? Seems people complaining in the comment section of the javascript course that the links to the course files are not working anymore including html and css. That's why I haven't enrolled.
I think what you were calling extraction is actually called destructuring (like it's proper term). Nice video, definitely learnt something new
Yes that's it. Destructuring works for objects attributes OR even positional properties of Array with Const keyword
const [first, second] = [1,2]
const {f, s} = {f:1, s:2}
Who gets to decide which is term is proper and which is not?
@@cipherxen2 the language spec?
@@anarchoyeasty3908 language specs are not written in stone, they also change
@@cipherxen2 ok let me know when it changes from calling it destructuring and this comment thread will become irrelevant. Until such a time as that occurs, the thing is called destructuring.
3:37 I'd like to add that it's worth remembering that using spread operator on arrays have iteration cost attached to it, so the larger the array the slower this works. So, if your code is called many times over it's better to merge arrays in traditional way by pushing elements of one into another. It doesn't matter on small arrays, but on actually large ones (thousands of items) this may cause a noticeable lag.
6:33 6-digit hexadecimal number. In decimal (default representation in console) it can go up to 8 digits. ;)
Another approach is to have a third array that is updated at the same time as the other two. The downside would be that it has to search for the entries, but if using a map, that can be solved through using proper keys.
With the first video, the CSS one, you got my like and save, with this second one you got my like and subscribe!
This is a nice list, but I would strongly recommend w this being a teaching channel, to mention the technical name of some of these patterns and operators as you go. Spread operator, object destructuring syntax, guard blocks, etc.
Always amazing to be greeted as "gorgeous" 😅😁
With all due respect, I thought you're already fed up with it. You must be called gorgeous all the time... :$
Damn, people are now hitting on girls on RUclips nowadays. What a time to be alive
@@elfelipe1996 Absolutely not, just stated the obvious!
Yeah, this guy is a smoothie
but you aint gorgeous
I created a random background-color generator with copy-to-clipboard inside a hex code div (the hex code shows inside the div).
Click the button to generate a random colour and if you like it, click the hex field div to copy it. Great little video that has definitely improved my abilities and knowledge, ta Ed 😀😎
I've always called the "one line if" a guard statement, or a guard if statement. Helps a ton with nesting.
"guard statement" is a proper term for the thing as well
8. is actually called a Guard Clause, very useful to avoid nested if statements!
Cool tricks!
Fun fact: You can make `const copy = (text) => navigator.clipboard.write(text)` even shorter
`const copy = navigator.clipboard.write`
no need to wrap in another function that takes text and passes text to it.
Cool!
Although I knew most of these one-liners. Only DesignMode and transitioned events are new to me.
Thanks for sharing.
Array.from(new Set([…..])) is much cleaner than what you did and is the preferred way btw
You are a developer and a successful youtuber, but from the outlook, you could be an actor too. No joke.
That color generator is awesome!! Tyvm!
Dude. The random hex was super clever. My favorite new trick.
Super important to note that the Navigator.Clipboard API only works locally or in HTTPS. So if you want to make an insecure HTTP website, copying text won't work!
I guess that explains why it was not working for me on codepen. Sure, codepen does use HTTPS but i guess it has something to do with it... Because it is not working at all on codepen
Why is that super important you nerd
This is definitely important, but it's also 2022, there are no excuses to not have an SSL certificate on your website.
`console.table(data)` at 11:45 very useful tip!
Ed can u please tell mr what monitor are you using? Looks amazing.
I will make a shortcut of this video to my desktop. Thanks Ed.
The only thing which I didn't know was 5:01, but it's good to revisit things once in a while, great video!
The design mode one was very helpful, the rest are also helpful but it's just regular es6 stuff.
The random color hex thing blew my mind!
I legit thought this was gonna be a video about Javascript jokes
Doesn't generate colors have an issues with missing leading zeroes in numbers less than 0x100000?
// SuerySelector ..............................................
function Selector(selector) {return document.querySelector(selector)}
// QuerySelectorAll ..............................................
function SelectorAll(selector) {return document.querySelectorAll(selector)}
With this code, you can call any element in an easy and short way
Example:
let Element = Selector('Target_Element') // return Element
or
let Element = SelectorAll('Target_Element') // Return Array Of Element
transitionend is amazing thank you
concat() is another way to merge arrays: arr1.concat(arr2);
Retaining only unique values: [...new Set(arr1.concat(arr2))];
That merge one liner is great is for interviews
i love your music taste, super chill
0:47 Design Mode - awesome feature, I like it!
Almost all rest poor, because it is something like part of ECMA standards.
Also last one looks impressive.
Good job, man, anyway! Thank you!
2:45 you aren't merging two arrays, what you're doing is concatenation. Merging two arrays is more like a zip operation.
Loop over one and and use the current index to get the corresponding element in the other array, then combine both values as a tuple, or whatever structure you need.
aspiring fan here... i allready new this, but i kinda forgot the other so thanks for the reminder
did he just say "g" when going through the hexadecimal characters at 7:20 lmao
thanks for the tutorial Ed Helms.
Very fun video, it brings me joy that I knew almost 5 of them.
After CSS one-liners, now this = New Subscriber here :)
Very nice vid Ed! 🚀 That monitor at the beginning, is it Dell? Can you tell me the type? 😊 Cheers!
Awesome! I knew all of them but what was the last one? Didn't know about it
Thanks! By the way, what is theme color name ?
The extraction is very useful for any Async call
The official name is destructuring, just in case you want to look it up
this man is pure positive energy, lovely human being :)
Thanks a lot bro. awaiting for more videos from you.
Hi ed .
I wont to ask you from were you have learned data structure and algorithm?
Thank you ed for your courses🌺❤️❤️
9:22 or you just set the visibility to hidden aswell. This will not transition by itself, so you'll still need opacity, but it will change the value once the transition is done.
Setting visibility to hidden will disable pointer events on the element, but other elements in the DOM will be affected by its positioning (unless it's set to an absolute or fixed position). To keep the element on the page, you should set it to "display: none;" so that way it will not affect the layout of other DOM elements and be removed from visibility.
For merging arrays, concat is easier to read.
We love you, Ed. Just wanted to let you know that.
JSON.stringify(data,null,2)
Hello plz I m looking for a function or whatever that can help me find list of printers installed on my machine. Thanks lot for your videos
Cool! I like the screen capturing
Well there is a better option for single line if to only run if not null using ?? operator known as null coalescing operator. However it is best to use for value assignment, similar to ternary operator
What is the lens you used for recording this video?
7:50 Code won't work for final zeroes which may be left out in the string conversion, so taking care of these edge cases the correct code is : const generateRandomColor = _ => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`.padEnd(7,'0')
@syedabuthahirkaz... Actually, the correct implementation should be:
`#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;
This handles the edge cases of six-digit hexadecimal numbers with leading zeros, such as 00aabb. Using .padEnd(6, '0') would add zeros as trailing zeros, potentially excluding certain numbers from being picked. Conversely, .padEnd(7, '0') would shift all digits one place to the left, resulting in the most significant digit being discarded. This ensures a more accurate and comprehensive random color generation.
Very useful thanks for sharing
👍 great content - thanks so much !
👍 no floating presenter head
👍 video and audio quality
👍 larger ide font size
👎 (imho) loud, distracting "music"
thank you for this video, you are awesome!!
Really coool video 🔥🔥🔥
Cool setup as well 😊
By the way, please tell me the model of your monitor, it looks dope
Ed called me friend👌🏻 Life complete, haha,
These videos are actually golden, keep it up
Nice video, I like the way you explain. Nice work dude.
designMode extremely blows my mind. Great content !
he claims to be using the palenight theme, but here hes using the Community material theme ocean high contrast... you're welcome
maybe its better to set the transitionend event inside the click event and set it to once: true
the 70's prono music in the background makes the video
Hey man, you're videos great as always, do you consider making a video about javascript road map?
What's you display brand & model?
The designmode one is super helpful while designing sites
who would have thought...
Nice video, Blender in combination with Babylon js would be awesome. Not many people make tutorials about Babylon js while it is a great 3D engine for in the browser
what is your monitor please?
Technically you can do anything in one line in JavaScript xD
I did that for a test and my teacher wasn't very pleased, but I got my passing grade
Gracias querido por estos tips; hace mucho no programaba ni lo más mínimo en js y me voy desactualizando, pero aquí aprendí nuevas funciones y demás
Can you make a web3 tutorial?
Grateful for this video 🤝
Hey ED :) ! I saw in one of your other video that you had a vs code theme with a gradient up in the title bar in one of your recent videos and i thought it looked SO cool that i figured out how to do it myself :D ... But now you dont have it anymore i see .
i used the "Custom CSS and JS loader" vs code extension and then custom CSS to color the different elements of vs code :)
I cant post a screenshot of my vs code .. Cuz youtube deletes the comment but yeah , could be cool to see a video on that .
Man transitionend will save me tons of time!!!!
Thank You Ed This Is Realy Amazing
navigation.clipboard api only works with secure connection and local host not with http
yep. It is true
I like the console.table command.
Your tutorials are always so engaging and easy to follow 🔥🔥🔥
You remind me of the guy in Camera Conspiracies
Hi, how are you? I have a question. How to implement animation in Figma on the web-site? I can't find a solution on the internet
Could anyone please explain where the duration was set for the button to fade out before being transitioned to a display of none? (Transitionend 8:47) Thankyou
6:16 Why do you exclude the pure white? Isn’t it a colour too? Multiply by 0x1000000 to have the chance to get 0xffffff
I don’t know how many years Ed has been calling me a gorgeous friend on the internet 😂
What vscode theme are you using in this video?
he claims to be using the palenight theme, but here hes using the Community material theme ocean high contrast... you're welcome
@@Mwtorres89 thanks 🙏🏻
thank you very much 🙌
Is it only me or anyone else had problem to get the copy to clipboard function to work? i tried on codepen and i write the code exactly the same. It is not working...
These are handy one liners, but it worth pointing out most of them are using the web API, not pure JavaScript. 😅
#4 is called "destructuring," not "extraction."
Ur my best teacher 💜
Isn't it better to add .padStart(6, '0') to the fifth oneliner? I mean, if u have generated a number less than 0x100000, it would have less than six digits and you need to add zeros into first registers.
This is really great! Thanks for this content Ed! 🚀
Love your energy 👍
This man a little dr crazy looking . Dude thank you.
Why anonymous fat arrow function as a variable instead of a "normal" function with a name? It's a strange trend nowadays. It makes sense only if 'this' needs to be bound (or maybe to avoid hoisting but in that case there are bigger problems in the code already) in any other cases a normal function is better. easier to read, it has a name => easier to debug, etc.
Also functions declarations are hoisted. It means you can call them before they are defined to the eyes of the person reading the code. This means you can somewhat handle the order of reading based of what's more relevant to the reader in order to understand or follow the code.
@@alister_ exactly. but not everyone likes this kind of order that's why I left it out :)
You're crazy. I love u💚( as instructor)😅💪💪💪
I wish I'd known about transitionend a few months ago...
why do i want to use "const" instead of var here?
This is a good one.
Love the new video quality 😍😁
Really good video ❤
Always good content, you're the best
Are your courses up-to-date? Seems people complaining in the comment section of the javascript course that the links to the course files are not working anymore including html and css. That's why I haven't enrolled.