ChatGPT for Coders: 3 Practical Ways to Optimise your Workflow

Two programmers working together to solve a problem. Image generated by MidJourneyAI.

Since the release of ChatGPT, I’ve seen plenty of discussion on the internet about what it might mean for the future of programming.

There is certainly a lot of “FUD” being spread out there, but it essentially boils down to two arguments:

1. Programming will continue to be lucrative, and we adapt using tools like ChatGPT and Copilot.
2. Tools like ChatGPT and Copilot are only the start of what is to come, and the future of programming is uncertain.

In honesty, both of these futures are possible and might not even be mutually exclusive. However, that discussion can be reserved for another article.

As of today, programmers can stand to benefit from a tool like ChatGPT, which we should embrace rather than shy away from.

In this post, I want to highlight 3 use cases of ChatGPT that have benefited me and could help you too. In particular, these are: Explaining Code, Debugging, and Writing Boilerplates.

1. Explaining Code

Say you’ve picked up a new project with an existing codebase.

You’re trying to understand how everything is pieced together, what the previous developers have written and how it works. This can be quite a challenge.

While ChatGPT can’t piece together how the entire program works, it can help you understand particular sections or segments.

For example, I asked ChatGPT to explain the following piece of code taken from ProbeX, a side project I’m working on.

function recent_scans() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
            resp = JSON.parse(this.responseText);
        
            for (key in resp)
            {
                if(location.href.search('reports.html') != -1)
                {

                    scan_data = "<a href=/reports.html#"+resp[key]['scanid']+" onclick='location.reload()'>"+resp[key]['url']+"</a><br>";
                } 
                else
                {
                    
                    scan_data = "<a href=/reports.html#"+resp[key]['scanid']+">"+resp[key]['url']+"</a><br>";
                }

                // Update dictionary
                console.log(resp[key]["scan_status"]);
                if(resp[key]["scan_status"] == "Completed")
                {
                  resp[key].scan_status = '<span class="label label-success">Completed</span>';
                }
                else
                {

                  resp[key].scan_status = '<span class="label label-warning">In Progress</span>';

                }
                resp[key].scanid = scan_data;
                resp[key].id = parseInt(key) + 1;
                console.log(resp);
            }

             $(function () 
            {
                $('#table').bootstrapTable({
                data: resp
                 });
             });
    }
  };
  xhttp.open("GET", "/scan/scanids/", true);
  xhttp.send();
}

ChatGPT’s response was the following:

This code defines a JavaScript function called “recent_scans()”. When called, the function uses the XMLHttpRequest object to send a GET request to the specified URL (in this case, “/scan/scanids/”). When the server responds, the function checks that the response’s readyState is 4 (meaning the request is done) and status is 200 (meaning the request was successful).

If those conditions are met, the function then parses the response as JSON and uses a for loop to iterate over the JSON object. For each key in the object, it checks if the current URL contains “reports.html”, and if it does, it creates an anchor tag with an onclick event that reloads the page. If the URL does not contain “reports.html”, it creates an anchor tag without an onclick event.

The function then updates the scan_status of each key in the object, adding a ‘Completed’ or ‘In Progress’ label next to the status. Finally, the function uses the Bootstrap Table jQuery plugin to create a table with the data from the JSON object and display it on the page.

This gave me an initial understanding of what the function does, but I knew the code needed to be fixed. In particular, the reports.html page wasn’t loading upon click.

Hence, I asked ChatGPT to help me with debugging.

2. Debugging

In my opinion, this is the most life-changing use case of ChatGPT from a programming perspective. As I mentioned in my previous post, it almost feels like you have a second person working with you to solve a problem.

Now, if I simply ask ChatGPT what was wrong with the above code, it gives me advice that is too general. So, here it is essential to be as specific as possible.

For example, this is the prompt I entered:

The page isn’t being redirected when using this code; what could be the issue? The code section below is what I want you to pay attention to.

scan_data = “<a href=/reports.html#”+resp[key][‘scanid’]+” onclick=’location.reload()’>”+resp[key][‘url’]+”</a><br>”;

Here was the response ChatGPT came back with:

1. Make sure that the scan_data variable is being correctly appended to the HTML of the page. You can check this by inspecting the HTML source code of the page after it has been loaded in the browser.
2. Make sure that the location.reload() function is being called correctly. You can try adding a console.log statement to the onclick event handler to confirm that the function is being called when the link is clicked.
3. Make sure that the href attribute of the a element is set correctly. If the href attribute is set to an incorrect URL, the page will not redirect even if the location.reload() function is called.
4. Check the console for any error messages that might provide more information about the issue. Open the browser’s developer console (usually by pressing F12) and look for any error messages that might help identify the problem.

This was a great starting point.

I tried each of the suggestions it gave me and reported the outcomes back to ChatGPT. However, none of the advice actually worked.

Regardless, it helped me to think more about the problem. Through a back-and-forth process with ChatGPT (and Google), I realised that reports.html just needed more time to load.

I then reported my findings to ChatGPT and asked it to generate code that delays the page’s loading. I added its response to the codebase, and it worked!

It is essential to note here that this process is an iterative one. It requires some back-and-forth with ChatGPT and some understanding on the programmers part to know where potential issues can exist.

3. Writing Boilerplates

Lastly, having ChatGPT write entire boilerplates of code can be a huge productivity boost.

This is a more common use case of ChatGPT, but nonetheless, a powerful one.

Essentially, you can ask ChatGPT to write entire functions, scripts, and segments of code, which you can modify with your own specifics.

Let’s take a rudimentary example.

Prompt: Write a simple Flask API.

Part of ChatGPTs response:

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route('/greet', methods=['GET'])
def greet():
    name = request.args.get('name')
    return jsonify(message=f"Hello, {name}!")

if __name__ == '__main__':
    app.run(debug=True)

From here, we can simply change the route, the function name and the return value, and it would be ready for deployment.

Obviously, this is a trivial example that we could have just Googled. However, the premise remains the same if we wanted something more complex.

Conclusion

If it hasn’t already, AI tools like ChatGPT will likely shape how programmers write code in the future. As I see it, this means we can spend more time on the quality of the product rather than the intricacies of the code.

The use cases I’ve highlighted in this post are ones that I’ve found to be the most revolutionary, but honestly, I believe this only scratches the surface. For instance, other scenarios that come to mind are code optimisation, documentation writing and learning new technologies.

All in all, I like to think of ChatGPT as my very own on-demand assistant programmer; there to help me when I need, if I need. That’s it.