 Okay, okay, yeah. First of all, I just wanna say thank you to the organizers and volunteers and the sponsors for putting up such an awesome event. Thank you all for coming to my talk today. My name is Joshua Giauea, you're with me at Giauea. All of their social media is backslash Joshua Giauea. I'm a senior funding developer at a company called Code 42. We're a software company based in Minneapolis. We created a software that does end point and restoration for enterprise clients. Some of our clients are Tesla, SpaceX, Microsoft. So we just make sure that all of your proprietary ideas are being tracked, backed up, and can be restored at any moment at any time. If you remove your laptop or break your laptop or if you were to need to get rid of an employee but get the work that they were working on the second before you got rid of them, we can meet all those needs. I would be talking about Legos for Developers. This is actually something that took me about two years to find the right fit of a company that was willing to go this route. And the reason is because it takes a lot more thought and planning up front, and it really exposes the issues in a waterfall like approach in where content developers and designers aren't in the same room all the time working on the same thing. When you do something like that, it's like a relay race. And normally what happens is the developer gets a short end of the stick. They're like, here you go. Two weeks left to develop it now. So when using these approaches, it just makes it so much more iterative and a lot more cohesive as far as where we're trying to get and how we're trying to get there. When we talk about what is modularity, how do you achieve this in your project? Why change your approach to modularity? Probably already have enough approach. It's working for you. Why would you want to change that? I'm going to talk about the process, why you're training the full production website that we partnered with a content team and a design team, and they bought into the process from the beginning and it worked out very well for us. And then moving from page templates to this strategy, it's not as hard as you think. It's 20 lines of code and I'm going to share that code with you. There's also going to be a link to a repo where you can pull that code down for yourself. Get started today. Let's just go to the repo, pull it down and play with it. Gutenberg and Atomic Design. What does this look like for the future of WordPress? And I think that Gutenberg was tailor made for this approach. Legos. You all know these things, right? So what's cool about Legos is you could follow very specific instructions and build a desktop or you can let your imagination take hold and build whatever you want. This is from my hometown of Minnesota, Minneapolis. This is at the Mall of America. Pretty complex. Legos setup they got going on here. But I would argue that some of our projects are just as complex. So right now I actually need two volunteers. Yes. No one else wants to play with Legos? Yes. Okay, that's cool. Thank you. And he said, listen, I'm gonna need you to create that. Chelsea? Joshua? Jake. Thank you guys for volunteering. We're gonna need to make this website and add some different components. Got a header, a hero image, a headline or some. Now. This is the modular approach. This is the other approach where we have code snippets that we use from past projects or Stack Overflow posts that we've saved or this project that we worked on three years ago to have this carousel. And that's what this looks like. Right? So we have all these different pieces of parts that you're trying to bring together to create this website. Or you have these very, very poor pieces that you can move and reuse from project to project. And so if you think about it that way when you start your project, the next projects are just to be able to use these pieces without even having to think about it. Oh, I already have a Hero CTA. I can just move that over. Or I already have a 3M. I can just move that over. So it's really changing your mindset and then getting buy-in from your content partners and your design partners. We have, what? But he made it back and then it just moved away. Yes, yeah, we come back it up. So really quick, fun exercise just to kind of show you the power of modularity. No, totally don't worry. So how do we achieve modularity? To me, if you really want to get into the weeds about it, there's three, both of you reset your mind frame so you can start implementing this in your project. The first one is a pattern language. That's by Christopher Alexander. The next one is Atomic Design by Brad Frost. And the third one is Modular Design by Nathan Curtis. You're Ficus? Yes, I'm gonna go through each one of them, but I can repeat them for you right now if you like. That's my first for Alexander. Atomic Design, which is a book by Brad Frost. And Modular Design, which is a book by Nathan Curtis. But we'll be referencing these books and these ideas throughout that presentation. So the first one is a pattern language. And what's really important about this is this was derived from architecture. He basically wrote a book of 250 patterns that you see in architecture and building and development. And it gave them a universal language to talk about things so they were all on the same page. So they weren't confused about what they're referring to when they say we need more space in our kitchen, in our office kitchen. And in our waiting area, we need more space, right? They knew what that was. So if you look at office buildings and some of the patterns that he called out in an office building, flexible office space. I bet you're saying that you guys start to think, I know what that is. I know what that is in my office. Communoidate. Small work groups, you know, meeting rooms. Maybe there's a couple couches put together where you'd like to chat up with your friends. Reception welcomes you, right? That happens. In a place of way. So these are just some of the patterns that Christopher Alexander wrote. What is atomic design? Atomic design is a methodology comprised of five and six stages working together to create a design interface system or deliberate in a hierarchical manner. So those five are atoms, molecules, organisms, and where we normally start as WordPress developers, templates, and those templates create pages. So we want to start thinking about where the reusability is. And it's in these earlier stages, in the atoms, in the molecules, in the organisms. And for the purpose of this talk, organisms are gonna be interchanged with modules. So these are atoms, buttons, subheads, images, and two or more atoms create a molecule. And this is where the reusability really comes into play. Because you can reuse those molecules to make different organisms or different modules without having to create a whole template to satisfy your design. So I just want to take a look at what that means in the context of an actual interface, so we all might understand. So right away we can call a couple atoms here. We have a thumbnail image, we have a headline, we have a rating, those two or more create a molecule. And then this is the real power of modularity. You have your organisms. And these are being iterated through each one of these different blocks of content is an organism. And as you can see, you can see the reusability of those molecules throughout this interface. What is modular design? Modular design is comprised of two separate parts. And that's content patterns and design patterns. A content pattern is a read. There's a solution to a reoccurring design problem such that you could use this solution many times and never use it the same way twice. And the display pattern describes a specific rendering that can be applied to multiple content types. So a good example of this, a content problem, would be, and then some button that's trying to take someone somewhere. But in some instances you might not want the headline or the subhead, you might just want the button. You might want two buttons. So that's the same design rendering for different content. This is taken straight from the pattern library that you all just put out there. So this is publicly available for anyone to check out at any time. But what I really love about this is it takes the pattern language which we talked about earlier, and it makes very specific calls out to things so you can talk to stakeholders in the organization or stakeholders in a project in a very specific way. So right here we have passwords. And we have different naming conventions for these different passwords. I don't think any one of the projects is going to be confused when I say business owner passport, standard passport. That's not confusing to anyone. I know when they say make the headline bigger in the business owner passport, standard passport, I know exactly what they're talking about as opposed to make it bigger in the main section. I don't know what's the main section to you. Or make it bigger in the third section. It might be the third section to you, but in the context of me as a developer, that might be the fifth section. So I don't know exactly what you're talking about and a lot gets lost in translation. So here's some more design renderings of that same content pattern. So I mean we basically just have a thumbnail with content aligned with it. And that in the context of WordPress, that could be an ACF image upload and then a WYSIWYG editor. That would satisfy your content pattern and then you could render the design pattern like this and reuse it throughout your work. Same thing, right? If I had the ability just to call in one piece of code that takes an image and then takes the context of a WYSIWYG and aligns them, that would work in all these different situations. So this is the true power of this methodology. If I know that these pieces of code in my experience can build a truck, that's awesome. I'm gonna go into work and I'm gonna build a truck. But what if I was looking at it differently? What if I was looking at it as these pieces that I can reuse across my product? That means that I can make a truck, a race car or a sports car because it's more organized and I don't have the cognitive load of trying to remember where all these pieces are. What are the advantages of this methodology? Dry code, don't read these yourself. A more collaborative and iterative process and empowering admins and editors. I'm a developer and despise the most is being asked to fix something that isn't a development issue, but a content issue. But because of the way the interface is set up, an admin or a content editor can't go in and do it for themselves. If you're not leaving your clients with the ability to update their WordPress site without dev intervention, you're doing them a disservice. And you can make it a lot easier for them to update the content and make it a lot easier for you to reuse your code. That means you can spend more time satisfying the client, making sure the design is right. You get a lot of advantages from it. Don't repeat yourself. I don't know how many times I've done this but I definitely know that on 90% of the websites I've built, there's always been a carousel. Like a booster up carousel or a slick slider. And I've always had to go back to the well, grab that code, paste it in. And it's always like a little bit of what I was doing with this code or takes a little bit while for me to get acclimated to that snippet. But in this process, you bring all the pieces necessary with you to the next project. The waterfall approach, it's just broken. It doesn't make any sense. We get in a room, they're in project launch and we're all there, the kinders, the stakeholders. We're all like six months, we're going to get the best website ever. And then the content editors go away for two months and then they talk to the designers two months later. And then... All right, I think we're good. And then... That's going to happen about 10 times. Okay, and then the designers have the project for about two months and they haven't seen the developers now for four months and they're handing them the projects. Oh, and by the way, can we have it in two weeks? No, thanks for asking. Then they take the project for two months and everybody gets back in the room and people are unhappy. The clients like, this is the design I signed off on, I don't remember that, of course you know, six months ago, right? So we got to keep people involved as early and as often as possible. This system allows developers to get involved in the process, in the wireframe stages, which is amazing. It's amazing to partner with the design team and the content team early on and talk about things as you get it right through each one of these modules. This is what it looks like when we all work together using this methodology, right? Developers are in it early on, designers are in it early on, and we swoop to this mountain top where this project turns out awesome. Empowering ads in content editors. So one great thing that came out of this project is that our marketing team can create landing pages, web pages and responsive emails without any dev intervention. One negative thing that came out of this project is we lost the need for another dev on our team. So as much as it is awesome that we gave them this power, I'm not saying don't give your clients this power but understand that it may be subtracting from working in the future. A modular design process. So the process we went through with our partners, we had a partner in StraightLine Theory, which was our content partner, and we had a partner in Zeus Jones, they were our design partner, and I've never had a project go this smoothly, it will work out this well, or be on time and on budget, like it really helped with a lot of the scope, and things that worry you on the onset of a project. So first thing you're gonna wanna do if you wanna apply this methodology is you need to identify the patterns. See where there's reusable content that can be made into a module or made into an organism. Categorize those patterns. What type of code or naming convention or focus structure are you gonna use and where do these things go? So you know exactly when you pick up a project, this is where I go to find the view layer, this is where I go to find the data layer, and you know exactly what to edit and what to update. So this was given to us in the project right away. So we started the project and we were given these wireframes. And this is where we really identified most of the patterns that we needed to use. They did a great thing, is where they gave us the module elements, so each element that's gonna be into each one of these different modules. And as you can see, these three things, they're reusable, they're the same. If I were to build this in the template, I would have to build that section, give them the fields to fill out that section, build that section, give them the fields to fill out that section, build this section, give them the fields to fill out this section. What's the difference? One has a headline, one has body copying, one has two buttons. They're the same thing. This is a content pattern that can be solved with the same design rendering. So what's awesome about this is if you get the project from your content editor to the design team like this, it means that you can start development right away. We were able to start building the data structure on day one of the project. So as soon as we got the wireframes, we started making the ACF fields to satisfy these modules. Categorize your patterns. So to me, a content pattern would be handled in ACF. You would tell it that I have this field and it's a hero CTA and it's gonna be conditional on if it has a headline, if it has body copy, and if it has buttons. So as you can see, we could render that content with the same design pattern that we just saw. Now the design patterns are gonna be handled in your SAS files and in your markup. And the way we're gonna reuse them is we're going to name them properly. I'm gonna loop through them and we're gonna talk about that. So for us, for our project, this is pretty much what it looked like. The atoms are kind of like your high level design. So typography, color theory, hydrography, and then your modules are comprised of two or more atoms and then your organisms, which you really wanna think about in your organisms and modules is how many content problems can I solve with this module? Do I need another module to solve this content problem? Or is it just the hero CTA now they wanna image in the background? And that's the way you get to break up your projects into modules. So the way we organize our SAS files, just like the atoms, molecules are more like the theme style, so things on a higher level from what the actual gutters and whiffs and things in each one of these pages look like. And then for organisms or modules, create an individual SAS file or CSS file for each one. And so when you're creating these modules using this ACF strategy, you're gonna need three things for each one of these modules. You're gonna need markup or PHP, Twig, whatever your template language is. You're gonna need a SAS file, and then you're gonna need an ACF JSON file. And that's gonna house your data structure, be your data layer. What does this look like for content editors? You get the ability to drag and drop. You get the ability to add new modules as many as you want on a page. Right, I mean, this is a pretty slick way of doing things. And it doesn't take you that much more time or effort to do this as a developer or to buy into it as a small business. And your clients will love you for it because they'll be able to say, I want a hero image, follow by three call. You have no idea how many different combinations they can make using this strategy. Our marketing team has made over 500 pages. It hasn't asked us for one thing. All we work on is new features and new modules. We don't touch the old modules. So how do we achieve this with code? How many of us are using Get Template Part right now? Awesome. So Get Template Part allows you to grab a piece of PHP code and bring it into a template, which is very powerful and very amazing as far as reusability goes. So if we want to use flexible content, ACF, we want to use Get Template Part. The best way for us to do that is to loop through each one of these different layouts and they call it a flexible content in the ACF side and go get a template part based on that. We'll see what that looks like. So if you're familiar with ACF and flexible content, you know we just get roles from a specifically named field type, right? I'm just saying if this exists, they'll get it and then call this function called module loop. If not, we're gonna pass another function that just takes the post content and renders it. Meaning if you don't have any modules on your page, you just have a call back there to render the post content. And then this module loop function, all it does is it takes each one of the layout, the flexible layouts on the page as it's iterating through and it changes the naming convention to be a dash instead of a underscore and then it passes that name to another function and what that function does is it makes sure that your name isn't empty or returns and then it locates a template and loads it for you. So it's saying go get this template at this location. Do I want to load it true? And then the second flag there that said the false is require once, which you don't want to do because you could have more than one module on the page. So you have to set that to false. And this is the link to a repo which is basically the sage theme modified with that loop in it. So you can download that right away. And I think there's also just like a blank module that is a hero module that will just render or echo on the hero module and you can have to take it from there. What's that? The text is too small. It's just github.com That's last J, G, D, I, N, E. That's last modular sage theme. That's it. Yeah, go ahead. Well, I'm assuming you're probably getting some good forgiveness, right? Yeah, I'm going to touch on Gutenberg. I'm not going to get too deep into it, but yeah, I'm going to touch on it, yep. So one big issue we actually have with the strategy is when creating the flexible content, if you're using github for version control, it creates this monolith file that is representative of a JSON object for each one of your modules in your flexible content. So I just kind of want to take a look at ways around that. This is what happens when you drop a hcfjson folder in your theme directory. It just automatically populates JSON for each one of your fields. The problem we're running into is we had one file that was a monolith and anytime anyone or developers changed anything in that file, we would be at consulates. So it was a nightmare to manage. So you can't get around that and the way we got around that is we created fields and then instead of leaving it as one flexible content field, what we did was we cloned them in to our page modules. We just cloned them in, open any row, you saw that up top. But that allowed us to do is have a JSON file for each module, which made the version control a lot easier to manage and also is going to make it a lot easier when you, if you move like one or two modules to another project. So as far as I'm concerned, I really like Gutenberg and I actually have a production website out in Gutenberg right now. I think it satisfies a lot of the issues or functionality you would need to achieve modularity and to use atomic designs and to use these strategies. And the great part about it is it's pretty much already baked in to the hierarchy of the design pattern in Gutenberg. So what does that look like? Right, we already talked about how atoms were color theory and typography. Well, Gutenberg has this awesome sidebar that allows you to manipulate that right there in the admin. All right, we talked about how two or more molecules create an organism. So Gutenberg has components that can make up a block. So that's basically right there. You've got your two components right there and you move on to the blocks of the organisms and they're rearrangeable and reusable and you can create templates. And from there you can create pages. So it's pretty much tailored or made for this approach and it's already baked in as long as you understand where they go and how to use them. These are some resources. You guys want to take a look at these. They're basically some of the books I referenced. Couple themes from modular development. Hope you guys got it. I'll link to this, this is online, so you guys can take a look at these slides. Okay, so are you now we're going to say that Gutenberg? Right. But there's things that won't work. There's things that... Great question. I'm still a bit proud to try and figure out how to do these things. But what I'm seeing now is that Gutenberg is mostly for layout, and you see for ACF we can have content that's not necessarily rendered to the page. Right. And they are the harder thing that we can transition or burn to the page. Right, so great question. So basically the question is what things can Gutenberg do that ACF can't do and buy virtual? So the project that I have out that is our company blog. It was built in Gutenberg. And I really wanted to avoid using ACF. And I tried to use a built in mechanism for some meta-boxes and it just wasn't satisfying all my needs. And so to your point, theme options we kept in ACF and we attached some custom endpoints for authors and we did that in ACF. So right, this doesn't solve all of the problems. I think it solves a problem of long form content or reusable content or modular content in the context of a page. And I know it's a steep learning curve as far as React goes and how you create a block and how you create a custom block. But if everyone gets on board with that, we're gonna get more reusability throughout the community because I can grab your block if you have like a profile block or something. I can grab your block if you have like a hero CTA block. And we're just gonna have this huge shared repository of blocks that we can pull from. Which I think is amazing. So, yes? What do you have in your recommendations about how you document the adults and the hall of tools and the organisms? What do you use to bring awareness to your designers, your UX designers, your developers and those of the bits that exist so that they can be reduced? Right, it's really one of those things that everybody in the project, everyone in the process has to buy into or it doesn't work very easily. One thing that I would suggest is give them some regent material and see if they're like apt to try this process in this project. I mean, you can always take what the designer gives you. Like for instance, I just got a project and it was designed not in modules. And so I went through the whole project and screen shot it out, all the content patterns and put them in a folder for, these are the modules that I'm gonna create. Are you a developer or a designer? I'm a developer, but I'm just curious because I love this idea and I try and stick with it also, but all the times we'll describe what we're looking for from our designers and then they give us something back that doesn't necessarily conform to the patterns that we have. And so I was wondering if you have a system that you use to document the existing patterns so that they can say, okay, I need to place a button somewhere where I use kind of button options that I have. Like do you have a system you use or is it just kind of like people dig through codes and see what exists? So the system that we use with our design partners, they created a style guide. And that style guide, they actually made the SAS files for us. And they use really slick naming conventions that allowed us to just pull from their styles really easily. So, I mean, one thing you can do with your designers is you can say, at the wireframe stage, I need to understand what elements is gonna be in each one of these modules or each one of these sections and that would at least give you the ability to create the data structure first. But yeah, I mean, it's something that they're gonna kind of have to buy into or else you're just gonna get the same process as before.