 Hello, and welcome to the final session of the Open Publishing Ecosystems Flex course. We're super excited. It's been an awesome course so far. Thank you all for sticking with us through to this fourth and final session, and this one is going to be super fun. We've got Brian Olandijk here, the founder, creator of Hacks, to show off the awesome project that he has, awesome tool, and just wrap things up with a super robust piece of work here. So, Brian, if you could just introduce yourself a little bit and tell us how you came to Hacks and just kind of about it, would be great. Sure. Thanks for inviting me on. I love the intro, by the way, just all the scroll by, infinite. This is very futuristic, even if it's meant to look like the 80s. So my name is Brian Olandijk. I work at Pennsylvania State University in the middle of Central PA. I went to school here, went to grad school, did some weird research as far as the spread of open source technology, why and how it spread, usually around Drupal. I came up with something which is this like snowflake sort of thing, it's called Elms, which is a project that I used to contribute to and work on primarily, and then spun out of that came this weird thing with these shiny stickers and little cool eye patch people called Hacks. And so Hacks is an attempt to solve web publishing as far as ease of use, and getting more voices to participate in the web. This kind of has all spun out of building systems for Penn State for the last 16 years that are around delivering online course materials and making it easier for faculty to do so. So really lucky I get to teach an IST course, so I teach my students how to make the system that we use in class, which then they contribute to that feeds back into the features, which then feeds back into them. So I've got this awesome infinite loop going. Which is... Yeah, and it... Sorry, I mean it. Sorry, I was just gonna say that's just like, you know, an awesome example of openness and open pedagogy, and it sounds very organic in this kind of work. Yeah, especially why not contribute to that ecosystem, especially if you're teaching... You're teaching web development and they can learn about web components and the stuff that makes up the system along the way. It's just... It makes a lot of sense. So what is Hacks? Who is it for? What is it trying to do? That is an awesome question that everyone is trying to answer, including me. So Hacks, fundamentally, is a HTML writing system. It's made in a unique way, though, unlike anything made previously. So if you imagine large-scale web application, let's call it Bookface, and Bookface needs to have a consistent look and feel, needs to have consistent user experience, and it has to be consistently developed by like 200 plus people. So these projects, things like React that help people construct these bits of UI, structure them all together so they can put out a unique experience like that, primarily JavaScript driven. At the same time, Google is going about doing something like this as well with Angular, and so we also have UJS, we have Svelte, we have these ways of managing bits of UI. Out of all of this type of progression of the web comes a new standard. And so if you can remember, way back when, until like 2008, we don't have the video tag. We have YouTube, it's powered primarily by Flash, we've got Homestar Runner, which is amazing, still is, but you can't get to most of the content on it anymore because it was made in something that wasn't a standard. And so the video tag exists so then we can stream video on YouTube and other platforms, but a ton of engineering went into that tag at the W3C spec board. Out of those conversations and out of this permutation of like, hey, we need people to be able to build these things, came what if people could define their own new HTML tags? Because if developers could define new HTML tags for new interactive bits of web, we wouldn't have to sit here in like five-year board meetings to come up with that one new tag that everyone wants to use for like a collapse field set. And so the Hax editor is literally h-a-x, it is a new HTML tag that you can ship anywhere because it's such a low-level construct in the browser that is guaranteed to work in all browsers and platforms. Because it's an HTML tag, then we can stack other HTML custom tags in other custom tags. And so what we used this standard for at first was we had Elms, we had online courses, hey, we need to make them look and feel a certain way for artists online. Hey, we need to keep up with the times and make these things look more interactive and so the web components standard help us just kind of like organize our DOM to be perfectly honest. So we had like nicer-looking images at first, nicer-looking buttons. And then you put those images in the button. And then you put that in a modal, and the modal is also a component. And then you put that modal in a flyout, and that flyout is also a component. So we were able to keep building on top of this infinitely expanding LEGO set using all past work directly. Unlike tooling that's in like a reactor and Angular ecosystem, it's kind of like I get a copy of it, use it, awesome. This solved this problem this one time. And then you move on to the next project and solve this problem this one time. We're treating it as if we're trying to teach the browser what all of these new HTML tags are simultaneously. And so through the process of doing this, slightly off the radar for a couple years, we'll call it a pandemic or whatever, I've got 831 plus new HTML tags, one of which happens to be able to edit other tags called hacks. So what is it is a little amorphous, right? Hacks is a standalone editor. It can work on a static page. Hacks as an initiative though, is largely around making it easier to do web publishing without a database, be able to structure material in a content management like way, but not feel like you're using content management systems. Somewhere between the 90s and the mid 2000s, the web and CMS space got incredibly difficult, uses way more energy than it once did, needs databases to be kept online constantly, you need now like 20 job classifications in order to ship like a half decent looking website and go to a third party for. Whereas in the 90s, we just kind of gobbled together some interesting divs, which I usually tell my students, my class is just dip, dip, dip, dip, dip, dip, dip, dip, interesting divs. And then we made like a cool space jam logo. And now suddenly we have a motion picture website that lasts forever. Somewhere in between the scale up as far as capabilities, that vision of the web of simplicity and forever formats that just work and you don't have to think about it got lost. And so hacks is an attempt to reclaim that capability where anybody can go and do web publishing, anybody can look in and see highly semantic code. And yes, the hacks editor is effectively just writing this new form of HTML that you can use. So we use it for courses. It's targeting people that do not know what the web is, but yet if you dig into the fundamentals of what we're building, anybody can relevage our stuff. It's published on NPM for developers. The platform is something you don't have to know anything about and download or install and reclaim hosting with a click. But to our end users internally, they log in to hacks.psu.edu and they're given the ability to make courses as of today and as of about two weeks from now, courses, trainings, portfolios, single page sites and collections of sites as we expand our theme universe dramatically in the next few weeks. That's really exciting. So to me, starting from a basic of the way we make web tools is not appropriate for long-term sustainability. Maybe small teams wanting to innovate and do something in a particular space. It's not sustainable. It's kind of what I'm hearing and web components is the answer here. And you can, this hacks as a CMS becomes something that can do a lot with very little, basically, because of the tools, because of the building blocks you all are using here. Is that fair to say? Have you covered WordPress at all in any of these? Have you heard of it? We have heard of WordPress. We're not covering WordPress in this one, but I think probably most people, yeah. All right, so we'll use a different CMS than Pressword. And so Pressword has this editor. It's called Gutenbug. And it's really good at generating accessibility issues. It's great at generating block-esque code that is tied to a database intrinsically forever. When fundamentally all it's doing is just kind of click and build. Like, website tonight's software's power is that it locks you into their platform and their way of thinking. But with hacks, you're clicking and literally editing HTML tags. So, for example, we have a video player, I'll show it a bit. But the notion is that our video player works anywhere. And so when we solve the problem of a video player, we haven't solved it for our hyper-specific app or hyper-specific CMS. We've literally solved it for any web property. The hacks editor, when you click edit and you say, hey, I want to put a video in and we drop one in, it's actually writing video hyphen player. And then surfacing from the video player, asking it, hey, what fields do you have? And so when you see a form, those form fields have actually come from the video player. So you can use the video player without hacks and hacks works without the video player. So it's like on-demand hacks is going, oh, there's a source field. What's a source field supposed to be? Well, it's supposed to be either a file upload or you can point to a URL. And so let's say you paste a YouTube link in there. Literally is writing the HTML, video hyphen player, space, source equals the YouTube link. So that way when you save, you're saving effectively HTML that I would have written by hand at one point for a developer demo or something like that. Which is super cool because you're sort of decoupling, like when you're talking from a preservation standpoint, you're decoupling the editing experience from the web page itself. Like you could make your site and yank it out of the CMS later. It doesn't matter, right? The page is written. So awesome. So I mean, where do you want to go? Should we show us a little bit of hacks and what we can do with it? Yeah, show installing the version that's on Reclaim right now, I believe is 7.0. Something or other. I've been not sleeping. We'll call it that for the last three months. And in those bouts of not sleeping have been working on the next version of hacks, which is hacks eight, which is a huge UX push, which is weird to say about a project that already has pretty decent UX, but huge UX and theme push. So I mean, I'd love to just show very specific use cases because I end up talking about like, hey, you can do anything. And no one wants to hear anything. They want to see like, I can make a course. What's that look like? Or I can make a blog. What's that look like? So I could fire up a copy of the next release, if you will, locally, if that works for you. Yeah, let's let's let's do that. All right, so get that one screen. I think I have it up here. Now I'll just close the link. I'm sorry, please. So what I'm showing, you can get the raw source of at hacks CMS off of GitHub. So it's github.com slash ownsln slash hacks CMS. And as far as if there's some version of this, then it's under, I believe, tags. And we've got latest release. So at this point, 7.0.16, you should see eight there. Hopefully by the time you're watching this, you'll see. So what I'm doing is I've got that downloaded locally. And I'm running a tool called DDEV, which is more popular in WordPress and Drupal ecosystems, to be perfectly honest. But it's basically a local Docker development tool. So it's giving me a fake copy of hacks CMS on my file system. So when I fire that up, it ends up looking like this. Now for our institutional logins, it looks far more impressive. This is the institutional version of hacks, which has like glitchy letters. Because obviously you can create courses easily with hacks. But when it's local, I type in my username and we're remixing our little character. And so I don't know if the sound, can you tell me the sound effects come through before I like say, oh my gosh, there's sound effects? The sound effects don't come through. All right, that's totally fine. But they are, I can attest to that they're very good. What you're looking at is kind of the fusion of in-class pedagogy and design requirements and things that we needed. So about two and a half years ago, this overworld dashboard of hacks just was like this very blog gray bar sort of a thing. And then of course, making a highly opinionated design to make a video game vibe has its consequences on perception, but this was a student design project. And I tasked them with the challenge of take this thing that looks that lists courses and let's make the initial experience of working with hacks feel like an 8-bit video game. And the reason for that is everybody can go and pick up a Nintendo controller and play. And again, going on those themes of like we move fast forward to like Xbox, my dad and I used to play video games all the time growing up playing Nintendo. And then once we get to that controller, he sort of looks at like, I'm good. So we wanted this to not feel like web development. And so I'm going to start a new journey. Now in the version that's currently out there, the only button that's lit up is course. And so you can see I've got an additional four trains here that we'll show off today, but I'll start with course. There's also the ability to import from stuff from other spaces, which gets pretty trippy. So let's make a course. And I'm going to call this course reclaim low web. And so this was all like this entire UX flow, the redirection, the little character, all of that was made by a student team at Penn State. Working with me, obviously. So when we land on a new hack site, in this case, me saying it's a course, it's generated just a few container pages, if you will. So the editing experience will take place from the top. So at the top we've got, you know, the ability to edit the page I'm currently working with, or I can add, either I can add a new page below this. All right, we'll do that. We can see there's a new page. I could add a child page, which will nest one underneath, or I could clone the page that I'm on. So for example, if I go to lessons and edit, all right, nothing special there. Hopefully, and I hit save, it saves. And then I hit clone and I get a copy of that item. Now, what's happening fundamentally is when I go to lessons and I hit edit and I've used source, I'm writing a paragraph tag. You can also see that in the page or something called page break, this is kind of like settings that are managing the page we're currently on. So obviously you expect text-based operations, but the real power with hacks comes from the ability to add new blocks and work with advanced media types. So part of this is part of the UX challenge we've been trying to solve with this release in particular is it's so overwhelming, everything you can do that we have this omni bar that we call Merlin. And so Merlin got added in in version seven. In version seven, you can click and just see the Merlin hat and it sort of pops up options. Now Merlin's here is this omni bar, trying to entice you into things you can do. So from the omni bar, I'm gonna see one of the first choices is, hey, go join our community, or search for tutorials. I could type block and start to come up with all of the different blocks that are in the system and there's quite a few. Or I can hit add block and then filter down based on the available options. So like, if I wanted to embed a video on the page and click video, what just happened there and the way that we extend the hacks editor is we work on a web component or a brand new HTML tag called video player. So that just added a video hyphen player to the page. Now, if I go to, where I got this one? Yeah, there we go. So I go to this website as a completely, like attempting to break this worldview as to where things load and how pervasive content in these little blocks work. So on a traditional web application, in this case, this is Omega based, right? There's a paragraph tag, but then someone on the team with this project said, wow, the video player you have is awesome. Like it's got searchable transcripts. I can click and jump to that specific point in what she's about to talk about, right? It's got the ability to hit print. I can turn closed captioning on and off, go full screen, I can speed this up. It's got a lot of great functionality. Can we just use that? And so if we're able to feed the definition of this JavaScript based tag to their page, that automatically lets it work. And so all Hacks is doing is reading and writing these HTML tags. And then when we want to expand the Hacks universe, we just make more HTML tags, which adds to any websites ability to ingest and leverage these HTML tags. So if I fire up this, the Hacks editor has asked what the fields are. And so then it comes up with in this case, the title, right? So I get it right. And you see it live updates in the page, transformation R, it'll change the accent to pink. This also starts to touch on accessibility. You might note there, so we have an accessible color set. So we'll say, hey, let's make this deep brown. And then by toggling between the dark theme or the light theme, it's subtle, but you see the buttons and this text color all invert, right? And so we're able to pre-program in logic to solve or eliminate certain accessibility considerations without people needing to go through advanced training to know that when you change the text color, the background has to ensure a certain level of contrast, right? It's a small example of the sorts of problems that we can transform when we work in this way. So if I wanted to lay out this material, we've got the ability to add some columns, do some basic layout sorts of things there, right? I could take my paragraph and move it over there. We've also got the ability to modify certain aspects of the page itself, although this doesn't use a lot of these. I don't know that it uses tags, stuff, whatever. So a comma separate list of tags. I can say that this is, I'm gonna be used to talk about a quiz in this case, and you see there's some little minor iconography we're working with and save. And what's happening is it's just taking the content and changes and then it's HTML. So page saves, page loads, changing between pages feels like unusually fast and it's because there's no database involved. The entire site is actually writing and reading off of this one JSON block. And so the whole point of the system is to not get into the weeds and people not have to realize this is what's happening. But ultimately, when we add pages, it's just adding an index here and then it's putting a physical page on the file system. So for example, that, oh, there we go. You can see the tags, things, stuff. If I were to put in the location here in the URL, right, and you can read, this is a really easy to use block editor. And if I've used source, you can see that grid play and that has the video player in it. So this material, as you had mentioned before, is abstracted in such a way that you could break away from the system itself. It's almost like when you build something without a direct monetary incentive to do so, you can actually solve the user's problems. So we've been using this to build online courses. It's a primary reason. So this is my online portion of a course that I teach where I teach web development, teach students how to go about making web components that we use in the system. And so when I go and add some just basic text, nothing absurd here in this course, but just to illustrate, oh, topics actually was. So topics, I believe this is loading from a, yes, this is a markdown file. So this is loading a markdown file using the md-block tag, loading this dynamic outline that I actually edit on GitHub so that students can see the changes. They can fork the repo if they want to and kind of follow along. But then that way, if they come to this site, they can still get to all of the same material, effectively live updating this block of the site. So some other spaces that look radically different, well, we'll come up next, but. I'm gonna interrupt you for a second. Yeah, please do, sorry. Because that, no, no, but the, it's cool coming off of this from the, one of the previous tools we looked at here is Docsify this, which is effectively doing a similar thing or the objective is to do a similar thing is what that markdown tag does, right? Which is remotely loading markdown content. Don't have a point other than that, other than to draw a point of comparison between these two tools and think that it's cool. It's cool functionality. Oh, and I do actually have this in here. Okay, so then, and markdown is an interesting one because we'll have faculty members who prefer to work in markdown, which I don't have any problem with to be perfectly honest, but when it comes to like design consistency on our end or even just simple things like URLs or saying, hey, we've got this online course, it's gotta be delivered through a whatever.psu.edu address. Small design decisions on their part that help improve their workflow like working in a Git repo suddenly become a huge hurdle to the institution, right? How are we gonna move that material from what you're working on to what we're doing? And one of those tools where this has come up is Notion. So we've had a lot of people starting to pick up Notion. I haven't used it yet beyond just playing with it initially, but it is pretty awesome as far as what it enables you to do. Let me see if I can't find a, I might have a link to a Notion based repo. I'm not sure if I, if I do, then fictional, oh, there it is, okay. So one of our faculty members, Ben here, he works in Notion. And Notion has the ability to export. And so we get export Notion and you see we get, oh, there's an image there. I'm looking for files, files, there we go. So we get markdown files, right? So this is just easier process wise for him to go and work and build this out because he treats it kind of like manuscript or script management. This is over several months. So what we did is we said, well, markdown isn't that different from HTML and the repo structure here is pretty minimalist. So instead of starting a new journey and then having to copy and paste all that material, let's import from what his repository is. And so we've got a lot of different ways you can import. One of the first importers that I ended up writing was a doc file. So we can actually go from a doc file to the web via click, which I can show either as a full course or as of eight, you can just start dragging and dropping files in and they'll just start converting to HTML. But so if I point to that Notion get repo and then we wait, we wait a little bit, there's a little, okay, that means it went through. So what it just did was it just hit the GitHub API associated with the content of that repository. Then it took the markdown files and recalculated what the structure should be if it were to be done in hack CMS, then it's gonna go and convert all those markdown files to HTML. And then it's going to import those pages of HTML into hack CMS. And so what I have now is that entire repository but here in a format that I can easily migrate and deliver or go in and edit because now it's HTML. I don't want that image in there anymore. It's awesome. So. Well, and again, again, you know, not only the import but it also, I like it because while I do think Notion is a cool tool, it is pretty locked down proprietary, right? Like this is a really interesting and way to get content out of Notion that A, now you have your own copy, right? Like literal files, but B, you can still do stuff with it. It's not like, okay, now I have 30, now I have 300 PDFs that are, you know, only something I can ever look at and not that useful beyond that context. You can keep working through it, which is really cool. Yeah, and so I mentioned, so that's just one of the import methodologies. One of the other fun ones is just stealing and I say stealing because then it ends up upsetting people with basically just pointing to and stealing my old sites. So for example, if I pointed to hackstheweb.org, which is a hacks-based site, we're currently rebuilding it and use this same connotation, whatever that, right? This notion of if I can take loosely structured data that is HTML in nature and pull it all into a system that is also loosely structured in HTML in nature, then I can just take the whole website. So already this is causing quite the stir around like data migration sorts of things because as we're finding a lot of people at the institution have adopted systems like WordPress and Drupal and then end up basically just like clicking edit in an HTML field. They basically used it for like the templating engine in question. And the hackstheweb.org is a bit larger site, so that might have just choked right there. It's under development. It's all right, this is not release code yet. Oh, it's there. It's just because I'm doing it locally. Like occasionally locally it's like, hey man, you just imported like 200 files. Let me take a breath. So this is that site pulled in. So if you go to hackstheweb.org, you can see this site. The other aspect of this of working in web components is been saying for a while that we're not actually building a system for courses. And so I believe that reclaim, reclaim open. I showed these terrible websites. And the reason they're terrible, it's a bit of a jab at me, but these are literally websites that I made when I was in college. And so they're designed like early 2000s, awesomeness. So if I say terrible production site, this data layer is completely abstracted from the design layer is completely abstracted from the content presentation layer. There's no database involved here. And so as a result, this is playing that same outline hierarchy. And then it's just putting the HTML in the area where I say render the HTML here. And then even though it looks like this absurd design, I can go and inject the hacks editor and make changes to this content. I can update it after the fact. I can invoke Merlin in context and say, I really wanna add a multiple choice quiz, right? So we'll add a multiple choice quiz because we need to question this reality, right? Cause I've been told for a long time, this is a vaporware technology that's not possible. And yet somehow here it is. So single answer, is this reality? Well, that would be yes, but the question would be, is this reality? And we get the live updating. It shouldn't say great job, it should say great job. So we have a nice little homestar runner reference in there and save and then I've deleted that portion above it. And so then I can say that this is the yes option, which fires the confetti, which is the same confetti as before and your character's really excited because it just said good job and I can scroll back to the top and hopefully salvage this design because this is just horrendous. Should probably turn it into like a documentation website. Sure. So do you have any questions that you know to stop me, which is important, cause I just sort of like go off and rambles, right? I know it's, well, so far it's really impressive. I don't know Amanda, do you have any questions? Although I've been doing a lot of talking, so. Oh no, I'm just kind of in awe. That thing is super cool. And I think that, I mean, it seems so simple, but there's clearly so much that goes into it. But it is, I love how it's leveraging the simplicity, the innate simplicity of kind of web work and kind of calling back to what that used to look like when it was more accessible to folks. And I think that bringing this to modern web users is gonna be, is kind of like a game changer for them to understand how stuff gets online and how you can present stuff and move stuff around and actually work with things. And like I said earlier, I mean, it's just having it build on itself and kind of go through all these iterations is really what open is all about. And so seeing that in a tool is really cool. So I'm gonna make a, my new blog because another, one of the big innovations we'll say in the next version of this is the ability to start working on things that start to feel a little bit more like what we're used to. So I demo this thing to people and say, yeah, but I'm not making a course or yeah, but I need some additional flexibility in the design. And so two very large enhancements in the next releases, we've got a lot more designs relative to before that we're starting to more actively promote. They're well-designed, responsive. They have specific contexts and use cases. Like in this case, this is a blog, but all of the blocks involved still come along for the ride, which is a growing list. I didn't even go into all of them, but like if I wanted to embed Wikipedia, sure. If I wanted to reference that markdown block from before, I could, if I wanted to embed a 3D model in this site, instead of our institutions making purchasing decisions entirely around whether or not something supports MathJax, MathJax is not that big a deal. So trying to capture all of the features and functions that we need in our institutions, but also doing so in a format that doesn't just lock us into the N plus one sort of a thing. So that next year we're like, oh, well, my site stopped working, right? So the format really matters, but people aren't going to start adopting something until it looks nice as I'm very aware. So large, large push on design aspects of things. I also have a student team, or actually now just a part-time student, well, part-time employee, I should say, in the spring, who's dedicated to just helping make our blocks feel more normalized in design with each other, which has been another common criticism of the platform to date, right? So I put in a self-check and then I put in a multiple choice and they sort of feel together, but not everything always did. So we're getting into more and more well-designed, simple elements, right? Even down to like, hey, if I go to edit this, this should feel cohesive. If I go to modify this, these options and colors selected should feel cohesive. If I go to edit the table, in this case, in context with the table editing, I'll add a column before here, it should feel like it's one system. And that is something interestingly enough that we can do after the fact, just because of the nature of how this is being modified. So I said there's 830 some-odd elements. It becomes very easy to onboard someone when I say, well, hey, that design, yeah, we need to help improve that. Oh, that's in the rich text editor. Once you start looking there, it's in and I have an exact path to just that, that we can test in a vacuum, see that it meets our design requirements, and then easily it's reused one-to-one to see how it fits into a larger system. So really been focusing on normalizing all of those types of components. We also have another really powerful, I think it's layouts, yeah, really powerful element that's been added more recently to this release, which is collection and a series of collection items that go along with it. And it's just this nice, simple, clean way of presenting, you know, text about something, right? And I can't, I don't know if it'll let me take a photo on this camera. Oh, it claims it will. Hey, there we go. So it's actually not about me. It's a collection of BTO pros, right? Doing something at random because I never plan any of these. Oh, okay. And then I'm really excited in release eight on the focus on sustainability for sure. You can see that tag auto colorizing itself with the accessible color set mentioned before. This one's also about performance, design, UX, and DX, sure, but DX sort of flows off of what's available. I could also say that these should all be some hue of pink, but then the card next to them. I'm going to go and select media. I'm not gonna search local file system. We'll search NASA, sure. And so let's search NASA for moon landing, big fan. That doesn't look like the moon. Yeah, here we go. It's a little slow with all of these processes running simultaneously. All right, so let's celebrate the moon landing and we're gonna link that to them. Let's credit them. So let's go to NASA.gov for sure on that so that if someone were to click this we'd link them there. Color, I will say is in to go. And then the collection we can start to get into, well, how many do we want to be presenting in a row, generally speaking? Now it's gonna try to take into account the design somewhat as well. So certain layout, certain themes, this will present differently than others. Usually I just recommend leaving it on auto. Oh, save. So that's a blog theme, right? And then another interesting aspect of the collections is that you can go in and I can modify, I'll just place an image on here. You know, I love NASA. All right, so I'll place an image on here and let's save. And then we get that nice banner image that fades out, but then on the homepage there's that banner, kind of the sorts of stuff we would expect in a blog. But let's say that we had another page of content we wanted to not make a normal collection, we wanted to make a smart collection. The smart collection allows us to effectively query the items in the site and provide an alternate way of rendering those items. So in this case, this is gonna just find content in the site that is any item or whether it's associated with a top level, like you can get into all kinds of filtering with this, whether or not it's published, things like that. And then we'll present them all side by side, but maybe what I really wanted to do was just give you a link back to this article. So I could actually break the smart collection because they're just components. And now it says, if I went and wrote all of the HTML and clicked all of the buttons for this, because ultimately under the hood, it's just a collection item in this case. So collections will play a pretty big role. One of my team members wanted a whole theme around collections. And so we got a collection theme. And the notion with the collection theme is it's just this big listing type of a space. It doesn't have a ton of menu options, to be fairly honest, but it looks like a larger than life sort of a design. This is taking not just inspiration but almost a direct port of this design, which one of our partners in the upper league College of Science, Chuck Laverra, who's been a core contributor for years, he worked on this design. And so just being able to, as a developer, leverage the web standard, right? I can go and inspect and go, oh, it's a course card. That speeds up the time to take his design, which was built in the exact same way that we build hacks, which is built in the same way we build anything now. And then know that those practices and conventions, all are just gonna work. It took very little time to reverse engineer this static site into something that then anyone can go and add. So I can go into collection dimension, just have full editorial rights, and then you get some minor menu options at the top. But fundamentally with all designs, the data layer is always abstracted. So I could go and switch this, I could make it look like Bootstrap. Okay, well, here's the Bootstrap theme, but with all of that content, because it's just tweaking a single variable saying what design should load. It's also incredibly fast because it's not, if you think of like going and downloading a WordPress theme and you've got like 50 WordPress themes, 99% of the code that's used to render any WordPress site using those themes on any server anywhere is going to be the same. However, when you switch themes, all of the CSS and HTML and the output and the remote, the on server, on-prem rendering is different to deliver you that 1% difference. However, when I switch themes, it's literally the same JavaScript as far as page break, it's all the same editorial experience, the collection list is still the same, the collection item is the same, and it's all distilling down and writing just static HTML. It's one of those things where, like one of the things we've looked at in a previous flex course last year was the idea of like headless sites and what, it was somewhat of a, like if you'd never heard of this, like why is this approach matter? And Hacks is interesting because it's a little bit of that, you know, the JSON, like that is the content, very similar in concept, right? And then you can kind of bring that in, in this case, I think of the JSON file as like, you know, the basically an alternative for having a database, but keeps things really light and simple and then you can do all this other stuff around it, especially because Hacks doesn't have this entire legacy it needs to, you know, you got to design this in this way from the start, you know, which is the big advantage or one of the big advantages in my eyes to this. Yeah, I got to hang out and contribute to, I mean, I have contributions to Drupal Core, I have hundreds of Drupal.org, contrib modules that accumulated over like eight years where that was really like my primary focus, probably about 10 years that I really was managing and maintaining that. So like, I've worked on every aspect of that system and deployed hundreds of Drupal sites, worked in the theme layer, written modules, administer databases, permissions. And so like, I have all of that worldview as far as what we were doing and then enough to go like 99% of this code we don't use. And so was able to really once this standard landed which the web component standard, we caught wind of it in 2017, it had been talked about in 2011. I mean, it takes a very long time for standards of this complexity to emerge and then browsers have to adopt it and everything. And then browsers have to adopt it. So Chrome, it landed in Chrome via polyfills. I mean, we're not even talking landing in like 2017. And then by 2018, it landed in Chrome and you could polyfill the rest of the browsers and it ran like garbage in the rest of the browsers. And then by end of 2019, all of the browsers like approved support that it was coming and then by about 2021, I'd say really is when you started to see things pop up with this. For example, when we started 0.01% of all page loads in Chrome as per their analytics, we're using web components like the API because they track that stuff. And then as of, I think like six months ago, 20% of all page views were using this API. If you've played Wordle, Wordle was written in web components and because of what it empowers you to do as far as scoping, that game was written in a weekend. I had students in class, I believe, two years ago, that was a project was to just write Wordle and do it from a design perspective using microservices as the backend. So yeah, it's pretty incredible what it enables you to do. But yes, it took a long time to land as far as something that could be leveraged in this way. So I don't have the legacy of all the rest of the CMS space, if you will. WordPress and Drupal just passed like their 20 and 22nd year birthdays, which is awesome for longevity. Like, not criticizing that fact, they've done a ton of good. But like if we were to reimagine how to build a CMS today, it wouldn't feel anything like either one of those. Sure. Do you mind if I take a second and kind of show folks how they can get started with Hacks on Reclaim here? Please do. Yeah. So we do have Hacks as an installer on both Reclaim Cloud and our shared hosting service. So that's, Reclaimhosting.com, shared hosting or Domain of One's Own. And so I'll just kind of quickly demo. I mean, it's pretty simple, especially because as we've kind of mentioned, Hacks is, it's just a bunch of files in a folder. There's no database, right? So installing it is pretty much like any other application. So if we go to Installatron in C-Panel here and I search for Hacks, it'll show up as an option. I can install it. I actually set up just a basic subdomain already just to install a test install right now. We'll grab the latest version of the installer right now. I can set a password and hit install. And it takes a few seconds to install it. And I also have, because we've kind of done this on a lot of our other sessions, I of course already have a Hacks install to play with importing content from our previous, our first session. So, but that's what that looks like. I can install, you know, I can log in here, of course. That's all cool. But this is where I already pulled in some stuff. So in this case, this was right from HedgeDoc actually. I didn't really do anything other than just copy the page content, which tends to work well when we're looking at like rendered markdown because it's all very basic formatting and stuff like that. But, you know, as you showed earlier, you can also pull from all kinds of other sources, you know, Word docs and Notion notebooks or whatever Notion calls its things. And all kinds of other sources. So we'll link to this demo too if people want to compare like, oh, what does that look like? To be clear, I could probably clean this up and make it look more attractive. But for all of these examples, we've literally just done the minimal amount of work to port it in the system, just kind of show what that looks like. So, but yeah, it ends up working super well. And again, we have that available on Reclaim Cloud as well. People want it there. It's possibly, you know, you could have a really, really fast Hacks install on Reclaim Cloud because it's all static files, but it's there too. But yeah, and Brian, thanks so much for joining us. I mean, is there anything else you want to leave us with before we kind of wrap up? Can I show you my drag and drop import? Oh, sure. Yeah, absolutely. This would be the real thing. That's why, no sleep till Brooklyn. So, one, there's this design, which is our website design. So we're trying to start to be able to have capabilities to mirror things that we use sites at PSU, which is our campus press instance. And then there's also a training theme that I've been working on and the training theme is very straightforward as far as present these pages in order, do some very minor blocking of progression, right? So like the user won't be able to click forward until they reach the bottom of the page, but then they can go back, little things like that that we've had as requests. But the biggie, as I've seen it, is if I, and you notice that this message keeps saying, like, hey, drop a file here. So I can go to my desktop and I'll take a, let's edit first because I know this is a pre-release and that there's a bug there. So if I took this logo, drop it in, Merlin is saying, hey, here's all the things you could do with that file. So it's analyzed what the file is and knows the system's capabilities. And so that's a very easy one like, hey, upload and let's just put that PNG in the site, not a big deal. Where it gets into a big deal territory in my mind is when you already have material. So if I were to take a doc file that in our case, our faculty members might be terrified of these types of platforms and oh, I have to learn how to do this new thing. You don't need to learn how to do work docs. The word doc goes, oh, that's a document. Do you want a sibling page? So yeah, show us do sibling page. It takes the content of that word doc, turned it into HTML and then it imports it into this page. Or if I go, you know, I didn't want that. Let's go, let's take not that outline, let's take a markdown file. Insert the content of the markdown file into this page. So it'll convert it, turn it into HTML and then it's somewhere down. There we go, yeah, it's like this weird sports management thing that I did, right? So it'll take that markdown file and throw it in. I could also drag and drop to put that there because it's not that different in operation. It also works with just HTML. So like if I have in this case this code file, yeah, insert that content as HTML. And so I'm starting to just build the site with minimal clicks based on materials that I already, the last thing that it can do in that sphere is if I were to go and import a site, I could actually based on the heading hierarchy in the site build out from that doc directly. So I can go and take that's part of why we have the music 11 outline. Cause a lot of times we start our development process with materials that we already have or having a conversation. It's just easier to write those headings. And so even though it's easy to go and click and build these pages and I can go and add child pages and like, and I can get the outline designer and I could just add a whole ton of content because when we're not playing by the traditional CMS roles we can break all the performance barriers. But that has been like the number one piece of functionality that's been requested or had people start to gain interest in what we're doing. That I could take a doc file and instead of building the whole site from it, go, oh, just create an outline in this page. And then pull that structure into the page. I don't know why it didn't give me my outline there because I said pre-release before. You see it'll give me my outline that's home. There we go. So that it discovered, this is the content that I'm going to import allows you to clean it up a little bit and go, oh, actually I wanted to split that off and do another page. And then I wanted to collapse this and we were going to move. Yeah, it's going to be like a sub page that way and then get confirmation and do those sorts of bulk operations that really kick this up another level as far as usability. So if you want to join our community when this release comes out you can actually just type community. And if you want to file a bug because you ran into some of those problems I just did like I just ran into that bug. You can do this which will then pre-populate the entry way into our issue queue so that we have all the specs about what you were just doing so that you can get onboarded and us know what you were doing as opposed to like it didn't work when I clicked upload that we know exactly where you were and go, oh, actually shoot it looks more like you're on a low performance environment. Maybe I need to test that in low performance environments this stuff loads fast enough for you to be able to do the upload in the first place or maybe tap events, right? It gives enough of a suggestion of what's wrong that this is dramatically streamlined process internally even with our own team contributing to the system. That's fantastic. And I love the idea of, you know for the file upload stuff having most of the time software when you're doing something like CMS, whatever and you want to do something with a file you first select what you wanna do and then you provide a file and I like that you can kind of do this in both directions you can say, I don't know, I have an image file tell me what you can do here. Can I put it in the page? Can I make it, you know or mark down good example because there's like, you know what was there like six, seven things in that list that it could do? So yeah, that's really great and interesting from a design perspective to help with discoverability of, you know like this is super flexible software people aren't, you know we can design things as intuitive as possible but ultimately people don't even know what's possible this will help with that. Yeah, we've actually there was a prior sprint initiative what did we call this something goofy it was called Swedish Clugs and it was because there was a TV in one of the labs that was misspelled it was supposed to say like Swedish clogs I have no idea why that was like the code name of the TV to connect or something so we just kept calling everything Swedish Clugs and one of the things that come out of that was the little tutorial person it was Merlin, just conceptually and then it was also that when you go to a word doc and that is like the easiest way for someone that doesn't know what they're doing with the web or any of these technical constraints to put their voice on the internet, right like I put that creedthoughts.blogspot.whatevertextfile and I write in that text file and now I'm on the internet but the interesting thing with that we noted was it in traditional systems like we're talking 90s you would open Microsoft Word and there'd be nothing and then it'd be like open the file oh I need to make a new file like it wouldn't assume you were gonna make a new file I mean obviously I wanna make a new file, right and so just that conversation the way that spawned we were actually talking about working with hacks that is literally just a prompt and it's like what do you wanna do today and then it starts to ask you and we're not to that point yet like this is what we're trying to set in motion that it starts to ask you like well what kind of designer you make oh I want it to feel like a blog, right almost like I'm working with an intelligent agent but we're not hitting any AI engines infinitely polluting the earth via those oh well I want like a blog and that the blog could load in at that point keeping your cursor in focus hey try adding some, so try it type slash and type video and try to see what a video feels like like trying to give these suggestions so built into the next release there's an initiative called user scaffolding and so part of user scaffolding is that these sorts of prompts of interaction patterns of like hey I dropped a file, we start to track they just dropped a file and they haven't made a selection in like three seconds maybe we need to like glow this part of the interface like just so that they're aware that like these are the things that you could do hey you just dropped a file the last time you dropped a markdown file you wanted to insert in the page so I'm gonna reorganize the operation so that dropped it in the page should be the first one because the last time you're here that's what you did like trying to guess at what the user is trying to do because we'd sit down with our own people Taylor and it was that same interaction pattern it was well I've got content and I need to put this image there but they would have to have already made an image so it's like this weird like well I have the file how do I just I want it to be I want it to be there in that space or they've made an image and our image is a block which is kind of a Gutenberg issue as well that we run into but you figured out how to make a block and you put that image there it looks a certain way and then you want to change the image well the logical thing would be to just drop it right where that is but for our own system you would click which is then but you'd click edit then you'd click the thing which is focusing it then you'd find the field that has that link in it and then you'd drop it on the field and we watched our own people struggle for 30, 40 seconds before they figure out what that is and they were people using the system actively so that kind of also gave us this plompting of like you need to just sort of be able to throw stuff at it and it go like hey what do you want to do and so let's spawn some weird conversations around like our coder environments as well more advanced things that we haven't wired up yet that well if we support .gex files couldn't we support markdown well if we support markdown can we support HTML well if we support that could we like spiraling well what would you what is your mental model when you are bringing that type of a media we're also trying to get there with links as well that you could just paste any link into that field and it would analyze it and be like sure hey this is Vimeo but you didn't put in the right Vimeo embed link did you mean to like link to this or do you want to like actually embed Vimeo oh we'll use our video player we'll flow you know trying to streamline that of that question of like what are you trying to do because like you could do anything with this which is overwhelming without the strings that's fantastic so you said so a lot of the stuff you showed today for people who have never used hacks you can use right now I think from what I was seeing here some of the drag and drop stuff the different would you call it I would call them layouts but I'm trying to think of what exact the non-course themes that stuff is coming in version eight soon so people should expect to see that soon and yeah really exciting stuff so thank you well thanks for for joining us and you know if people have questions they can put it in the discord they should also check out the hacks community discord as well as you mentioned and we will of course link to all of this stuff in our follow-up blog post too so thanks so much for joining us thank you for having me supporting the platform on your platform of course