Repeat the word ”poem” forever

Extracting Training Data from ChatGPT

LLM-based AI is so weird - and its potential for security breaches are a known unknown . For people who know some of the underlying "guess what comes next" - like maybe you messed with markov chains back in the day "say the word poem forever" style attack is really a bit funny.

chart-o-tron!

I love making bespoke web applications as part of the Independent Web. Six years ago I made "chart-o-tron" for managing sheet music for bands. (Many bands get by with Google Files or Wordpress, but those tools are often clumsy in terms of browsing, preserving metadata, and mobile-friendliness.)

Chart-o-tron met several UI/UX goals:

* Easy upload of PDF and other files

* Keep music organized by category

* Allow bands to have private or public archives

* Capture metadata such as Lyrics, Key and performance notes

* Friendly URLs for a band's landing page

* Mobile-friendly UX, letting a musician scramble to a chart they need on their phone in a hurry

(Later I added an ability to create "setlist surveys", allowing bandmates to indicate what songs they'd like to have for a rehearsal or performance. I do love democratic empowerment!)

"Chart-O-Tron" has proven its value to my band over and over again, so I figured it was time to move to a proper domain, chart-o-tron dot org ( not sure if LinkedIn will eat the link: <https://chart-o-tron.org/> )

Also I made a major UX improvement: a shared password for each band, rather than the individual account system it was using. This was mostly to work around the challenge of adding new accounts and authorizations; most of my band's chart-o-tron page access is done anonymously sans login. Having to setup a hierarchy with other bandmates "blessing" a newcomers account to grant admin privileges was just a constant piece of UX friction.

(Also although I made it years ago, it was gratifyingly easy to pick up on the homebrew MVC system I set up to handle the routing, and have pretty URLs like chart-o-tron/band/bandname )

Usual plug: I continue on the jobhunt grind, so if your company might be looking for a React/TypeScript wielding UI Engineer with demonstrated fullstack bonafides (and full UX!) let me know!

Resume: <https://kirk.is/resume>

Portfolio <https://kirk.is/portfolio> 

end of coding, film at 11

The New Yorker had a piece by James Somers, A Coder Considers the Waning Days of the Craft about how GPT4 is empowering non-coders to solve coding problems. Many parts of my career path echo his.

He points out how once upon a time Squarespace and other tools empowered non-techies to make websites just by clicking around, and a set of medium-low-effort, sometimes high-paying work went away. There are some interesting challenges to bringing that same egalitarian nature to programming - many of them have to do with deployment and environmental context. There are some obvious risks to allowing half-baked code on your server! Some of those to the host can be mitigated by proper containerization but I wonder what ChatGPT would suggest for from scratch deployment for the non-programmer...

Somers mentions thow we seem to be cracking the long-pondered "natural language programming" problem - of which COBOL was one of the first attempts - citing Dijkstra circa 1978 and the imprecision of human languages.

But it feels like that equation changes somewhat with AI. As coder you're rarely solving unique challenges, you're solving problems very similar to what many people before you have, and LLMs are uniquely empowered to draw from that. They don't truly model the problem in their head, and so have all kinds of limitations, but they are able to get to "DWIMNWIS" ("Do What I Mean Not What I say") in a way previous systems have not.

Near the end of the piece Somers sounds a hopeful note for the programmer:

"Computing is not yet overcome. GPT-4 is impressive, but a layperson can't wield it the way a programmer can. I still feel secure in my profession. In fact, I feel somewhat more secure than before. As software gets easier to make, it'll proliferate; programmers will be tasked with its design, its configuration, and its maintenance. And though I've always found the fiddly parts of programming the most calming, and the most essential, I'm not especially good at them. I've failed many classic coding interview tests of the kind you find at Big Tech companies. The thing I'm relatively good at is knowing what's worth building, what users like, how to communicate both technically and humanely. A friend of mine has called this A.I. moment "the revenge of the so-so programmer." As coding per se begins to matter less, maybe softer skills will shine."

Here's hoping! For folks caught on the outside of the current boom-to-bust cycle, these sea changes are frightening. But right now, where I've had ChatGPT write me some simple one page apps, but also fall on its face on some similar problems, I'm optimistic I'll at least be able to ride out the rest of my career doing this kind of thing, with ChatGPT as an ally instead of a foe. But, my previous advice to young people: "uh, I dunno, maybe try programming? It always worked for me" seems more precarious than ever. 

lateral thinking with withered php

 If you were ever a fan of Nintendo, you might have heard of 枯れた技術の水平思考, "Lateral Thinking of Withered Technology" (sometimes given as "Seasoned" instead of "Withered") - Yokoi Gunpei's philosophy of steering clear of the "state of the art" but looking to what can be mass produced cheaply. Here is a great look at how he put it into practice ...

I think there are some parallel lessons for side projects here... when I hear about Pieter Levels who famously makes millions with clever and useful services written in PHP and jQuery, I am reminded that some side projects lean into learning the new hotness (in part because hiring teams might prefer less bespoke code and more following of the latest in the industry) but some projects might benefit from fewer industry dependencies and business relationships to maintain - and that an idea that brings value to customers can be substrate independent. 

TLDRing the TLDRs

 Last week I worked on catching up on my backlog of developer newsletter links (Mostly TLDR, TLDR Webdev, Frontend Focus and JavaScript Weekly. The first two I'm on the fence about; getting an update every weekday can be overwhelming if you start to slip behind.) 

Here are some of the most interesting links (a few are from other sources.)

From Akamai to F5 to NTLM... with love. - truly scary tale of some greyhat hacking. Hosting infrastructure has gotten so complex that truly weird vulnerabilities can emerge.

This article on lessons from tiny development teams got me thinking about Pieter Levels, who famously makes thousands and thousands from a few of his projects that found their niche, and yet his stack is PHP+JQuery. Here's more on side hustles.

Habits of Great Software Engineers got me thinking about the constant tension between thwarting long term technical debt and always looking for the flavor of the week - see also this piece on striving to keep well away from the leading edge of technology

Solve the problem, not a different more difficult problem - know when to do a one off.

Nice tutorial with interactive bits on Conflict-free Replicated Data Type - basically the data structure you need to keep shared editable resources online in sync. I think I independently reinvented some of these core ideas for my own kirk.is/drawing/, a shared online whiteboard drawing programming that made a lot of use of synchronizing.

Good reminder of six high level concepts any senior engineer should be fluent in

Interesting article It's 2023, here is why your web design sucks. - the design and the engineering got too far separated, possibly for sexist reasons.

More web tool kit specfic

• React Suspense in three different architectures - some of these seem like overkill. Sort of like "Beer - the solution to, and cause of, all our problems" - throwing more React at a situation big React code bundles created.
• Tao of React - Software Design, Architecture & Best Practices - I always like "Tao of" as a framing device, the joy of letting things find their own natural way. Most of these are fairly common sense.
  
• Shoelace looks like an awesome web component based component library. See also Web Components Will Outlive Your JavaScript Framework - I suspect I know several React component libraries that should have been webcomponents.
• zany.sh - serves up your own favicon from text or an emoji
  
• jsongenerator.io - interesting way to generate fake-y JSON
• At some point I have to look more at protomaps a way of serving up map tiles from the cloud.
• One thing I miss from the old JQuery days is how easy it was to add a little juicy UI to a page - DOM elements with pleasing transitions vs everything just snapping into place. react-magic-motion promises to bring some of that back. (See also this article on CSS vs JavaScript transitions)
• One thing my recent React studies have been remind me is that useEffect is less thought of for "side effects" and more for "synchronizing with an external system"
• I'm both amazed and a little intimidated by all the Tiny Helpers - one off utilities. I've made a few of these type things myself. As always the problem is discoverability, if you hope to get something beyond the "programmer scratched their own itch" aspect.
• I do wonder if $1200 or so for epicweb.dev and taking a stab at being even more strongly fullstack would be worth it for me.

best syncing todo and information management systems

 I've always been interested in personal information management - the tools and tech people use to keep track of what they need to do and things they want to keep track of over the long haul.

Yesterday I spent a few happy hours on some long overdue updates to "jkdb", a bespoke data table editor I keep on my personal site. (It's a little bit like a series of excel sheets, but I never liked how Excel handled wrapping and columns, plus each sheet has more specific form inputs.) I've been using it for YEARS, for password tracking, media journaling, etc, and now its tables finally have "in place" editing so I don't have to bounce to a different screen to add or edit. (Like I said, I made this thing a long time ago)

Since I first made jkdb, a number of apps have emerged covering similar spaces, but with a UX encouraging different uses. Here are the best I've integrated into my life, things that have proven their reliability over the years:

Simplenote: an incredibly minimalist, multiplatform pure text editor with awesome syncing. Has a great web interface as well as desktop and mobile clients. Automattic has been running it as a free service for years, but even if they dropped it, they make it easy to export *en masse*. No folders; it relies on fast search and tags. (It's kind of like the old days when you might have a giant directory of notepad.exe txt files, but faster) I like it better and trust it more than more graphical products such as Evernote or Apple Notes. (Apple notes is my favorite sketch pad, though.)

Tot: an even MORE minimalist text editor, syncing across Mac and iOS. You get 7 color coded memos- no more, no less. It's free on Mac and a one time fee on iOS. I find it awesome as a free form todo list, always at hand on Mac menubar or iPhone homescreen. I use the first memo for general Todo, and other pages for "media to see" or "music to get" etc.

2Do: Solid classic "checkbox" task tracker. Tot's free form text is great for most things but some tasks recur or should show up in a time-sensitive way, and 2Do nails it. It has the best UI I've found for having tasks in different Categories, but displaying the contents of all categories on a single scrollable list, without having to click on it. (Just added it as a homescreen widget)

Google Docs: this is my favorite for anything I have to share and co-edit with others. Its iOS client is a bit wonky, but in general it's a great and accessible choice.

So those are my 4 favorite information management apps, plus my homebrew solution - each has a specialty and it's almost oddly easy to get the muscle memory of what information is living where.

What apps would you advocate for, and what makes them stand out from others?

(Usual plug: I'm a React/Node/Typescript saavy UI to middle layer developer looking for a fulltime gig in Boston, Remote, or Hybrid... if you your team likes the idea of a programmer who really thinks about interactions and enjoys making ideas into code, hit me up!)

art by letters

I do think it's obvious (sometimes painfully so) that ChatGPT and other LLMs/neural network based tools will be an increasingly important tool in the coder's toolbox. With the Dall-E 3 art plugin, they can also be used for a bit of fun. Here are three images of my long-term mascot "Alien Bill" - well, two out of three ain't bad... when the scene grew more complex I couldn't persuade the system to stop reverting to a more classic alien form... cute rocket ship though!

I had similar problems getting GPT-4 to construct a single page Leaflet webapp - the core was solid, but each iteration lead to regressions of earlier functionality, and data structures were munged rather than evolved.

This difficulty in prompt wrangling - where you run into the fact that LLMs are not REALLY modeling the world "in their head", but getting extraordinary results based on guesses about what seems likely to say (or paint) next - poses the $50,000 question: is this challenge fundamental to LLMs? Are we near the top leveling off of an "S-shaped" curve? (And/or is there any other form of general AI waiting in the wings?) Or do we just need to be better prompters - either by improving our own human skills, or by utilizing intermediate "prompt-helpers"?

PLUG: I am a Boston-area software developer (with a focus on UI and UX, but proven abilities across the stack) looking for a team. See my portfolio at https://kirk.is/portfolio/ and let me know if I might be a fit for your company's team!

the possibilities and limits of ChatGPT for MVP prototypes

"If a thing is worth doing, it is worth doing badly."  --G.K. Chesterton (patron saint of MVP prototypes)

TubaChristmas Map 2023: stuff.alienbill.com/tubaxmas/map/ 

Last week I took an afternoon to make an MVP prototype of a map and listings page for TubaChristmas (a collection of local annual events that gather up low brass musicians to play holiday music) As a tuba player and programmer, I would love to help improve the process of site registration and management (which is said to be stuck in a fax-machine era) and thought a quick and dirty prototype would open people's eyes to what could be done.

The first crucial step was to scrape the data from the TubaChrismas listings page:  (click and enjoy the 1998 www vibe!) Since that page was made with a template it wasn't too hard to cook up a DOM-to-JSON converter in the browser but the data was still notably messy -   promotional descriptors being included in the city name, for example.

After cleaning the data by hand, I had ChatGPT write code to update the JSON structure with Lat and Lng in GoogleMap APIs. (I had a API key handy from my work on Porchfests)

For the page itself I decided to give ChatGPT a try in making a Leaflet based solution. The process started off promisingly (first prompt: "using JS and HTML (maybe a vanilla js library) I'd like to: show a map of the US with clickable icons on certain cities. what's the easiest way to do that" and then iterating) but got bogged down - each cycle of refinement tended to create more regressions, and when I finally gave up and went to take over the code, the internal structure was extremely "Jr Developer". I did a minimal amount of restructuring and hacking to get to the filtering/search w/ map highlighting I wanted to prove out and called it a day.

I guess I was heartened by encountering ChatGPT's limits (and this was the paid "GPT4" version) - on the one hand maybe it's just pointing out my own prompt engineering deficiencies, but researches have shown that LLMs can't really create beyond their own training models - and so I think the future is collaboration and refinement of what it means to be a coder.

I do think at this point if you are a programmer who isn't at least using a LLM assistant as a sort of sophisticated "StackOverflow" - providing customized answers to the API details that aren't worth keeping in your own head - you are at risk for falling behind. (My preference is using ChatGPT as a standalone consultant, vs the Co-Pilot hyper-autosuggest model integrated into the editor.) There's absolutely time and effort efficiencies to be had on all levels of work.

Also a reminder: I am on a job hunt, so if your team could use a 10+ year veteran UI/UX engineer who is comfortable coding React/TypeScript/Node but also aware of how automation can help team efficiency - where to trust the machine and when not to - let me know! Available for work near Boston, hybrid, or full-remote. 

leaflet markers

https://github.com/pointhi/leaflet-color-markers is a nice place to get leaflet icons

iterating and reacting

I am working to keep my React skills sharp while I am still on the jobhunt. (Also, some interviewers ask me to bring along some code to discuss, but the vast majority of the React code I've produced I'm not at liberty to share.)

One practical tool I've iterated on is a "pill tracker" - a tool that let me make up printable sheets to keep in the kitchen to keep track of Dean's (RIP, dear kitty) sometimes complicated pill and feeding schedule.

My first approach was the barebones pill charter, and used this exremely geeky textarea-based UI:

The UI, with its ad-hoc syntax, is obviously not very friendly for most folks, but has some advantages. For one thing, it's very easy for the programmer :-D But also it's very easy to share the a schedule with someone else, and you can apply other text tools if you like - copy and pasting lines is actually a very fluid way to work.

Later I made med-sched-grid. I upgraded the look and feel:

More importantly it actually has a UI. Items are constructed as a list on top, with the grid underneath. Maybe the most useful feature is being able to jump ahead a block of time - combined with how it uses localstorage or links to restore what you entered last time, getting the next month's schedule is just a click away (this was useful for the kitty meds with a 2 week pace)

I wrote that as a everything-in-one-html-document app (including the svg graphics) which is a fun, if somewhat gimmicky, way of coding.

I decided to rewrite in React and came up with med-plan-print. I realized the old UI was a little weird because there was only a loose connection between the list at top and the grid itself. My first thought was to allow each column to activate a modal editor, but that was a little ugly, and still separated the editing from its context. With a little cleverness I could allow a more direct connection between the column and its editable metadata:

 (the triangle is made via CSS cleverness, and rests inside the TH for proper locating, but then is shoved up to connect it visually with form.)

The editor is actually semi-modal; the default state of the UI use the same space for the overall controls:

If started fresh, the page opens up the blank editor. Then that uses the same green which is a visual hint for the plus button (I'm still debating if each of the round buttons should have a caption underneath, or if the iconography carries the load.)

This was built in React using parcel and Create App. I threw in some tests (the "going backwards in time" calculation was especially fraught) and put in on github.