Using JavaScript Libraries

[00:00:00]
>> So that is all the intro to web development stuff in terms of HTML, CSS, JavaScript that I wanted to go over with you today, so all that stuff is behind you. Again, you now literally coded Wordle, a project that sold for millions of dollars, okay? So I wanted to just give you a couple of other next step kind of things.

[00:00:22]
One of them is definitely the Frontend Masters Learning Path for Beginners. It's specifically laid out for people that are trying to get started. And then beyond that, there's several other great learning paths. If you wanna go down React, or Vue, or some of those other frameworks, all that stuff has great learning paths already in Frontend Masters.

[00:00:42]
Specifically, what I wanna show you is how do you integrate other people's code? Right now, you and I have been writing code that we all wrote personally together. But one of the beauties of modern coding is that people share a lot of code, right? So, I wanna show you how to use just someone else's third party code really quick.

[00:01:02]
So we're gonna use something called Popmotion. It's doing animations, but in JavaScript. So what I want you to do is I want you to make another folder, maybe on your desktop or something like that. And we'll call this motion or something like that, and we're gonna open this in VS Code.

[00:01:22]
We're gonna make a file, we're gonna call it index.html. We can actually probably just make this full screen here so it's easier to use, okay? In here, we're gonna say html:5 and this will be called JS Animations. So I picked JS Animations. This is more to exemplify not how to do animations in JavaScript, it's more to exemplify how to integrate someone else's code.

[00:01:58]
Let's see, bring up my notes here. Okay, we're going to make a link here to some style that we're about to write, so style.css, okay? We'll make a new file here and we'll call it style.css. And here I want you to put a little bit of CSS. You can copy directly from my notes if you want to, it's just this piece.

[00:02:37]
Okay, we're making a ball. By giving it a border radius of 50%, it's gonna be round, right? Background color, and then we're putting it in the middle of the body. And that's basically it, okay? So if we open this file, which I have on my desktop, motion > index.

[00:03:10]
What did I do here that's wrong? And I need to go put that into my HTML. So you can put here an h1, have it called Animation, and then we're gonna have a div and its class is going to be called ball. Okay, now if you refresh the page, you should see some h1 on here called Animation and our blue ball.

[00:03:44]
And we're gonna make this ball move. So first thing I want you to do, we're gonna put a script tag here, and we're going to include someone else's code. So I can just say source. Normally, I've been saying something like .script or something like that. But we're actually putting external URL, https://unpkg.com.

[00:04:13]
You can by the way just totally copy this directly from the notes, I would not be upset by that. /popmotion@11.0.3/dist/popmotion.global.min.js. So what is this? This is including a library that's exist out on the Internet. Unpkg is a website that just hosts external libraries, so you can pull React off of here, you can pull Angular, all that stuff can come directly off of Unpkg.

[00:04:58]
It's partmotion.min.js, I had put .global in there, delete the .global. Which, again, here I have this global part right there. Just delete that. So it's just popmotion.min.js. Okay, now, here in my code, I have globally available this new thing called popmotion, which obviously is that's not built into the browser, right?

[00:05:31]
That's something else that someone else wrote, in fact, there's a whole website for it. Popmotion.io, this will show you this very cool website that this person built of all the various different cool things you can do with it. It's a very powerful library that does really advanced sorts of animation there.

[00:05:51]
We were doing things like making things spin and making things move from side to side. This will help you do things like physics, right? It's actually very powerful from that perspective. So, now we have this built into our page. Let's go do something with it. So let's come back over here to our script.

[00:06:18]
It's very important, underneath line 14, not above, we're gonna put another script, and you just call it animation.js, or something like that, or script.js, doesn't matter, whatever you wanna call it. And then make another file, call it animation.js. I wanna say const ball = document.querySelector('.ball'). And then we're just gonna use popmotion, popmotion.animate.

[00:06:54]
And then we're just gonna give it a bunch of stuff. We're gonna say from 0 pixels to 100 pixels, 500 pixels, whatever you feel like putting there. repeat: Infinity, Infinity is actually a special term in JavaScript that literally means infinity, right? So by telling it to repeat infinity, it's obviously going to repeat infinite amount of time.

[00:07:21]
You can put 100 if you want it to only go 100 times, so on, so forth. repeatType is going to be mirror, which means it's gonna go one way and then come back, as opposed to going one way and then starting over and coming back. Wanna give it a type of spring, Which is gonna be like the easing function on it, right?

[00:07:49]
Where it's gonna kinda spring a little bit and then move to the side. And there's a bunch of things that this is already built into this particular library, we're just taking advantage of some of them that already exist. We're gonna say onUpdate, What the update is. We're gonna say ball.style.left = update.

[00:08:13]
Now you might be asking me, what is all of this? I don't necessarily understand everything that's going on. Again, more of the point of this lesson is not how to use Popmotion, it's a animation library, there's a ton of stuff you can go do on it. I'm trying to show you that by including this script tag here first, I'm then able to access it here.

[00:08:36]
These are a bunch of options. If you go look into Popmotions documentation, it'll actually lay out very succinctly, this is how you do all these various different things. The onUpdate function basically is the part that actually goes and updates the DOM. Let's see what the update is. Why is this getElementsbyClassName, it should be style.

[00:08:59]
Is that really what that was? No, it wasn't, okay? So this is correct, right? You can see this is going back and forth, that's what I expect. Now, if I inspect this, okay, this is good, right? Now this is going back and forth, the way that I expect.

[00:09:20]
Now I think I just have something that's just not respecting position relative. So I think I have to go in here to the style.css, we have to say this is body. This needs to be position relative. Now if I refresh the page, there we go, okay. Now we get this nice kinda springy action going here.

[00:09:52]
Yeah, I don't think you could do this with CSS. It'd be tough to get that kind of physics kind of bounce a little bit that it has from side to side. I'm not gonna say it's not possible, I'm sure someone could prove me wrong. You could, actually. With keyframes, you could get really specific with keyframes and make that happen.

[00:10:10]
But as you can see here with Popmotion, it makes it extremely easy. And again, this is going from side to side, you can now start messing with this. This could go 250, and instead of going left, you could have it go top. And now it's gonna go up and down and go further.

[00:10:32]
All sorts of really cool stuff. So, one, we learned Popmotion, kind of fun, really fun to mess with, right? Two, we learned, in order to include something, all you have to do is go find the library that you wanna include. Make sure you include it before your script, right, because if I include it afterwards, it's not gonna work because it's not available, right?

[00:10:52]
Cuz these scripts execute in the order that you put them there. And yeah. And we also have, Yeah, very cool stuff. And so you can go in here to, what's the name of the function that we're using here, animate? Let's look at repeat or type, right? Here I have spring, let's try decay.

[00:11:28]
I don't know what that actually does, but we'll try it. So what I did here is I came to the popmotion.io website, I looked at the options, and there's a type here. Right now we have it as spring because spring seemed like a fun thing to do. But there's another one here called decay, and I actually don't know what that does.

[00:11:47]
So if we come back over here and say animation, change from spring to decay. Let's see what ends up happening here. Not working the way I expected. Well, I don't know what I was expecting, right, but it doesn't do anything that I was hoping for. So instead if we go back to spring, there we go, now it's actually working the way that I expect.

[00:12:14]
So I have to go dig into the documentation to figure out what I was actually supposed to do there.