yar's revenge's revenge

In 1982, Atari had a movie trailer commercial featuring the game "Yar's Revenge"....specifically, it was a fanciful "making of" that had the programmer making all kinds of absurdly high level voice commands and gestures to construct an original game.

Of course, this commercial was hitting differently from 1982-2022 (the introduction of accessible LLMs) than it does now - it's still out there but less of a crazy fantasy.

And we've had a year or two of extreme hype. Was LLM - FINALLY - the fulfillment of the dream (started with COBOL, believe it or not) of "*now* the non-programmers can make a program from plain text"?

Well, sort of.

In some places the wheels have fallen off the hype bus. It's tougher to "vibe code" your way to complete system than was promised. When you use a complex "do it all" system like Claude, at least without detailed BDUF (big design up front)/waterfall, regressions show up all the time, and if you're not throwing tons of money at it, you hit token/usage ceilings frustratingly quickly.

I'm fascinated by the modes of collaborating with AI to program. I think I've seen three modes:

A basic chat ala ChatGPT, where you CAN copy and paste a file or block in, but its mostly working out of its sandbox

B do it all systems like Claude... still chat based, but it's more geared at getting a lot of instructions at the outset and doing it all for you

C context sensitive, in-editor solutions like CoPilot in VS Code

I've had a lot of luck with style A, and use style C for work.

I've been writing a bespoke todo webapp with Claude in style B, and the results have been mixed. I repeatedly hit usage limits with the $17/mo program (charged annually) and I'm not positive if that represents Anthropic being more upfront about the costs, or if I'm just asking Claude to do to much, to keep to much in its cyberhead.

Which is the decisive factor right now - when top down things go badly, are you just not doing enough design in your prompts? Should you be throwing more money at it? Or would be better if to take a more "paired programmer" approach.

I think I need to start paying for some CoPilot... letting the human drive the context probably gets better results from "dumber" AI than have an LLM do it all.

As a sci-fi loving kid I said "I think the sweet spot will be computers working in tandem with humans, over computers or humans alone". That seems (optimistically!) weirdly prescient at this moment.

touch screen natives

 My 11 year old nephew independently discovered a kind of fun art technique I made up for myself a decade ago - using layers to draw over a photo, and then using the eyedropper tool to grab a flat color and then apply it to a larger region, resulting in a nice illustrated/cel shaded look.

Being a life long doodler myself, I bought him an iPad and an Apple Pencil last year to encourage this kind of play, but was curious that he ignores the Pencil in favor of the fingers nature gave him. This sort of surprised me; when I doodle on my own iPad I NEED the precision of a good stylus... with a fat opaque fingertip it's too hard to make lines meetup. And his lines were fine!

But I put on my UX researcher hat and observed - and in a minute the answer was clear - he pinches and zooms in ALL the time as needed to where the imprecision of a finger doesn't matter. And not just zoom, but rotate to get a more convenient angle for the coloring motion of his fingertips.

Stodgy old me, growing up with pen-on-paper, this wasn't an option. And I never was comfortable with how some iPad art programs made it "too easy" to rotate. (Heck, my current favorite doodle pad Apple Notes doesn't even have zoom in!)

But this next generation - they're touchscreen native in a way I will never be... The kids are alright.

too many icons

 Making the rounds (as in, Apple fans seeing it on Daring Fireball)

A seriously damning critique of Apples overuse + underdistinguishment of icons on dropdown menus: It’s hard to justify Tahoe icons

The root cause is that assuming every item needs an icon is a misthink.

I don't know if there's a counter argument that for certain cognitive ways of being, for certain visual thinkers, all the icons help. But probably the old Apple HIG (Human Interface Guidelines) got it right.

quick evolve code

 

