AI made my lunch

AI has been around for a while now and you encounter it everywhere. Paul Boag has just written an interesting article on Smashing Magazine about the different ways he uses it in his work. I might be a bit late to the game because while I've been aware of it for some time, I've not really been using it that much beyond a few simple tasks.

Learning something new

But last week I found myself with a bit of time on my hands so I decided I'd delve into some things I hadn't worked with before: React and Next.js with Craft CMS in headless mode as the back end. I started off in the usual way when working with something new: reading the docs. By following the docs and other tutorials on the Next.js site, I got a good way along. 

And then I got stuck with something that wasn't working and didn't know how to fix. As I usually do, I turned to Google for answers. Most of the time the answers will be in reply to questions on StackOverflow. This time I found some answers that helped, but not completely. So I posted a question of my own and I got an answer back fairly quickly (which isn't always the case) which did solve the issue I had at that moment. 

But then something else came up. Rather than keep going back to StackOverflow which could've been tedious – not to mention the delay in having to wait for answers each time too – I turned to AI instead. I'd already been using it to ask a few simple questions up to that point, but now I leaned into it more heavily.

Warp mode enabled

Working with React and Node, I'd been spending a lot of time in the command line (CLI). That was where I'd been asking AI questions too. I use Warp for the CLI (which really is excellent if you haven't tried it out before) which has something called Agent Mode built into it. Basically, you can ask it questions in natural language and it will give you answers. 

Up until now I'd mainly only been using it for things like “With this code I have this error, how do I fix it?” or “How do I do X in Y language” (when I can't remember the syntax). Aside from giving you the answer you need (quite often the first time too), it also gives you explanations for the code it's provided so it's also a good learning tool.

The problem I was having was that my data seemed to be getting imported twice which was causing problems with duplicate React IDs but also causing everything to be output multiple times. Using Warp and AI suggested I needed to use useEffect. But that still wasn't working, so AI suggested that it was probably because I was in dev mode and that the double-up wouldn't likely happen in production mode. So I needed to run a production build to test that theory. And then I ran into problems getting a production build to run. Again, AI helped me get to the bottom of that problem.

Eventually, I got to the point where I was able to verify that it was indeed a dev v production output problem, and once again AI was able to help me find a solution. This was done with a combination of pasting in the error messages from the console as well as the code I was using. Because everything is all on the same computer, AI is also able to look into your directories, analyse the structure, and read files like package.json, to help diagnose problems. All while also offering helpful explanations of what it all means.

Adding a new feature

I had everything nearly working the way I wanted but had been leaving one feature until the end: using category buttons to filter the content. Rather than turn to Google for help with how to do that, I continued to use the AI and asked: "I want to add buttons to filter by category, how do I do that?"

Through a series of questions to the AI as it provided suggested code updates, I eventually got exactly what I was after. And quickly too. It was like having a more experienced coding partner right by my side. No having to wait several hours for answers after posting questions on StackOverflow.

AI doesn't always get it right first time

I had my project working exactly how I wanted it in dev mode. But then it came time to export it into a format that I could use. I was only working on a small personal project so didn't want to get into the complexities of finding Node server-enabled hosting. It seemed the best approach would be to just export the static assets which I could then upload to any standard hosting server.

I was using DDEV to develop locally and had Craft running from the public folder. That's also what Next was using for serving the site in dev mode. But when it comes to exporting, Next won't let you use the public folder as the destination for your export output. But I didn't want to have to manually copy the contents from this output folder into the public folder to verify that the output was working correctly. 

And the other thing that was happening was that Next was automatically copying everything from the public folder into the separate output folder, which also included the contents of an upload folder which I was using to store CSVs related to each entry and Craft's cpresources folder.

AI suggested I needed a postbuild script in my package.jsonto do all the copying and removing of files and folders. This actually took several goes to get right. AI would suggest something, I'd run it and then update the AI with what wasn't right, and it would suggest something else until I got exactly what was needed.

A(n)I on the future

AI helped me in so many different ways with this little side project. I asked it questions about Craft, React, Next.js, Node-related scripts, and javascript in general, and it also helped me generate the image at the top of this page and then automatically convert it from a PNG to a JPEG. I'll definitely be using it a lot more moving forward and will probably be making less visits to StackOverflow 😉

I also plan to write up some thoughts about my first experience with React and Next.js, and also a deeper dive into the code for the side project I was working on, so be sure to check back again soon.