i dont mean to be so offtopic but does someone know a trick to get back into an instagram account?? I was stupid forgot the login password. I would appreciate any assistance you can offer me!
Yes yes yes! I was so freaking waiting to learn web scraping for long time, I'll be waiting eagerly to buy your course!!!! Thanks Aaron, you're the best!
18:35 - That was the best part imo. The Dark Arts! Absolutely agree with you that those simple If statements cramming up 5-6 lines is sacrilege... that ternary trick is BEAUTIFUL. Next time please keep the dark arts right at the beginning! ;D
The last tip hit me the most. I remember my first job when I knew very little about js (still very little now), in the code base i saw few lines with at least 6 ? and : and wondered what the hell is that and where do I even start to read.
You can use optional chaining in JS instead of the get function from lodash. To use it you do: objName.user?.address?.zipcode just use the ? before the dot notation to check if it's null
Nice tricks, Thanks for sharing. For deep copy (if you don't have a circular reference ) then you can also use JSON.parse(JSON.stringify(obj)), this will also be going to do a deep copy and its pretty efficient.
12:40 You can also add question mark at the end of each attributes, should work just fine too with the recent update of node ! (user?.profile?.fullName)
Wow! Great video. Number 6 about destructuring logs was the best one for me. So much time spent writing good log messages. I wonder, is it possible to combine it woth number 5, so you can have destructured messages in a color you choose? That would be pretty nice! =D
Using lodash for every small problem could result in a huge bundle sizes. Especially when imported as you shown as a destructured object. This would be much preferred way if you are adamant in using lodash eagerly: import map from "lodash/map"; this way, you only import what you really need, and not the whole library. Still cool video though, learned couple of neat tricks :)
if you set up tree shaking correctly, only the functions you need will be imported stackoverflow.com/questions/48816704/lodash-not-treeshaking-with-webpack-with-webpack-4
@@AaronJack if you mentioned that in your video then i apologize. If not, you should maybe in one of your next videos, so that the beginners know :) p.s upon further inspection of the link you sent i noticed that syntax for importing that they use in that thread is as follows: import map from "lodash/map"; they are not destructuring object
If you want to adopt latest features of native javascript, you can use optional changing instead of lodash get const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; const dogName = adventurer.dog?.name; can also use nullish coalescing operator (??) for defaults this prevents unexpected behaviors if you consider some falsy values as usable (eg. '' or 0). there is also Logical nullish assignment (??=) which only assigns if x is nullish (null or undefined). const a = { duration: 50 }; a.duration ??= 10; console.log(a.duration); // expected output: 50
Was really getting 😡 with the Ternary operator but having a second and a third look at it I started to appreciate how clean and straight forward it is. However, wouldn't try it without documentation 😸
i love writing nested ternary operations specially calling methods or even anonymous arrow functions. can you please make another video like this going deeper? thanks
One of the best typing saver is: const test = (something) => console.log(something) || (do something with something) This will log something without opening {}
Great video. One addition: What you described for lodash get , checkout Optional chaining and existential operator: www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining And a very good addition to your tips which all frontend developers has to know, is how to transform an object or an array of objects to another array of objects with different keys and values. For example: [ { "code":1, "name":"test", "other":"test 1" }, { "code":2, "name":"test", "other":"test 2" } ] to get another array like this: [ { "id":1, "value":"test" }, { "id":2, "value":"test" } ] which can also be done with object.assign and mapor Lodash. An example for such a task could be really useful.
For the last console.log trick - using console.log({favoriteFood}) - there is a good reason to not use this sometimes.. like if the output is written to a file instead of your console you will see the dreaded '[Object] Object]' log message instead of the JSON.stringified value that the chrome console outputs
Man i remember seeing a double ternary operator as an ‘advanced’ solution in freecodecamp somewhere, may have even been a community solution, and i was like holy shit you can do that?! 😂 But it definitely seems really useful in some cases!
this is an ES2019 feature called optional chaining developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining though it's not supported in all browsers
@@Metruzanca that's another JS feature this trick employs, but the question is what would have been a better way than "reverse-destructuring" to refer to it. "object literal" might be more appropriate but that's debatable since the whole point of the tip is to log a variable name and value without having to write them both out. you wouldn't gain much from console.log({ favoriteFood: favoriteFood })
@@hansmeyer2 Its not debatable, thats the name for that feature. And he doesn't just use "reverse-destructuring" when talking about logging. Writing it as let varr = 1 const obj = {varr} console.log(obj) or let varr = 1 console.log({varr}) Is equivalent. In the first case its called an object literal. In the second its still an object literal, its just not being assigned to anything and instead being passed directly to the function. A tip, shouldn't use incorrect feature names as 1. its confusing 2. if someone watched this before an interview and said "reverse-destructuring" to a senior js developer.
Using a double ternary is debatable. I used them in some react projects mostly but now I found theres an eslint rule against double ternary, and my new org just so happens to use that rule.
Anyone who is learning about ternary operators from this video, please never nest them..... thats as much of a tip as saying i can shorten my code by naming my variables with single letters..... an actual tip is that if you cant understand what code is doing by reading it the first time, its too complex and needs to be made more explicit
Man your JS Cheat Sheet is the most gorgeous thing I've seen in a while, so compact, concise and good looking OMG Loved It!
I can't download it. It isn't taking my gmail
Pls gimme the link here
i dont mean to be so offtopic but does someone know a trick to get back into an instagram account??
I was stupid forgot the login password. I would appreciate any assistance you can offer me!
my favorite life changing JavaScript tip:
yarn add -D typescript
imagine pairing these tips with AngularJS
please do a video together!!
After a typescript migration it turns out to be a little more than just an npm install
No, it's Angular, stop lying!
1:00 - Local Storage
2:08 - Session Storage
2:30 - document.cookie
3:10 - Console Methods
3:29 - Log Colors
5:38 - Destructive Args
18:35 - double ternary
One file if statements
Vs code prettier: Let's make that multiline!
Awesome content Aaron 👍
Can't believe how much I've just learnt - thank you!
Love these types of videos! I hope that you will also intermix some news item videos every now and then too!
Yes yes yes!
I was so freaking waiting to learn web scraping for long time, I'll be waiting eagerly to buy your course!!!! Thanks Aaron, you're the best!
Thanks for sharing!
I love your tips. Thanks for sharing!
Thank you!
one of your best videos yet. thank you.
Thank you Aaron, best gift ever :)
Double ternary is easier to read when you wrap the second condition in parenthesis imo
Thank you Aaron! It helps ❤️
Fast , cool , informative straight to the point ..... Loved it
Yes yes yes yessss!!! I am super excited you are finally making a web scraping course. Even better hat it’s with js
Awesome Man keep it up great tips love it
Love you dude btw, keep these up
Great video, I work with JS everyday and its impossible to know/remember all these tricks. Keep up the videos like this!
Wow had no idea of most of then, great content mate
Amazing video, please keep making such javascript vids as well! Thou art awesome!
Keep posting interesting contents like this!
Awesome tricks ! Thanks !
18:35 - That was the best part imo. The Dark Arts! Absolutely agree with you that those simple If statements cramming up 5-6 lines is sacrilege... that ternary trick is BEAUTIFUL. Next time please keep the dark arts right at the beginning! ;D
5 minutes in... this is already gold.
Downloaded the JS cheat sheet. Super clean, super helpful. Thanks a lot! 😆
I'm only new to coding and the last tip blew my mind
This is good, I learned a lot of stuff
thanks for tips💕
Well somebody's been playing Destiny 2 haha. Great vid btw!
Nice vid fellow guardian
Ayee, nice vid!! CSS tricks doe?
Waiting for the web screpping course! Kudos!
The last tip hit me the most. I remember my first job when I knew very little about js (still very little now), in the code base i saw few lines with at least 6 ? and : and wondered what the hell is that and where do I even start to read.
You can use optional chaining in JS instead of the get function from lodash. To use it you do: objName.user?.address?.zipcode just use the ? before the dot notation to check if it's null
Destructure logs😍
Nice tricks, Thanks for sharing.
For deep copy (if you don't have a circular reference ) then you can also use JSON.parse(JSON.stringify(obj)), this will also be going to do a deep copy and its pretty efficient.
You just turned me into a lodash believer .
12:40
You can also add question mark at the end of each attributes, should work just fine too with the recent update of node ! (user?.profile?.fullName)
I was also wondering why he did't use that, but I've got a feeling that its not browser safe yet and wont be for a while.
Wow! Great video. Number 6 about destructuring logs was the best one for me. So much time spent writing good log messages. I wonder, is it possible to combine it woth number 5, so you can have destructured messages in a color you choose? That would be pretty nice! =D
Knew them all. But then again, JS is my main language so that's normal. Good refresher though!
Using lodash for every small problem could result in a huge bundle sizes. Especially when imported as you shown as a destructured object. This would be much preferred way if you are adamant in using lodash eagerly:
import map from "lodash/map";
this way, you only import what you really need, and not the whole library.
Still cool video though, learned couple of neat tricks :)
if you set up tree shaking correctly, only the functions you need will be imported
stackoverflow.com/questions/48816704/lodash-not-treeshaking-with-webpack-with-webpack-4
@@AaronJack if you mentioned that in your video then i apologize. If not, you should maybe in one of your next videos, so that the beginners know :)
p.s upon further inspection of the link you sent i noticed that syntax for importing that they use in that thread is as follows:
import map from "lodash/map";
they are not destructuring object
Aaron, what software did you use to create the javascript cheat sheet?
Its really awesome!
Deep cloning issuse can be fix using json Parsing and stringify
Cheat Sheet is awesome :) Thanks :)
The dark arts of javascript 🤣
That was LITERALLY the best thing imo!
@@EnglishRain Yeah
Thanks
If you want to adopt latest features of native javascript, you can use optional changing instead of lodash get
const adventurer = {
name: 'Alice',
cat: {
name: 'Dinah'
}
};
const dogName = adventurer.dog?.name;
can also use nullish coalescing operator (??) for defaults
this prevents unexpected behaviors if you consider some falsy values as usable (eg. '' or 0).
there is also Logical nullish assignment (??=) which only assigns if x is nullish (null or undefined).
const a = { duration: 50 };
a.duration ??= 10;
console.log(a.duration);
// expected output: 50
Wowwwwww JS web scraping can't wait!! :D
Was really getting 😡 with the Ternary operator but having a second and a third look at it I started to appreciate how clean and straight forward it is.
However, wouldn't try it without documentation 😸
i love writing nested ternary operations specially calling methods or even anonymous arrow functions. can you please make another video like this going deeper? thanks
One of the best typing saver is:
const test = (something) => console.log(something) || (do something with something)
This will log something without opening {}
Time to start using lodash damn
He's back. Fuckin a!
When i have to make a deep copy of an object i use: JSON.parse(JSON.stringify( object )) ... that is if i dont need to import a lib like lowdash
But this is cpu intensive one
Would like to know what extensions/theme you're using.
horizon theme I think
@@therevolution1482 I'll check it out. Totally forgot about this. But if you guys want glyphs/ligratures Google "VSC with Firecoda"
@@xorlop awesome thanks 😁
You can make a deep copy of a JavaScript object using JSON.stringify and JSON.parse
at 8:11 how are you showing those console.log within editor? Is it a vscode extension or you added in while editing video. Thanks.
It's the Quokka extension
Great video. One addition: What you described for lodash get , checkout Optional chaining and existential operator:
www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining
And a very good addition to your tips which all frontend developers has to know, is how to transform an object or an array of objects to another array of objects with different keys and values.
For example:
[
{
"code":1,
"name":"test",
"other":"test 1"
},
{
"code":2,
"name":"test",
"other":"test 2"
}
]
to get another array like this:
[
{
"id":1,
"value":"test"
},
{
"id":2,
"value":"test"
}
]
which can also be done with object.assign and mapor Lodash. An example for such a task could be really useful.
For the last console.log trick - using console.log({favoriteFood}) - there is a good reason to not use this sometimes..
like if the output is written to a file instead of your console you will see the dreaded '[Object] Object]' log message instead of the JSON.stringified value that the chrome console outputs
Can You Please Make Video On Debounce, Throttle If You Haven't Please...🙏🙏🙏
Good luck working with people who freak out of such a double ternary operator...
Man i remember seeing a double ternary operator as an ‘advanced’ solution in freecodecamp somewhere, may have even been a community solution, and i was like holy shit you can do that?! 😂 But it definitely seems really useful in some cases!
21 Lodash changing tricks
You can do user.profile?.fullName in vanilla JavaScript now
thats right! no need for lodash, this is a new feature
this is an ES2019 feature called optional chaining
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
though it's not supported in all browsers
where can i buy my code drip tshirt or mug?
What extension are using for showing your results in vscode
I just love that guy
Btw probably a nooby question, but does anybody know how to console.log at VS like Aaron does?
You’ll want to install node.js
@@nuxbot919 thanks mate
Which extension do you use to display JS output in real time?
What theme and extension you are using?
Which theme are using in editor
Great tips, but last one is a bit too dark for me 😅
What extension do you have that allows you to preview the expected output/value?
Is it the terminal running Quokka?
bro you were MIA for a bit started to wonder if you moved again
hate the email thing :( lovv channel though
Xur location reference 👀
What is the difference between debounce and setTimeout?
What VS Code theme and font do you use?
horizon + dank mono
Lets goooooooo NG X getting a reply that’s pretty epic!!!!!!!!!!!!!!!!!!
Lit
15:12 JS has toUpperCase that works similar to lodash capitalize
it's different cause toUpperCase sets every character to uppercase.
how do u get result right there in vscode whenever you console things....
It must be an extension that i would love to use... tell me plx
@@nuxbot919 Thanks Brother
Lodash is heavy. Optional changing with a ?? A better way. Const name = user?.name ?? “No name”
You make me feel like I don't know shit.
"reverse-destructuring" is actually just making an object. Which is something that was a part of js long before destructuring.
yea that confused me too. i think "property shorthand" is probably the better way to refer to what he was doing there.
@@hansmeyer2 well actually its called object literal.
@@Metruzanca that's another JS feature this trick employs, but the question is what would have been a better way than "reverse-destructuring" to refer to it.
"object literal" might be more appropriate but that's debatable since the whole point of the tip is to log a variable name and value without having to write them both out. you wouldn't gain much from console.log({ favoriteFood: favoriteFood })
@@hansmeyer2 Its not debatable, thats the name for that feature. And he doesn't just use "reverse-destructuring" when talking about logging.
Writing it as
let varr = 1
const obj = {varr}
console.log(obj)
or
let varr = 1
console.log({varr})
Is equivalent. In the first case its called an object literal. In the second its still an object literal, its just not being assigned to anything and instead being passed directly to the function.
A tip, shouldn't use incorrect feature names as 1. its confusing 2. if someone watched this before an interview and said "reverse-destructuring" to a senior js developer.
@@Metruzanca your response is missing the point of what i am claiming is debatable.
never mind, not really worth quibbling over.
life changing js tricks == install lodash?
for me not the prettiest but the easiest way to make deep copy is:
var copy = JSON.parse( JSON.stringify( object ) );
hey, would anyone like to share how they console log right in the editor?
Cant get teh cheatsheet is it gone ?
What is your theme name? Please tell me!!
Anyone knows how the result/debug from the code appears right next to the code he writes? Any ideas?
it's a VS code extension called Quokka.js
lodash : use javascript like python
Please please tell me your vs code theme name and font
the JavaScript cheat sheet is JUST very basic stuff.
I have seen developers nesting ternary up-to 5-6 levels and it is really painful to understand and debug.
Why not spread the object to a new one instead of using lodash? Like const userCopy={...user}
Tried that double ternary, let’s just say it wasn’t a hit
Using a double ternary is debatable. I used them in some react projects mostly but now I found theres an eslint rule against double ternary, and my new org just so happens to use that rule.
What are you doing in Serbia?
he isnt there anymore
Didn't get the js copy after entering email... Checked spam too.
same here
yeah working to fix that, my bad, i didn't save any emails
Anyone who is learning about ternary operators from this video, please never nest them..... thats as much of a tip as saying i can shorten my code by naming my variables with single letters..... an actual tip is that if you cant understand what code is doing by reading it the first time, its too complex and needs to be made more explicit
put a 301 on the www version of the website ;\
Bad hair day?