AI: Website Overhaul

Overview

Like everyone else, I am fascinated and terrified by the recent proliferation of AI.  I don’t know where it will land once the dust settles.  In the end, will its impact be as rapid and far-reaching as smart phones? Will it be more of a slow burn like driverless cars?  Or will it just be another Segway?

Regardless, it is obviously an important part of the landscape and here to stay, so I decided I needed to explore its use in development and gain some experience.  I chose Cursor since it’s a fork of VSCode which I am very familiar with.  I purchased a pro license and developed a plan of attack to perform some long-needed maintenance of my existing web sites.

I wanted to tackle a simple PHP web site I had for one of my music projects, travelbugsmusic.com, first.  I developed this site over a decade ago and had only upgraded it when forced to dos so by mandatory PHP version bumps on my ISP.

My plan was initially driven by changes that I wanted to make on the site, but as I delved into it, I was immediately amazed at how easy it was.  I wasn’t really learning much because Cursor was so adept and making changes quickly, and the code was generally very good. The objective was to learn the use of AI and Cursor, not just to improve the site, so I realized I needed a new plan.  I took a LinkedIn Learning Cursor course and revised my plan of attack to be based more on the features that the tool provided than business requirements.

That’s when the learning really began.  I quickly started to understand what “vibe coding” meant, what the advantages of using AI in development were, and probably more importantly, what the pitfalls were.  I became very proficient at having “conversations” with the tool and understanding how to iteratively prompt it to eventually accomplish tasks.  I also learned the importance of reviewing and testing the work proposed by Cursor and asking it to explain the changes so that I understood what was being done and how I could take advantage of features.  If your code becomes a black box, you won’t even know the next question to ask.

Challenges

• Out-of-date and inconsistent codebase
• Complete lack of knowledge about AI in the development process

Outcome

In the end I didn’t write a single line of code for this experiment but used Cursor to create a clean, bug-free and modern site.  The SEO is notably improved, and I was educated by the tool on things I should do outside of development like Google Search Console and ReCAPTCHA key migration.  I integrated my GitHub repositories and FTP capabilities with Cursor so that it could handle tasks like pull requests and deployment.   I feel like I am now very adept at using AI to improve my development process and that I’m an advanced user of Cursor in particular.  I know how to use the various modes, the IDE, and features like the screenshot  I used the tool to accomplish the following:

• Overhauled the HTML, PHP, CSS and JavaScript for best practices, modern structure, and performance
• Improved the SEO and accessibility of site
• Added a new merchandise page simply based on existing layout, a few images, and simple, plain-English instructions
• Automated my deployment process
• Fixed various bugs, server errors and an ajax call that was non-functional

Lessons Learned

I now see the benefit of AI for speeding up development and developing clean, consistent code. However, I also see that you need to have experience and critical thinking in order to guide AI towards your goals.  You can not just “turn off” and accept the changes made by AI blindly.  AI needs to be a collaborator not an easy button.