ChatGPT WordPress Plugins

Posted on June 23, 2023 by Maker Block

This is kinda bananas. Years ago I wrote a plugin to solve a problem I had. I wanted a simple WordPress plugin where I could insert a shortcode into a blog post, specify a series title, and have it automatically search up all the other blog posts that used the same shortcode and series title, and then insert a nice looking list of blog posts in that series in chronological order.

It was one of my first plugins, still available on WordPress.org – just hidden since it hasn’t been updated in almost a decade. It still works to this very day, if occasionally a little buggy. After several WordPress versions, it no longer properly displays the series title, which is a real shame.

On a whim, I tried using ChatGPT to generate some plugins.

Here’s an example of my old plugin and the new ChatGPT written plugin (in this order):

Default Series Title

See how bad that was? It completely mangled the title.

Edit: Since publishing this post, I realized that I would have to choose between

Leaving the old defunct plugin in place just to make a point about how it didn’t stand the test of a decade’s worth of WordPress updates, but then also leaving broken series titles sprinkled through my back catalog of blog posts.
Go back through nearly 10 years of blog posts1 2 to change them over to the new plugin shortcode.
Disable the old plugin, but have the new plugin work with the old shortcode as well as it’s own new shortcode, at the cost of losing an example of how bad the old plugin performed.

I went with option 3. Just take my word for it, it looked bad.

He makes a valid point

Now for the ChatGPT version:

Software Development with ChatGPT

ChatGPT WordPress Plugins

It took me about an hour to whip up a working WordPress plugin with the same core functionality. I would break down the time I spent as follows:

Time Spent Creating Series Plugin with ChatGPT

But, that’s not all! You see, as I was writing this blog post, I realized it would be fun to include a pie chart to indicate the time I’d spent on this. Unfortunately, the plugin I had written to do exactly this many years ago has apparently completely given up the ghost. Thus, before I proceeded to this very sentence, I used ChatGPT to create a plugin for displaying custom pie charts!

Time Spent Creating Pie Chart Plugin with ChatGPT

Obviously, this plugin took a lot longer. The first few versions were having all kinds of problems between the HTML Canvas code and trying to figure out how to make sure the javascript was not loading too early or too late. In the end, I just asked it whether it was capable of even creating a pie chart – and it gave me a piece of workable javascript. I told it to refactor the plugin using this same javascript, and then it was a matter of fine tuning the result.

If you don’t know anything about writing WordPress plugins, you could probably use ChatGPT to create a very simple plugin. However, once it got slightly more complicated, it would likely require some troubleshooting to figure out what was happening. In the series plugin it took me a while to root through the WordPress functions to figure out that apparently ChatGPT was trying to use a function in a way that simply did not work. I explained to ChatGPT that that particular function could not operate in that way, explained how the data it was feeding into that function needed to be first modified, and then asked it to refactor the code. From that point forward, it started to look a lot better. There were some additional quirks – like putting more than one series title in a single post would only display one. I suspect these problems of ChatGPT taking a shortcut to generate code, hardcoding certain variables and names, not considering that it might need to operate more than once on the page, may be difficult for it to anticipate and address. Without some degree of WordPress development knowledge, I think a novice user armed only with ChatGPT would need to do a lot of refactoring, asking the program to generate the plugin all over from scratch many times, before arriving at a workable result. Then again, a million monkeys at typewriters, right?

I think ChatGPT could be great for creating relatively simple plugins like a series plugin, a pie chart plugin, or even a table of contents plugin. However, having seen how much time it cut out of the development process, I think it would be interesting to try developing an A/B testing plugin or more complicated plugin.

I think the next task to see if I can get it to generate QMK code for a keyboard, Arduino code, Raspberry Pi code, or a chrome extension.

I can already see some ways to improve both of the ChatGPT generated plugins used in this blog post. My series plugin included two arrows at the bottom so the reader could navigate to the prior or next post in the series. And I think it would be great if the chart plugin had a feature where I could specify the units, so the magnitude data would be included with the labels. I may try getting it to shoehorn these updates later…

If you see these reflected in the charts above, I must have already done it. :)

Software Development with LLMs

NGL, I can really be a lot some times. [↩]
Um, you’ve probably gathered that. [↩]

