Vibe Coding

These days, I experiment with AI quite often, and was hoping it would be a simple request to make a JavaScript page that could quickly generate a sheet of pages to put together after pasting some text into a box. Surely, I could just copy my 100 Word Stories and create a few books. I had about six complex prompts to initially set up the app via ChatGPT, which created a zip file I could download. Each time, I would commit each update as a separate version in a code repository to track changes over time and allow reverting.

The time for the AI was taking quite a while to think, because so many things were happening to handle each prompt. Sometimes the prompt would time out, and I had to resend it. Eventually, I started looking at extensions built into my interactive development environment (IDE). I tried this a couple of years ago, and at the time, the extension I was using was limited to interacting with a single file and was more like suggesting changes than a back-and-forth conversation. I walked away from it, frustrated by the limitations and the requirement to pay to keep using it after the trial.

Now, a few years later, things have changed. Rather than inline suggestions, I have a chat window where I can describe a change I want and see those changes applied throughout the whole project. It was rather shocking how accurately and quickly everything was unfolding. This is what I believe people have come to call “vibe coding”.

Vibe coding, in a nutshell, is where you describe what you want done, and the AI performs all of the programming work. It felt more like I was micro-managing an extremely smart and fast programmer who tended to take things a bit too literally at times, or had assumed it had done what I had asked, only to see no change.

I’ve tried different tools in the past that promised no coding was necessary, where you drag and drop programmable blocks representing the underlying operations of loops and conditional checks. However, vibe coding is different. I’m not sure where to place it. Is it really coding? Are the prompts themselves a coding language of sorts? If I ran the same prompts again, there is a high chance I would get different results, since many are based on the results of prior prompts. Who owns the intellectual property?

Another thought I have on this is that much programming involves troubleshooting and researching how someone else addressed the same task. Maybe find a trouble ticket and a response, or an old post on an archived copy of Deja News. With AI assistance, all of that knowledge is somehow stored within the model. You can also see these ‘thoughts’ as the AI thinks about what you have asked, and what may be required before it performs the task, or evaluates the code to see if additional things should be considered.

With all of this AI stuff, many programmers are losing their footing in the IT profession in favor of Vibe coding that can be done regardless of experience and coding skills. Since I understand and can read the code, when the AI messes up a few times, I can jump in, make a change, or tell it to look at the specific area I’ve identified that it seems to be missing. However, how much is that “knowledge” worth to an employer if someone who only knows how to vibe code is able to eventually work past the issue in a different way at a lower cost? After all, a company’s lifeblood of how it measures its performance is often the bottom line: increased revenue and decreased expenses. Many companies will cut staff and ignore the human element in the name of “just business”.

In agile software development, especially Extreme Programming, you often hear mantras like “commit often” and “fail fast.” With vibe coding, it’s easier to identify when you should commit – after each prompt. The commit message is just a brief summary of what you told the AI to do. You are tempted to tell the AI to make a small correction, but I often rush to stage what it had done, so I can track changes easier.

There was another problem with the first few “chat” versions: I told it to modularize the JavaScript files, and it did. However, the next version was back to the unmodularized version. Another problem I ran into was that the changes between prompts were in long lines of code that were hard to read. I then had it set up “pretty” so that I could format the code to be human-readable, and the change log history would show smaller changes specific to what was changed, rather than long lines of code where a small change 100 or 200 characters in would be hard to spot.

Now, using “pretty” to format code raises another question about AI and code ownership. The pretty plugin is widely used to enforce coding standards, including spacing, tab size, and preventing code from exceeding 80 characters. It’s an automated set of rules, rather than any sort of simulated intelligence, but someone could argue that even code formatting is artificial intelligence at work. However, the use of “pretty” wasn’t affecting software engineers’ jobs.

The application is fairly simple. At least, it started out that way. You paste in text, and it splits it out into individual pages. You can also enter things like the book’s author, Title, Publish Date, etc. It supports chapters and can build a table of contents.

Tiny Targets

One of the main focuses was creating tiny books, so for the most part I was working with a 1×1-inch size. This extremely small size often reveals edge cases that larger books wouldn’t encounter. Calculating page numbers for the table of contents was much more difficult, and oftentimes I ran into situations where the page text was being cut off. Eventually, the rendering model for individual pages was broken down into a more manual process.

Table of Contents

The table of contents was important because I was still on the fence about whether I wanted an individual book for each of my 100-word stories or a single book containing them all. The chapters let me list all the stories and the pages where they appear. I eventually settled on one book per story, since I often have a lengthy “Behind the Story” for each story, as well as another section explaining what the “100-word stories” podcast is and its origins.

Page Numbers

Page numbers were a common struggle to get right. I have a few options to center the numbers or place them at the corners of the page. I also have a selection of typographical ornaments to choose from. If the page number is in the corner, you can also indicate whether you want only the inner or outer ornament displayed, both, or none.

Chapter Ornaments

A selection of typographical ornaments can be chosen to display at the end of a chapter to break up the content visually.

Formatting with Markdown

I added markdown support to make text bold, italic, underlined, and more, which introduced additional problems, but they were finally worked out as well.

