Noob Creates a Useful-ish Site With The Help Of AI. (Part Two.)

Documenting my journey to brainstorm, evaluate, code, and launch a practical idea with the help of Bing Chat and ChatGPT. This is the second chapter.

Welcome back to the second edition of Daniel Wades Blindly Through Code He Understands Nothing About!

Last week, I kicked off an experiment to see whether I could create a site offering a useful service by relying exclusively on input from AI.

Things went swimmingly for a while, but pretty soon it became clear that advanced functionality was tricky to implement and troubleshoot if you didn’t have any actual coding skills. (Hi, I’m Daniel, I don’t have any actual coding skills.)

I was left with a few options:

Today, I share with you the second part of my journey, in which I succeed in creating a minimum viable product. (Retroactive spoiler alert!)

Here’s how that went down.

🪃 Step 8: “Starting from scratch”

In their comments to the Part One post, a few people offered suggestions and feedback. The consensus was:

1. Stick with the original idea of the weather app instead of pivoting to another one.

2. Try ChatGPT for coding instead of Bing.

Now, in my own limited experience, I found Bing Chat to be a more competent coder than the free version of ChatGPT (which relies on GPT-3.5 instead of GPT-4).

But I was willing to give ChatGPT a go.

So I made the decision to go with a mix of Option 2 and 3: Scale back my ambition for the site and start with a fresh code from ChatGPT.

To kick things off, I used a tweaked version of the task prompt from Bing Chat (see Part One):

ChatGPT was very helpful. It created a plan of action…

…then wrote the necessary HTML code…

…and provided suggestions for where to host it:

Thanks to ChatGPT, I discovered Glitch, which was perfect for my needs. It allowed me to paste and test the code in real time and hosted my project on a public URL that could be easily shared as a prototype site.

I then asked for the JavaScript which could incorporate my existing OpenWeatherMap API key from the first chapter. ChatGPT helpfully complied:

All in all, ChatGPT delivered the basics on the first try.

🧪 Step 9: Testing & fixing

The first iteration of the website was surprisingly quick to implement and worked just fine. Uh…almost:

“It’s a fine day for GETTING SCORCHED ALIVE!”

I don’t know about you, but I prefer temperature ranges of non-cataclysmic variety.

Luckily, this was a quick fix for ChatGPT.

Ah, much better!

At this point, the barebones version of the site was technically done.

But I still wanted to see if I could:

1. Add a location check to the text box, so users got suggestions as they typed.

2. Expand the range of possible recommendations. (The original code always gave the exact same two recommendations per temperature range/activity type combination.)

⚙️ Step 10: Tweaking

This is where I hit the limitations of ChatGPT’s less capable model (GPT-3.5).

Location field became a lost cause

I wanted to provide users with real-time location autocomplete. ChatGPT naturally suggested using Google Places API for this purpose, but that entailed API costs, so I asked for an alternative solution:

ChatGPT happily obliged…but the code didn’t work.

This interaction repeated several more times. Each time, ChatGPT apologized, provided new code, and swore that now it would work. It never did.

After a while, I made the executive decision to leave the “Location” field as is.

Better recommendations? Bing to the rescue!

I returned to the original code but wanted to add nuance to our recommendations. Here’s what I asked ChatGPT for:

Can you guess what happened next? Yup:

Let me spare you the suspense: I went back and forth with ChatGPT not once, not twice, but well over ten times. I tried copy-pasting the errors for context. I tried asking for alternative approaches. I even started a brand new chat and pasted the latest code there to try troubleshooting it.

Nothing worked. And I really wanted this part to work.

Then, just when I was about to give up and go cry in a corner, I had a radical idea: What if I took my code to Bing to see if it could help?

So that’s what I did:

Before I could even say what I wanted, it became clear that Bing wasn’t messing around:

Tough. But fair!

I immediately asked Bing to streamline the code accordingly, which it did.

Finally, it was time to see if Bing succeeded where ChatGPT had failed:

It. Worked. On. First. Try!

I then went back to ChatGPT to expand the list of possible recommendations for each combination to 15.

Friends, I had my minimum viable product.

🚀 Step 11: Launch

If you want to check out the Glitch-hosted Version 1.0, you can do so right here:

You type in your location, select your preferred activity type, and get a list of three things to do based on current weather and your preferences.

Yes, it’s super basic, but it is a working service coded entirely by ChatGPT and Bing.

I’ve achieved my goal of getting a site off the ground by relying purely on AI input.

Potential future upgrades

Clearly, this is a far cry from a genuinely useful site. To get there, I’d want:

• Proper domain and hosting

• Functioning location API

• Dynamically generated recommendations (instead of a preset list)

• Location-dependent recommendations

• Styling and visual tweaks

• Responsive design

• …and probably a whole lot more.

I don’t know if I’ll eventually revisit this series with a Part Three that focuses on the above.

For now, I’m happy to switch gears and go back to my regular posts.

Observations: ChatGPT (GPT-3.5) vs. Bing Chat

Back when I “coded” a basic game using AI, I offered up the following analogy:

Think of ChatGPT as a loyal but somewhat dumb dog: It’ll keep trying to make you happy forever despite not always knowing how.

Bing AI, on the other hand, is a fickle cat: It knows exactly what you need but whether it chooses to comply depends entirely on its mood.

I still stand by it.

Compared to Bing Chat, the free version of ChatGPT is…

1. More cooperative

Unlike Bing, which often argues with the user, ChatGPT is endlessly accommodating.

It will doggedly (ha!) continue to provide new code to fix any mistakes, while apologizing profusely for making them in the first place. It wants to be a good boy!

2. Has a better interface

ChatGPT is more user-friendly when it comes to coding tasks.

It always returns any generated code in a separate snippet box with a one-click “copy” icon. (Bing can do this as well but sometimes simply forgets to do so.)

ChatGPT now also has a super useful “Continue generating” button:

This not only lets you skip the “Please continue the code from [this line]” prompt but appends newly added lines directly to existing ones, which makes the final code easier to copy-paste as a whole chunk. (With Bing, I had to manually stitch the separate code fragments together.)

Finally, there’s no limit to the amount of “turns” you can take in a single ChatGPT chat. (Although Bing recently increased its limit from 20 to 30 turns per session.)

3. Not quite as capable

ChatGPT does well when generating the initial code and incorporating basic features.

But when things get more complex or errors start popping up, the limitations of the free GPT-3.5 model kick in.

This is the second experiment where I was forced to give up on ChatGPT and turn to GPT-4-powered Bing to take my code to the finish line.

My recommendation

If you’re going to use AI for coding tasks, I’d recommend the following approach:

• Create and tweak with ChatGPT

• Review and troubleshoot with Bing

Or you could pay the 20 bucks per month for ChatGPT Plus and get the best of both worlds. Combined with access to web browsing and third-party plugins, it’s a bargain!

Over to you…

What do you think of my take on ChatGPT vs. Bing? Do you have a different experience? If I’m overlooking some obvious ways to improve the output of ChatGPT (3.5), I’d be thrilled to hear about them!

Leave a comment on the site or shoot me an email (reply to this one).