Series Plugin Test for Illustrative Purposes Only

Posted on June 23, 2023 by Maker Block

The only purpose for this post is to serve as a reference for a more interesting and useful post.

Software Development with LLMs

[custom_pdf_generator visitor_data=“John Doe”]

DIY Carved Eraser QR Code Stamp

Posted on June 6, 2023 by Maker Block

After some modest success carving some neat designs into pink erasers, I tried making a QR code stamp. It didn’t work well at all, with exactly just one impression working … sometimes.

The first attempt took a really long time and turned out terribly. After a few days break, and some mental distance from the project, I returned with some new ideas and inspiration.

Here was my new approach and plan:

1. The Stamp

Go Slow. Proceeding slowly and methodically is always a good idea with sharp instruments. I went fairly slowly the first time, but this time I would be even more methodical.
Cutting. Rather than using the carving blades for the QR code features, I switched to using a craft knife. It was just too hard to cut precise lines with a V or U shaped blade, managing not just the direction and speed of the cut – but the depth as well – for both sides of the blade. The craft blade let me focus on just one side at a time. I used the blade to cut at about a 45 degree angle along one side, then other side.
Don’t Cut Too Much. I used calipers to measure the pixels cut into my first attempt as well as the stamped result. I discovered \the stamp pixels were very slightly larger than their rubber counterparts. This tells me it would be better to cut too little rubber – and cut more later if necessary.
Removing Scraps. Rather than sticking my big old fingers into the eraser or trying to pop it out with the blade, I used a pair of 3D printed tweezers to pluck them out.

2. The QR Code

Optimize the QR Code. There are several ways to optimize a QR code for eraser / stamp carving. 1. I used as many of these methods as I could:
1. “Pixel” Size.
  1. As you add more information into a QR code, the QR code generator will need to use more black and white units2 to encode the information. After some tinkering it seems like the smallest QR code that can be generated is 441 total pixels, 21 wide by 21 tall. The absolute largest QR code I could generate looks like one of those “magic eye” posters. ~~I didn’t even try to count how many pixels wide this thing was~~. It’s 9,216 pixels, 96 wide by 96 tall.
    This slideshow requires JavaScript.
  2. I was having a hard time carving a stamp 21 pixels wide into a 24.5 mm3 wide eraser, so the idea of carving more than 21 lines into an eraser by hand seemed not feasible. The very next step up from the 21×21 grid would be a 25×25 grid, so I knew I had to find a way to limit the data, find the best error correction, and find a way to cut these small pixels and thin features.
2. Proper Error Correction.
  1. QR Codes have built in “error correction” that allows the user’s scanning device to scan information from a partially formed, damaged, or obscured code. These settings range from L (low), M (medium), Q (quality), and H (high quality) able to error correct from up to 7%, 15%, 25%, and 30% damage respectively. Lowering the error correction allows you to create a smaller QR Code, but it will also be less robust.
  2. I fiddled with these settings a lot to find the maximum amount of data I could put into a QR code while still retaining a maximum size of 21×21 pixels. I was able to encode about 16 characters in a L, 13 characters in a M, 10 characters in a Q, 6 characters in a H. The code stores numeral easier and requires more pixels to store letters and special characters.
  3. My first attempt used an error correction level of L, but was basically unusable as there must have been more than 7% distortion. This time, I decided to try for a very high level of error correction with the Q setting for 25%.
3. Reducing Data. This is where I used some tricks you may, or may not, be able to replicate.
  1. URL Shortener. A TinyURL link to my Instagram page requires 29 characters. Looking above, this would immediately suggest a 21×21 pixel QR code would not be possible.
  2. Trimming a Link. After some fiddling, I realized that as long as the data encoded looked like a URL (as in some characters separated by a “.”), the QR code scanner would interpret it as a link. This means we can skip the “http://” and “https://”, saving 7-8 characters! Unfortunately, this still doesn’t let me encode the shortest URL that TinyURL could give me which requires 20 characters after discarding the “http” stuff.
  3. Maybe Just a Domain? Maybe you just wanted to point someone to your website and not a big long link, shortened with a URL shortener. Let’s work the numbers backwards. Most commonly used domains end with “.com”, “.org”, “.biz” – with 4 characters each. Using the information above, this means we could use a domain name with up to 12 characters for an L encoded QR code, 9 for an M, 6 for a Q, and just 2 for an H. While it would be easy to find a 12 character domain, you’re stuck with only a 7% margin for your error correction. A domain with 6 to 9 characters for Q and M would allow for 25% and 15% error correction. You can still find 6 character “.com” domain, but… they’re unlikely to be very memorable. This isn’t necessarily a problem. You might be able to find a good short domain with an unmemorable name, but forwards the user to your real website. The problem, of course, is that no one is going to want to click on that link.
  4. How About a custom URL Shortener? It’s still possible to purchase a short URL, but they’re pricey. I happened to buy a good one several years ago and have hung on tightly to it. I slapped a YOURLS install on it, and have been using it ever since. Using my own URL shortener means I can keep the URL down to just 9 characters – including the TLD!

