 So, when you get into theming, you can pause, and then pull the room until there's less people in the vicinity. Developers, streamers, designers, any other people? Cool, alright. So, we'll jump into this. I used to use slide deck software, so you can use it, I'm sorry. You can do it, and then you can do it, right? So, let's do that. If you'd like to tweet, here's a tweet that I prepared for you to do. And then tweet it, and then it's super meta. So, I would like to take you through like a history of the internet to tell you why things are so awesome right now. So, there are agents. You see a spacer.gif. Does anyone remember those? I sure do. That was back when you used something spaced over in a certain way. And you were able to actually have an app with a container. And so you used a visible one pixel transparent gif before they moved you. So, yeah. And then an image map solution. I hope none of you are going to deal with it. You can do that one day. Tables. And before there were beams, you used two tables, so that's pretty much life. So, again, tables were great until anything else existed. We moved on to dibs, which you probably all know and love now. ZNX is for the wind, which matters. For the wind is what it is. What do you think of TWP's? Do I have something that matters? Here's past models. So, after a while, things are just becoming huge and bulky and your style sheets. And then if you've been doing this for a while, you'll just say, I didn't make a big difference. I'll shove it in wherever. Oh, cascading rules. I'll shove it in the lower. And just wherever the lowest thing was wins. It can slowly slide into kind of cascades. And many developers during this period of the internet did not serve one. This is Sandy. They start to come. Now, we've got pre-processors. And you don't use a pre-processor. I use SAS and GOLD. But some of you went back. But now I'm coming to the new thing. In order to be able to listen to some of these terms I've made up, blood of frameworks. So, right now, we're kind of slowly coming out of this angular cascaderism. Angular is awesome. And if you don't know Angular, it's a JavaScript framework made by Vue. Vue and then React. React is one that's kind of saying how the Angular is going away. Angular, if you move to one of the corporates, kind of anything in there. You can say these are anything. Vue and React are kind of like hanging right now. And it's still kind of chaos. But the thing you take away is that JavaScript has moved from where it comes again to F. And if you don't know that, it's all right. So see how you're accenting and compiling. So React kind of led it in charge of this component stuff. Compiling is like much like I'm describing in a simple form. It's a thing about a Lego. Can I play it later? I don't know. I would do that. I'm right behind. So yeah, we basically turned Legos into code in a way that you could do a small building complex where they should be small. And then you can compose them with other Lego structures and keep going from there. So in our history, let's dive in. I've been told that I can zoom in on this. Look at this. Ah, zoom in. It's so good. So this is the website I've never seen before, till making this thing. We've heard that it's a little bit cocky. But yeah, anyway, Google, let's take a look at it. These are an example of the components that you have. So you've got the logo. Here might be like a navigation on the comment over there. Another kind of sub navigation. Buttons can be components. But to make things more fun, we can also put components in components. So let's take a look. Oh, look at this. Now the blues are components that contain individual components. So now let's make it more fun. Let's put that into a big component. And this is just trying to drive on that. You can test components all the way down. Oh, no. It's a lot of jokes at the bottom. So it's full time. We're working. I haven't said work-press that much at all. So I'm going to say work-press three times to make up for that. Work-press. Work-press. And then we'll keep going. So even if you want to, if you've not, then you can go to Facebook for them. And when you use the Facebook for them. You can go to Facebook for them. So go in. You can go back. So let's talk like this. You might have seen your team broke up into homepage, inter-page, contact pages, all these different files that live within the directory. And then you can get even crazier from that. You can use custom post types. If these are important to you, it's okay. And anyway, so those all have a huge file that says, oh, here's where the header should be. And here's where this structure should be. It's a search box. Let's put the search box in there. And it's okay. But now, as we wait a little more time, then it's a smaller, little thing that was embedded in the last one. So here's a layout. So it's a random page that you've probably never seen. This would be how we would do it in old invades before compliance. The header would be from a header-to-hp file. The header up there would be from Awesome Heroes. And that's page single, whatever kind of content would go there. And then there'd be a quarter, maybe some extra files. But what I'm proposing instead is for us to think componently. And so at the top there would be a block hero, block navigation, block content, block dark background and CTA. I got a little help here with any conventions. But you can see that we're thinking that it has composable pieces. And why would I do that? If I've got a block drug in the background CTA, I can put it here. But I can also just reuse that block up here in between these two. So you've got like these composable leg-ups and different ones, whatever. I'm going to go back over here because it feels weird over there. So more files equals good? No. More files equals more organized. So here's the old one. And files in every way. Here's what it can look like if you don't have the same one in a lot. You've got... Okay. Had a function, it's glitter, a page query, it's contact us. I plunked out the class name, impact stories. These, all of these, like, templates that live. And they walk up in our own reasoning for being. So these all include just like massive code for every little piece of stuff on the page. And I'm going to get it in 2.2 some magic that I'm going to give you all that will make all this easier. Here's the CSS files. You can see, like, oh, contact us. Is there a contact us over here? I want to edit the news. But there's something on the news. Where do I edit that? And over here, I've got my news. So there, it makes sense. But, you know, it's just... It's not clear. It's not everything. Bumble up in a nice little package. Too far. All in. And basically, if you're a new developer taking our project like this, it's a trigger, right? Like, I'm going to go and take the small size thing. You've got to go and find the template file. Then find the code. Just take the class name. And then go up. It's super awesome. That's what we've been doing for a long, long time. So the new way that I'm posing and thinking about every little piece is a label, right? You're putting all your legos in a nice little pocket. That's organized and labeled. So here, I'm going to head over the handle or the navigation. They've got their own folders with their own template piece and their own style sheet. And it'll be the their own JavaScript. You can have a lot that's just PHP or just HTML or whatever. But it doesn't even have a style that doesn't even have JavaScript. Most of the time, if you will, you can see it at all. I'm going to zoom in now. So you can see here. Got those files and folders there. And they're all packaged up. Awesome to go. One other thing to note is that they can commission that I'm following here is whatever the folder is. It's also what the file is except for what the different type. And in each side of those files where I encapsulate that code in some kind of container, I'm going to use the same name. Therefore, when I'm on the front end of the website, I'm like, I'm going to make this text bigger. I can just inspect it, find out what that class name is. And I know exactly what components are going to go into it. Let's see you all closer pictures. Okay. All right. Another thing of why you should do this in addition to just working is a new developer that's never touched the problem. Probably. If you explain this one time, like, hey, it's like lots of all the labels and you add a label and you just tell them to take the label and they can get right in. Oh, and you can change the style. Right there. It's the style sheet or the style sheet. And right there is all the JavaScript. And all this not only is that you have to point it to the date right now, but ask them to move to a Gutenberg, which if I had a bit point for a time, or Gutenberg today, I would have several. It's the future that's coming. So thinking in this more modular, building block composable way also plays very nice with where WordPress is going with the developments going into the journals. I can share the slides. Oh, okay. But if you want to just, that's fine. That's fine. I remind you to take one of your comments on the tablet. I'll take all your comments. I'm sorry. I think there's a charting station. I'm just talking now. But there it is. So yeah, new developers can get behind if someone takes over the project. And if they ever touch it, it's more standardy than the others. Okay. So I have to use this. I'm glad you're asking. That's what I'm asking. Right? So this is the one I'm saying. And it's going to turn into something more. But this is going to WordPress. Get to a template part. And then you just put the file out. And you don't need to put the ending KT where the press is smart enough to know. So blocks, header, header. And this is weird here but the folder for the comment and the file. Out of the header, just one line. And so what you now move to with this magic piece of code is if you go into those like contact page templates, it's just several of these. It's very clean. It's several little includes. Everything makes sense. If you need to dive into one of those things, you just go wherever the piece you want. It's super, super clear and concise. How do you pass variables? So we've changed a little bit. This is a magic trick that people include, look at template, and then this. Now this one's different and it doesn't include. So we can also use that what you need to. But by just storing a value, it's now because we're including it available inside this block. So it's an easy way to pass variables in the way we go. This will now allow you to pass variables in into the section using include. It's rendering out before I have a chance to do any kind of variables. So we'll walk through it now. This will be the way that you're doing it. So this is inside and as you can see here, we're doing a home page CTA. Home page CTA is the name of it. And then now I'm free to use Spanish inside there. I'm just hungry or I'm not hungry. I just say a lot of one thing. This is amazing. I don't know. I cannot move. I'm really hungry. Please shut up gentlemen. So as you can see the end type of part is just to pull everything onto the page or whatever page you're putting on. But the variable that would be like if you want to have more syntax or whatever you want. It's not going to go on. So there's one you could do if it's all self-contained completely. I think we should transfer that for but if you're doing some kind of punkiness where then you get all the recent posts or certain custom post type or whatever then you just call them to do it. But you could also just stuff that walking inside. It just depends on how you do it because someone can show ideal it and this is what you'll do. And then inside that part it was the post or whatever and so because with a lot of my demos like we're starting out in this way. It's a great sustainability to describe because it's composed all the way. So again you can then start from the list to the next component. So let's take a look at that. I've got a header PHP from Braden's header piece. This header piece then also has a navigation inside it and then some other stuff and then my navigation I want to get into the here but it just shows you how it cascades to this composable header at PHP. It's just a small bit of like the head of stuff might include from my header inside there it's very simple to send text and then the navigation and here's where I need to include and have somewhere else like the end of the putter. Let's do this again. So again what I should do is preparing for future findings. Anyone can react to you and your stuff. So thinking compliance and if you're from React I think you might have already seen because you should your end rates to handle the React but I'm sorry I'm not thinking with React there's two ways I think you can do whatever you can set the file or you can do like the JSEP scary nonsense whatever you can you know all of them I think this will be a lot of you right? It's the first time you look at that right? No I'm thinking that you just wouldn't because it just looks gross. I don't know if you ever know who wrote this and then you like go everyone in the office and they're like what's even about Hebrew? So they will save you from your future self wanting to kill you and it also compares to Gutenberg could she work at Columbia? Yes I do see So what is Gutenberg? I think that's probably warranted because I've said a couple Gutenberg talks so obviously is what you get from the future and I'm probably going to leave that this year but we'll see and it's all come on face right so it's if you want a hero and then some paragraphs and it's inside that all of those things are kind of common to me they're common to people and it's a website it's kind of a space in there so who helped me? That'll be the same quote that we just wrote here Gutenberg? Yeah So Gutenberg is a little bit outside of this but if you can get into this mindset of organization when Gutenberg comes it will it will just fit right in the work it will really get talented at the time rather than and he went over a lot of code examples so if you did a chance to speak with him he's got a slight deck in the code source that you can look at that really depends on the same as it is so here's a cool website I don't know I've been at a long-distance road so let's try it so yeah if you don't know bring us the www.taskuniver.com we'll let you have like an editor where you can go in and start doing it so this is where our tour press is going and we have a head cover page and just a title and anyone okay so yeah anyway it's going to start to become more what you see as what you get and if but this is a component this is a component everything is a component and you can add a new component into your component like what you mean just give it a name so yeah that's that any questions so far and how I'm kind of well okay if you want to ask me where I'm going this is what we're pressing when we start so this again it's a point and a half all of us that I just talked about let's read that but we got the components that we are now for today you'll see there's a time demonstration and you start to speed up and cool listening about your components so you just build some hero component for your client and it's the best hero component ever it's a work apart and it's extendable and more flexible and not for you to use it on our other website which would be great you just pull the folder out of the long scene that's where you have it and drop it in and then you've got a header on both so you can not just save something all right I have a question about if you have a bunch of SaaS files so you can set some of them come to the live and maybe you can do if your client trusts you you have to go up to your golf every single time or you can hear your golf to just like parse the whole thing and looking for any SaaS file on the channel yeah I think people hire a bunch of stuff to do a bunch of magic and then here we start compiling I start looking for work part so then you can start to scale up and compliance those changes and then also with that so if you're compiling all of your SaaS files even if you have four of those you can also say a SaaS yes so good idea if you have this one where you go there but if for JavaScript I would recommend to start selling so take that select and then that JavaScript's only rendering on the page do you do the same for running 20 20 20 20 20 20 20 20 20 20