 Hey there, Polycasters. Rob here. Welcome back to the show. As we've been working on Polymer, one of the probably biggest requests that comes in from developers is, when are we going to get a CDN for Polymer and for web components? Because it's kind of a pain in the butt every time you want to sort of hack on an idea. And you've got to use Bower and install a bunch of packages and wait for everything to download just so you can play with stuff. So recently, the Polymer team has put out a brand new project, which is called PolyKit. It is a development CDN, which I'll talk about what that word means in just a second. But basically, it is a CDN that includes Polymer, all the Polymer elements, and the web components Polyfill. So if you want to hack around using something like JS Bin and Polymer, you can totally do that. So if you go to the website polygit.org, you see that it builds itself as the Polymer magic server. And what it's actually doing under the hood is it's just using GitHub's raw Git CDN and extracting things from there and pulling them into JS Bin or wherever you want to use the CDN. So what I want to do here is just sort of show you some examples of how you can use the CDN, how you can configure it to actually pull in your own packages as well, and basically just get hacking really quick. So over on jsbin.com, I've already set up this little sample bin. And the main thing to notice here is I'm using this base tag right here. And if you're not familiar with a base tag, an HTML, a base tag or a base element, it just allows you to set a URL and then any sort of subsequent URLs that you use, like for script tags or imports, they will all be relative to that base. So what we're saying here is we want the base URL to be polygit.org slash components. This components directory is where Polymer and all the Polymer elements and all that good stuff lives. And from here on out, if we have any relative URLs, it'll just pull stuff from that directory. So I'm pulling in web components JS. It's coming from that directory. I can import Polymer.html. That'll also come from that directory. And so since we've got all this working off of our CDN, now we can actually sit here if we want. And we can just create our own Polymer element right on jsbin. So I'm going to do that right out of DOM module here. I'll give it an ID of like ex foo. And I'll give it a template that just says like, hello from ex foo. And I'll also give it a little script tag. Inside of here, we will call the Polymer constructor. And we're going to say it is an ex foo element. And then the last thing we want to do is we want to just make sure that we use our ex foo tag somewhere in the page. And now you can see it showing up over there in our output. So this is really great if you're hanging out on the Polymer Slack channel, you run into a bug or some issue, and you're not quite sure how to explain it to folks. You can just go throw together a jsbin using Polygit and then share that jsbin with people so they can help you get unstuck. Now, I also mentioned that all the Polymer elements that we built are included in the CDN as well. So what you can also do if you find maybe a bug or an issue with something like PaperTabs is you can go over here and you can just write an HTML import for PaperTabs. So instead of just Polymer, I'll also pull in PaperTabs. And then you can just start using that element in your page here. So I'll say I want a set of PaperTabs. And then inside of here, I will write out maybe like two or three PaperTabs. So we'll say this first tab is called Foo. Second one is going to be called Bar. The last one will be Baz, Foo, Bar, Baz. And there we go. Now over here in our output, I've got these three PaperTabs working just as I was expecting. And if I had some issue, I could then take this. I could save this jsbin. I could go file a GitHub issue and point the engineer at this particular jsbin. And that way it's going to help them triage that issue a lot faster and help them debug the actual problem that you're running into and hopefully get things fixed. Now one of the coolest things about Polygit is that it is configurable. So not only does it pull in Polymer and the elements that that team has created, but you can add your own GitHub repost to it as well. So if you go back to the polygit.org website, you scroll down here to the bottom and see that there is this sort of interesting configuration syntax. And it might look a little weird when you first see it. It took me a few times working through it to understand what it's doing. But basically what you want to do is when you are defining that base URL, you can configure it by saying, oh, I would also like to include this component. And this component might live inside of some particular org. And maybe you want a particular version, like version 1.2.3. Or maybe you want a branch. Maybe you want the master branch. That's some good handwriting right there. Or maybe you want just the latest tag. So if you include an asterisk, instead of pulling a particular version or a branch, it'll just give you whatever the latest tag happens to be. So to show you an example of that, I've again got a little JS bin here. And I'm just going to paste in a better URL here. So what I've done is I've configured Polygit to pull in two additional dependencies. The first is the marked down JS library, which is in the chjj.org on GitHub. And I've told it to grab the latest tag. And I've also told it to pull in the mark-down element, which is something that I wrote myself. That lives in the rob Dodson org on GitHub. And again, I've just told it to pull in the latest tag there. So now both of those are available in that CDN components directory. So I can just go ahead and write an HTML import to pull in the mark-down element. And then over in my body, I can just start using it. So I can have a mark-down tag. And we'll just drop in a hello world for the header there. And we can see we're getting this huge H1 rendering over there in the output. So if you're working on an element or a project or something like that, and you want to show that to folks on JS bin, you can absolutely do that using Polygit as well. The one caveat there is that it has to have been published for at least one hour for it to be picked up by the raw get caching CDN. But once it's been published for about an hour, it should be available to you on Polygit. Now, the last thing I want to mention here is at the very beginning of the show, we said that this is a sort of development time CDN. And what I mean by that is it's not a CDN that you want to use for production. And the reason is because we're not doing any sort of vulcanization or anything like that to optimize the elements that we're sending down. Instead, you're getting an individual dependency for everything that you import, which is actually pretty expensive in terms of HTTP requests. So it's great for development time. It's great for hacking on ideas. But when you get to the point where you want to launch something into production, you still want to use a package manager like Bower. You still want to use a process like Vulcanize to make sure you're sending down the absolute smallest payload possible. But if you just want to mess around with some ideas, it's perfect for that. So that about covers it for today. If you have any questions, please leave them for me down in the comments. Or you can always hit me up on a social network of your choosing at hashtag Ask Polymer. As always, thank you so much for watching. And I'll see you next time.