Complete Intro to Web Development, v2 Complete Intro to Web Development, v2

Integrating with Other People's Libraries

Check out a free preview of the full Complete Intro to Web Development, v2 course:
The "Integrating with Other People's Libraries" Lesson is part of the full, Complete Intro to Web Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian shows how to incorporate a third-party library into a web page. Brian takes a question about the relevance of jQuery.

Get Free Access Now

Transcript from the "Integrating with Other People's Libraries" Lesson

[00:00:01]
>> Brian Holt: Great, we're gonna talk about something that you're gonna to have to do if you get a job or if you even build stuff on your own. Often you have to integrate with other people's libraries, right? So people write these really awesome libraries like Popmotion. Popmotion is something for doing animations, I cannot write things like this by myself.

[00:00:21] Really cool stuff though.
>> Brian Holt: So stuff like that, this is written in JavaScript, it's done really well, it's well tested, it's used on other people's websites. This is something that if I had to write myself, I would literally spend weeks working just on this, but I don't have to, someone did it for me.

[00:00:45]
>> Brian Holt: And this is beyond the normal capabilities of just doing it like normal CSS stuff, you need to involve JavaScript in this as well. So this is a great library, Popmotion, and I want to show you how you go about thinking about interacting with these sorts of things.

[00:01:01] So the one that we're gonna do is we're gonna do this one.
>> Brian Holt: Again, something I could have never done by myself, right? You have to do like physics and decay and stuff like that, and velocity, it's tough stuff.
>> Brian Holt: So what we're going to do, not that one, back.

[00:01:28]
>> Brian Holt: So we're gonna take all of this and we're gonna put this into a Visual Studio code project.
>> Brian Holt: Let's just close all of our calculator stuff. We're gonna create a new folder.
>> Brian Holt: And we're gonna call it, nope, new folder, this is gonna be called. I have one called Animation already, so I'm just gonna call it Anim or, let's say, Popmotion, Popdemo, there we go, cool.

[00:02:02] I'm gonna open Popdemo in my Visual Studio. Make this large, okay, we're gonna have a new file called index.HTML. Index.HTML, pastes, this is just some boiler plate stuff, stuff that you have to have in there. But the thing that you wanna notice here is I have the script tag right here from, this is called a CDN, a Content Delivery Network.

[00:02:30] So I can actually load off of the Internet just the Popmotion library, right, so that's what this is. I just went and found it on this thing called UNPKG. It's this place where you can load the libraries from, load JavaScript from libraries straight off the Internet to experiment with.

[00:02:46] You shouldn't probably use UNPKG in your day-to-day website, but it's great for rapid experimentation. Okay, so load Popmotion and then we're gonna write this file called animation.js. So save animation.js and then we're also going to load animation.css.
>> Brian Holt: Okay, and so we're gonna come in here, it is very important that animation comes second, right, because this library needs to load first and then this library can use the stuff from the first library.

[00:03:21] If you do it the other way around and you try and reference stuff that's in Popmotion, this'll say, I don't know what Popmotion is. So it's important that this animation comes second, okay? Since this section's not about CSS, I'm just gonna copy and paste the CSS in here.

[00:03:38] The only thing that might be curious to you is this border-radius 50%. I told you before, border-radius is when you start rounding corners. If you say 50%, it actually rounds the corners so much that it's just a sphere. [LAUGH]
>> Speaker 2: Okay.
>> Brian Holt: So if I come back in here, I'm gonna open and what did I call it, Popdemo index.html.

[00:04:02] You can see here it's a circle, that's how you do it. You do border radius 50%, it makes it a circle. Okay, cool, give it a background color. I made it same width and height, and then I centered it right here using Flex.
>> Brian Holt: Good, good so far, nothing new, okay, I'm gonna come back here to Intro to Web Dev.

[00:04:31]
>> Brian Holt: So let's actually just get this straight off of Popmotion, Popmotion.io. Here's something that I did not write, this is someone else's library, and I wanna do this on my web site. So he's got like this little code sample right here. What I'm gonna do is I'm gonna say, fork on Code Pen, we've been using Code Pen.

[00:04:49] And he has this code right here, and it's like, I'm just gonna steal straight off of you, just straight up copy, paste this business. So stuff I didn't write, okay, and now we'll talk about the code here in just a second, but let's just see how this works.

[00:05:10]
>> Brian Holt: So, I come back in here, animation, refresh. Now, this works just the same way.
>> Brian Holt: Pretty cool, right? And I, quote unquote, wrote it [LAUGH], I successfully stole it, is what I did. Now, I don't want to get into how Popmotion works. This is definitely not a course about Popmotion, but I wanted to show you how you could go out and integrate with someone else's library.

[00:05:38] If I needed this for whatever I was doing, this is exactly the process I would personally go through. Because I would just blatantly rip-off their examples, and then bastardize it to my own needs. That's my job because I am a professional bastardizer [LAUGH] professional bastard, let's just go with it.

[00:05:56] Cool, I hope my mom never watches this course.
>> Brian Holt: Something that you might be looking at here is, I don't know what this looks like, this looks new. This is called destructuring. It's the same thing as saying const spring = window.popmotion.spring, and then doing that for all of these.

[00:06:22] You're just saying, I know there's something inside of Popmotion called spring, can you just pull that out and call it spring? Oops, and do that for all of these. It's just a little convenience thing to make that go fast, does that make sense?
>> Brian Holt: So if I did these for all of these, it would have to be for listen and then pointer, right, it would be tedious to pull all of those out.

[00:06:52] So that's what this does, and it's called destructuring. What else is in here that you might not see? We haven't used arrow functions at all. This is an arrow function, again, this is my font being dumb, this is actually equal signs and an angle bracket. It's made to look like an arrow, but in my font if you put those two things next to each other it makes it look like a nice little arrow.

[00:07:15] This is exactly the same as saying, function (e),
>> Brian Holt: So that's what an arrow function does, it's another way of writing functions. It's actually the newer way of writing function. There are some subtle differences to how they're different and I would suggest that you get into Kyle Simpson's course, he's about to delve into that.

[00:07:36] But for now, you can think that they're exactly the same thing.
>> Brian Holt: Otherwise, I don't wanna get into too much how everything else works, but suffice to say that that's how I would integrate with this library.