 This is Web Components, Polymer, and Hacks, and I've had a lot of caffeine, so let's do this thing. All right. I want you to go on Twitter, and you need to use hashtag, Hacks the Web, and hashtag DrupalCon. You need to tell everyone about what you were about to see. So I'm Brian Olidick. You don't have to tell them about that. But I'm at BTO Pro on Twitter. I work for a College of Arts and Architecture at Pennsylvania State University. And I'm Nikki Massaro-Coffman, and you can get me at NickyMK. And if you're feeling pretty creative and you want to use the email, I can be reached at EvilGenius at PSU.edu. I never get enough mail at that address. There's not much call for EvilGeniusing. So if you need a little bit of EvilGeniusing, or if you just want to drop a line, that's how you can reach me. So we're here today to talk about headless authoring experience, otherwise known as Hacks. And I'm going to start backwards with the authoring experience. So what is authoring experience? How many of you are familiar with that term? And for those of you who aren't, can I assume that you're familiar with user experience? So yeah, so we all know it's important that users have a great experience. But the people who are contributing content are important as well. Our contributors are users too. And if we forget that, if we ignore them, we're doing so at our own peril. So let's talk about some of those perils that we have when we ignore them. How many of you love to be in the middle of something when you get a panicked call that forces you to drop everything and talk a contributor through how to do something? You love that? Me too. It's so much that I just revealed to Brian today that I've only been working with him in the same office since November. And I just told him that I never bothered to tell anybody that they haven't hooked up my phone. It's garbage. Shhh. Shhh. Nobody tell. So one of the things that happens if our authors have a difficult experience is that of course they're going to come to us. And you have to put yourself in their perspective. We work in higher ed and a lot of times the people who contribute content are staff assistants and it's not their primary duty. They're not experts. And I've done CMS training before and I can tell you nobody's going to remember something you've done in training if they only update something once every couple of months, if at all. Which gets to the other extreme. And that is that they might give up on updating content. We create sites. We're creators. We give life to them. Yes, Brian is God in that sense only. But those things need care and feeding. We give them life. Our contributors are the ones who feed them. And if they decide to stop feeding them and abandon them, scary, scary things can happen. And the site becomes effectively dead or undead. And then we have a third peril. And that is probably the worst one of all. And that's the person who doesn't call you and doesn't give up and actually really doesn't give a shit about doing things the way you want to do them because they have a way that they want it to work. And of course they decide that they want their text bigger and they use heading tags to do so and may find ways to get all kinds of crap in your site. And you'll see hacks that are so bad that they will melt off your face. So even if you've made a site that is completely accessible and you've launched it and it's great, you have that big open body tag that anybody can dump any kind of shit into. And so if they're dumping their garbage right into your accessible space, it's not accessible, is it? All right. So we know that authoring experience is important. And we've been evolving over time to think about how to make things easier. We started with the WYSIWYG. And then we tried to get creative with the WYSIWYG. We've used our tokens, which are really fun for our contributors to have to muddle through because you might not be able to tell what it does. Wordpress users may be using short codes. And this one is supposed to toggle a panel, but we can't really see what that panel says, can we? Now maybe if we switch to text mode from visual mode, let's see what that looks like, Brian. Still hard to read. Can anybody see it? Don't raise your hand there. She could raise her hand, but we'll go ahead and show them. Yeah. Hell no. Yeah. Hell no. This is not easy for a content contributor to update. And that's an important thing to think about. Now as we've evolved, one of the things that I did in my world of crazy ass home brood CMS is that I tried to get really creative with a CK editor and use the templates button and add it, and this is very dated, so please, you know, this is like my equivalent of having a mullet in a high school yearbook. This is ages ago and it's going to live with me forever. But the point is, I tried to use semantic HTML in the editor and then allow some JavaScript to come in and make it interactive. And that way I could have templates of things that they could insert and then if we flip to the next slide, I added CSS in the editor mode so that people could kind of get a sense that that's an accordion or this is tabs and still be able to edit and see what they're doing. Still not the best solution because sometimes people accidentally wipe out tags. It's never happened before. So we've moved on. We've tried things like panels. Our panel is much better for helping our contributors. Yeah. No. No. We've also tried Divi. This is the part where I pick on Cindy. I told her she would not be my friend anymore if she continues to use Divi. So we all have to help her today take steps not to use Divi again. In WordPress. This looks really, really like something you want your people who are using WordPress to update. And it still lets you put really garbage code in it and then bury it in UI archaeology. So let's move on. So we're all toying with improving the authoring experience at this point. We can all agree that we're all toying at that, correct? And so we do have some strides that we've made. If we, of course, we have paragraphs. We have layouts. We have bricks. And then in WordPress world, we have Gutenberg. So we've made some progress. And we can say that we're all toying toward improving the authoring experience. But here comes the but, all right? But your tool belt has module bloat. You think you're Batman, but you're overrun with a ton of Batman's. So and we're all good at toying with the authoring experience, but we can't play nice together. You know, we're off in Drupal land doing our thing with our paragraphs and we're really excited and that's one user interface for the people that are contributing content. But we're also, there are people off in WordPress land doing their thing with their Gutenbergs and they think they have the right answer. How many of you work across both, okay? Do you have any contributors who have to work across both? So basically you're training them twice to do the same thing, right? Oh, that sounds like fun. Can I come work with you? And even if you weren't somebody who raised your hand, how many of you have multiple versions of Drupal right now? Do you have people who are actually contributing at all? Ooh, sounds like so much fun. So you get the whole history of how to update an authoring experience. So why can't we all just play nice together? That's the question that we're here to ask today. And so what we're proposing is that we need one ring to rule them all. And somehow we're giving it to Brian. My precious. All right. So why are you really here? Tell them. Tell you. Okay. So if anyone read this on Drupal Planet right now, a lot of people can't upgrade off of Drupal 7. Let's skip why. There's lots of reasons why. How do I know this? There's 900,000 reported installs of D7 still, and it hasn't been maintained actively in very many years. Heck, there's still 61,000 D6 sites out there, okay? So the community has moved on, but a huge percentage of the community and things created by the community are still back there. So instead of saying, let's keep building amazing things in D8, let's figure out how to pull those people forward. Otherwise, they're going to pull forward someplace else. So we built a headless authoring experience in part to solve this. Preach. So what is Hax? All right. So this is the most important sales pitch on earth right now. Let's do this. Okay. Drupal is the best, sorry, Hax is the Drupal authoring experience. Amen. Nope. Sorry. The Drupal 6 authoring experience of your dreams, ladies and gentlemen. Okay. More caps lock is needed. Hax is the ultimate Drupal 6 authoring experience. I don't really know him. Okay. So all right. You're not excited yet or clapping. Okay. So we need more memes. Okay. So if we have this meme, which is really big. It's gone around. Oh, what error. Right. That Drupal 6. What I'm talking about. No error reporting. Let's go back to that. Right. With this learning curve infographic. And you're not supposed to panic. But you want to choke D6 to death. And you don't know where this marker is. I really tried to stop him. You didn't act for any marker. But then you have, if you just get the underscores, underscores, underscores, underscores, underscores, underscores, underscores, underscores, underscores, underscores, underscores, underscores, underscores. Then you're going to totally get the right template to maybe, yes. Okay. That Drupal 6. We were so excited. We were all going back to Drupal 6. Sorry, gang. Eight was a failure. Seven, failure two. Okay. So that wasn't the pitch, but it sort of was too. So if you want to go to hacksthewheb.org, you can play with what I'm going to play with right now. And there's a reason why I mentioned Drupal 6. I can't remember what that is. But so if you go to hacksthewheb.org, I have a copy of this running locally. You're going to see a site that looks like this. And everyone I know that has gone to this site has been like, why are you freaking out? I don't understand. So that's what this presentation is about, is why I'm freaking out about this, okay? So we've got some links off to various spaces. So everything you're going to see here is a completely decoupled authoring experience. Not decoupled Drupal where you render things out via JSON, authoring, full on authoring. And it works in Drupal and backdrop and grav and a desktop app and a bookmark. You can inject into any website on the internet and it could be plugged into pretty much anything. And the reason why is it's decoupled. It's like grease monkey on steroids. Yes. So if I want to edit something and I'm a content contributor, I got to go to a ton of training right on D6, D7, D8, don't know what it is. They don't know what that is. They don't care. Why does my Drupal look different from your Drupal? I just want to hit edit. I just want to take that image. I want to scale it to be the right size. I want to put it in the middle of the page. Shoot. I want to change the header text to be hacks is cool. And I want it to be reflected instantly. And I want to get rid of that bar because there's easy buttons hit save and be done. I want to go back to my normal job. I don't want to learn HTML anymore. Why? Because I'm having to jockey HTML if I am some other person, right? I have to learn this weird brackety gobbledygook or a whole bunch of Drupal, just to put myself on the internet, that's ridiculous. So I hit edit. I go, I want to put something in here. If you're not convinced yet, I mean Jonah Hill loves hacks. He's a big fan of hacks. And so he's like freaking out, but I want to edit Jonah in some way. He needs better alt text. So I have form and now Jonah has better alt text. Awesome. He's there. But I need video. Okay. I need video. I was playing with this and I can select the video and I can make it really big or whatever. And you know, I care about accessibility. Right. I care about accessibility. And so you should be able to accessibly change that color to red. Need you to change it up. But the text, the text was black a second ago. It's not black anymore. Why? Because we're not playing with normal HTML anymore. This is built on something called web components. Everything I'm touching here is a web component. It's a custom element. And I can change the rules of HTML fundamentally. Okay. So you don't need to keep saying, let's funnel that information into Drupal to handle. I want to put something new in the page though so I can pull up. I can find something. I mean, I want to search YouTube. So I probably should go get the YouTube module and the YouTube integration and find my API. Oh shoot. It's right there. Okay. So then I want to put that video in place and then I want to make sure that it has up. You know, I don't really like that color. Go to the front. Okay. Cool. Let's not make a responsive video. You have the responsive video module. Right. You need the responsive video module. I wasn't going to be responsive anymore. So thank God I can slow down for a second there. Or maybe we don't have the media yet. I can put in placeholders. Maybe I don't know what it is I wanted to find. Maybe I want to make something. And so we've got this grid of all these things we're building out. And so if this was WordPress land with Gutenberg, we would all be going to training to build that incredibly specific thing that will only ever work in WordPress and then we'll have this different UX pattern from, no, we're not going to do that. These are native web components that will run anywhere, in hacks or out of hacks. So I can do all kind of crazy things with a web component. Let's say it's a CSV file web component.csp. Everyone likes CSV files, right? And your content contributors, they know how to edit table tags and build complex tables. Yeah, mine neither. But they know how to edit a CSV file and Excel and export it and then potentially upload and reference it. So this just works. And then I can insert a table. So I built an HTML table, a 100% guaranteed accessible HTML table. You all just did that in four seconds like me, right? We can do this at a normal job. Cool. Okay, so sweet. So I can make it a different size. We can make gizmos for whatever we want in this case, whether it's math, whether it's to put, you know, a Wikipedia article on the web about Drupal, whatever. Let's put that in there, okay? Did I get the Wikipedia module? No. I didn't get the Wikipedia module. I got like 20 lines of HTML. And now we have that in here. I'm going to make the Wikipedia article a different size, move it down to the page. Oh, shoot, I need to go find something. Let's search NASA. I mean, they got rockets and stuff, right? Like rockets are cool. You like rockets, but you're not going to go and get the national module, spaceship. So I can go ahead and put that in. And it says, hey, that's an image, right, before it was a video. And Hax goes, I have a lot of different ways to present images. Let me tell you about the greatest way to present an image, okay? We're going to meme that image. And I'm going to put on top of it, rockets to rocket city, booyah. And now I've got my meme, because that's what I needed. The meme module to then put the little text on the image to go to the meme generation service to come back. Or I could just put it here. Or maybe it's like a templated area. Maybe it's not one thing. Maybe it's I dump in and inject a whole bunch of content, but I'm not injecting those templates that Nikki referenced before. I'm injecting custom elements, which are repurposeable. I keep saying it, repurposeable, repurposeable. But this is a static demo, like why do any of you care? It's a static demo. You can't, you couldn't possibly see all the HTML that was just written that is expertly crafted the way I would have written it by hand, which is what this just did. And it wouldn't have given me an export, and I couldn't download it to a static file. And I couldn't open it right here and use it outside of Hax. So Hax is scraped off the interface right now. This HTML file looks no different than if any of us sat in painstakingly built it. Gasp. But you can learn about the Earth. The Earth is really a good way to teach people about things. But again, it's static file. Again, you just keep pointing to these things, Brian, what do I care about the static file? Well, we didn't make this for static file generator. We made it for Elm's Learning Network, which is a platform we work on. So obviously I would click around to some content in Elm's Learning Network, and I'd be like, well, I'm going to pull up Hax. And it's there. And I'm going to hit Edit, and I'm going to have an identical authoring experience. And I want to delete that paragraph. I'm going to delete this block quote. Sure. I'm going to put in a new heading, placeholder. Yeah, but placeholder, there's something off there. Oh, oh, it's a placeholder for images, because now I have a backend that I'm tied into. So I just gave you, browser, an image. You should know what to do with it. And so Drupal, in this case, Drupal, says, oh, well, I can handle images. Sweet. I'm going to send that to my backend. So that just saved to the file entity system? You didn't notice it? Right? I mean, it took a long time, right? You have to upload spinners and progress bars and all that garbage. Right? But I want to put it on the internet as a cover image. And so change my mind. Web components are the future. That I think was a meme we were sending out not too long ago, but of course, web components are the future. URL, I can point to action link, stop, and I probably should put using React. There we go. Got it in there, Chris. I put that mean thing about React that I usually say. OK, so I put that web component in. Sweet. I hit save. And that is saved to the backend. How do I know? Because if I hit refresh and there's a live demo and nothing ever goes up, there it is. OK. So that's saved. All right. But you don't use Elms. Don't worry. No one does. So what we're going to do is we're going back to the platform. I work with him. And I don't even use it. OK. Well, she does. She's a student. But that's fine. But I said this was about Drupal 6. OK, gang. I'm going to bring it down. So I'm going to go to my Drupal 6 content. I don't know how to bring it down. I tried. And then I'm going to have accessed all the same things as powered by here so that when I want to make my funny, my funny gif with a crazy face, dog and the lips freaking out everywhere, that I can do that. And I'm in Drupal 6. And then I can hit save. And now that funny dog, he's in Drupal 6. That's the spoiler alert. Will this always require Drupal? No. It doesn't require Drupal now. Let's move forward. Drupal 7, right? I mean, there's a lot of Drupal 7 sites. But training. How will we do training? It's identical. I have no clue. How do I use... Ah, shit. It's just all right there. What I want to embed like a 3D image. Well, of course, we should probably embed something about Drupal. But I had to write all this code and just do the Drupal... Nope. Shit. Okay. I'll go back to Rich Media. I'm sure there's something. I have to screw something up here. Oh, that's... But you already made content in Drupal. Darn it. How will we... But if I made Drupal-specific tags, because everything I've showed you isn't Drupal-specific, does anyone remember these awful, hideous, ugly things that Nikki showed? What if it just kept working with everything we already made? So that is a Drupal-token tag, which then just went and made an Ajax call on the back end and rendered and processed that token the same way Drupal always would have, and then injected it there. So now I have lazy loading parts of my content for free. But that was a weird token, right? It wouldn't work with anything normal, because that was crafty BTO Pro and your stupid token that you just put in place. Okay, so that looks like a native Drupal token right there. Embed. Render. Full. Node. 55. Shit. I wanted 54, because that's my hockey number. It's very important to me. Oh, good. There's 54. There's nothing on that page. That's fantastic. We probably shouldn't embed that one. But that is dynamically loading nodes off of Drupal's node system, and now that's a token embed. But if I had a lot of trouble saving it again, because that training... Oh, it's already saved. Okay. So then I can refresh the page, and all of that will be there. But maybe I'm migrating between platforms. I don't know, Kevin. Is there another CMS out there you could potentially move to in Central Blade? No. No. Well, unfortunately... You're speaking heresies in here. So this is Hacks Running in Backdrop. Again, the development team, you're looking at it. Okay? Two of us. There's two other people. That's a potter. Potter. Potter. All right. So there's four people that are working on this entire thing across every ecosystem. So it works in backdrop CMS. Why? Because it's a tag. It's a freaking tag to integrate this stuff into the browser. That's how you boil up web components. Just keep stacking things and things and things and things. Inject a tag, and we're good to go. Maybe like Legos? Something about that, yeah. So if I put this in developer mode, and I show that export panel from before, I can go back to my original content. I'm going to copy that stuff. I'm going to go over to backdrop, and I'm going to paste it in, and I'm going to hit import. And now that content that I authored over there in a static site is now going to save to the backdrop back. Oh, there we go. Darn it. Again, that training. I don't know how we're ever going to train all these people across here. Any time something goofs up, then this is an important point as well, because I'm sure there'll be questions about how the heck this is working. Notice how that thing isn't here? The reference to that web component is not in this site. So if that reference is there, it unpacks. If there's a web component that the browser doesn't understand, it's going to be like, you're a div. I just don't even know what to do with you. So let's say that you're migrating those smaller sites. Has anyone seen GraphCMS? There's some buzz, because Kevin just won't stop talking about how much he wants to migrate. It's thousands of complex Drupal sites to an incredibly simple system. So I've been messing around with Graph, too, but I didn't like the authoring experience, so whammy. Okay. So now I can do training on GraphCMS. And GraphCMS can focus on the thing that it's great at, which is no database. It's markdown files to power it. It's lightweight. It's twig-based. It's got component architecture, because it rides on symphony. All those developer things are completely abstracted from all the cool user experience things. These two groups that keep meshing all over the place, and you see React for Drupal, and you see Angular for Drupal, and React for WordPress. That's not a thing. It shouldn't be a thing. Anyway, so that's it running in Graph. I can inject some images, placeholders, all the same things I could have done a second ago. I can hit save, and then I can save my page in Graph. And now I have just saved all those changes with that little Wikipedia article in place there. Yeah. Oh, jeez. There's something I just can't remember what it is. There's something we should be worried about, probably, but I'll probably just hacks Gutenberg. Okay. And then we're going to just go ahead and delete the Gutenberg images. We don't care about that. And then now it's Alaska. Isn't that wonderful? You can just relax, because the authoring experience for WordPress.org is the same authoring experience. Okay? When you need to train someone how to deface other websites, how to generate fake news, then you can totally just dive in and do that via the hacks-the-web bookmarklet, which is about 10 lines. Because what? Why would you do that? Because you can. It's really easy. So, I'll close Gutenberg out. We'll go back to how the heck any of this is actually possible. So, the headless part. How do we do the headless part? How did we get headless? So, we used one of these, and I cheated because I said web components. So, no, we did not use one of these. Everything that I just demonstrated there is 100% web components. Some vanilla, some polymer-based. I'm not going to go into what polymer is. Think of it like jQuery, right? jQuery is to JavaScript as polymer is to web components effectively. It just makes it a little bit easier to write things and maintain stuff. So, the real hacks pitch, then, is you don't need a framework. The web is the platform. Nikki, you're supposed to say, wait, what is the platform? Wait, what is the platform? Webcomponents.org. So, if you go to webcomponents.org, there are over 1,500 web components there. The web is the platform. It is a four-part meta-specification. And so, if a browser implements templates, custom elements, Shadow DOM, and a way of importing before you call me out on it, yes, there are five numbers there, and I just said four. You just need a way of importing that data to the screen. If the browser implements those four things, it is known to support web components. Now, there are polyfills for Firefox and Edge. And this board, when I started down this journey about a year ago, was less green and keeps moving forward. This is an agreed-upon standard that everybody on the browser vendor space is adopting. So, it's a meta-specification. So, why web components? Yeah, why web components? Well, you have a level of uniformity when you have web components, just like with Legos, where you have some standard shapes and you can build in different configurations. Web components are atomic design. You start at the smallest element that you can possibly make, a custom button, paper-dash button, and you can import somebody else's paper-dash button and then build bigger and bigger things. So, it's like inherently its own pattern library. We can also have cross-library collaboration. You've seen this work across WordPress and Drupal and Grav and everything else. We also said we're not using View, Angular, React, but it doesn't matter. You can still use those with it. And there's the accessibility. Once again, you can build something that people can't screw up, that you can bake the accessibility into. And the other wonderful thing about that is that the key to good web accessibility is to treat text as your minimum viable product, to write your interactive components as semantically as possible, and then allow the JavaScript to make them interactive. Using web components that are actually based on tags is about as semantic as we can get. And so that allows us to be far more accessible. So, what about DX? Has anyone heard of the term DX? Right. So, we went from UX and then hands down AX and then DX, developer experience. So, no one's going to adopt something that's crappy to work with unless its name reacts. So, what we're going to do is we're going to start with a quote. And this is by a graphic designer. Graphic designer who used to participate in the Drupal community and has since left. Do you know why? Because he's a graphic designer and he needed to learn how to edit dash dash dash dash bracket, twig, TPL file. Why does he have to do that to translate a static HTML mock-up into a content management system? So, we were up late one night drinking. And why does Drupal care about my design? I don't know Drupal and I'm not able to contribute as a result of that. We have design teams that we all talk about. We need to insulate them from Drupal. Like it's this evil thing because it kind of is. And so, we've done this conversation over many beers, spawned this where we made a module called a web components module. And it basically just exposes your design assets to Drupal. So, Drupal will read them off and be like, oh, a paper button. Okay, that has a property or it has a slot, which is the area in between a tag. Cool, now I know how to use this. And so, we have all these other little integration projects associated with it. We can render tokens via it. We can do, you know, loading in different ways. Display modes of display suite are biggie not for what we're doing. I wrote this thing that's neat and then didn't use it. But effectively, it'll take your design assets and then it'll do a one-to-one relationship between that and the display mode. Does anyone know why that would be a big deal? Drupal knows about the properties and how to talk to that, that design asset, that's pure design asset. And then it turns it into a display mode. So then you can go into the field area and just wire the two up and hit go. Now I want to theme views. And I don't write any code. It just happens. Okay, why? Because I output that tag and then I put the properties in and here you go. And then the design team no longer says but why is this CSS goofy? It was fine over here. That's just views logic. Okay. The CMS will learn your design. The design will not learn your CMS. A great philosopher said this right now. Okay. So we're going to understand what a web component is fundamentally via a U-Vase. Everyone knows what a U-Vase is because it just made it up. It's understanding via a silly example. You can take that. Chew on it. Okay. So an awesome explosion. We all have built websites for clients. I really want. This really feels like a Michael Bay movie right now. I want pop. I want some sizzle to this website. And so we made a pop tag. But it has to have a hyphen in it and like P hyphen O hyphen P. So instead it's awesome explosion. And so if you go on webcombones.org you can search for awesome explosion. It's like our hello world but obviously way more practical. This speaks to Nicky's semantic meaning right. So when I put this often awesome hyphen explosion tag on the internet now I need to communicate that's my team to use even if they're to dump it into a WYSIWYG or they're to put it in a template file. I'm not talking about oh well I mean you know person who's part time you just go and write an IMGS or C tag and then you correctly associate alt metadata. Idiot. Okay. So but they're going to want to be a different size. And so why don't we define a property that's just size. Why do I have to do a whole bunch of gobbledygook CSS to get that to be a certain size. What what if I want to change the color of it. So I got you all know please someone answer CSS filter property that accomplishes this right. Nobody. Okay good. I don't either. I just copied from someone else like we all probably did. So then I can use those together and what I'm doing here is effectively making an API into how to generate an awesome explosion. And so if you start to think of the front end is all these little tiny APIs that we're structuring and building up. So what does that look like because I said the developer experience this is incredible. Really zoomed out so you can see all this I'll just. No okay so it's all in one file that's why there's this big zoomed out picture we're going to zoom in on parts of it. So at the top is that first part of the specification it's two things instead of one. It's that you can reference other elements. Right so you pull in other elements into this element now you can stack those tags into your tag. These things work just like normal HTML. It's putting a Lego on top of another Lego on top of another Lego. So you can just stack whatever Legos you want in there that are also valid web components. So then again in the template area the template tag is a tag that basically just tells the DOM when it's processing hey I've got this you tell me when you want it to be printed down. Which is an important consideration because you're going to send someone an awesome hyphen explosion tag and the browser's going to be like and then the definition will show up and you're like okay so for the recording I made a funny face. Okay so then we get into scoping and you can just end the custom element and shadow DOM aspect of this. So you write your CSS inside the custom element. Can anyone think of what that might solve? Like a big it is like SAS preprocess build compile error written all over it? No? No because I don't remember because I deleted SAS because of this one capability of the platform. And the platform in this case is the web. I deleted 100,000 lines of SCSS code and I will never go back to it. So after that we get into HTML right? There's that imgsrc tag that you were going to train people how to use. In this case it has no alt metadata why? Because it's just a silly little pop thing it shouldn't have alt data not everything should in this case. Then from there we get into a little bit of like in this case this is Polymer specific magic block if you will. Right? So you can do this with just using the platform which if you read this back you can see how to define a custom element. Polymer gives you some nice little conventions like you're going to want to listen for events right? You're going to want to put properties stuff like that. And so you can say hey these are the properties, the state of this and then from there I'm into a JavaScript block. So I can just kind of use the JavaScript functions I want to call. The really cool thing though is everything is within the scope of that little Lego brick. Right? I'm just working within this one little container effectively. It's like containerization for your front end. So what are we able to build? Let's look at a few examples. Keep in mind that I've only been working with Brian since the beginning of November and I wasn't trained until early December is that it? Yep. And because we're in higher ed we take very long Christmas breaks. Very long breaks. So first of all if you go to webcomponents.org you can see what other people have built and we're up to 1500 elements that have been contributed on webcomponents.org. I'm going to say that again webcomponents.org. Webcomponents.org. What was that? Webcomponents.org. Webcomponents.org. Webcomponents.org. Okay. Now what we've been doing just in our team and remember they started this last year and it was just Brian and Michael Potter. And the rest of us really didn't get on board until December and how many modules do we have there Brian? Well they're not modules anymore because we replaced modules. There are no modules anymore. So 147 web components. 147. Holy shit. And we're going to keep building them. I was on a team that would take just several months to decide if they were going to go forward with a project and then several months to actually work on some of the things that I've been able to do in a matter of days. So one of the things that we did is we took the Chartist.js library and made a tag that pulls in a CSV attribute and some other configuration attributes and bam, Chartist.js. I am working on a table and I know we don't like people using tables because they do bad, bad things. But this table is special because it forces them to be accessible. And we are about to be adding in some responsive features so that out of the box they don't have to think about what happens when it's on mobile. And I am working on a video player that will work with keyboard, include speed functions for accessibility and allow you to include a transcript that's interactive or choose not to make it interactive. And all of that can be customized through the attributes that you supply to it. But how will it be accessible if it's not able player and the able player module? Ooh, that's a tough call. So we will, we continue working on things. We have an element level query. How many of you have been waiting to have element queries? Part of the reason, we all have. Yes. That is a good answer. So, yeah, one of the things as we're building this stuff as I'm working on the video player, I think, boy, this would be great to have an element query because sometimes I want the player to look like it does on mobile because it's in a column. And so the element query was born to say, hey, look at my parent. Treat me like a mobile because my parent is about as small as mobile. And so we've been playing with element queries. We've been adding our own grid systems. One of my other wish list items for years and years besides the element query is because people don't know what the hell they're doing with headings. I wanted headings that you could say, hey, I'm a subheading of this heading. And then if my headings happened to change because I was editing content, the heading levels would automatically do that. And so we actually have an element called relative headings. Which will then interpret as H1 or H2 or H3 based on whoever its parent is. So now I copy and paste that between systems where someone else rips that content out and stuffs it somewhere else. I take my parent away. I decide I want to snip it of this and not the whole thing. Okay, I'm an H1 again. So now we're going to do Netflix style. We started out with the fake, I mean it does work in Drupal 6 and you should migrate back to Drupal 6. Drupal 6 is cool again. But everyone likes Netflix and so I think you'll get more excited about Netflix. So we're creating an open source software solution that will change education in the world. You don't know what this is for. I can't have the license for the Stranger Things music but imagine Stranger Things is playing right now. Okay, oh, okay. So it's completely pluggable. All right. And so when we were at this step, each one of those gizmos, what we call the gizmo, that's just a web component. And then in that web component, right, because now we see, hey, we import a bunch of stuff and it looks like HTML and there's some properties. In that component, we put this little tiny message that says, in case anyone cares, this is how to use me in hacks. So this component that we made will work on any website anywhere in any framework. And if hacks is there, it'll teach hacks. Oh, hey, by the way, I'm here. But it doesn't need hacks. It doesn't need hacks. So if you don't need Brian in all of your Drupals plus your grabs, plus your WordPresses because Brian wants to be everywhere. I'm going to be everywhere. You could just take one of these things by itself. Right? And so what this is doing, if you read this as to how it shows up as the video player, you can see the red icon there, the gizmo definition of this says, I'm a video player. Here's my icon. Present me as red. Video. And then you also see there's some bindings. So that's how when I clicked on the YouTube video, I don't know if anyone even noticed, when I clicked the YouTube video, it automatically imported the correct form of the statement to render the YouTube video. And it pulled off of the API the data that was in the descriptive text. And it placed it in the right field. Those were not things I wrote specific to hacks. That is a thing says, I'm YouTube. And then another thing says, I can handle video. And then YouTube says, I just got a video. What do you want me to do with it? And it goes, I can take it. So in the find something, how that ends up getting worked out is it's just JSON. All those things that showed up, all those icons are again just a very simple app definition to say, I'm YouTube. And use the play arrow. And I'm by Google. And I supply videos. So that meme, when we would throw that meme up and it goes to our file system, what's actually happening is under in that JSON, it said, hey, I'm an end point. And I am able to accept images. And so it goes, okay, you gave me a file. Let me figure out, okay, I think it's an image. And then it says, well, do you want to save that image there? So the upload locations are pluggable. The find something locations are pluggable. The gizmos themselves are pluggable. You could run hacks with no additional custom elements. And it would just be a great way of editing P tags, I guess. But when more options are presented. So if you don't want people making memes, you don't have to plug that in. Yeah, you don't need the meme maker. You don't need any of our tags. You could change the definition entirely. You'd be like, well, I'm going to fork the meme tag and I'm going to do this other thing with it. Cool. So when it was an image, and I posted the image up, the handlers in each of the things that registered and said, hey, I'm here, said I can handle an image. And so that's why there were four options there. When we started there were zero and then one and then two and then three. And meme maker I didn't even make. So I stole that from webcomponents.org, forked it. Sorry. Webcomponents.org? I forked it from webcomponents.org. And then I added in that little block. So it took three minutes to wire up someone else's design asset into hacks. The times to build things for hacks are just insanely low. So this form is part of abstraction. Has anyone heard of JSON schema? Because it's phenomenal. It's as silly as a little idea as it is. But so we effectively have headless form rendering going on. And so that form that got built is because our hacks objects are bubbling up a JSON schema saying, hey, if you need to edit something called image URL, you should put the word source and use a text field to edit me. And that's it. There is a single tag on webcomponents.org that basically changed the course of my entire life. It's called eco JSON schema. So you have one tag, you pass in JSON schema, and it gives you a data-binded form instantly. I highly recommend checking it out. Where was that again? It was on webcomponents.org. I know you keep forgetting. It's weird. It's like that bit keeps going on. So then we get this dumped into the page. And hacks, in this case, it's hacks body tag is what's throttling this, just goes, oh, yeah, I know the definition of that. And so in that little configure block, again, with the JSON data, you see those icon type definitions, that's how little short options showed up. So the quick options can be built dynamically based on this little JSON blob as well. The entire thing is pluggable. So it works with Elm's learning network. And, oh, electron app, that's weird. But like if I wanted to build a desktop app, it would be really too hard. Our team is so small, I wouldn't be able to, hmm, shoot. How many people are on our team again? Four. Four people on our team. We're styling and working across six different platforms now. And when did the other two start? The other two started later. Much later. Thank you for that. You keep forgetting our history. It's weird. I feel like I've been here ages. But so I can work against a desktop. Stop native app development for the love of God, okay? We can work on phones and render web components. We can work on electron and render web components. Does anyone know what PWAs are? Progressive web apps? Just Google it. PWAs to their store. So they are first class citizens alongside all those apps built in whatever the heck it was, not web. So we work in pretty much everything here. Well, except there's one notable thing missing. I can't remember what it was. It wasn't a desktop. Ah, that one. Yes. So please come and sprint with us and help me understand how to make a Drupal 8 module. We can have hacks in Drupal 8, which will create an upgrade path for those poor six and seven souls to do the training necessary to get their enhancements into their existing workflow, turn off modules, and then move forward with everybody else because we want everyone to move forward to 8. But poor Kevin back there has 1,000 sites and he's not going to be able to. He's going to move to Grav or something. And let's face it, we don't want to be able to say the coolest shit that we saw today or at the entire conference was Drupal 6, do we? Drupal 6, yeah. You don't want to be that person. So let's work towards simultaneous cross-project development. Why do we have all these front-end teams building amazing experiences tunneled into things that are decisions on the back end? That shouldn't be a thing. So we can end. There's a module for that. In fact, we've deleted 20-plus modules since we started this. Why? It's just all kind of modules to do like a-frame player and then, oh, there's a module for that. There's a search for a-frame module that's on this library's module. I go and get this other one. Every time we put something in the front end and the client renders it, that gives us power to rip stuff out of the back end because we don't have to process those things anymore. And we will continue to delete things until I get as close to stock Drupal 7 with amazing UX, obviously the Hacks module, as I possibly can. We have deleted SAS in this process. Not all of the SAS. It's, yeah. Yeah. Well, okay. I see what you did there. All right. So, all but one level of SAS will we delete from our life. So we've deleted 100,000 lines of SAS and CSS. Why? Because those elements are scoped to themselves. So you don't have to write the BEM format thing underscore underscore thing underscore block underscore underscore title. Oh, shoot. It conflicted that one time in this one place. These things are incredibly easy to unit test if you can, if you skip ahead to that part, right? And then I can render a single component on a static page and know it will look exactly that way when I go into production. And then I can just send a reader against that static asset. And we'll keep deleting SAS. Why? Well, because there's a web component for that. And when there isn't, we're going to make a web component for it. But isn't it hard to get people up to date on that? I mean, it's really difficult if you just went to webcomponents.org you could probably. Really? But what if you had new people that showed up and they weren't WordPress background or new people that really love their react? I mean, how are they going to get up to speed? And actually, I don't know, contribute a bunch of modules in the last couple of months? So this is why we, you did it again. There's modules. We're killing that concept. You just, that is, yeah, that's a great question from a developer experience. We have students and junior developers contributing legit elements to our ecosystem. Why? Because do you know how to write HTML? No, I can send you HTML training. Or you could go to hundreds of thousands of hours of react tooling training. Sounds great. I'd rather unleash armies and armies of minions. Armies of minions. I like minions. The polymer tooling is all, and that's another reason why we use polymer. Polymer provides tooling to generate little mini documentation sites, which is feet and the hacks pitch. That's why we chose to align with Polymer. You can basically run one command and get a boilerplate and then one command and get a little mini server. And as you update your element, the documentation updates, you can run another one command and publish that to GitHub pages. So all 146 of those elements have their own little documentation about how to use them. So we've effectively API to every little API that we've made. So with that, I'm this person. Yeah. Feel free to reach out on Twitter. Email. And emails work for both of us if you just tack a PSU.edu on to the end of that or Evil Genius. Evil Genius. So take questions. I might have missed this, but what was the URL? Webcomponents.org? Is that the... No. I do have a question about this. If you use this to render something like in the main content, like you took over the whole page, what would something like the RSS output for that? Like how would you send that to that sort of a medium for feeds and things? So you mean the RSS in the page? Yeah. Like a teaser preview of something that would be output for... So, I mean, that could be... Because it would be server-side rendered, right? Yes. Well, someone in line is going to tell you that they wrote a server-side rendering thing. I think. Nope, maybe not. Yeah. I don't know. Look behind you. I know what you say. So one way, if you're not going to render client-side, this would be something I wanted Nikki to mention, the responsive grid tag, there are tags that are non-visual and just abuse the fact that you can do data binding. And so the way that all the app stuff works, when I hit the Save button, it uses an IronAgeX tag, sends up an event and says, hey, I've got data, send it somewhere, and then I put in place an endpoint, it just ships that data out the door, data binds back to the response to then give you the little, oh, hey, that updated. Iron accessibility keys. Iron accessibility keys. If you hit a JSON feed or it was RSS, right, in the case of what's coming across on these, right, there's JSON feeding off of these endpoints and then it's taking that JSON and it's rendering it as cards in this case. But you could render, I mean, you could render RSS in the page via a special tag that would just process that. Oh, you want to kick back out to that. Gotcha, gotcha. So yeah, I would say, if you're, the question was about content syndication and I solved the wrong thing. So if you wanted to deploy, so then the issue is referencing that asset, right? So in, if it's out to sources you can't control then that would be a server-side render. BYU is doing this with a distributed calendar engine, so they have Drupal as calendar and you go into their site and you use the Drupal UI and you build a calendar feed but then the copy and paste code to put into your website actually includes in it a reference to their CDN. So then you are hitting the CDN assets to unpack the definitions. So then it becomes like, well here's the way to render this properly. So it's more like if it's content syndication for yourself and you have control of it that way or yeah, you do a server-side render type of a thing. So, I've got about a dozen questions but I'm going to just, one quick comment and then one, one quick question. One comment, just to point out, you can use this with everything that you guys demoed. You can do all the best things with Web Components but still have SAS compile the CSS and all that. Webpack is awesome. Yeah, that would actually allow you to iteratively start replacing this stuff. If you have a design system like we do, like having tokens and being able to manage colors and spacing across a lot of components is really helpful to do that at the SAS level. Then you just inline your CSS automatically with this. What are your plans for Polymer 3? Like upgrading because right now all this is not Polymer 3 and Bauer is going to kick the bucket at some point. Correct. So, do you have insight or knowledge as to what's going on with Polymer and you just leave it here. What's my plan? Yeah, yeah. So, I was starting to go through an update so there's three versions of Polymer and Polymer, one of the reasons I adopted it is it's very unique in that one and two and three are all to work together. One is structured. So, one and two, we started in one, I like some of the conventions in one, we haven't moved fully to two but it also doesn't matter fully. What we're waiting on is three. Three will be a significant update. However, the Google core team, so Polymer is based out of Google, but they have tooling that upgrades their own elements. So, they're not actually updating to Polymer 3. They're taking their own elements running a modularizer that's what they're working on and having it basically do like the tick mark type of a thing to turn it effectively into a JS module so that their stuff will be JS module. So, that's what they've said if your stuff is Polymer 2 compatible you'll be able to run one command, kick them out to three and then get into webpack build routines and a lot more sustainability than some of the areas that glaze over for sure. The config that you showed earlier for all of the actual controls that you're binding into all this, where does that config live? So, admin interface pops up. If you have a component and you wanted to wire it up to Hacks, if you had a design system with a bunch of components that are all web components and twig friendly, how might one actually do that? Just asking. In Hacks, that is a much larger question, but in Hacks there's this auto-loader element, so anything that goes into the auto-loader it will attempt to load off of, at that moment, our location. But it will attempt to load off the relative location of it. Once it gets into the scope of the page, the way you integrate with Hacks is you create an attached life cycle that fires a consistent event, and so as long as you fire that consistent event, in Polymer there's behaviors and we've implemented some behaviors that make it like copy and paste this and it will wire to Hacks, but you could wire vanilla components using the same type of approach. You just got to make sure that's exposed that way. Yes. The subject of Web Components themselves, if I were to go and make a new one, how would I tell the browser how to render this? How do I include that or give the browser those instructions? So, similar to at the top of the page in those individual elements, right? There was that import spec. This is a static page saying, well, import that element I'm going to use it. And so with a lot, you can actually build full apps out of this. We didn't go in any of that, right? It becomes a single tag and it's called my-app. You import the reference to that and make sure that my-app gets on the page and then the rest of the tree will unpack and you'll get all those element definitions imported. Cool. Thank you. Yep. Which is what this is. This is actually a, you know, this is a little Polymer app that runs our course content in Arts and Architecture. This is Drupal-powered and obviously my node loads are just as fast as all yours, right? That's the thing to be able to click around this fast in Drupal and experience stuff obviously. So is that the reason why you guys created a video playback that could play back slower than normal so that people that live at human pace can actually keep up with what you do? That's exactly it. We'll record Brian and I'll give you a version that we can put on half speed. Yeah. So I try to follow what you do pretty closely but I have, you know, another job and a thousand sites and stuff I have to do. So I'm sure you've gotten with implementing this at Penn. So is this, is this in Elms now and people are using hacks to edit content? Are you using this on your actual like brochure sites at this point? I am used, so that's a, that's a great question. I am using this on my personal blog as of like a week ago because I've been, as you say, you can't keep up with me because I've been drinking a lot of coffee and sprinting like crazy to get to this point right here. So I'm just going to start with a question in a week about who we roll this out to. It is actually in Elms but only available to admin users at the moment like me and Nicky not our instructors or instructional designers. The plan is within the next three or four weeks to start exposing that to instructional designers and instructors in a production environment to produce production output. But that's hacks. We have been slowly adding web components. We've been rolling for over a year now. Okay. But that, that's kind of what I'm, what I, what I'm going to, so you, do you guys have a usability lab there? Have you run this through to actually do like the retinal tracking and that to see how users actually react? To hacks? Yes. We have not. No. No. So, if that was available, would you be available? Heck yeah. That would be fantastic. Right now, right now is, Nikki says, I don't like that color. And I say, I just tried to make this post. Ryan puts in colors that I hate and gratuitous centering and gratuitous capitalization just to make me work on something new and take me away from other stuff. Create a fire and someone will have to put it out. Right? What's up Chris? Hi, Chris Weber. I go by Cosmic Dreams on Drupal.org. I just wanted to mention that if you saw stuff that you like, you want to take part in making the Drupal 8 version of the Web Components module or whatever the hell we just saw. If you want to take part in Web Components in the Drupal ecosystem, please come to our BOF tomorrow. It is at 4 2 15 2 3 15 tomorrow. Yeah, it's a BOF. What's a BOF? It's called the Web Components Summit. Where we're going to try to figure out what we're going to do in the Drupal sphere with Web Components for the rest of the year. I called it a summit. What time is it at? That's at 2 15. 2 15 p.m. Oh, where? Where? Oh, where? Room 102A. Yeah. 102A. Yeah, we actually got a room instead of a couple of chairs. It's really great. Also, I'd like to recommend that if people are interested in Web Components Summit, Web Components and the coupled Drupal to please consider the D-coupled Drupal Summit that's going to be in New York later this year. Thank you. Yeah, that was an awesome event. Hi. Hi. So this is incredibly impressive. My first thought from the Drupal like security team or e-commerce, basic appliance, access control, all that stuff. Obviously, you're pinging the back end of Drupal and relying on its access controls to like sort of prohibit certain things from being sent and sanitized and all that. This seems like it would bypass almost like input filters like that would scrub out JavaScript and everything else. Like how does you know would Yeah, my, you know, like if I had an editor and I could all of a sudden like I'm not a certain, just maybe authentic user but not an admin, I want to scrub out their ability to add a block to the bottom of the page or for example. How am I able to limit all the number of things, the web components I have access to based on my access control? Is that something? Yeah. So right now there's probably enough logic in the web components module you could use some alter hooks to just throttle what tags are available to the screen. Okay. It's then the definitions, right? Yeah. Because at some level you can't because I can inject into your website and consume it. Yeah. But yeah. So it saves back to like, you know, a text area. So if you have an input filter that says valid tags and a valid tag is these five web components, right? Then you can throttle it that way. Now those five web components could get poisoned. You're right. Yeah. I'd be very interested in sort of auditing from a security model because I know especially e-commerce, HIPAA compliant and other, you know, trying to watch out for information disclosure that this is like amazing, but it's also seems like it opens up a lot. Yeah. In a good way. But also kind of like, oh shit, we don't want to disclose like private credentials way. It's so deep. Yeah. Yeah. So on the plugability side, yeah, there is a there's a CMS-hacks tag that is super like, here's how you implement hacks. However, there's hacks body, which is all the tags by themselves. The way that I did the state management, everything reports back to the store, even down to the individual pieces of the interface. So the hacks body tag, there is no concept of a hacks body until that tag is on the DOM. And it sends up an event saying, hey hacks, I'm the body. And everything says, hey hacks, I'm the panel. Hey hacks, I'm the area where the custom elements get auto loaded. And so you can swap out those pieces or just steal our design assets and make a lot of money off of it. However, however you want, but yeah, that's definitely, we need help. Part of this is, oh, wow, this is so neat and I don't sleep and this is what we put out there. But like, the other part is we need help. Like, I think we're really onto something big with this and we need help from people. So please help us. My blog, my personal blog, you mean? Oh, if you go to hacksthewweb.org, that is, or you mean these other sites, these are all running locally off of my computer. If you, if you go to steam, if you go to steam.psu.edu, you can see a little not Penn State, Penn State logo that is a component that we made. Illegal logo there. We don't talk about logos or phones. We don't talk about logos or word art. We lack thereof. So if anyone has any questions, please bug me and Nicky. Otherwise, it's past six. I could slow down the pace in which I speak for you, Kevin. That would help for like the next hour. Win. Boom. That's why it's fun. That's why it's fun. High five. It's just called. We need to have a heel chew. Here, do you want to see the, here's, here's how it worked though. This is BTO Pro mode, right? So we're going to make custom elements. What do you want in your element name? New component. So we make tooling on top of our tooling. So then you want to make a new component called like Drupal-con. There should have been micromachines. And then it just goes. It just runs. Okay. All right. And then we say Drupal-con. All right. So this is polymer, polymer tooling. And then you get your documentation site, except if you run our tooling, it auto-wires for hacks out of the box. So then the elements we make just already have hacks, data binding. We're going to teach hacks in the near future how to data bind anything that's in the DOM. Because we'll go, oh, it's your custom element. What are your properties? Oh, okay. All right. It looks like it's a Boolean, because you said true. All right. I'll just present this check box. Sure. And you could do that. Because you could put a hacks body tag wherever you think it belongs. And then this is what you can play with in hacks. And we want to make a, so I want to make a component that hits the Drupal back end called like New Note. And then asks the Drupal back end, hey, give me JSON schema. Renders it, validates it on the front end in hacks. You hit save, event goes up, saves node, replaces it in place. So I want to start doing in-place node operations. Completely decoupled. And render on the back end via that token type of a thing, right? And say, hey, now, token load this, switch to this display mode, token comes back in, comes in place. At Baltimore. So we had a conversation at Drupal Camp New Jersey three years ago in which we came up with the idea for this. And we looked at approaches and we were like, there is no way to achieve this thing we want to do. And then at Baltimore, did you, oh, so you went to Baltimore? At Baltimore last year, we had kind of an epiphany of like using web components just before getting there. So we just started making a ton of them. And we did talk about hacks there, but it was like, at that point it was, we can put the editing experience into the component. And then we're like, this isn't sustainable to do it this way. So then I went and refactored and was like, oh, I can use other tags to provide the editing. And then you can just tell me about yourself. So it's been pretty hardcore development for four months. It obliterates the time to make things. Like it's... Yeah, it's ridiculous. And it's like, some of it is like, I try to do these demos in a way that's not like, I am the best person in the world. Like the approach is what is just devastating to workflows. I built a grade book for a faculty member in two hours. Why? Because I have a network of systems that serve up JSON. And I said, oh, well, shit, I gotta put a picture. And then I just go to webconvodes.org and search for avatar. And then I find that tag. And now how do I use the tag? Well, I already have the API. And then I import the reference and then I put it in place. And now, I mean, it's utterly insane what we're able to build. Every modal that we make is a tag that's called like LRNsys dialog. So I don't think about accessibility. I don't think about contrast ratios with those. I don't think about stack order context. If I solve it for that one tag and implement it the right way, then every time I go to use one of those tags, stuff flies out. We never do it again. Yeah. And it's so hard to... Have you looked at webconvodes before? I've been like, oh, that seems neat. It seems like everybody looks at webconvodes. Oh, that's cool. I don't know why it hasn't caught on more like other than you do need to account for, you know, polyfill type of stuff. But I mean, Google is using this on YouTube. The new Google Sites platform uses Polymer rather. So I mean, they're pushing this out to major applications used by everyone. I think there are ways to achieve this. Yeah, I mean... And even the polyfill, especially since now Firefox has increased performance, you do get a time to first paint penalty. But we get that on any app. You can solve that. You put up a little loading thing and dither the interface in. And now the JAWS works with Edge. That is a big deal, too. And JAWS is losing dominance in the accessibility world. IE can pretty much die in a fire at this point. Because that was one of the last big holdouts for us. Yeah, these go back to... Technically, you can go back to IE 10, but you start fighting with like, why the hell am I doing this? IE 11 is pretty easy to support. But again, you don't really need to... Firefox causes the most problems. And so does Safari, just in some of the... And it's specific to hacks, just because of some of the way it triggers events in different orders. Yeah, it's... Ridiculous. It's just the approach that's ridiculous. If I wanted to make that selecting the text thing, I don't even think I showed that, unfortunately. I can select text and inject a web component inline. I could make that its own component that works anywhere. And then all the data binding of knowing what the hell's selected that I spent weeks on. I could just... We could just start repurposing for other projects. We could take our grid system and... Yeah, the grid system is edible. Yeah, yeah, tell me about it. Like, how much time you spend... Like, I... I have this paragraph, because they have pretty much right... And I'm running actually, you know, for using paragraphs to reuse it, but then it doesn't work with some other stuff, because you have to... I mean, I think there's a really powerful combination between web components and the hell's the component library? Pattern Lab. Pattern Lab. If you did, like, a one-to-one... Yeah, so that's a problem. Because you can just haul... With the components, you hollow out your templates, basically. And then the API... It's basically, like, as if Pattern Lab, you could just use that as development instead of... Yeah, that's it. Okay. Beautiful. That's awesome. Are you guys presenting it all on Philly Tech Week at the end of the month? Philly Tech. Interesting. Yeah. So, Drupal... Philly's Drupal Camp. The first Friday of Philly Tech Week. Philly has a two-week spring of technology talks. So, guaranteed to everyone across the board. Most of the stakeholders in the Philly market are usually Lifesigns, Hydrate, Nonprofit, and a ton of secondary-end stuff. So, you know, it's definitely a use case to pitch and talk about it. Are you talking end of May? Oh, end of April. Yeah, Friday the 27th. What do I have? Like, our call for talks is officially closed, but we left spots of... Oh, you know what? I can't personally. But that's... My brother-in-law's wedding is that day, so I have to watch my kids. Unless I can bring them to the talk and just run around. If you can turn up this part of your performance. Correct. That was trivial. I mean, that was... I actually have a prior commitment as well. I mean, and backdrop and all the other integrations weren't there. I said, like, oh, I'm working on them, but like... And then the settings pages actually you plug in the API keys. It just says, like, hey, give me your YouTube API key. And then it it generates the rest of the stuff. And then you can extend it from there. I made a video hyphen player tag that figures out where you what source you just put in. So it figures out if it's YouTube, SoundCloud, Vimeo or a static asset. And then it'll configure itself. But the video player she's making goes into that or it'll replace it completely. We haven't decided yet of which. Oh, yeah, yeah. Yeah, I haven't even gotten into the API side with that because we're a little weary of tying to... They changed it, so... Which is how JW got to the point where they... So we, I think our other secret plan to take over the world is to use Contenta as a just pure routing system, like an app store. So I want someone to log into that desktop app that I'm glazing over entirely. And I want someone to log into that desktop app and then do an OAuth bind to the app store, which is a Contenta engine. And then we plug in the different credentials into Contenta. Like, hey, there's a thing called YouTube and there's a thing called this. And then someone can log in and type YouTube credentials, click to do it, do the OAuth, do the, you know, like, yes, I authorized this. And then Contenta holds that since back at JWT. And then we broker calls between Contenta and headless desktop hacks so that people can author content anywhere in any system. Yeah. Or I do that drag-and-drop, right? And it goes, oh, this is a video. Oh, and I see the YouTube API data's in there. I think people in WordPress they could have the same syndicated content in the same way. And we're going to start doing static site publishing via that app. So, like, I'm not talking about that at all. It reads off on a file structure called GitBook so you can generate outlines of content, edit them via that. It saves diversion control, pushes up to GitHub automatically. And then if you could do, so you could decentralize authorship basically. Like, I don't need to integrate with Box anymore. So I'll start disabling all the integration points with Drupal until Drupal is basically just serving up. It's just a data storage thing. It's not going to store files, it's not going to store anything else. If my university adopts Box, then we do an OAuth integration with Box and then drag-and-drop a file. Hey, do you want to throw this to Box? Yeah. Hey, do you want to use the Box-render? Drag-and-drop. Drag-and-drop uploads, yeah. And into placeholders. Then you can add placeholders to the interface and drag-and-drop into them and it will know what to target and replace. And basically it just is faking the VAD and upload functions, which I can't believe actually work. Well, I haven't invested in that yet because I want the next step is her responsive grid stuff. We're going to make grid play a blocks tag. And you're going to put a blocks down that's going to use her responsive grid system to then add those into the slots. So it's like, I like to create the problem to then go, okay, well now how would we solve this that way? So then you would take those elements and drag them into that little mini preview window and hit save and it would stamp it down. But basically it's just stamping down her grid system and putting the items in the right place. I'm not sure about how I want to handle drag-and-drop. There is a grid listing element, but it's very specific. Like that starts to get super specific. Yeah. Yeah, base here. Well, that's true. Yes. As far as architecture. So, um, do you have our contact information? So, pink. I'll hang you guys. Yeah. I don't have a card. I do. Michael Potter, who is not here also may be able to. If we're not able to, Michael Potter might be able to. Because he's been also has been working a lot on this. He could totally. Oh, yes. The other two. Nope. Just Evil Genius. I'm all for mitigating human error. But if you want to help it. Oh, yeah. And the responsive utility, you can not only say that it's something's relative. I did get I was able to specify binding working into you know, I might have all break points but I wanted to override them because of the layout of the controls. Once you get slot binding, then you can write right inside the guts of other tags. If I had enough time, I would go over because there's always background knowledge just to get to that point, but like the code editor tag.