Using ChatGPT to tweak the web

Perks of being a front-end developer is that you have so much control over the web.

Dissatisfied with the color or style of your favorite websites? Just toggle developer console and start changing them, and then use extensions like Stylish to implement them permanently.

Additionally, we have the ability to tailor the features of frequently used web applications to our liking.

As a frequent user of Carousell, a popular secondhand marketplace platform in Singapore, I was constantly annoyed by the absence of a “dislike” or “hide” option for previously viewed listings.

Motivation

The purpose of such a feature is apparent: when searching for a popular item like a used acoustic guitar, one may inevitably encounter numerous irrelevant listings. I would often click on a listing that appeared promising, only to discover that the seller was located two hours away or that the item had defects that made it unsuitable for my needs.

Over 1,000+ search results for popular items like acoustic guitar

In such circumstances, it would be ideal to have the ability to permanently remove unwanted listings from future search results. This would significantly enhance the user experience by minimizing the number of irrelevant search outcomes and streamlining the search process.

This is not a new idea, many social medias have already implemented such features. For example, when you hover over LinkedIn’s job posting, you will see an icon button that implements this feature.

Implementation

It’s also a good excuse to experiment with ChatGPT. So, I started by writing the pseudo-codes. Here’s what I have in mind:

1. For every listing, add a “Dislike” button that will save the unique listing ID to the browser’s local storage.
2. In every subsequent visit, the code will check the localStorage to compare if the listing ID is there.
3. If the listing ID exists, it means that the user has previously disliked this listing, then we will hide the listing using css.

For every step of the pseudo-code, there are more detailed implementation, but by merely asking ChatGPT, I got back the exact code that I can then compile and automate the execution using Tampermonkey.

Here are some snippets of what I asked ChatGPT:

function to save URL string to localStorage

function to inject CSS into a website

The end result is, I was able to bring my feature to life in less than 30 minutes. Here’s a demo of the feature in action:

The best part is, due to local storage implementation, the changes will persist. When I refresh the page or search the same keyword, I will not see the listings that I have previously disliked! This has greatly enhanced my search experience on the site.

Takeaway

ChatGPT has revolutionized the world of coding by democratizing it. Its remarkable abilities have the potential to transform any engineer with a basic knowledge of programming into a 10x engineer. ChatGPT’s ability to convert user intent and pseudo-codes into fully functional features is scarily good.

In the next 5 to 10 years, the best engineers will no longer be the lone geniuses who work independently. Instead, it will be those who work in partnership with machines like ChatGPT, making use of its tremendous assistance to enhance their own abilities.

The increase in productivity that comes from AI assistance is genuine, and we are just at the beginning of this incredible revolution. I am truly excited to see what the future holds as we continue to embrace the power of technology.