(2023-06-14) Udell Radical Just In Time Learning
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:
Props and TypeScript Interfaces
useState Hook with TypeScript
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.