(2023-06-14) Udell Radical Just In Time Learning

Jon Udell: Radical just-in-time learning. Buoyed by the success of my LLM-assisted refactoring exercise, I set a new and (for me) more ambitious goal.

I wanted to tackle another project that I’d been blocked on: a slider widget for Steampipe dashboards.

A Steampipe dashboard resource touches many different aspects of the Steampipe system.

For aspiring plugin developers, there’s an SDK and documentation about common idioms and patterns. No such tooling or guidance is yet available to the widget developer. Parts of the dashboard system are written in Go code, parts in React-flavored TypeScript.

Can you fly that thing?

Trinity: I need a pilot progam for a B-212 helicopter. Hurry.

That was my experiment, and here’s my report.

An overly-optimistic first try

I started by feeding examples of existing input widgets to ChatGPT-4 and Sourcegraph Cody, and asking how to modify the patterns for a new slider widet. Predictably that yielded confident but useless results

Although I’m wary of applying the 10x label to a developer, José clearly deserves it. Me, not so much, 1x at best. I’m a fountain of good ideas that I often struggle to implement quickly and well, especially in code bases that span unfamiliar languages, frameworks, and components. If LLM augmentation can get me even to 1.5x or 2x, never mind 10x, that’ll be a huge win for me — and for a whole lot of average developers like me.

A more realistic next try

I wanted the simplest possible slider

A native HTML element was just the right starter element

As a widget developer, you’re operating in an environment where the results of your widget’s query are magically available in a data property that you can unpack in the widget’s TypeScript code.

For my purposes, it was OK to just accept that the data property magically holds the results of the query

It was straightford to put a slider onto the canvas. Then it took me a while to work out how to wire it into the React machinery

it occurred to me to try Sourcegraph’s structural search. Here’s the query that found all the examples

It’s interesting to see that, while Cody is joined at the hip to the Sourcegraph web app — and indeed even runs in a sidebar there, as well as in VSCode — it doesn’t yet seem to tap into structural search.

Controlled vs uncontrolled components

what I now realize is a common React error: Warning: A component is changing a controlled input to be uncontrolled.

A catalog of concepts

Beyond the controlled/uncontrolled distinction, here (courtesy of ChatGPT-4) are some of the concepts and idioms that this exercise introduced me to:

Functional Component

Props and TypeScript Interfaces

Destructuring Props:

useState Hook with TypeScript

useEffect Hook:

Custom Hooks with TypeScript

Event Handling with TypeScript

JSX and TypeScript (TSX)

I’m hard-pressed to justify climbing that learning curve. The LLM assistants ease that curve; I’m a better learner with them than without them; more feels possible than before. Douglas Engelbart dreamed of augmenting human intellect. I wish he’d lived to see this moment.