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)

doing SSR before it was cool

React got hacked…and it’s WAY WORSE than you think.

Again, more grist for the "old man yells at (amazon) cloud" mill... 

the drive to SSR combined with the "necessary coolness" of isomorphic code that can run browser and server side... it just sets up that complexity footprint that allows for stuff like this.

I'm not pitching a return to bad old "JSP pages that use jQuery for the fun stuff", but at least that era had clearly defined boundaries. The "UI Guy" role used to fundamentally be a server side rendering space, we spent a decade going against that as we urgently set aside the web's idiomatic way of modeling the world for trying to "feel like an app", and in trying to swing back... well... there are some ugly security misses.

better window titles in vs code

At work we have a monorepo using module federation, and often I find it expedient to open a VS Code window just on the module I'm working on, so ctrl-p and ctrl-shift-f are scoped to the problem at hand. 

(Yes for work I'm back on Windows)

One problem is that by default windows are titled first by the current open file - but you can ctrl-, or cmd-, to open up the settings, look for "window.title" then arrange the string so that rootName is first. This means the current open "folder"/app is more visible on the task bar or alt-tab window selector,

advent-ure

Years ago I had an annual tradition of making "Virtual Advent Calendars" - little toys and games that could run in the browser, one each day for Dec 1-25.

I was heartened to find out that the first years' (which I thought were lost because Java Applets are now deprecated) can be run if you use a Chrome plugin called CheerpJ.

Anyway, here are links to all 7:
2009 (Java Applet)
2011 (Java Applet)
2012 (Started remaking in JS)
2013 (Seasons)
Ed Emberly Animals (plus Santa)
2015 (Games)
2016 (Finale)

Sometimes I miss making these things! It was a fun little tradition, and nice creative outlet.