How I use AI to boost productivity while coding

Key Takeaways

hi there my friend and friends like anything else that has tons of hype around it I've 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 and 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 or 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 uh that we can focus on and 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 uh 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 uh 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 uh but the first thing we're going to look at is using the chat bot that is built into here and uh if you look down 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 that's kind of cool but what I want to focus on here is how say we have this design system or you have your files or whatever where you 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 uh 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 uh 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 uh and also that I wanted the colors to be hsl and the font sizes to be in Ram and let's see what that gives us um just really quickly as it's going through this cuz one thing with gp4 is it's a little a little bit slower uh 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 uh even if it's slower just because I don't know that everybody tells me it's better basically U 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 you if you're working on a client project or something like that you might not want that code going onto the cloud uh 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 their 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 uh 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 uh 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 tell it what context it should be looking at especially if you're asking questions about um specific code and stuff like that um 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 um issues or reasons uh along the way there but for this code I really don't mind um but yeah I'm going to try a few prompts here to see if I can't fix the the naming of these and I'll be right back all right so I just finished uh and I'll just show you the prompt I did I said change the color names uh change the first one to primary 400 the second one to primary 800 this one I was really explicit with so maybe there actually would have been a bit faster just to change it myself uh but then for the font sizes actually I was a little bit surprised this worked because I said uh 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 uh 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 uh and it updated both this stuff and this stuff uh over here so that was kind of cool um 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 uh 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 um which I guess is where the name comes from uh 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 uh but what's cool with this is it saves it as a piece so it's saved in here uh 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 uh view annotations and a few other things but you'll notice here it's actually come up with like some search things cuz search with natural language if I want to look up say uh custom properties cuz I want to see different things that have been created with custom properties and it pulls up things that are using custom property 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 save 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 CU 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 uh you can see here I've added the extensions so I have this thing that's right here now right there right um which has been added and if you're running you know on yours it's probably on the other side uh 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 have saved material so these are all the Snippets I've saved and they save them by language uh 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 uh 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 uh it's even started me off um 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 um 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 when 100% free to use right now I get full access to everything they can do that I've been showing you and a whole lot more I'm 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 uh 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 um some utility classes also for my headings because if I go back to my figma file and I come and look in here there's these headings that have the font size the font weights line Heights and all of that uh 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 uh pieces uh it opens up I have all these like different things I can do uh here because it's part of vs code and I'm going to do open VSS code or open the co-pilot and it's actually going to open up right here uh I can set the context and I can also do this over here actually where I can just find my file and I can um 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 uh 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 uh 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 that use the custom properties we've already created uh all of them are going to be semi- bold and have a line height of 1.1 just cuz 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 uh in this design system are just listed out you know 48 2420 I don't know what those are in terms of my custom properties and all those other things uh 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 um which is kind of nice oh and it's giving me a little way on how I can actually use that as well um and this is I'm currently actually on GPT 3.5 turbo inside of VSS 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 um 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 um can you or not can you I always say that just combine the I'm too polite with the AI um combine the the properties that have the same values into a single selector let's see if I can do that uh 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 um just copy the code directly to here um 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 a little bit complex and kind of long and I don't want to have to rewrite it uh and this is one of those times where you not having to rewrite things as nice and I did save it as a gist in GitHub and that's a nice First Step but 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 githead gists so very convenient there um 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 my GitHub account to um my pieces so it's seeing here it is this is actually I just saved it recently so uh it's found it but if I had other ones I could ccle 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 uh 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 write click on there and I can insert the snippet and there is my content grid that I've brought in uh and this would definitely be one of those handy ones that I would want to keep as my Snippets and use uh for a lot of different things uh the cool thing in here though is if you know I'm adding it in if if I just click on it instead it's going to show me what the code is and so I can like look at all the different code I can see the different tags that it's automatically tagged with it um I can read you know the description of what it's doing it's generated this description on its own uh which is kind of cool um like so like say vertically centering I found this on um stack Overflow and brought it in just so we could 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 uh and it does this all automatically which is kind of cool and fun now there's two other things uh 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 like you know these custom check boxes which are always kind of annoying but let's come on over to here uh where we have this interesting shape that's going on uh and this I know how to create this so I would just write the CSS for that myself um but let's say you're sort of mucking around for a while or you're not too sure what to do uh 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 U but you know what it's it's not terrible so I can actually just take a screenshot of the one that's like close enough to what I want um 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 um 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 uh 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 uh that I might 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 cuz obviously uh 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 uh and even if I wanted to save the snippet I'm just going to do 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 um give 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 um where you want to grab that you screenshot it pull it in and you're good to go so that is something that can really handy from time to time now with this in place and I have a lot of the the pieces that I need here uh in in place to be able to actually start writing some 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 cuz 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 um 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 and there we go the magic of editing and so I have everything in place but obviously uh we're very far off having like a a working site here um but it's not terrible uh it's coming in and it everything looks like half decent actually I'm pretty happy with what it looks like and I mostly use the classes that um it created for me for my font sizes and other stuff like that so uh 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 uh 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 cuz that's what I always do um I don't need that as a snippet I don't need that as something you know maybe that's where an auto complete could save me half a fraction of a second but then at least my image now um fits a little bit better uh and then I also need some sort of column system uh 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 uh and the reason for that versus like even these though like we could get it to create something um there uh and actually why don't we try that uh but this one down here is the weird one cuz I don't even know how I'd approach that exactly um 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 flex box cuz with flex box you can see this one centered here grids really bad at that type of thing uh so I definitely want to use flex box for this one and flexbox grids are one of those kind of annoying things um to be able to do nicely and it needs to be able to wrap and everything so I you know here they're all stacking on top of each other so uh 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 uh 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 uh let's open my command prom prompt and let's there we go right at the top open our um our the co-pilot my mind was not there um and let's see if we can get it to uh 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 it only works at 7686 and bigger I think or maybe that should have been 68 actually uh 68 and that's just based done the design that I had um I also want a custom prop to control the Gap in the middle see what it does uh cuz if that works um 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 um I did give it a name of uh it's not my content grid I just called it columns uh where I wanted to have columns so what did it create for me um I don't want that [Music] so I saw it writing as I was talking about that and it seem I seem to have lost my answer here and I don't know why uh but one thing that is nice with this is the conversations persist between the app and and here and also it is in the browser too which we're going to see in a second um 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 in vs code that's the first time that's happened to me but you know stuff happens um so this is okay I'd want those to be ccope custom properties um and you know what that's actually a pretty good solution um except crd call sort of it's doing three columns that are getting turned into four here um it's not exactly how I'd want to use it but I'm going to copy that anyway cuz 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 the this again right 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 end of the world um 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 um I don't know why the Gap changed at the different sizes either maybe I said something weird I don't need that the Gap here actually that does make sense just cuz when the content Stacks I do want it to have a gap uh so we'll give it uh 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 um 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 uh except my name is wrong it's should be grid container this should just be columns right um sorry I have my thing off screen I'm like I don't have any columns yet I called it 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 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 um but because I am using custom properties and let's just go we're going fast through this one uh so that one would be down here uh yeah this one I could just say style is equal to and you uh 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 um 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 uh let's just duplicate that code make this it's like four it's really big um delete all that and I said I did this myself cuz I called it data uh what did I call it data gap of large data Gap is equal to large um 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 uh and now we get to this complicated area down here and this is where I think it's really going to help me out uh because as I mentioned I'm not a fan of doing that so I called this my Flex grid uh 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 close my sidebar um 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 uh padding it's kind of let's just say one ram border radius one ram and a back uh background a box shadow of one it was offset by quite a bit one r one ram I could check my figma file here uh but we'll just say uh RG uh 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 0000 over2 or something just so we have something in place and we can see them um 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 um so I need something that's going to have two break points right um so we go from one column to two column and then we go to three columns uh they did show us they're using a 12 column grid overall we could try and reduce that cuz really this is spanning four we have a I'm okay I'm 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' be the easiest thing to actually do all right so this is what I came up with um create a grid using Flex boox cuz I definitely need it to be which has one column at small screen sizes between seven and 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 it you know the default is four and I need utility classes to be able to span more than that and then offset by 1 2 3 or four columns because here like I need to offset this one by one to this gap between these ones here I need to offset by four here I need to offset by two so just like give me some offsets that I can use to make my life easier uh and there's also a gap of 32 pixels between each row and the offset must take that into account because when you use flex box unlik grid like it's going to create some sizes and it was always the annoying thing with flex box um is like if you add margin to something but then there's gaps involved and you're using Flex wrap it wraps down to the next row so you sort of have to reduce the the size of things or the offset anyway it's always annoying uh 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 uh 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 flex boox grid per spec oh cool it's actually doing it so part I I was like oh no it's not going to do it um 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 uh I don't know if I 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 um 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 um it's did it just finish it just finished um so this is good I should have asked for that in R but whatever that's not a big deal it doesn't really change anything anyway to be honest um Define the grid items grid item has a flex of one okay okay then grid item oh okay they're changing that here o I don't know if that's correct interestingly I asked it to put the this 32 thing on the offsets and it's put them on the grid items and I don't know if that's going work I also don't really want it to be called grid item so I'm going to change that myself uh so anyway let's just copy this um and bring it into VSS code uh so this what did I call it I called it Flex grid I didn't tell it what to call call things either which I should have done um so I'm going to switch this myself to flex grid just cuz I don't really want it to rewrite everything uh and this would be my Flex grid star CU anything that's the direct child uh let's see if that's even working at all uh where okay it doesn't look terrible actually uh we're 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 uh 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 um because of the Gap things are 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 uh I never did a box sizing border box that might fix it there we go okay so we fixed that problem ourselves and then we're going to get to the larger sizes uh 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 um this first one here here uh should be starts at the end and it spans 1 2 3 4 5 6 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 uh let's just go look I did do a span six perfect okay uh 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 um let's just zoom out so we end up getting there we go uh is when I add the offset to some of these ones down there but that worked and then I can just come uh on this one and say let's write an offset of one and it moved over nice uh now this is where the truth is and see if if we manag to get this to work uh we're here we need an offset of four and then the other ones should just work um my grid looks a little bit narrower just cuz cuz I think my container is smaller than what the one in um the front end Mentor project is so that's this one so this one should be an offet offset of four it worked cool see this is where my I had no idea cu the math uh I hate the math on these things uh and the last one I just have offscreen 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 uh that was surprisingly easy to do and if we go back in let's just zoom in um a little bit more and then we get our two columns that are working fine and then eventually everything um just if we go 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 cuz I didn't know what um the actual results of it would be uh and I think it did pretty good as I said the it looks narrower than in the actual design um just cuz I think on my content grid here this probably should have been like a 70 2.5 or an 80 or something just to give it more room these also should be on like two columns cuz I had a little I think I called it did I call it Flex Flex let's display flex and a gap of one R let's say and I didn't call it Flex I called it Flex group there we go um and that sort of comes together for me so not finished uh but we're getting there and I I did mention another thing that I wanted to look at with you guys was creating um 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 cuz honestly this is going you know creating something like this can to 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 uh something here on Modern CSS Solutions which is by Stephanie Eckles and is a fantastic resource so I'm going to go with this instead uh cuz 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 uh I just wanted to show you like here because I have the pieces Chrome extension which you can also get for Edge or Firefox um 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 or whatever where they didn't explain things so well maybe that could actually be kind of Handy uh so you can see that it brings it in it tells me a little bit what the code is doing in here uh 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 uh pieces here so I can just come down and uh you you know I just come here I right click and I can insert the snippet right away and there it is uh ready to use uh 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 uh 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 too uh 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 chat Bots 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 uh 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