Using GPT-4 to refactor a simple HTML page
Tags: ruby, ai, gpt4, programming
Published: 2023-09-13 13:02:45

Continuing with my endeavour of publishing more about using GPT-4 while coding, here I am going to show you how I refactored some HTML when writing the homepage for [ShortRuby.com](https://shortruby.com)

*Note: When I am writing in this text GPT-4 I want to say that I am using Cursor IDE with GPT-4 option.*

First, this is the result. I am pretty happy with it as I spent little time making it and it was a small iteration. This will probably evolve over the next weeks thus it is better to capture here how it looks like at the end of this coding session:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yq3efh66c9rw42w9qwxp.png)


## Adding the logo to the top left

After I created a straightforward hero section that contained the title and a description, I wanted to add a logo to the left side.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/okspb27fek2pvip2c7z2.png)


The prompt here is simple, it includes a reference to the hero partial (I am using Cursor IDE) and I asked it as clearly as I could what to do.

I received a good enough response along with an explanation of the solution. I was pleased to notice that the logo was indeed on the left side.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/br7ugn5m7l6p5jje94pv.png)



The only thing is that I asked for a "square with rounded corners" but I received a full-circle image. I kept it because I liked how it looked. Yet I appreciated that it told me how to make the corners "less rounded"

## Decreasing the top and bottom space


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dc3e6drki5d0akuc8qih.png)



You cannot see it in the final form of the website but you can see in the above image that the vertical padding on the second div is quite big `py-32` or `py-40` depending on the screen size.

Thus as you can notice I asked it to decrease the spacing while choosing the appropriate Tailwind dimension. Notice that here I tried to be explicit but did not use any Tailwind (like asking for a specific utility class) or CSS-specific terms (like padding or margin ...)

The response was again good enough:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrc8vl7yops1iqxj22r0.png)



I like the explanation about how it arrived to transform `py-32` to `py-20` (reducing in this case to about 62.5%) and `py-40` to `py-28` (reducing in this case to about 70%). I found them pretty close to the 1/3 that I asked for and they looked good enough to keep this change.

## Making the columns the same height

I then had a page with 3 columns (or cells), each with a different height because the description had a different length. Thus, I asked GPT-4 to change it:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ksax5yxcsgboo17r44x.png)

Here I tried again to be as descriptive as possible without giving into what solution I am looking for.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wpiuj2xro0sg0fkpjjd.png)


I received a response that uses `flex-grow` to achieve this result. It worked, but in the end, I needed to edit more. After seeing the result, I also added height to the column's title.

## Replacing a `div` with `a`

After playing a bit with the design, I figured out that I wanted to make the entire column clickable and not only the small button to visit.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fk2ivn7y04php537ftnu.png)



This time I used the in-editor chat and selected one column that I asked to be transformed. What you can notice in the above prompt is that I ask specifically to keep the format/layout of the column. I asked this based on previous experiences when I asked for changing tags and I noticed that it needs guidance on what to choose when merging styles.

Here is the diff that Cursor GPT-4 proposed:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvfdwb6k4slgzr6zvtag.png)

It is a good result, it does do the job that I asked for. I noticed that it added a `bg-white` class that was not necessary, but I think it makes sense to add it so that it is clear what happens on `hover` - what background colour it transitions from.

## Making an element show when the column is hovered

I wanted to add a bit of colour on the entire page because it is grey. Thus, I added a small animated bullet in blue.

Thus, my objective was to display that element only when the column is hovered:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zoib3l1z4lpik000odfb.png)

In this case, because this is about show and hide, from my previous experiments, I noticed it needs to know what to do when what is added will conflict (using `flex` and `block` or `hidden` and `block`). I added, *"when there is a conflict between added CSS classes, please choose the ones that will achieve this functionality"*.

The result works and it uses `group` and `group-hover` to achieve the result:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3thw5t826xz03fwhx4a.png)

It did the work and now I can have this:

{% embed https://www.youtube.com/watch?v=d7KgiMu0-bk %} 

## Conclusions

Here are some learning points from this experiment:

* GPT-4 is not aware of CSS classes that are doing similar things through different CSS rules. Thus it cannot act like a linter nor it can choose one or the other =&gt; it needs to be instructed on what to do in case such conflict occurs. I instructed it generally in the examples above asking to pick only classes that will achieve the functionality but you can also instruct it specifically like preferring `flex` or `grid` or something similar
    
* Among the most important learning for me - not only from this small experiment but for many others - is that the effort to write prompt forces you to put your thoughts in writing and this simple act will help to make some choices or be aware of some choices and thus will contribute to having a better code design.
    
* Even with better prompts and the results containing an explanation, the programmer still needs to be able to understand the solution and assess if it works and if they want to keep it.
    
* I still like more the side chat for Cursor IDE and prefer it over the inline chat. Probably it is a preference that comes from because I used it before for 1-2 months Github Copilot Chat and thus it probably was the start of a habit
    

---

Enjoyed this article?

Join my [**Short Ruby News**](https://shortruby.com/) **newsletter** for weekly Ruby updates from the community. For more Ruby **learning resources**, visit [**rubyandrails.info**](http://rubyandrails.info)**.** You can also find me on [**Ruby.social**](http://Ruby.social) or [**Linkedin**](https://linkedin.com/in/lucianghinda)