Many of my “Behind the Story” write-ups have many images and embedded YouTube videos. I was able to display images on the tiny book pages, but videos were another issue. Instead, I added the ability to convert URLs into QR Codes so that I could use my phone and watch the video.

Signatures

Another issue that I was running into was supporting signatures that could be threaded together. I’ve not studied bookmaking, but I’ve observed it in books and didn’t know it had a name for the smaller groups of folded paper. This project introduced me to much of the terminology and processes of bookmaking.

Once you have a certain number of pages, you can’t simply fold them in half, or the innermost pages will stick out further than the outer pages. In turn, the book-making industry creates small groups of folded pages and then sews them together. So the program lets you choose how many sheets are in each signature. Each sheet has four pages – two leaves that are double-sided. Part of the fun is figuring out the order of each page when printed, and printing the opposite side on the next page, so double-sided printers print them out correctly.

Book Cover

The book cover itself is another interesting part. You have the front, spine, and back cover. I allow it to be printed separately so that it can be printed on thicker cardstock to give the feeling of a hardback book. I also added the capability to define a material thickness that can be placed within the cover, so the cover wraps around the material and folds in on itself.

The cover can also be set up to overhang the pages to add a bit of protection, just like a hardback book.

Relational Database

There are a few features for me as a developer, such as the ability to view the data both visually and as the raw JSON. Once I added that feature, I was able to display inspection tools such as color swatches, local time from UTC dates, image icons, and more. I then started optimizing the data structure so that it resembled a relational database rather than a flat object of key-value pairs. Part of that was standardizing how image elements are stored in a table, so that all images have the same settings for x/y position, zoom, and rotation. A similar table exists for parts of text.

I’m finding that many tech-savvy people are unaware of what JSON is or what it means. As a result, I have changed the buttons from “export/import” to “Upload” and “Download” and am considering naming the file with an extension such as “.book” or “.library” for a single book or multiple books.

Local Storage

Everything is stored in the browser’s local storage. This is similar to cookies, but it can use more storage space and is not sent in request headers. Instead, the data sits in your computer’s hard drive and is accessible only by client-side JavaScript.

If you want to edit a book on two different computers or browsers, you’ll need to export the data as a JSON file and upload it to the other browser. You can download just an individual book or all books in your library.

I wold like to add in some capability to save to remote storage – possibly dropbox, but I’m uncertain what direction to move in at the moment.

Library & eBooks

The library displays cover images for each book and allows searching for books based on their text content.

There is another feature that lets you export the whole book as an eBook PDF. For a 1×1-inch book, you’ll have to zoom in to 500% in the PDF reader to see it better.

Image Export

Another feature is what started out as an image export. Initially, it rendered all pages and the cover as images and downloaded them as a file. It then had features added to choose the DPI and image format. With JPEG, I was able to control the lossiness and show a split before/after preview, along with the file size and the impact of your settings. I also offered a grayscale mode and a 1-bit color mode. With 1-bit, I added the option to control the threshold. I could go further and add dithering effects with different patterns, but this was fairly advanced on its own. The 1-bit mode is useful to me primarily because I often work with laser printers that can either engrave or not.

It is my hope to eventually add an image import feature that lets you create a graphic novel or comic book simply by uploading images.

Animated GIF / MP4

I have a long history of working with animated GIFs since the mid-90s. Also, my blog plan doesn’t allow me to upload videos, but I can upload Animated GIFs or embed a video from YouTube. I found two libraries to bring that capability in. I set up the preview image to have a customizable delay between each page and to toggle it on/off. Then, exporting to a GIF animation or MP4 would use that delay to create the movie/animation. With GIF, I decided to introduce various palette effects. I added ANSI terminal, EGA, and even the two CGA modes that some games had in the early 90’s. I also found some instructions for my old Atari 400, on which colors were available, and made them available. I get quite a few interesting effects when applying different palettes.

Show & Tell

Eventually, it became time for me to have enough features to create a prototype book. I have a color laser printer that can print double-sided, which may help with the fine quality as well. Alignment is not perfect, but close enough for a proof of concept.

I first printed out the pages, as well as the cover. I had a business event to go to, so I folded up what I had, slipped it in my pocket and tended to the event.

I showed the uncut book to a person as a project I was working on. Later, a local business owner said they wanted to make miniature comic books. I took the sheet of paper out of my pocket, unfolded it, and showed it to them. They seemed concerned about the size, but I assured them they could be bigger and that I was intentionally working with a small size for myself.

Prototyping

The next day, I printed off some copies that were not folded and began cutting out the sheets. The next part took a while, identifying which sheets went in the proper order. Eventually I got them all together as seven separate signatures of four sheets each.

There were problems.

• The spine on the cover was too thick
• Signature registration and sewing stations on the wrong side of sheet
• Inner signature pages stuck out
• Cut guides could be easily seen

However, everything else seemed to be on par. I had the pages in the correct order. I could read the pages, but a magnifying glass would help. QR codes worked. I needed to find some thread and a needle to sew the signatures together for a fully working book.