 This is a Spotify embed tag. It is a web component. It's open source. If you're a front-end developer, and obviously, Lori, you're a front-end developer, you can just go and download this, and then you can put it into build routine. And outside of the build routine, you're going to get highly compiled code that is completely unreadable, but you know how to do all those things, right? That's right. So imagine I get hit by a bus, and I want you to be able to put Spotify on the internet. This does no one any good. Now, there's millions of bricks in the standard that's underlying this, but if it's sufficiently complex, we can't empower anyone. The last conversation around minimal computing, there's an interesting platform called Wax, and then it's kind of brushed over. Well, once you have all the technical skills, then you can totally just use Wax, and it's easy. That's the segment I'm trying to solve. We can't just keep punting and saying, well, if you understand databases, then you understand WordPress. I saw that with the Drupal community for a decade. They have hellish usability, and they just hide behind, well, I mean, it's a really hard system. I joined that community to empower other people, not to build huge multinational corporations, and that's largely what that space is. It might be used by 8% of the market, but it's enormous. It's got billion-dollar-valuated companies in the space. Their focus isn't on empowering the people in this room. It's on keeping the market hold they have. So where does this come back to play with our Spotify embed? And this is the only look at code, hopefully. A Spotify embed tag is fundamentally a class coming from a single JavaScript file. So unlike other component architecture, like React, Angular, View, if you've heard those words, you need a whole ecosystem in order to leverage those technologies. They are compilation on top of the JavaScript standard. This is baked into the browser and extends from HTML elements. So effectively, all the tags that you use in the page, does anyone ever question if a paragraph tag is going to break in their site? A strong tag. Okay, how about Blink? Blink we definitely would argue about. But you don't question those things. That's the ground that we all walk in. You don't think about it, right? Until, of course, there's an earthquake, as it was five years ago in this area, but we don't think about these things because they're so low level. So what a web component is, is developers' ability to make new HTML that rides on top of the HTML standard. So if you think of the video tag, the video tag took like five years, and then several years after that to have an uptick in adoption, and suddenly we don't have Adobe Flash Player anymore. And you might see that as the natural evolution of things. This is where I'm coming from. All of this cruft that is WordPress, Drupal, all of this stuff that has this huge layer that we just go, you just learn a whole ton of technology, and then you can leverage those tools. That's the type of revolution I'm trying to take out so that we're just empowered and can build cool and interesting things. So I define properties of a Spotify tag. A Spotify tag is then made up of styles. These styles only work in the Spotify tag, and then HTML. But now when I put Spotify tag on a website, it interprets and runs this HTML and wires my properties into it so I can have an easy-to-use API. It's everyone following. If not, you're going to be really bored for five minutes or whatever. All right, then I made an editor, and the editor is called Hax, H-A-X, which follows the web component standard. Hax doesn't have any built-in functionality other than knowing how to edit HTML. However, if an HTML tag, web component, has this schema associated with it, then Hax reads the schema and builds an authoring experience out of other web components, and then when you modify things, you're just updating the properties in the code so that when I save, I'm always saving highly semantic, very simplified HTML, but it is still fundamentally HTML, which means it works anywhere. So, it's hard to envision works anywhere, but if you get that in your front-end developer, then sweet, you can use it, or you can go to our docs and you can see I can plug in the Evil Morty thing here, I can tweak the theme using this API, and I could empower someone that's slightly more technical to basically tweak these little variables. And if I copy this HTML and I throw it into, in this case, a campus press instance, as long as it has the definition of that Spotify tag. So, I want to make sure we're clear. There isn't just magic, although we do call it the magic script. There isn't magic that suddenly every website out there knows what the Spotify tag is. There's a script similar to how you would get jQuery from a CDN old school or use somebody's cool audio library, things like that. If you reference the script, it points to the Penn State CDN and you get access to the, I don't know, I think it's 935 plus tags that I've made, because I largely haven't talked about the things I've done. If you follow me online and you think I've talked about the things I've done, I give very little snippets because we have a very small team and I don't have a dedicated multimedia team, but those constraints have brought about incredible things. So, this is a video hyphen player tag working in a WordPress site. It was not engineered for a WordPress site. It was engineered to make the web better that brings up and has this, a higher playing field, raises all ships. And, oh, WordPress is one of those ships, so this stuff works there. In fact, yesterday, I tried to throw out the idea of progressive enhancement or progressive decoupling. If you're working in WordPress in Drupal, so was I like three years ago and I gave some super crazy rant to Laura and a company at Domains 2019 and I still only had like one little tag on those systems, but because this approach is just HTML, you keep stacking. You can build anything this way. So, I can build a video player or I can build a modal and this modal happens to be used by the National Archives, Truman Library. So, they have a NARA menu bar links, which is a custom element that they made. It only works on their site, but they ran the command to get our simple modal. A highly accessible click and drop in, copy and paste this code. You have a modal. You don't think about the accessibility considerations and if there is an accessibility issue, it has that singular file to go back. So, we have the accountability to be able to resolve easily in a cross-platform way. So, you don't work at the archives, awesome. Where our experiments started is with an icon. Does everyone use icons on their website? So, my SVG icons don't play with your gobbledygook, CSS-based icons don't play with my font. Awesome icons don't play with my Twitter Bootstrap icon. So, we made an icon library. It's the first component we made. And so, they're simple icon and it's amazing the world that unlocks when you have a thing that can be nested in anything and build up from there. So, I've got a simple icon. Then I can make a button and the button wraps the icon. Now, I have a whole icon definition and I have the button. If I need to make a menu, then I have a menu that has this icon button in it that has the icon and I just keep focusing on that one little piece but leveraging my whole Lego set. Imagine Lego sets where once you built the thing, it didn't immediately get broken by your kids and then you just pay $40 for this and you broke it. It just stayed that way. And then, I could click a button and have another copy of it and they're by reference. So, once I fixed the original Lego set, all of my other Lego fleet in Benny's Army and Lego Movie 2, they're all attacking simultaneously and getting the same functionality. That is the type of exponential growth and scale I've been able to hit with this approach. So, it doesn't have to be icons. Let's say you want to be sarcastic. Very sarcastic. And you're going to type the characters and you're going to do the up and down text. Finally is that I could make a tag called more sarcasm, throw the text in there, interpret that, put that on a web page and now we get trolley text. Or memes. I'm going to go get a meme. I'm going to go to a meme generation service. I'm going to type in the stuff. I'm going to find my image or we make a web component called meme maker. It takes in a property that is image URL. It takes in top text and bottom text. And I can update a single HTML attribute and it will update the underlying source. I can copy that and let's say throw that into the original code pen that you didn't know that I was showing you. And this code pen has the literal, it says four lines, four line copy and paste that you can put in any system. And now there is my perfectly portable meme image. I also, what did I have in there? Before Spotify embed, right? So I could throw my Spotify embed in there in the exact configuration I had it previously. Yeah, surely that. All right. So don't need to show Spotify embed. We've got memes. If we have memes and we have GIFs, did you know that when someone posted a GIF into Discord just a few minutes ago and it's of Jim Groom dancing on the cover of Time Magazine for some reason? That is an accessibility error. It is an auto playing piece of media. GIFs are fundamentally inaccessible unless you account for them with libraries and then if it's a jQuery based library well it has to play well with my WordPress site that has this jQuery based library. It's a nightmare to solve that because it wasn't accounted for initially. We have an alley GIF player. This has taken a screenshot using a microservice of what the GIF is which is a fantastic GIF. I can't believe you're still down here making GIFs to it. Right, if you get this reference. So it won't play until I actually engage with it to play. We can solve fundamental low level accessibility issues with this approach. Or, does anyone recognize this conference badge? This is a very, very small piece of technology. I was able to teach my students in a semester to do this. So this is their work. We took as inspiration something made of the gobbledygook of the web and of SVGs and that's... I'm not saying that stuff's bad. We need to get there to get to this future that we want to be at where stuff just works and things are portable like water. So event badge. They made that. They wire things in to certain attributes. There's HTML underneath and then those properties get wired in and we get the interpreted result. It's by reference. If it's inaccessible I can go and leverage and rebuild this over and over again. Speaking of inaccessible. You know about color contrast, right? So you're going to go to the training that's given by the team to teach all your faculty to use the styling that they want so that they can bold that text but make sure that it's hitting WCAG 2.0AA whenever the color contrast changes and it plays nicely with dark mode in your LMS, right? And speaking really fast because there's a lot of coffee but there's also not much time that just did all of that for me. I didn't think about it. If you watch the text when I go into dark mode with this it's flipping to a 2.0AA contrast ratio regardless of what I'll put in so if I set the color of the text as orange this is guaranteed to solve this problem. No matter which one of these I put in that is a low level baked into the element consideration that we've gotten I think 93 of our elements. So if you want to tweak the color, you do but immediately don't have to sit there and go shh, is that inaccessible now? Maybe you want to get into pedagogy. So you want to learn about sharks. My kid loves sharks. Oh, the Great White Shark is 15 feet long. You want this go player. If it's things that I don't talk about publicly like a headless gradebook system that's individualized, leverages all the same tags that you saw before and if I hit this time exponentially that we can focus on all sorts of things because I didn't have to think about how we were going to do icons in the system. I didn't have to think about where this is going to get deployed. At the end of the day this is a great book light tag and if you dumped it in in the same way that I did in the editor before I'm not going to put in code pen it'll like look hellish it would just hydrate and you get the entire interaction pattern. So with that we can keep building up. This is a project called Hack Management System called Hacks. Actually it's working with Hacks Leventy or sorry with Eleventy in a project called Hacks Leventy. Everything you're seeing here this is roughly 10,000 custom elements on the page. This thing will load like lightning no matter where it is because we are at a spec that is so close to raw browser code that this stuff runs extremely quickly and is very small overall. This is using the University Libraries so this is for putting I forget the name of this format dbpf files online so this is a play from like the 1300s that was translated into XML file and then you just give graduate students the XML file and obviously they can read the XML or we make a web component that can play the XML and outputs it in a sustainable way so that we can have a conversation around this play interactively. That's a web component so I have a home page banner so I've had one in a home page banner on any other website anywhere on the internet. I can use that for four line script and now I get this home page banner with a certain API. They have used our system extensively to build really big online courses using HACCMS so this is a biology 110 course. It's got learning objectives because you all go to the training to lay out the learning objectives card to communicate the objectives effectively in the same visualized color and the icon that I wish that I did or this powers my blog which looks like garbage now because I haven't focused on it because this is a course management platform sort of but it's mostly just writing HTML or it's our documentation engine or it's a different documentation engine with a copy of VS Code running in it. You have VS Code on your browser and you can just say make me a VS Code instance and copy and paste the code and it's there. Images that's just another link. MathJax because I have to say that we support MathJax so yes we support things like MathJax but we get all the way up to this is my course running in it and my course has students learn the underlying tech stack that I just ran through in 30 seconds to actually engineer more parts of the system. You are seeing the version on Reclaim Cloud, Penn State's platform as a service instance which means anyone can just log in and they get an account and they get their own copy of this tech. We'll roll out this version shortly. We have our RPG character. The RPG character is you and I told my students I want this to feel like a video game. It needs to be fun because web development sucks and building websites sucks so it needs to feel fun and interactive and engaging and yes it has silly sound effects so we're going to build a course and we are going to create our own although actually I won't be able to show it in this amount of time but we have the ability to import and take a DocX file and convert it into a fully functional website. Our old platform any other existing hack CMS site can be ingested and then remixed into another one Evolution which is an internal format. Those are literal like point-of-the-url and it will use web components. My hat is a web component. The progress bar is a web component. The explosion, the sound effect management is a web component. The toast is a web component. What you're seeing now is a lesson and this is actually now into building a site using hack CMS so by default we're a multi site management tool. If you go that was a lot of work to add a page by adding that one page there and hitting edit and then searching YouTube in context and we search YouTube for hacks the web so that you understand a little bit about hacks the web the chaotic good from 2019 up there it is good YouTube was slow not us so all of that extremely difficult work that you just saw me do right there. If I search for my site again back to our minimal computer work that you just saw me do right there. If I search for my site again back to our minimal computing talk and I need to download that now I have it as a zip file this is an entirely working offline capable I have everything that I just did which was a ton of work let me tell you in a format that I can throw on GitHub just copy and paste this folder output in there and it's going to run and ultimately when I hit that add page button before it is making a single HTML file that just has the body of there's a page break that's at the top of the page that has some metadata what the hell is the title of this page but when I put both potentially correct so we should be able to support multiple correct answers obviously answers on the question you're right you're right little question okay what is the question alright and it's definitely not things but so I could insert an item below here and now I'm about to paste a reference to the link which then we auto detect but I'm going to hit that so I'm going to paste in and what just happened there was on the paste it detected that it's a single line entry it is a link to a JPEG or GIF or video in this case it was a GIF it just sent it off to an image conversion service to snag a screenshot of the GIF because I don't want you to violate accessibility with that copy and paste so this is that Jim Groom image in the GIF player let's put him in a column layout instead so he's over there and I can save this and we can see Jim Groom dancing when I click but otherwise he's not and we can see is he full of himself and he's a good dancer absolutely and we did a great job again re-leveraging just those other animations and processes from before everything that I'm building again all the time this is HTML I can copy all of this throw it into that code pen as long as I have the references to those tags I get an identical output and experience I do not want to be the next thing you're tied to this is why I've got my jokerisms I'm only burning my half of the money the whole point of this is not to just build some other ad-vomatic piece of garbage the 20 years from now version of you is complaining about I want to solve these problems for ever no matter where they would occur because we have the standards to do this now sorry so there are other aspects to the system like let's say there's NASA in context and that just threw an image in I can always tweak whatever the settings are just a component so I get things back to this one place I've got the form because we've got schema and so if we have an issue with these forms from a usability perspective we're doing this gap analysis now I update the schema we push out the code no one has changed any of their media or things in production but the definitions have changed so that now when the new version is out there and I hit edit oh this is what we can do with this now we have to be careful and not fundamentally change an API but we go through a lot of work to make sure like well what is the scope of this thing part of this is coming from we've done a lot of ontological work to say this is how we envision pedagogy in system building and so if you're familiar with Elms this is actually going to end up looking like an Elms logo in the end of how we relate these concepts but we're doing a gap analysis currently where well do we have an effective way of doing a demonstration of technique do we have any tags that could be used for coaching and then you'll actually have those things tagged in your drawer of available components right because I want to get out I can search for I can put a table in and then if you're still back down an editing table code with TRs and TDs I've failed and so we have a table editing web component but the output of the table editing web component is a table it's not a whole bunch of utility cook that will require to use Elementor forever or makes editing a table a lot more like not word what is it's a microsoft I can't spell product right if I want to do row striping styling condensing these rows neat I cannot tell you how fun this next part is so there's a big Merlin button is anyone used alphard app or spotlight or anything like that so basically took inspiration from that combined it with a prototype that I don't actually search YouTube we want to make publishing like water extremely accessible the Merlin widget it's a web component the pop-up it was the same pop-up that was available on the Truman Library website this is a transformative standard if we think semantically and work in this way we have an incredible amount of creative ability at this event and then we all get into skipping that little part of the front that's like hey there's a ton of setup in order to use this we go well but once you get over the ton of setup then we can have a conversation I want to eliminate and attack that setup part all of our systems are made out of HTML we don't sit here and argue over well Laura's paragraph in her site isn't going to work in my paragraph and we can get to that same point if we have the same Lego bin beyond that to play with so we've got some some other features of Merlin obviously files we have an insights dashboard not positive that part of work yeah good it did so it analyzed that what I've written so far is fourth grade level you've got IPS's or we do or instructional designers and faculty that have to then go and test the links in every single course we can write stuff that does that automatically and provides the feedback report and then identifies exactly where those links are broken for sustainability we can search the content mostly content and media primarily based on the ways that Laura Laura expressed in some issues like years ago we can administer the outline of the entire site so if we want to add a whole ton of pages I can add a whole ton of pages and every day I really had a great time at Jen's event and the documentary they're filming is just brilliant absolutely brilliant so I wanted to kind of sit back so that's a web component that my students made in class it took three weeks I'm just getting good at teaching so what I'm showing you this is not like here's the product and we're done like if I wanted to switch this to be some other design because we have other themes hidden within here and I make other themes hidden within here and I made this one recently if I terrible themes so if I want this to look like the website I made in college that was my production company you can make your site look like Acid Scorpio Production Company