 Hi there, my friend and friends. Like anything else that has tons of hype around it, I have long been skeptical of AI being something that's about to take our jobs. Will that day come? Maybe. But when it does, the tech industry isn't the only one that will be affected. For the time being, AI is more of a productivity tool than anything else, so today I wanted to look at how we can focus on making ourselves more productive by using the tools that we have available to us these days. To be able to do that, we're going to be not completely building out, but we're going to be focusing on how we can use AI to help us with something like this where we have a bigger project that we might want to build, and I really want to focus on the productivity side and how we can be more productive in creating things like this, and we are helped out a little bit because we have a design system here that we can focus on and work from, which you're going to see is going to help out. But if you don't even have that, it's not the end of the world. But I don't want this to be one of those videos where I'm just endlessly prompting AI to try and get the results, though prompting will be a part of it. But there's other things that we're going to be doing along the way as well, and we're going to be doing it using this tool right here, which is called Pieces, which is basically a productivity hub for developers that happens to have AI very tightly entwined with it, and just to let you know Pieces is sponsoring this video, so a very big thank you to Pieces for helping support my channel. But the first thing we're going to look at is using the chatbot that is built into here, and if you look down in the corner over here, you will see it is using GPT-4, though there are other models that you can use, including local ones just on your computer, but we'll talk more about that in a little bit. But yes, you can use this tool right now completely for free, including GPT-4, so it's kind of cool. But what I want to focus on here is how, say we have this design system where you have your files or whatever, where you sort of go through the work of getting the stuff from there, how we can quickly get all of this turned into CSS much faster than I'd probably be able to do it if I was writing it myself, and then also how we can get into creating things like this sort of more complex grid down here and a few other things along the way. So as I said, we're not going to completely do the entire thing, but I'm going to set myself up for as much success as I can using the AI and also a few other productivity tools that are built into Pieces as well. So the first thing I'm going to do is just grab all the information and prompt the AI to help me out with that. So we can jump over to Pieces to get started with that, and you probably don't want to watch me write the prompt for this. So I'll do that quickly. And so I'll just cut forward to when my prompt is ready. So basically what I've done here is I've asked it to create a simple CSS framework with the colors from here, font family, font sizes, font weights, all set up as custom properties and utility classes. I told it the colors I wanted. I said the font family, the different weights that are being used and the different font sizes that are being used. And also that I wanted the colors to be HSL and the font sizes to be in REM. And let's see what that gives us. Just really quickly as it's going through this, because one thing with GPT-4 is it's a little bit slower. So as I mentioned, there are different models that you can actually use here. So on the cloud, I have access to the open AI ones like GPT-3.5 Turbo, which would be much faster, but I can use four and I like using four, even if it's slower, just because I don't know that everybody tells me it's better, basically. There's also Palm 2 I can use. But on device as well, you can choose different ones. So if for security reasons or privacy reasons, if you're working on a client project or something like that, you might not want that code going onto the cloud at all. And you want to keep it on device. So you can use these ones right here to be able to achieve that. And I've also been told by the team that they're going to be adding new models as they're released as well. But it looks like it is done. So let's go and check out what it's created for us. And it always gives a little explanation if ever you've used it. And it looks like it did exactly what I wanted it to. The only thing is I really don't like these color names on here or the font sizes. But one thing that is important with this is this sort of becomes the context of what we're working on. And you can actually change the context. If you have existing code bases, we're going to see that in a little bit, you can tell it what context it should be looking at, especially if you're asking questions about specific code and stuff like that. But now that we've started this conversation, it does keep track of the context of that. So that is another reason you might want to keep it local. If ever there's privacy issues or reasons along the way there. But for this code, I really don't mind. But yeah, I'm going to try a few prompts here to see if I can't fix the naming of these and I'll be right back. All right, so I just finished. And I'll just show you the prompt I did. I said change the color names. Change the first one to primary 400, the second one to primary 800. This one I was really explicit with so maybe they're actually would have been a bit faster just to change it myself. But then for the font sizes, actually, I was a little bit surprised this worked because I said, can you change the custom the font size custom properties and classes so that the one that is 16 pixels is font size 400. And each larger one goes up by 100. And it actually figured out also that the smaller one should then be 300. So I was really impressed actually and surprised that it figured that one out. And it updated both this stuff and this stuff over here. So that was kind of cool. But yeah, there we go. I'm pretty happy with that. And I want to make this my starting point now in when I start writing my code, right? So I could just copy and paste things. But you'll notice down here, there's like share annotate code find similar snippets and a few other things going on. And I'm going to say save to pieces. And what's cool about this is when you save something, it's saving this snippet or this piece of code, which I guess is where the name comes from. And then I can see it in my lists here where I have like a whole bunch of other stuff that I've sort of been playing around with so far. But what's cool with this is it saves it as a piece. So it's saved in here. I can just copy the code a little bit easier. Now, I can share the code with other people. So if you're working in a team, I can edit the snippet, which we'll see a little bit later on, view annotations and a few other things. But you'll notice here, it's actually come up with like some search things, because search with natural language. If I want to look up, say, custom properties, because I want to see different things that have been created with custom properties, and it pulls up things that are using custom properties. So if you have lots of snippets, you have a search feature, which is really nice, where you often probably have repeated code or similar code you're using from one project to the next. So you have a saved snippet, you just bring into one project and the next project and the next project, it makes life a little bit easier. So now that I've done that, though, you know, obviously, we want to get into the code itself. And this is another thing that is nice, because pieces does come with a VS Code extension. So you can actually do a lot of what I've been doing up until now directly in VS Code and don't have to like jump around as much. You can see here, I've added the extensions. So I have this thing that's right here now, right there, right? Which has been added. And if you're running, you know, in yours, it's probably on the other side of the screen, because it's just in the activity bar. I like having mine on the right. And I'm just going to shrink these down. You'll see here, I've saved materials. So these are all the snippets I've saved. And they save them by language. In my case, I do CSS. So I've only been playing with that. But if you have other languages, it's organized by language, which is kind of cool. And you'll find all the different things that you've saved along the way. So I can go over to my CSS file here. I can find this is the one I just created. It's always at the top. I'm just going to right click on it. And I can copy it to the clipboard or I can just say insert snippet. And there it is, it's in my file. So that's pretty cool. And it's even started me off. I don't know if this is the color and the font size is correct. Kind of cool. That's good. Font family is good. I just don't know about the color. But whatever, it's it's off to a good start. And I can always change that though I do think the color is actually correct. So I guess I just picked a dark color. And just really quickly before we keep on moving along with this, I do want to let you know that pieces is actually 100% free to use right now. You get full access to everything they can do that I've been showing you and a whole lot more really just scratching the surface as I'm showing this to you. So if you do want to try it out, the link is in the description. They do have plans to eventually monetize the product. But anybody who signs up while it's free will get grandfathered in for one extra full year of free access even once they've brought in the paid tiers. So if you do want to check it out, now would be the right time to do it. So you get that extra year of use once they've monetized it. But with that, let's jump back into here and start going through more of this code. Now, another thing I would like to do in this case is to create some utility classes also for my headings because if I go back to my Figma file and I come in looking here, there's these headings that have the font size, the font weights, line heights and all of that. And this is the type of thing where it can be convenient to have them. And as I said, sometimes when we're multitasking and stuff, it's annoying to have to switch between different programs. And so what I'm going to do is a control shift P and I'm going to write pieces up here. And you're going to notice when I do pieces, it opens up I have all these like different things I can do here because it's part of VS code and I'm going to open VS code or open the co pilot. And it's actually going to open up right here. I can set the context. And I can also do this over here actually, where I can just find my file and I can ask pieces about that file or I can set it to the context. So why don't I do that? I'm going to set that as my context. And then in this case, that would mean I can ask questions specifically about the code that is in here and it can answer them. But in this case, actually what I'm going to do is I want to ask it to create some utility classes for my headings. And so here what I've written here is create utility classes for my headings, use the custom properties we've already created. All of them are going to be semi bold and have a line height of 1.1 just because that's what is in the design system. And then I just listed out the names I want and the font sizes. And the nice thing here is when I'm in Figma, the font sizes in this design system are just listed out, you know, 48, 24, 20, I don't know what those are in terms of my custom properties and all those other things. So I just listed them out, told it to use, and let's hope for the best here. Let's see what we get. And there we go. It's using the font sizes based on the custom properties that we've already defined, which is kind of nice. Oh, and it's giving me a little way on how I can actually use that as well. And this is I'm currently actually on GPT 3.5 Turbo inside of VS Code, but just if you want, I could actually go and switch that over to four if I wanted to. But this is a bit faster. So actually, maybe if this is going to do a good job, I'll stick with it. And actually, this looks like it's pretty good, but the annoying thing here is let's see if we can just do this fast. I know I wanted to cut out the prompting because that's always the boring parts. But can you or not can you, I always say that just combine the I'm too polite with the AI, combine the the properties that have the same values into a single selector. Let's see if it can do that. There we go. Exactly what I wanted it to do. Perfect. And so you can see all that's come up. And then down here I have this little pieces guide that's right there. And I can actually just copy the code directly to here. So copy that to my clipboard, come down into here, and I can paste in those new utility classes that I got. Now another thing that I actually want to bring into here, though, is something that I created recently. And it was another video where I made a container. But instead of using a wrapper container class, I was using grid, the code in it's a little bit complex and kind of long, and I don't want to have to rewrite it. And this is one of those times where you're not having to rewrite things as nice. And I did save it as a just in GitHub. And that's a nice first step. What you can actually do in here is I can add snippets. And there's a few different ways we can add snippets. So one way is you can import GitHub just so very convenient there. So you can actually select files, select folder, or just select a gist. So I'm going to select a gist and it's going to discover the ones I've already linked to my GitHub account to my pieces. So it's seeing, here it is. This is actually, I just saved it recently. So it's found it. But if I had other ones, I could cycle through all the different ones. I just hit, I want to, yes, that's the one I want to get. I hit the little save icon. And now that is part of my snippets in here. So if I go back over to here, we'll see right at the top, my content grid has shown up. So I can just come all the way down here. I can right click on there. And I can insert the snippet. And there is my content grid that I've brought in. And this would definitely be one of those handy ones that I want to keep as my snippets and use for a lot of different things. The cool thing in here, though, is if I'm adding it in, if I just click on it instead, it's going to show me what the code is. And so I can look at all the different code. I can see the different tags that it's automatically tagged with it. I can read the description of what it's doing. It's generated this description on its own, which is kind of cool. Like, say, vertically centering, I found this on Stack Overflow and brought it in just so we can have some stuff to look at. And it tells me exactly what it's doing and how it's doing it and some suggested searches. It gives me links to different things that might help me understand what's going on. And it does this all automatically, which is kind of cool and fun. Now, there's two other things. If I look at the design over here, so let's go and zoom out a little bit. And we have these, we'll come back to those, you know, these custom check boxes, which are always kind of annoying. But let's come on over to here, where we have this interesting shape that's going on. And this, I know how to create this, so I would just write the CSS for that myself. But let's say you're sort of mucking around for a while, or you're not too sure what to do, or you just come across something cool one day when you're like searching the web or whatever. What you can do is here, I have Twitter, and I found a border radius. It's not quite the same as what I want. But you know what, it's not terrible. So I can actually just take a screenshot of the one that's like close enough to what I want. And imagine you're watching one of my videos and I have some code up on the screen, you can screenshot that code. And then the nice thing with that is, you know, once you've screenshotted the code is I can go back into pieces. And as I saw, I can add a snippet and I can actually do it from an image here. So I can grab that screenshot and just drag it on over and drop it in. And you can see PNG image with text. And what it's going to do is try and figure out any code that's in here that I may be able to do something with. And I see it sort of plugging away. And so I'm going to click on this view code. And there we go. I got my border radius that's coming here. There's obviously a few little weird things going on, just because obviously, in that image that I had, it's like it's seeing some of the weird stuff that's in there. But the important part was that border radius. So I can do that and just grab the important part that I wanted. And even if I wanted to save the snippet, I'm just going to edit. I can delete the stuff that I didn't want. And then I could actually save save and exit. And then I can say like border, you know, funky border radius or whatever, give it a better name than that. But you know, get an idea of what I wanted. Obviously, the numbers here are wrong. It's not a perfect example. And again, this would be a bit more useful. It was a bigger code block either from a video that you're watching or something else, where you want to grab that you screenshot it pull it in and you're good to go. So that is something that can be really handy from time to time. Now with this in place, and I have a lot of the pieces that I need here in place to be able to actually start writing some styles for something. So I'm going to go over to the HTML and I do find prompting my way through writing HTML. Maybe it's because I'm not good at prompting AI for this type of thing. But I find it's a little bit longer to do than it is to write the HTML myself. And I don't, as I said from the beginning, I don't want this to be a video of like fighting against the prompts. I want to be using the AI to be able to do things for me and make my life easier. So I'm going to write this HTML and I'll be back in one second. And there we go, the magic of editing. And so I have everything in place, but obviously, we're very far off having like a working site here. But it's not terrible. It's coming in and everything looks like half decent, actually. I'm pretty happy with what it looks like. And I mostly use the classes that it created for me for my font sizes and other stuff like that. So it's come together. Now there's a few things it didn't do or that I didn't have. I asked it for a framework. I didn't ask it for a reset. So I don't know if it would have added that for me. But one thing I don't have is like the image size. And like this is where I could prompt it, like give me an image reset. But I know my image reset. And that's where I don't think I'd actually be more productive. So I can just come in here and just do my own max width is 100% and a display block because that's what I always do. I don't need that as a snippet. I don't need that as something, you know, maybe that's where an autocomplete could save me half a fraction of a second. But then at least my image now fits a little bit better. And then I also need some sort of column system. The more complex part of this, and the one that actually I think the AI would help the most with though, is this section down here. And the reason for that versus like even these though, like we could get it to create something there. And actually, why don't we try that? But this one down here is the weird one, because I don't even know how I'd approach that exactly. Because it looks like I'm like, I could use grid, but then have offsets and maybe that would work. But then I have to do it with Flexbox. Because with Flexbox, you can see this one centered here grids really bad at that type of thing. So I definitely want to use Flexbox for this one. And Flexbox grids are one of those kind of annoying things to be able to do nicely. And it needs people to wrap and everything. So I, you know, here, they're all stacking on top of each other. So I'm going to definitely ask it for help there. But maybe let's get our feet wet with this first one and see what we can do in prompting it. And I sort of want like a two column grid, but then something I could use to also have three columns and adjust that gap in the middle. So let's open my command prompt. And let's, there we go, right at the top open our the co pilot. My mind was not there. And let's see if we can get it to create something for us there. So I'm going to try this is what I came up with create a grid using CSS grid, I wanted to specify that that uses custom properties to find how many columns it will have with a media query. So it only works at seven, six, 86 and bigger. I think maybe that should have been 68 actually 68. And that's just based on the design that I had. I also want a custom prop to control the gap in the middle. Let's see what it does. Because if that works, that could be kind of handy. I should have told it what I wanted the name of it to be actually because when I wrote my HTML, I did give it a name. It's not my content grid, I just called it columns where I wanted to have columns. So what did it create for me? I don't want that. So I saw it writing as I was talking about that and it seemed I seem to have lost my answer here. And I don't know why. But one thing that is nice with this is the conversations persist between the app and here. And also it is in the browser too, which we're going to see in a second. But here I can see that there's a new chat that started. So if I go into that new chat, I can actually see what it created. So I don't know what happened in VS code. That's the first time that's happened to me. But you know, stuff happens. So this is okay. I'd want those to be locally scoped custom properties. And you know what, that's actually a pretty good solution. It's doing three columns that are getting turned into four here. It's not exactly how I'd want to use it. But I'm going to copy that anyway, because again, just getting sort of that first piece that you need to me is the better use instead of being like, okay, now how can I prompt this again? And then how can I prompt it again to fix that and fix that? And that's where you sort of run into issues. Whereas I can just copy these, I want them to be locally scoped, I can move them myself, right? That's not the easy way to do it. So I'm going to go ahead and I can move them myself, right? That's not the end of the world. This is going to be, I'm going to change this a little bit, where this is going to be. I'm just going to take this out and bring this over here. And then we're going to take this selector here, copy that and change that. So basically here, I don't need to really have the grid gap. I don't know why the grid gap changed to the different sizes either. Maybe I said something weird. I don't need that. The gap here, actually, that does make sense, just because when the content stacks, I do want it to have a gap. So we'll give it that original gap here and just take off the columns, because that doesn't matter. And then we can have the columns come in at the larger sizes. But I want it to be two columns normally. And then I can modify that. So let's hit save. And let's go and look at what that's given us in the browser. Except my name is wrong. It should be grid container. That should just be columns, right? Sorry, I have my thing off screen. I'm like, I don't have any columns yet. I call the columns, which is a terrible name. But there we go. We get the columns coming in. And I have my two columns here. We need our form over here. But we have the two columns. I have my two columns. And then here, where I need three, I could make a modifier class. But because I am using custom properties, and let's just go, we're going fast through this one. So that one would be down here. Yeah, this one, I could just say style is equal to and you what did they call it? Was it just column count columns, grid columns, grid columns of three. And then if I save that, now we have my three columns coming in there. I did create a data attribute to make the gap bigger. Again, I could prompt it, or I could just do this myself, right? So let's just duplicate that code, make this, it's like four. It's really big. Delete all that. And I said I did this myself because I called it data. What did I call it? Data gap of large data gap is equal to large. I do like using data attributes for modifiers these days. So there we go. We get my large gap. Obviously, I need spacing vertically. I need a background image here and some other stuff, but you can see it's it's coming together. And now we get to this complicated area down here. And this is where I think it's really going to help me out. Because as I mentioned, I'm not a fan of doing that. So I called this my flex grid. And I have my cards in here. So the one thing I will do on my own is let's just move these things over for a minute and close my sidebar. The one thing I'm going to do on my own here, because it's going to be faster. We're just going to say that the card has a padding. It's kind of let's just say one RAM border radius, one RAM and a background, a box shadow of one. It was offset by quite a bit. One RAM, one RAM. I could check my Figma file here. But we'll just say RG, one RAM or probably two RAM, it's huge their box shadow. And then I'm just trying to think we'll just do an RGB of 0, 0, 0 over 0.2 or something just so we have something in place and we can see them. Not the right color. It's not perfect, but it gets us on the right track. And now let's go look at what we need. So I need something that's going to have two break points. Right? So we go from one column to two column. And then we go to three columns. They did show us they're using a 12 column grid overall, we could try and reduce that because really, this is spanning four. We have a... Okay, I'm going to base it on the 12 column grid because I think it's going to be easier. I'm not always a huge fan of 12 column grids, but I think it'd be the easiest thing to actually do. All right. So this is what I came up with creative grid using Flexbox because I definitely need it to be, which has one column at small screen sizes between seven and then then between 768 and 1160, it has two columns and then larger than that, it's 12 columns. When it's 12 columns, all elements should span four and I just base that because the default is four. And I need utility classes to be able to span more than that. And then offset by one, two, three or four columns because here, I need to offset this one by one to create this gap between these ones. Here, I need to offset by four. Here, I need to offset by two. So just give me some offsets that I can use to make my life easier. And there's also a gap of 32 pixels between each row and the offset must take that into account because when you use Flexbox on grid, it's going to create some sizes. It was always the annoying thing with Flexbox is if you add margin to something, but then there's gaps involved and you're using Flexwrap, it wraps down to the next row. So you have to reduce the size of things or the offset anyway, it's always annoying. And I honest, this is where like math would be pretty heavy. You're creating a lot of classes. So let's cross our fingers and hope this does a good job. It might not I don't know if my prompting is the best here. Oh, see, I'm sorry, the context does not provide information needed to create a Flexbox grid per space. Oh, cool. It's actually doing it. So part I was like, Oh, no, it's not going to do it. And the reason I thought that is if you don't say create at the beginning of this and you just ask it, like if you just say, I don't know, if I didn't start with create, I noticed that because it's looking at the files that we've given it as context, it will often think you're asking it a question about that context instead of actually creating something based on it. So you just have to make sure if you need something new to add to that file, you're just starting with create. And then as we can see, it is able to do it. Did it just finish? It just finished. So this is good. I should have asked for that in RAM, but whatever, that's not a big deal. It doesn't really change anything anyway, to be honest. To find the grid items, grid item has a flex of one. Okay. Okay. Then grid item, oh, okay, they're changing that here. Oh, I don't know if that's correct. Interestingly, I asked it to put this 32 thing on the offsets, and it's put them on the grid items, and I don't know if that's going to work. I also don't really want it to be called the grid item, so I'm going to change that myself. So anyway, let's just copy this and bring it into VS code. So this, what did I call it? I called it flex grid. I didn't tell it what to call things either, which I should have done. So I'm going to switch this myself to flex grid just because I don't really want it to rewrite everything. And this would be my flex grid stark is anything that's the direct child. Let's see if that's even working at all. Where, okay, it doesn't look terrible, actually. We're along, I see it's three columns now, though, which is kind of weird, maybe, or no, maybe it's, maybe we're okay. Let's open up responsive mode and just see what happens here. Oh, there we go. Okay, so it's two columns and then they're all stacking. So the stacking is working. Here is weird. So this is what I was worried about. Because of the gap, things are flowing. Oh, you know why? That's my fault. I added padding to these. And we have padding and we have a size. So I never did a box sizing order box that might fix it. There we go. Okay, so let we fix that problem ourselves. And then we're going to get to the larger sizes. I guess we can close my dev tools and go back to this. Oh, let's get even bigger. And then we go to there. Now this actually does make sense. So let's go into here and see if this is going to work for us. This first one here should be starts at the end, and it spans 123456 columns. Did I tell it to make one that can span six? I'm not sure, but I can create a new one, I guess. Let's just go look. I did do a span six. Perfect. Okay. So the first one. Okay, so here's my flex grid. I did put all of that in a div because I knew it had to be contained. So let's give that the class is equal to span six. Ah, nice. Okay, so that's working. Now where we're going to see if this is going to fall apart on us or not. Let's just zoom out so we end up getting, there we go, is when I add the offset to some of these ones down there. But that worked. And then I can just come on this one and say let's write an offset of one, and it moved over. Nice. Now this is where the truth is and see if we managed to get this to work. We're here, we need an offset of four, and then the other ones should just work. My grid looks a little bit narrower, just because I think my container is smaller than what the one in the front-end mentor project is. So that's this one. So this one should be an offset offset of four. It worked. Cool. See, this is where my I had no idea because the math I hate the math on these things. And the last one I just have off screen. So then we have the muscle which stays the same. And then this one becomes an offset of two. Yes. Look at that. So cool. That was surprisingly easy to do. And if we go back in, let's just zoom in a little bit more. And then we get our two columns that are working fine. And then eventually everything just figure down, everything just stacks. Huh. Who would have thought that that would have worked out so well? I honestly was a little bit nervous about this part because I didn't know what the actual results of it would be. And I think it did pretty good. As I said, it looks narrower than in the actual design. Just because I think on my content grid here, this probably should have been like a 72.5 or an 80 or something just to give it more room. These also should be on like two columns because I had a little, I think I called it, did I call it flex dot flex? Let's display flex and a gap of one ram, let's say. And I didn't call it flex, they called it flex group. There we go. And that sort of comes together for me. So again, not finished, but we're getting there. And I did mention another thing that I wanted to look at with you guys was creating the custom radio buttons. So I'm not, we probably won't get through actually doing the entire thing for them, but just getting us onto the right foot like we've been doing so far. And just trying to get through this fast because honestly, this is going, you know, creating something like this can be a pain in the butt. So what we can do for this is we can just come in and Google, right? So custom radio button CSS, perfect. And let's see what's here. And I was originally going to look for a stack overflow one, but I see something here on modern CSS solutions, which is by Stephanie Eccles and is a fantastic resource. So I'm going to go with this instead, because I trust her to have a good quality result. All right. And so there's a little bit more that we need than just this one. But I just wanted to show you like here, because I have the pieces Chrome extension, which you can also get for edge or Firefox. You can see here, I get these little options that show up where I can copy and save directly as a snippet right away, because I know I want it. Or I can even ask co pilot about that code right here. And in an article like this, maybe this is less useful. But if you're in a stack overflow article, or answer whatever, where they didn't explain things so well, maybe that could actually be kind of handy. So you can see that it brings it in. It tells me a little bit what the code is doing in here. And then also from here, I can also save my snippets. And of course, if I've saved a snippet there, what that means is it has become available for me within pieces here. So I can just come down and, you know, I just come here, I right click, and I can insert the snippet right away. And there it is ready to use. This might need a little bit of updating or whatever to work within the project I have for the colors and different things. But that would be pretty easy to do. And it's kind of nice, you can just grab things really fast. If you're building out a project, you might even have documentation in the project you're working, you can go through the documentation and save parts of that documentation as snippets. Or you can just set the context of your conversation to the entire, you know, the documentation for your project to and make all of that available to make your life a little bit easier. And so I think the idea of, you know, being worried about AI is one thing, but knowing that you can use it for productivity, whether it's using chatbots to help you with things or just using the snippets to be more organized and have all of your stuff there, or whatever it is, I'm really digging pieces that sort of brings all of those different things together. And as I mentioned, if you do want to try it, it is 100% free right now. The link is just down below. And as long as you do sign up while it's free, you do get grandfathered in for one full extra year once they add in the paid plans. And a very big thank you to pieces for helping support the channel, as well as the other people that I'd like to thank who are Web On Demand, Andrew Simon, Tim and Johnny, who are my enablers of awesome, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.