Beginner level learning and pair programming with ChatGPT - A case study of Admonitions in Hugo

Introduction

Have you ever wanted to learn a new programming language or framework but felt overwhelmed and unsure of where to start? Pair programming can offer a solution to this challenge by allowing you to learn from a more experienced developer in real-time. In this case study, we will explore the pair programming experience between me and ChatGPT in the context of learning about “Admonitions” in Hugo.

Relevant background

I have some small amount of experience in web development, and I am familiar with using Hugo, a popular open-source static site generator. My primary day job experience is with backend technologies and architecture. I am an absolute beginner when it comes to CSS styles, placing and using them in hugo, writing HTML using styles and hugo specific functions.

I have been wanting to add an admonition that adds each quote in a box, to my quote’s page in this blog for some time. With the very limited experience I have in this area, I was not able to create a clean solution for it until now. With rise in ChatGPT’s and some experimentation with it, I decided to take on this task.

What are Admonitions in Hugo?

Admonitions are blocks of text that emphasize particular information and enhance the visual appeal of a document. They are commonly used to create notes, warnings, tips, and other types of annotations. Admonitions in Hugo can be created using the “shortcodes” feature, which allows you to add custom content to a page using a simple syntax.

Interaction with ChatGPT

Step 1: Set context

Me > Explain admonitions in hugo, give samples related to it, and guide on how to create them. (This was through multiple questions, but no code from my side.)

ChatGPT > ChatGPT provides step-by-step instructions on how to create Admonitions in Hugo using the built-in shortcodes feature and custom CSS styles. I can see an example of adding quotes with HTML and associated CSS, as well as modifying the CSS to highlight the author name differently. ChatGPT also provides HTML code for creating a blockquote shortcode and modifying it to take the author name as an argument rather than as a separate span.

Step 2: Get code for my problem with input code hints

Me > Style the blockquote admonition to match my hugo theme. This also through multiple questions, but this time, relevant code was provided each time.

ChatGPT > I could learn how to modify the CSS styles to match my specific Hugo-themed-Bootstrap theme. ChatGPT provides CSS code for styling the blockquote elements to match the styles used in the theme, including the background color, border color, padding, and font styles for the author name.

Me > I was unsure on exact placement of CSS files and using them in shortcode in the theme. I asked ChatGPT about it.

ChatGPT > ChatGPT also explains where to add CSS styles to a shortcode in Hugo. I could also learn about the steps to create a CSS file and include it in the HTML template for the site. This time too it gives relevant code blocks.

Step 3: Non-ChatGPT steps needed

At this point, I had a working code, but the font awesome icons were missing in the output as the theme had the icon in fas set and ChatGPT’s response had been guiding me to use it from the fa set. Identifying and rectifying them through ChatGPT interaction turned out to be very difficult. I had to go through the general route of exploring themes code, Stack Overflow search through Google, and then fixing it.

Step 4: Block edit using ChatGPT instead of regex

Me > At this point a fully functional and tested shortcode was created. I now needed to use it across all the different quotes I had. Without ChatGPT, I would need to do a regex replace for doing some edits and then do some manual edits where regex was not really possible due to the slightly ad hoc nature of placement of information. I asked ChatGPT to do what I wanted as plain text command and provided input of my full text file.

ChatGPT > ChatGPT was able to do the task of replacing the old “highlight” built-in admonition, with blockquote admonition, replace the author name from previous text field to the admonition parameter field perfectly. It was not able to reformat a few quotes into Markdown again properly. I decided to manually do that as it was a very minor task.

Experience on guiding ChatGPT

You can see that I needed to guide ChatGPT to the correct answer by asking specific and clear questions related to the topic of Admonitions in Hugo.

I started by asking the basic question, then basic code, then edits to the code, then rectifying the code to match the specific environment. Even though ChatGPT helped to a large extent, identifying issues and whether the code generated and guidance is relevant to the consumers’ environment is definitely the user’s responsibility. Supplementing with additional context can assist, but the responsibility and the need for user knowledge remains unchanged.

Conclusion

This interaction highlights the benefits of pair programming and learning, as it allows for a back-and-forth exchange of information and knowledge. Pairing with ChatGPT can be an effective way to learn about greenfield or brownfield programming concepts for a user.

Though ChatGPT provides clear and concise instructions, examples, and code snippets to help the user understand and implement the concepts, as a consumer you need to be aware of what you want and what environment you are working with to get better results. There are some areas, where traditional debug and search Google/Stack Overflow is much easier path to solve the problem. Knowing when to move to the traditional method rather than spending time in ChatGPT is a skill to develop.

Whether you are a beginner or an experienced developer, pair programming with ChatGPT can be a valuable learning experience.

Epilogue

This post itself was reviewed and modified using ChatGPT for spelling, grammar, sentence formulation, and structure. This task went fully without any hassle.