 Polycast 43, take one. Hey there, polycasters. Rob here. Welcome back to the show. Last week, we were doing this thing called Ask Polymer, where we take questions from you, and then we try and answer them here on the YouTube channel. And as we were collecting those questions, I noticed a lot of folks were asking, when's the Polymer team going to create a data table? Or what is the roadmap for this particular element and stuff like that? And as we were going through that process, I really started to think that if web components are going to be successful, we're going to have to scale beyond the Polymer team. Really, it's going to be up to all of us out here in the community to start making cool stuff, sharing it with one another, and also promoting it. So one of the things that I wanted to do was, here on this show, I want to start a new segment called Built with Polymer, where I take all the cool stuff that you're building, and we just show it off so other folks can get involved with the projects and start using it in their own applications. Now to do this, we're going to start off by looking at a website called customelements.io. I'm curious, show of hands, how many of you have seen customelements.io before? OK, I noticed that you did not raise your hand, sir. So for you and for other folks like you, I want to just walk you through how this website works and some of the cool stuff that's on there. So if you haven't seen it before, customelements.io is pretty badass. You can think of it kind of like NPM for web components. It's sort of a registry. It collects all the things that are actually in the power registry, and then it displays a little bit of info about it. So you can search, and you can find the different components that are out there. You go to the website, and the first thing that you're going to see up here are these three sort of main sections. You've got the stuff that is recently created. It's brand new. You got the things that have been recently updated, which I always like to see. That's supposed to be a clock. And then you've also got the stuff that's the most popular elements out there, so the things with the most GitHub stars. All three of these very useful categories to kind of keep tabs on. And one of the things that I also really like is you've got this really huge search field up at the top. Anything that you could kind of imagine needing a component for, you can just go type. So I might say, oh, I want something like a table. So go type in table, and now I've got all of these cool results popping up here for various kinds of tables. Another thing that customelements.io gives you, which is pretty awesome, is at any point if you want, you can click on someone's profile photo. And this will show you not only their profile page, but also all the cool elements that they've produced in addition to that one that you were looking at. So if you think someone's making some really high-quality stuff, you can kind of stock them on customelements.io and see what else they're making. Going back to where we were last week, a lot of folks were asking, when is the Polymer team going to create a date picker in the material design style? And this is something that is not currently on the Polymer teams to-do list. We have a lot of elements that we've created, and right now what we really want to focus on is polishing those closing bugs and making sure that they work really well. So at the moment, no one is actively working on a paper date picker, and that, for a lot of folks, is sort of a dilemma. But if we go to customelements.io, we go to the search field. We can just type in date picker, or just date, whatever. And we can see right here, right away, we've got this paper date picker that shows up by this guy named Ben Davis. So let's scope that out. And looking at the component page on customelements.io, we get a lot of information really quick right here. So I can see, for instance, how many stars this application, or how many stars this component has. I can see how many people have forked it and how many people are watching the issues on it. I also get the one liner to install this on Bauer. And what I think is maybe one of the most important aspects of the site, I get this activity panel here. And on the activity panel, I can see that the component was created a year ago. And most importantly, I can see that it was last updated 11 days ago, which tells me that this is still being actively developed. People are contributing to this thing. They're patching it. They're fixing bugs. And it's getting a lot of love right now, which is important for anything that I'm going to add to my application. Also, we've got the list of Bauer dependencies down here on the right-hand side. And again, it's really valuable because I want to know that, hey, is this thing depending on the latest version of Polymer, or at least Polymer 1.0 in some version above that. I don't want an element that is Polymer 0.5 or Polymer 0.3 or anything. That's just not going to work in my app. So having all of this information just kind of at your disposal every time you go check out one of these elements is a huge, huge benefit. And one of the main reasons why I think everyone should be using custom elements IO. Now, the other thing that it does is it slurps in the readme for this element. So you can see here on the left, I've got kind of the GitHub readme that's just been pulled into the website. And if you want, you can go down here and click on the component page. And this is going to give you sort of the classic Polymer docs style, right? You've probably seen these before. We can see properties that an element supports. You can see the methods that it supports as well. One of the things that I noticed was not showing up here. Usually up in the top right corner, there's a little demo button. It's not showing up on this page, but we can just add that by typing demo into the URL bar. And now, we've got our paper date picker showing up. And you can see this thing looks pretty nice, right? I can go click around different dates. Changing the month gives me these sort of cool material design ripple effects. Close it, and then I can click this button again to show you how it reopens. Lastly, one of the things that's really important is making sure that the date picker is responsive. So I go grab the corner of my browser, start shrinking the page, and then boom. You can see that it has changed its layout, which is really, really good for mobile devices. So that is just one element that Ben Davis has produced. If you go back to his profile on customerelements.io, you can see that he's got a few other items here, paper chip, paper time picker, slightly different from a date picker, paper full screen dialogue. A lot of really interesting looking stuff there that, hopefully, we can show off in a future episode. So go find some elements on customerelements.io, go find the authors, stock them, stock them on GitHub, stock them, don't stock them in real life, but stock them on GitHub and on this website, right? So you can keep tabs on all the cool stuff that they're building. Another thing that happened last week was a lot of folks were asking, when's the Polymer team going to create a data table? Something that is really sophisticated that I can filter, where I can rearrange columns and do all sorts of stuff like that. Honestly, again, this is one of those things that it's such a big undertaking. No one on the Polymer team currently has it on their to-do list. Because building a complex data table, you could seriously just found a company just on making a killer data table. And in fact, there's a group of folks who have done just that. So recently, a team called Vodin released a set of elements, which they're calling Vodin elements. And very similar to the product lines that the Polymer team vends, things like iron elements and paper elements, they put out this set. And the Vodin elements are split into two categories. You've got these business-oriented elements for things like data tables and combo boxes. They've even created an icon set of businessy icons. And then they've also got a bunch of data visualization components, Vodin charts. Now, the core elements, as they call them, these sort of business layout ones, these are all free and open source. They are Apache license. You can use them in your project today. And then the chart elements, those are a commercial license, which you have to pay for. But since a lot of you were asking about data tables, I thought this would be a really good one to highlight because it's available on GitHub, and you can mess around with it and use it today in your project for free. So if you go to their website, which is at vodin.com slash elements, you've got this little demo button. And if we click that, it's going to show us this cool expense manager application. So I'm gonna scope out the live demo for this puppy. And we've got a really, really nice-looking experience here. So a kind of classic table layout columns and headers. What I really like about this is there's these filters up at the top. So I can just like go and check some of these values. And for instance, checking in progress and reimburse. You can see over here the amount of items in the table is changing as I'm changing these values. You can sort of see them changing over here as well on the left. We can also look for different merchants. So I could say, oh, I just wanna see stuff from the taxi merchant, for instance. And we'll just get only the expenses related to that category. Likewise, we can search by min and max values. A lot of cool things you can do here. They've even got this little floating action button down here at the bottom. So you can use that to open a dialog and actually add a new expense to this table. Really, really cool example, really, really cool powerful element. It's one of those things that, again, it's not on the Polymer Team's agenda at the moment to build, but here you've got this awesome community-built project which we can all start using in our own work. So yeah, that about covers it for today. I know I've only shown a couple elements, but there's actually a big long list of elements that I wanna start featuring on this show. But before I get into that, if you out there, if you've got some stuff that you've built which you would like for us to show off, it can be elements, it could just be cool projects that you've built, please leave me a comment down there in the YouTube comments, or you can ping me on Twitter at hashtag built with Polymer. That about covers it for today. So as always, thank you so much for watching and I'll see you next time. Ready? Yeah. Two second sticks. Hey there, Polycasters, Rob here. Ah, f***. I'm gonna pause for a second. Oh, Twitter notifications.