Programming toeholds

Published

"Every once in a while, your code works and you forget that you’re wasting your life in front of a computer." – @fortes

To design digital experiences, I'm learning to program working software again. Real data, real(istic) interactions – it's hard! Just when I think I've scaled a peak, I realize I'm only standing on the rubble at the base of Half Dome, looking up.

Each day I’ve reflected on how I tried to solve each problem. What can I do to save time tomorrow? There’s been little overlap between technologies and specific issues so far. The space feels vast and growing. The toeholds I have found are general lessons that have sped me up and cut down on a few shame spirals:

  1. Don’t get frustrated. Some difficulty is desirable, but I need a clear head to solve problems. Anger makes me miss things.
  2. Debug first by reading the code and following its flow of execution. Make sure I can articulate what I think it’s doing. Say it aloud. (Related: Do this before pasting any example code I find on the internets.)
  3. Listen to Chrome’s dev tools. Take its output seriously. I’m playing a game of hot-cold and Chrome is helping me cheat.
  4. Write out possible causes. Often just listing what I think might be happening is key to unlocking a fruitful new perspective to try.
  5. Don’t goose-chase other people’s problems. Google deliberately after doing the above. It’s easy to find similar examples that don’t turn out to apply to mine.
  6. Know my context. Which systems am I running? Which page version am I editing and viewing? Which frameworks and versions did I choose? Which scope is this code block nested within? Does this example assume the same context I’m in?

When I wasn’t methodical about a problem, I let this copy-pasted code snippet stump me for about a day. (I know.)

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.4"></script>
<script>
	document.body.appendChild(Plot.plot(options));
</script>

I bounced around writing and debugging elaborate approaches that were all downstream of the problem. I was flailing. An empty SVG was being inserted, the chart library was processing my data, but no chart was rendering.

When I went back and calmly read from the beginning, I realized document.body.appendChild() means, “in the document body, add something.” The 'something' Plot.plot(options) means, “use Plot to plot... options.” The rest of the example code did something, but “options” was a placeholder, basically “YOUR CODE HERE.” Derp. 🤦‍♂️

The next day, when trying to bind data to Plot outside of Observable, I was at the limit of my knowledge and public examples. By carefully stepping through core documentation, I was able to piece together D3's “promise” structure d3.json("/get-data").then((data) => { YOUR CODE HERE }) to interact with Plot. In just over one hour I'd climbed a tougher rock face. The toeholds worked and voilà, my charts rendered.

This list isn't intuition, yet, but I'm noticing more quickly when I stumble into an obstacle, then forcing myself to reuse it like a script. It keeps working, which is a thrill!