I’ve had an idea for a webtool for a number of years but I’ve never had the coding chops to make it happen. So I decided to see if ChatGPT could help me make my idea a reality. It did. But it’s still been a lot of work.

My idea is quite simple:

• You replace the text in the web tool with whatever text you want.
• The text resizes to fit the page perfectly.
• The contents of the page are encoded into the URL (so they’re not stored anywhere on the web)
• Which means you can share the link with anyone, and your message will appear nice and big in their browser. 

So I asked ChatGPT if it could help me build this. Naturally, it didn’t refuse.

I started broad by explaining the concept: 

You are an expert developer. I want you to build me the following webpage using html, css and javascript:
1. It starts with default main text that fills the screen, saying “click the button to replace this text”
2. There is a small button at the bottom-right of the page that says “replace text”
3. When the button is clicked a hover box appears with a text box and a button. The text box is prepopulated with “Replace this text” and button says “let’s go”
4. When the “let’s go” button is pressed, the main text is replaced with what the user has entered
5. This text is coded into the url so that it can be shared
If you understand this, please start coding

Get ChatGPT to build the foundation

ChatGPT started off strong. It created a page that made the text fill the width of the page on one line. And I could easily replace it.

From experience, the best way to code with ChatGPT is to ask it to create the most basic working version of your idea. You can then build upon it, function by function.

We now had to fiddle with the code to allow the headline to split across lines and fill the page vertically as well as horizontally.

This was more complicated than I thought. It took nearly an hour of trial and error until we got something that worked. And it kept breaking as we tried out new pieces of code. It was pretty infuriating. But fortunately AIs don’t get frustrated and keep hunting for solutions with a chirpy demeanor.

What about the URL?

Once I had it working nicely, I realised that the code wasn’t writing the information to the URL like I had initially requested. So I pointed this out to ChatGPT.

It surprised me with an apology.

I apologize for the confusion earlier. It seems I missed including the required code for encoding the headline in the URL as a query string and reading it back.

This issue took a while to sort. And as part of this, we ended up using the console in the browser to see what errors were being produced. This was how I discovered that the problem was all my fault. I was trying to get the function running locally on my computer when it will only actually work when the page is live on a server.

Gah! An hour of annoyance could have been easily avoided by just being a bit smarter. But it’s a lesson I’ve learned for next time.

By this point, the code was getting pretty lengthy. In fact, it was too long for ChatGPT to spit out in one go. So it would just stop in the middle of the code.

I had tried typing ‘continue’ but I was never convinced that it was picking up exactly where it left off. So I would ask it to continue from a few lines up. And I’d request that it responded in a code box, to make it easier to copy.

This can get confusing

The more the code grew, the harder it was for both myself and the AI to be certain we were working on the same thing. So every now and then I would paste-in the code I was working with, asking ChatGPT to amend it to fix our issues.

I often had to rewind to previously working versions when little changes broke the important functions. It was two steps forward, one step back. So these check-ins were vital.

Give it some style

Now that the tool was mostly working as I wanted, it was time to style it. So I chose some fonts, added a black bar at the bottom to hold the buttons and nudged things around the screen like a fusspot.

I was capable of doing much of this coding but I wanted to get ChatGPT to code everything. So I kept asking questions like a beginner. 

This wasn’t a quick process. It took hours of fiddling and piddling to get the thing that was in my head onto the page.

But – of course – all the effort I’d put in made the reward so much sweeter. (If you want to understand why this is, you should probably read the book Friction that I wrote with my friend Soon Yu!)

Some lessons on coding with ChatGPT

The reason I do these experiments is to learn. And because I’m a generous soul, I want to share these learnings with you so you can use ChatGPT to code your own ideas:

• Start small and build out
  Begin by getting ChatGPT to create the simplest functional prototype. Then gradually add more functionality and tweaks until you’ve got the finished thing.
• GPT-4 isn’t always the best
  I started by using GPT-4 to do the coding for me. It’s slow. Good, but slow. I then ran into my data limit for using GPT-4 so I carried on with GPT-3.5 – which spits out responses like a firehose. Its responses appeared to be just as good and involved a lot less waiting, so I didn’t return to the fancy-pants GPT-4 engine.
• Keep checking in
  It’s easy for the code you’re working with to drift from what the AI thinks you’re working with. And even for little errors to creep in. So regularly paste your code into your requests so that ChatGPT knows what it really needs to amend.
• This isn’t fast
  Writing this code was a journey. It took a lot more time than I anticipated. To be fair, much of that time was a result of my own ignorance and dumbassery. But I firmly believe that ChatGPT’s strength is in giving you powers you didn’t have rather than strapping rockets to your shoes.

I’m pretty happy with what I ended up with. There’s lots of piddling I’d still like to do. But I think it’s good enough to release for now.

What do you think? Was it worth the effort?