Over the previous few months, we have put a variety of time into exploring how ChatGPT can assist us write code. On this article, I’ll take you thru the method of utilizing ChatGPT to just do that.
As a part of my every day movement, there’s an annoyance I needed to deal with. Creating the “Additionally” references in my ZDNET articles takes a bunch of steps. For reference, this is one such Additionally hyperlink:
Additionally: Okay, so ChatGPT simply debugged my code. For actual.
Doing that takes a sequence of steps (proven beneath), which I needed to remove. I do a bunch of those in most articles, and it isn’t solely annoying, it is tough on my wrist.
However is it doable, with out writing a single line of precise code, to create a JavaScript bookmarklet to remove this annoyance? Can non-programmers accomplish small initiatives like this?
The reply is sure. However it’s not as fast or intuitive as you would possibly like.
I recorded every of the steps I took to create this functionality in a sequence of diary-like log entries. I are inclined to work on initiatives like this by doing a little bit bit, recording my ideas and observations, then stepping away to let that percolate in my mind whereas engaged on different deadline assignments. Then I come again, do a bit extra, and write a bit extra.
By studying the log entries, it is possible for you to to get a really feel for the method of ChatGPT programming-through-prompting. On the finish, I am going to talk about any insights the method has helped me uncover.
Let’s get began.
Log Entry 001 – Friday, 2:10pm
So, I simply determined it is time to have ChatGPT write some code for me. There is a repetitive process I do on a regular basis, a number of instances through the day, and it is time to have a button that saves me steps. I’ll suppose on this whereas engaged on one other article.
Log Entry 002 – Friday, 2:45pm
It seems it isn’t as straightforward as all that. You may’t simply inform ChatGPT to “write me a button that saves me steps.” You even have to have the ability to describe what you need it to do. That could be a talent all by itself.
Now, happily, I have been coding for many years, so I understand how to create a specification and even learn how to simply describe what I need. Time to suppose. I will be again.
Log Entry 003 – Friday, 4:02pm
Okay, so first I’ve to have the ability to describe what I need. As soon as I’ve described it, I can go and attempt to make ChatGPT give me code to automate this course of. I need one thing that reduces the clicks concerned in making our Additionally hyperlinks.
That hyperlink consists of some parts:
- The string “Additionally: “. Be aware that it has a colon adopted by an area
- The identify of an article, was a hyperlink
- Your entire factor completed in boldface
It appears easy sufficient, however listed here are the steps I take every time I need to make considered one of these.
- Discover the article I need to “Additionally”. This I will not automate, because it’s totally different every time.
- Go to that article’s web page. This, too, I will not automate. However I need to automate all the things that follows.
- Copy the title of the article
- Swap to the ZDNET CMS and click on on the road the place I need to insert the Additionally.
- Sort the string “Additionally: “
- Click on after “Additionally: ” and choose Paste and Match Fashion from the Edit Menu. I can not use the ^V keyboard shortcut as a result of in any other case I am going to get an enormous headline font. And I can not use the Paste and Match Fashion keyboard shortcut as a result of it requires urgent too many keys without delay to reliably do every time.
- Now, swap again to the article and replica the URL.
- Swap again to the CMS
- Choose the headline simply pasted
- Sort ^Okay as a shortcut, which opens the insert hyperlink dialog.
- Paste within the URL, click on OK.
- Choose your complete line
- Boldface the textual content.
That is principally 11 steps, a bunch of mouse clicks, some click on and drags, and a bunch of keypresses. I need to cut back that to at least one click on and one paste.
Log Entry 004 – Friday, 4:57pm
That was undoubtedly an outline of my course of, and it additionally describes a few issues. However it would not say something about what, precisely, I need in a brand new instrument. For ChatGPT to jot down the code, it has to know what I need it to do. Extra thinky time.
Log Entry 005 – Friday, 7:12pm
I made a decision that, somewhat than do a Chrome extension, I am going to do a JavaScript bookmarklet. These are straightforward so as to add to a bookmark bar, and do not require a variety of additional set up problem. All you must do is right-click on a bookmark bar, select Add web page, and (1) enter the title. The JavaScript itself will get pasted into the URL discipline (2).
Here is a primary draft of what I need this new bookmarklet to do.
I need to create a JavaScript bookmarklet. When pressed, it retrieves the present URL of the present web page. It additionally retrieves the title of the web page. It locations a bit of wealthy textual content into the clipboard that consists of the string “Additionally: ” adopted by a wealthy textual content hyperlink with the title of the hyperlink and the retrieved URL. Your entire wealthy textual content block must be bolded.
If I can get ChatGPT to provide me one thing that works, all I am going to must do is click on the button, swap over to the CMS, discover my spot, and paste. A lot sooner.
Now, all I’ve left to do is…all the things.
Log Entry 006 – Saturday, 8:30am
I am courageous. I made a decision I’ll feed the precise description above to ChatGPT and see if it’ll give me code that works. Hey, it is value a strive.
Log Entry 007 – Saturday, 8:41am
Properly, that completely did not work. All it did was preserve no matter was beforehand in my clipboard. However a part of ChatGPT’s response gave me some pause.
It is also necessary to say that the doc.execCommand(‘copy’) is marked as out of date in fashionable browsers (e.g., Chrome, Firefox), as they recommend utilizing the Clipboard API, however as of my data cutoff in 2021, the Clipboard API would not help copying wealthy textual content to clipboard instantly.
So, the code it is aware of is perhaps out of date. Let’s attempt to see if we are able to use ChatGPT Plus’s plugins with the WebSearchG plugin.
Properly, that additionally did not work. As a substitute of code, I used to be despatched to websites like Stack Overflow to learn articles on learn how to handle clipboard information.
This may not do. I am making an attempt to get ChatGPT to do my programming for me. Let’s strive the ChatGPT Plus add-on Code Interpreter and see if it might assist.
Log Entry 008 – Saturday, 9:08am
That did not work both. It responded with:
Sadly, as of my data cutoff in September 2021, there isn’t any direct and universally supported method to copy wealthy textual content to the clipboard utilizing JavaScript.
Rats! Foiled once more! Time for extra espresso.
Log Entry 009 – Saturday, 10:27am
I have been considering on this some time (and fueling with extra espresso). Maybe the phrase “universally supported” must be addressed. I am altering my first line from “I need to create a JavaScript bookmarklet.” to “I need to create a JavaScript bookmarklet in Chrome.”
Let’s have a look at what that does.
Log Entry 010 – Saturday, 10:33am
Properly, no. That gave me again the HTML in textual content type. That is not one thing I can instantly paste into the CMS. I would like it to return wealthy textual content on the clipboard.
Log Entry 011 – Saturday, 11:20am
I am considering that possibly ChatGPT Plus did not use Code Interpreter, regardless that it was enabled. To make use of plugins, typically you must explicitly inform ChatGPT to take action. Let’s do that as my opening line:
Use code interpreter for present browser api calls. I need to create a JavaScript bookmarklet.
Oh, yeah. That works! Test it out. This was created with a single click on on my bookmarklet:
Additionally: I used ChatGPT to jot down the identical routine in 12 high programming languages. Here is the way it did | ZDNET
Log Entry 012 – Saturday 1:04pm
The truth that this works in addition to it does is simply super-cool.
That stated, I do not just like the ” | ZDNET” on the finish of the string. So I’ll see if I can persuade it to take away it.
Log Entry 013 – Saturday 2:27pm
Lunch was good. Recent, wild-caught rockfish from proper right here within the Pacific Northwest. It is fairly cheap as a result of it is a native catch. A bit of lemon and Outdated Bay. Mind meals. And with that…
I am at an fascinating choice level. There are 3 ways I can proceed.
One is to attempt to modify the unique immediate so as to add the brand new options I need. That is the only option if I’ve to start out a very new session.
The gotcha to that strategy is that ChatGPT would not all the time return the identical outcomes when requested the identical query. So if I feed it an prolonged immediate, I’d get again one thing that works, I’d get again one thing that partially works, or it’d resolve to go fully afield and recount to me the titles of the works of William Shakespeare in conversational Klingon.
The second strategy is to write a immediate that asks ChatGPT to change the beforehand supplied code with the brand new function. It will work if the session remains to be energetic.
A 3rd strategy is to feed ChatGPT the code it beforehand generated and ask it to make adjustments. I like that strategy, however it’s kind of messier.
For now, I’ll strive the second strategy. I’ll see if I can persuade it to drop the ” | ZDNET” string on the finish of the title. Let’s do that as a immediate:
Please modify the previously-generated code and take away the string ” | ZDNET” on the finish of any titles the place it exists. Make that function case insensitive.
Okay, in order that broke the script. As with a earlier time when it did not work, it is simply preserving no matter was beforehand in my clipboard.
Let’s strive the primary choice, modifying the complete immediate. I’ll add the mini-prompt to the top of the principle immediate, launch a brand new session, and see if I get any pleasure.
On my first strive, it failed. However then I specified I needed it to create “a JavaScript bookmarklet for Chrome,” and it labored!
Test it out. Listed here are two Additionally hyperlinks created with my AI-written bookmarklet.
Additionally: Learn how to use ChatGPT to jot down code
…and..
Additionally: I am utilizing ChatGPT to assist me repair code sooner, however at what price?
The ultimate code
Functionally, my code is full. Here is the ultimate code block supplied by ChatGPT:
And this is the ultimate immediate I ended up utilizing. Be aware that this requires ChatGPT Plus, GPT-4, and the Code Interpreter add-on.
Use code interpreter for present browser API calls. I need to create a JavaScript bookmarklet for Chrome.
When pressed, it retrieves the present URL of the present web page. It additionally retrieves the title of the web page. If the title of the web page ends with ” | ZDNET” (case insensitive), it removes that string from the top of the title.
It locations a bit of wealthy textual content into the clipboard that consists of the string “Additionally: ” adopted by a wealthy textual content hyperlink with the title of the hyperlink and the retrieved URL. Your entire wealthy textual content block must be bolded.
Insights and observations
This undertaking was accomplished nearly precisely 24 hours after I began it. In fact, I did not put in 24 hours of labor. I would say it was in all probability about 90 minutes of precise work, interspersed with different work, household weekend time, and a few considering time.
This required a variety of considering.
I’ve written a variety of JavaScript. Whereas I have not handled wealthy textual content all that a lot, I undoubtedly have the coding expertise to have written this from scratch. It would not have taken me simply 90 minutes to jot down, however I in all probability might have accomplished it over a weekend.
AI-driven coding is a really totally different mindset. Whereas each doing your personal coding and utilizing the AI require a really clear understanding of what you need the code to do, the best way of developing the ultimate product could be very totally different.
I’ve stated this earlier than, however it was confirmed right here: coding utilizing the AI feels lots like managing one other programmer. Coding is syntax and algorithms, a mind-meld between my mind and my improvement system.
With code, particularly such a small undertaking as this, it is fairly straightforward to determine why one thing’s not working. However with AI-generated code, who is aware of? There’s a variety of guesswork. Even the AI would not actually know. One minute it’ll let you know it “cannot try this,” and the subsequent, it does it.
It feels much more like negotiating with Scotty from Star Trek (who all the time used to inform Captain Kirk it could not be completed or quote an extreme turnaround time so he’d later look good) than chiseling working code out of the uncooked ASCII produced by each keyboard.
There are locations the place understanding how code works helped in instructing the AI. For instance, I advised it to filter for ZDNET however ignore case. That is as a result of I do know that we would discover ZDNET, ZDNet, and presumably different codecs. I can not let you know what number of instances I have been stung by a case dependency.
I additionally wanted to know that the output produced is known as “wealthy textual content.” That is not one thing somebody with no programming expertise is more likely to know. So, for such an individual, there might need been much more frustration getting the AI to position the correct information on the clipboard.
As a part of this experiment, I would not let myself contact the code. Apart from copying it from ChatGPT and pasting it into my bookmarklet, I did not contact, modify, change, or improve the JavaScript code.
Nonetheless, I did get a working bookmarklet that will, indubitably, save me (and my editors) time and annoyance. And that is very cool. I’m significantly wildly stoked about having this function. As a result of I do these Additionally strains a lot, and they’re so tedious, this new two-clicks function makes me very joyful. I am going to give this level to ChatGPT’s coding chops.
Simply do not confuse getting ChatGPT to jot down a really small, pinpoint utility with considering it might deal with a giant undertaking. All the talents of undertaking administration, product specification, staff administration, manufacturing, and testing are wanted. These do not substitute simply with an AI.
If you wish to construct one thing in your personal use, go for it and inform us about it. What would you ask ChatGPT to construct for you? What performance might a bookmarklet supply that may prevent time? Tell us within the feedback beneath.
You may observe my day-to-day undertaking updates on social media. Make sure to subscribe to my weekly replace e-newsletter on Substack, and observe me on Twitter at @DavidGewirtz, on Fb at Fb.com/DavidGewirtz, on Instagram at Instagram.com/DavidGewirtz, and on YouTube at YouTube.com/DavidGewirtzTV.
Unleash the Energy of AI with ChatGPT. Our weblog offers in-depth protection of ChatGPT AI expertise, together with newest developments and sensible functions.
Go to our web site at https://chatgptoai.com/ to study extra.