[The Haggunenons of Vicissitus Three's] genetic structure, based on the quadruple-striated octo-helix, is so chronically unstable, that far from passing their basic shape onto their children, they will quite frequently evolve several times over lunch. But they do this with such reckless abandon that if, sitting at the table, they are unable to reach a coffee spoon, they are liable without a moment's consideration to mutate into something with far longer arms - but which is probably quite incapable of drinking the coffee.

 Douglas Adams, "Restaurant at the End of the Universe."

This passage came to mind as I was pairing up with CoPilot to make a throwaway change to code. It's a different vibe when generating code had more of a cost - it's great to make a quick targeted solution but I don't trust it as much as the handrolled stuff.

PHP comics

No PHPun Intendend

avery labels and learning to herd AI

Man. I guess nearly every dev who also blogs a bit is tempted to make an entry that could be titled "my AI journey so far"

So, the backstory: My sweetie Lynette has a holiday card list of around 180 cards to send,  and she asked me to help with getting her spreadsheet onto mailing labels - specifically onto a pack of Avery 5660 Matte Clear. The challenge is you need to carefully align the addresses merged from columns of the spreadsheet onto the 30-per-sheet layout.

So Google sheets has some plugins available, but really they want you to pay $30 or $99 for a lifelong license. But even more troublingly, each plugin asks for SO MANY PERMISSIONS to possibly pwn all your Google docs and sheets. Avery seems to offer some kind of software design product for laying out labels, but besides needing an account, its learning curve was weirdly high.

At Lynette's suggestion I actually asked ChatGPT to take a swing at it, pasting in the PNG template and the raw data, and it got in the ballpark, but not quite enough.

So, right now I feel like there are 3 main dev<=>ai interaction modes: plain old browser window chat (and I've made some successful one off programs there with ChatGPT), VS Code integration which gives the system an easier view of more of your files and better ability to work inline, and then the terminal-based approach of Claude. 

I had just recently decided to take a gamble with Pro-level Claude, and this seemed like a good project for it. Short story long,  Avery 5660 Spreadsheet => Address Label Generator is the result, a two-page webapp. You copy and paste your whole spreadsheet in, pick the columns for the four lines of each label, and then you can page through each printable page (PROTIP: print these one at a time and grab them from the printer before they smudge!)

Claude did astonishingly well on some parts (especially the CSS for the print media version of the page, and then auto-shrinking font-size for address that were overrunning the labels) but was surprisingly challenged by other pieces. It really reminded me of stories where like, ten years ago, some sneaky go-getter would be overemployed with a few jobs and outsource it to cheap offshore techies - it can be amazingly productive, and may even come up with some parts a regular dev would struggle with, but there's often still a "Junior Engineer" base you have to build on to get to professional quality stuff.

Some specific challenges: my first draft had a hardcoded version of the copy-pasted data as a separate file, and then I asked Claude to run things from a textarea. And the setup page did so, but after a while I realized it was cheating and using the static data for all the other pages. 

Also it had the hardest time correcting some hangups because copy and paste from Google Sheets leads to tab delimited data but in a CSV-kinda way, where some content may include line breaks, so long as the field entry is encased in double quotes. I had it iterate several times before finally having to architect the solution (making sure on javascript paste it corrected the content, and then used that content for all subsequent pages)

It could be I'm just naive at working with Claude, and better prompting could have saved me some hassle. 

But man, it really changes the equation of what a lone wolf dev has to think about. Over the past decades I developed my own simple, very robust style, and would touch every bit of code, even if I sometimes had to refresh my memory when I came back to it years later. But Claude? It's a bit more like working on a team, and I'm still the PO and QA. (I think the question becomes, how much of an architect I will still have to be as well.) And it really behooves me to up my personal automated testing game; dev testing might not be quite enough because of the shenanigans these bots can get up to.

I think AI slots in pretty well with my "KISS" stack of evergreen, buildless, old school serverside languages and vanilla-ish javascript on a VPN - it's enormously gratifying to be able to popup a new web service without having a new business relationship, and one that will be here a decade from now. But obviously, the landscape for devs is changing greatly, and you have to learn to surf this wave or get swamped.

Exporting scaling/high-rez PDFs from ReactFlow

This past summer I had a heck of a time getting ReactFlow to export as a PFD in the browser, especially in one step - but we got there. BUT! The result relied on rasterizing the content as a PNG - which didn't graphically scale well, and it turned out a lot of our diagrams are extremely big and detailed, so if you can't preserve clarity on zoom in, the game is kind of lost. (And also, they tended to be huuuge files, many Mbs when the corresponding SVG was tiny, like 100K)

Well, I went a little crazy trying to find different methods of getting the export to work. I learned that SVGs are kind of unevenly supported in a lot of ways in browsers and toolkits, and that many tools that will capture DOM stuff and export it as PDF do so by rasterizing it... even if you try to export an SVG, it will turn into a pixel'd mess close up.  Here is a table I made to track my progress and keep track of what permutations I had already done:

(Note, you don't see options for downloading an svg (like from html-to-image toSvg) directly as a link - that's because one absolutely firm requirement was to wrap the reactflow content in a frame, providing metadata about the content (people and place involved, company logo, etc))

So you can see this table almost makes its own little map (maybe I should have used ReactFlow to diagram it out! ) as many of the steps would have to build on previous steps.

#	Method	Result	Notes
A	KendoPDF PDFExport (wrap ReactFlow directly)	PDF w/o Edge lines	(also likely not zoomable)
B	html-to-image toSvg => dataUrl => jsPdf.addImage	Fail	(unsupported image type)
C	html-to-image toPng => dataUrl => jsPdf.addImage	PDF (not zoomable)	(also large file size)
D	html-to-image toSvg => dataUrl	SVG content	intermediate step w/ huge content size)
E	D => download .svg via link	Zoomable .SVG file	not desired goal file type, and large file
F	E => .SVG file to browser print dialog to .PDF	PDF (zoomable)	also good file size… but how to automate
G	E => .SVG file to various online tools and .NET approaches	Fail	(Many pdf/svg wranglers cannot cope with E SVG)
H	D => on-page SVG	SVG content	Intermediate step
I	H => KendoPDF PDFExport	PDF (not zoomable)	(seems like KendoPDF always rasterizes)
J	H => jsPdf w/ svg2pdf .svg()	Fail	Can’t deal with D SVG (but smaller files work)
K	E => >SVG file to svgo optimizer	Fail	“Error: Pseudo-elements are not supported by css-select”
L	H => html2pdf.js	PDF (not zoomable)	renderizes (interestingly is wrapper to html-to-canvas and jsPdf)
M	html-to-image toSvg(of Scaled Flow Elem) => dataUrl	Large PNG, no frame	reverting to Download Image - React Flow for scaling
N	D => new window, button to open up print dialog	Scalable PDF!	manual steps to hit “print” and “print to pdf”

So sadly, there wasn't a perfect end result. The only thing I found that could reliably output a clean PDF was the browser's own "Print" dialog, with its save to pdf action. And that worked a treat in making a tiny PDF that was totally scalable. 

So the solution is a button that does a "print preview" mode (the frame and content) and fires off the print dialog, though we weren't able to automate past that point (adjusting scaling, destination as to PDF and not a printer, etc)