Transcript from the "Popmotion Functions" Lesson
[00:00:00]
>> Brian Holt: Just as touch on what's actually going on here. We don't actually have to incredibly in depth understand everything that's going on here. Some of this is just like listen is a function that come from popmotion. And I'm not gonna dive in and figure out all the ins and outs of it.
[00:00:16]
As long as it works the way that I expected to, I'm pretty well okay leaving that as mostly a black box. But for your purposes, I did dig in and figure out what this actually does.
>> Brian Holt: And so listen is just basically, it's like an event listener. It's saying, listen for events on this.
[00:00:37]
It's listening for mousedown, right, which is the beginning of a click, right? mouseup here is the end of a click. And as you might imagine, touchstart and touchend is, if I'm on a phone, as soon as I put my thumb down, that's touchstart. And as soon as I take my thumb off, that's touchend.
[00:00:51]
In fact, you can simulate that in your browser if you want to.
>> Brian Holt: So let's do that. Let's move this to the side, dock to the right. Okay, I have this little thing up here. And Chrome has one that looks really similar to that, but it looks like two phones next to each other.
[00:01:10]
>> Brian Holt: Okay, and then I can make this look like a,
>> Brian Holt: Let's go with iPhone XS or something like that. So now this is relative to the same form factor as an iPhone.
>> Brian Holt: And so now,
>> Brian Holt: It's not even working with the touch events, that's interesting. Is this working?
[00:01:34]
>> Brian Holt: So it's not a necessarily perfect one-to-one emulation. But it is a good way as like, I wonder what this looks like on an iPhone, right? Or if I click on this, it's like, I wonder what it looks like in portrait mode. So you can see here, our site doesn't work super great on phones.
[00:01:51]
>> Brian Holt: Not too bad, in portrait mode, anyway. But that's really useful if you don't wanna necessarily pull up everything on your phone and get all that stuff working. This is a nice shortcut to get all that stuff working. And I just have to click that again to get it out.
[00:02:06]
I thought some people might have some questions about this. This is called destructuring. We minorly touched on it, but just a drive at home. So if I have const person = name Brian and job engineer, something like this, right? And I wanna pull name out of person just so I can have a name variable.
[00:02:32]
I could say something like this, const name = person. And this looks like kinda strange. But what this is saying is I have this person object, which I defined right there. And I'm pulling out name, so that I can just say something like console.log(name). So name, in this case, will correspond to this property up here, which is Brian, right?
[00:02:57]
So that's what this is doing up here. This is just pulling out styler, spring, listen, pointer, value, all the stuff that's on the popmotion object. Make sense?
>> Speaker 2: Isn't that code then reassigning the name to the entire object?
>> Brian Holt: No, I can see why you would think that, and that's what it looks like, but that's not how this works.
[00:03:20]
Because I have curly braces here, it does destructuring instead of reassignment or something like that. It's saying this person object, pull that out and pull name out and assign its own variable to be person.name. So const name = person.name. That's what it's doing underneath the hood.
>> Brian Holt: It is confusing.
[00:03:46]
>> Speaker 2: Okay, because you could already say person.name.
>> Brian Holt: Right.
>> Speaker 2: Which will give you Brian.
>> Brian Holt: Right, so [COUGH]
>> Speaker 2: Now you're just creating a shortcut for Brian.
>> Brian Holt: Exactly, exactly [COUGH] and so this is convenient when you have a bunch of these things. Otherwise, I'd have to have six lines of pulling stuff out.
[00:04:08]
>> Brian Holt: So there are lots of people that don't like that, that they think this is more confusing than it's worth. But I'm lazy, so I like it.
>> Brian Holt: Does that answer your question?
>> Speaker 2: Yes.
>> Brian Holt: You just look upset by the answer.
>> Speaker 2: Yes.
>> Brian Holt: Okay, that's fine, that's fine, you can be upset.
[00:04:27]
[LAUGH]