I heard the term “Vibe Coding” a few days ago, but apparently it has been a thing for a while. What it means is people who know nothing about programming do it anyway with the help of “AI”. They simply tell the AI to write their code for doing things they describe in plain English.
I already had my own experiences with the so called AI chat bots trying to generate some Delphi code for me and these experiences mostly were bad. They generated code that didn’t even compile and after fixing these compile errors the code mostly was faulty.
But maybe the problem here was Delphi? It’s no longer a widely used programming language. Maybe using something else instead gets better results? So when Netvibes announced that they will shut down the service (and of course replace it with something much better … yeah, right), I thought I’d give Vibe Coding another shot. I wanted to create some JavaScript embedded into an HTML page that shows multiple RSS feeds in a grid with 3 columns. That basically was what my home page on Netvibes does for me. I first went to claude.ai and started.
I need some javascript code that does the following: Given the URL of an RSS feed, display the content as a list. The headline should be a link to the site.
This actually generated something that worked. I then gradually refined the code with the following prompts.
now make this a box that contains the title of the feed in a caption which can be moved with the mouse.
change this to allow adding additional boxes with other feeds
change the boxes to be always 3 in a column to fill the whole window width. Also place new feeds in the next free area when they are created.
The result was wrong so I told it to correct it:
There are now 2 boxes in a row, not 3 as I requested.
The result looked quite good already. Unfortunately then I run out of tokens (I’m using the free version of claude.ai.)
So I went to mistral.ai instead (Mistral is a French company, providing “Le Chat”) and continued:
I have the follwing javascript code that displays multiple RSS feeds in a 3 column grid layout. I want to add an option to it to save the URLs of the feeds so I get the same feeds next time a load the page.
I pasted the complete HTML / JavaScript code generated by Claude into that prompt. And continued.
restrict the number of content lines shown for each entry to a maximum of 5
That didn't work. I still have entries with long text that are shown completely instead of only 5 lines. To clarify: I mean 5 lines of text according current width of a grid cell.
This worked fine. Now I need an option to export and import the feed urls
I just tried the code in Microsoft Edge, starting with an empty list. I imported the following list but didn't get any display. [ "https://delta.chat/feed.xml", "https://www.heise.de/rss/heise.rdf", "http://rss.slashdot.org/Slashdot/slashdot", "https://rss.golem.de/rss_sub.php" ]
That worked. Now I need an option to edit the feed url of each cell. Add a button to the caption that opens an edit field for the url. Remove the minimize button from the titles.
Unfortunately I never got this to work. I tried several times to get Mistral to fix the problem but finally gave up on it.
On the next day, I went back to Claude and started a new chat.
Given the following JavaScript code, that shows several rss feeds in grid cells, please add a button each display to refetch the rss feed and update the content:
Here I pasted the last version of the code that Mistral had generated. Claude generated new code that worked. So I went on from there.
That works. Please change the Edit button to do the following: 1. Copy the url of the rss feed to the existing input field for a new feed. 2. When the user presses the Add Feed button, check whether the feed already exists and if yes, only update that feed. If it does not, create a new one.
Great! Now add code to automatically update all feeds every 5 minutes, using the same function as the update button uses.
OK, now I would like to see if I have read (clicked on) entries in a feed. They should be shown in a different font color. I also want an option to explicitly mark all entries in a feed as "read".
I run out of tokens again, so I switched to Mistral.
Given the following JavaScript source, I would like to see that which rss feed entries I have already read (clicked on). These should have a different font color. Also I want a button for each feed that marks all entries in it as "read".
I forgot to paste the actual code and got a general description and code how to do that. But I am not interested in learning to code in JavaScript here. This is about Vibe Coding so the AI is supposed to do all the work. Therefore I continued.
I forgot to add the JavaScript code that should be modified as described in my last question.
And this time I pasted to code into the prompt.
The "read" status should be persistent, so I can reload the web page and still see what I have already read or marked as read.
OK, that worked. Now I would like to freely place the rss feeds within the grid. It should be possible to leave some cells empty. The placement should also be persistent between reloads.
Unfortunately what I got from this didn’t work. I tried a few times to get Mistral to fix the problem, but its output became slower and slower with every iteration, so I finally gave up.
But the result is actually impressive. Here is a screenshot:
Unfortunately I didn’t think of saving the code iterations into an SCM as I went along, so I don’t have the full version history. But I have now put a some intermediate steps and the final version on SourceForge. And if you want to try it yourself, it works when directly loaded from the SVN repository.