Being surrounded by a real human team of all-knowing all-caring frontend wizards, whom you can ask at any waking moment of your working day for tips and tricks is unfortunately an unlikely scenario. Maybe I'm in the wrong job if this is the reality for other frontend devs, but my hunch is, access to specific knowledge is always problematic.
You may be in a sizeable team, like I am now for example, but there are only so many members of that team that you would ask certain difficult questions. Then of that ever decreasing pool of resource, you have to take into account their daily movements, wherever they are in the world and what their online hours might be. And lastly of course you have to be sure you're not becoming an irritant. So what if there was a resource that could fill in those very real gaps?
Probably like many developers in recent months, I've been using Chat GPT in exactly that way, as a kind of co-pilot and mentor. A middleware that can pick the "right" paragraph from the "right" piece of obsure documentation or comment on a StackOverflow thread, and feed it to me in a timely manner. If there's something missing, or the suggestion didn't work, I can query it again and it'll give me something new to try, with an explanation of what's going on.
I'm hesitant to use it for too much, for example to plot out an entire component structure in React. To that degree I find the tool harmful if you want to be a resilient developer. I'd much rather write out a useEffect from scratch and re-enforce my muscle memory than copy and paste. Yes, of course it takes longer, but it's like when the teacher tells you not to worry about taking notes because they're all in the slides they'll give you at the end of the lesson...somehow it just sinks in better if you hand write them out yourself.
In that context, I want to give two examples of how I've been using ChatGPT in the last week...
The first was when I needed to extract a number from a string. I wrote the regex for it using my own brain, no problem 😌 , but when I put up the Pull Request, Sonarcube which is part of our Continuous Intergration pipeline, threw up an error 😞 . The error was specifically about that regex I so cleverly crafted, and about some security concern it had.
On the face of things to me it looked like it couldn't be changed as it was a pretty simple regex, and so I had no idea what I could do to get it to pass the Sonarcube. Sonar didn't offer any specific examples on what I should do either. I knew there was no way I could get the specific answer from the internet through searching without losing another hour or more, and I had to get this PR merged on that day. No time for lengthy research unfortunately. Such is the reality of sprint based web development.
So naturally I turned to ChatGPT and asked it how I could get the regex to pass the Sonar test. It advised me to move a pipe character one position. I did that, made a commit, pushed and within a few minutes Sonar was passing on GitHub Actions. I had a green light and my colleagues could go ahead and review the PR. The turn around time on solving that problem was about 10 minutes. Impressive.
The second time I turned to ChatGPT this week was when I needed to add Google Tag Manager tracking to some Shopify themed pages. I'd been adding tracking events all over the Next JS website we'd been building, which was fairly straightforward, as this was our UI and I knew where and how to get the data. As we have an integration with Shopify for selling some products, 3 of the events I had to track were only available on Shopify. The task initially appeared daunting, as I knew the Shopify documentation would be seriously lacking.
Step forward frontend wizard, ChatGPT... I asked it how I should approach this and it laid out some steps and told me where and how I should be configuring tracking. After the initial set up, I then needed to deal with the Liquid syntax, also something I'd never had experience with. I asked it to help me with the syntax to loop through an array of lineitem objects the customer had in their basket and create a javascript object that I could then pass to the tracking function and push that data into the datalayer. It worked an absolute charm. It even told me how a comma could be added after every object except the last item, something I'm sure would have tripped me up and cost me another hour had I not been made aware of it. From knowing nothing about the where, what and hows of Liquid, to getting something working and appearing where I needed it, probably took about an hour. Again, seriously impressive.
Of course these are only positive examples I've given you so far. A screenshot of my ChatGPT history would give you a more balanced view of its failures, or should I say, my failures to construct the perfect prompt. I'll come back another time soon no doubt with a post on how ChatGPT has seriously screwed me over and I didn't realise it until it was too late... But until then, I'm enjoying the vodka and Redbull like supercharge it's giving me.