programming via ChatGPT part 2

My friend Liz had a text file with website information that needed some sorting (No I'm not making that up) - luckily it was already one line per entry, and a LOOOONG time ago (like the cgi version was from 2005) I made a webapp just for that purpose, and it comes in useful every now and then.

But it is weird that it was Perl CGI and sending information to my server! So I decided to rewrite it in javascript and keep stuff in the browser, and also I decided to try programming via ChatGPT (heh, I did the same thing back in March, appropriately enough a day before I found out I was getting laid off in 3 months.)

And sure enough, this is right up ChtGPT's alley- just a minor variant of well-known programming tropes, not a lot to keep track of.

Here is the result, and for fun, here is the series of prompts I used. You can see me improving the UI as I went along - a pretty good example of the synergy you can get with these pairings. (The confusion ChatGPT in implementing probably spoke to the confusion a user might have using it - replacing behavior modifier checkboxes with different action buttons was a big UX win, and then adding in a "sort on column" feature was nearly effortless on my part.)

• lets make a useful one page webapp - a single HTML page with embedded Javascript. The title of the app is "sortof" which should appear in the title and as an h1 at the top. the line of instructions under that says " A really simple sorting program. Just paste text into the box and it will return all the lines, sorted. All in-browser, no information is sent to the server." Then there is a large text area. Under that is a button labeled "sort". when the button is pressed the content of the text area is split into lines, sorted, and then put back in the text area
• great start. a few changes and improvements:
  * the textarea is showing up a little larger than the screen. Please correct the box model or just make it 90% width or something
  * please add the following checkboxes underneath with options to change the sort:
  --ignore case
  --reverse order
  --don't actually sort (useful for simple reverse sort)
  --remove duplicates
  --random shuffle
• please rewrite but replace the random shuffle checkbox with a second button that does a random shuffle
• the "don't actually sort" checkbox isn't doing what I expected. I want it to still change the order of the lines, but reversing the order of things. lets remove "reverse order" and "don't actually sort" and replace it with a new button "simple reversal" that lives between the other two buttons
• doing great! now before the buttons, on line line, add a checkbox that says "sort on column ____ (delimited by ____)" where the first blank is a short input field for a number and the second blank is a dropdown with comma and tab (defaulting to comma)" when the sort button is hit, it should sort on the appropriate column after breaking each line up by the commas or tabs
• very good! add the following cosmetic features and we are done:
  1. use the default sans-serif font for the whole thing
  2. change the header to kirk.is | tools | sortof v0.5 kirk.is should be a link to https://kirk.is/ tools should be a link to ../tools/
  3. all links should be black 4. add either an extra space or a little padding above the row of buttons 
• oops - please keep links underlined, and actually the link for tools should be ".." not "../tools" (my mistake)
• could you add one more checkboxes with the other ones - sort numerically instead of string compare. this should work for both the normal sort and the sort on column
  

So, yeah. Both cool and alarming. It's totally mindblowing that a "just figure out the most likely sounding thing to say next" LLM can do stuff like this.

Fun fact I learned today: "ChatGPT" spoken aloud sounds a bit like "Kitty, I farted" in French.