Okay, back to carving. I grabbed my headphones, put on some music, and took it very slowly – a little under two hours. Here’s some progress photos:

This slideshow requires JavaScript.

Here’s how it looked (with some additional shots to show the original design overlaid):

This slideshow requires JavaScript.

I stamped this design 9 times – and all 9 were more or less easily scannable. The neat thing about this design is that it points to a URL shortener I own, so not only is it about as tiny as possible, but I can change the destination if I ever needed – without having to spend two hours recarving an eraser stamp!

Eraser Stamp Carving

I won’t get too much into the weeds on the actual method of generating QR codes, mostly because I haven’t studied the math in it, but I did find a great article which has a lot of good background info and explanations [↩]
I’ll call them “pixels” from this point forward [↩]
Just barely under an inch [↩]

Further Adventures in Eraser Carving

Posted on June 3, 2023 by Maker Block

I thought it would be neat to try cutting a QR code stamp. (Skip to the end to see the one time I was able to get the stamp to work)

Getting the pattern ready for carving

The obvious problem is this would require an incredibly detailed and precise approach to carving. To get the smallest QR code that can still contain a URL, it would be limited to 16 characters, the lowest error correction (7%) rate, and would still have 21×21 pixels (441 total). After a little testing, I realized the code needs a little white space around the QR code to read properly. This means 23×23 pixels all carved into a less than 1″ square area. I know from the design of the eraser carving station that the eraser is 24.5 mm wide… so each pixel is roughly 1mm square.

I tried several things that definitely did not work well:

- Printing the design in one of my templates, trimmed, colored in with a pencil, taped in place, then rubbed onto the eraser to transfer the design.
- This didn’t really work very well since the pencil trace to rubbing process introduces a lot of error. I tested this by trying to scan the reversed drawing on the eraser. Didn’t work at all.
- The 1mm wide pixels would have been a nightmare to cut with even the smallest carving blade, so I switched to my craft blade. The blade is so sharp and incisions so thin, that many times it was difficult to see where or whether I had made a cut. Once I switched from a vertical cut to a 45 degree angle, it seemed to get a little bit easier and cleaner.
- After I was about a quarter done I tried using a fine tip sharpie to color in the pixels. After a lot of hassle, I could get this to scan, so I kept going.
- The darkened pattern was still a bit messy and my cutting wasn’t significantly better.
- I flipped the eraser over and tried a new tactic. I taped a template to the eraser and tried to cut the design through the paper. This didn’t work well because when I cut very small pixels out of the design, the paper quickly lost cohesion and then became useless.
- Finally I pulled up a large picture of the QR code on my laptop and tried to keep to the design as best I could. It wasn’t pretty – but I was done.

The results were less than stellar. The leftover ink from the sharpie discolored the inkpad a little and got transferred onto the first few stamp impressions. Out of a dozen different impressions, only one could be scanned by my phone.

Darkened with a sharpie, partially carved

If I tried this again (and, let’s be honest, I probably will) I would use the template / pencil transfer method just to place “landmarks” and then refer back to the large display on the laptop.

Stamp, stamp, stamp

Lastly, I was able to get just one impression that could be scanned:

One single scannable stamp impression

The reason the bit of paper is a little oddly shaped is that I had stamped onto a piece of scrap cardstock. I’d stamped on other pieces of paper, cards, and even on that same piece of cardstock. This was the one time it worked.