I recently had a project where I wanted to compare the stage version of pages to their production counterparts. While ideally, you would want to invest in something like Percy.io, I wanted an internal tool written in HTML and Javascript that would allow me to upload a CSV file and compare the URLs of Column A with those in Column B. I also wanted to document this simple script.
This example would also allow me to cover this topic, but move away from the over-saturated examples of AI-generated blog posts, SEO examples, and the ever popular “I made $5,000 in a day with ChatGPT” videos that now cover all of YouTube like vomit.
So why not also make this a practical use case for ChatGPT?
I started by defining the goal of my script and wrote out some requirements:
Purpose
- The purpose of this program is to allow the user to compare the HTML markup of two or more URLs. An example of this would be comparing a set of stage URLs with their corresponding production URLs.
Requirements
- The web app is constructed with HTML, CSS, and Javascript.
- The web app should optionally allow users to upload a CSV file to compare the HTML of URLs in Column A and Column B.
- The web app does not allow for the manual entry of URLs.
- The HTML of URLs in Column A, “Stage”, will be compared to the HTML of URLs in Column B.
- Compared URLs that have different HTML will be written to a new CSV file where column A has the URL from the Stage field and column B has the URL from the Prod field.
- In this new CSV file Column C will include the text “good” will appear when the HTML output from the URL of Stage and the HTML output of Prod is the same.
- In this new CSV file Column C will include the text “different” will appear when the HTML output from the URL of Stage and the HTML output of Prod is not the same.
- Once completed a confirmation message should appear saying “Comparison Complete” and a link to download the new CSV should appear with that.
I then gave the above to ChatGPT who provided the following Steps to Create:
Steps to Create
Here are the general steps you can follow to create the web app:
- Create the HTML structure of your web app by creating the necessary input fields (e.g. stage field, prod field) and buttons (e.g. compare, upload CSV).
- Use CSS to style your web app and make it visually appealing.
- Use JavaScript to implement the functionality of your web app. You will need to write code to allow the user to copy and paste or upload a CSV file containing the stage and prod URLs. You will also need to write code to compare the HTML of the URLs and write the results to a new CSV file.
- To handle the case where the comparison operation takes longer than one minute, you can use JavaScript’s setTimeout function to display a popup after a certain amount of time has elapsed.
- To allow the web app to view and compare URLs that are both on the internet and locally on an intranet, you will need to make sure your web app has the necessary permissions to access these URLs. This may require the use of a backend language such as Python or PHP to handle server-side tasks.
- Finally, you can use JavaScript to display a confirmation message and a link to download the new CSV file once the comparison is complete.
From here on out I spent about thirty minutes of back and forth with ChatGPT. I would ask it to do a step and half the time it would work, half the time it would fail mid-way through a response and generate an error. I’m assuming the errors may have been due to the high traffic usage it’s been getting lately. There were also a few times when it would make an error, or use a function that I knew wouldn’t work and I’d ask it to rewrite the response, but change some aspect of it.
ChatGPT and the future of programmer-assisted documentation
Up until this point ChatGPT was a “nice to have”, but hadn’t done much to save me time or effort had I just focused on writing out the HTML, CSS, and Javascript on my own, however, when it came to helping me create documentation is where I started to like ChatGPT
Once I found the HTML, CSS, and Javascript code to my liking and working I then had ChatGPT begin the work of documenting my simple script. I’d ask it to explain what my HTML, CSS, or Javascript functions were doing. I could then put that all together in a Google Doc, and just like that I had created a simple working script and eight pages of documentation explaining it all in about an hour.
ChatGPT is great for automated technical writing
The result is, in my opinion, a good example of what my work’s software documentation often resembles. Now in this example, it’s overkill to document this much for such a simple script, especially one that doesn’t fully work as intended, but you can easily see how if you’d written a more meaningful application that this is one of many places where ChatGPT can help speed up your existing work.