Part 2 of the series Building interactions using Xstate and Vue -- a devlog.

Failure and fit

Where I doubt my stubborn efforts and rant about a lack of guidance in the tech space.

Monday, September 4th 2023

This one’s a collection of semi-related ponderings.

Hard facts since last time

  • I’ve looked into ways of modeling this app
    → and decided to start from a template rather than from scratch.

  • I’ve researched animation tech
    → and decided to use vanilla Vue until I’m thirsty for more.

  • I’ve run into a persistent bug
    → and decided to move on for now.

A roadblock

I’ve put some time into this project since the last devlog. Did a lot of research. Rebooted the app.

And I’ve unsuccessfully tried to solve a technical problem with Xstate.1 It went a little like this in my Notion stream of consiousness:

  • task: add persistent storage
  • done — 2 lines. thank goddess for vueuse. it’s so simple!
  • task: add intro transition
  • whats this bug? Am I using <Transition> wrong?
  • OK, this is seriously breaking this app. let’s remove everything I just added.
  • oh… it’s still broken. was it always broken?
  • yes

… And then a few days of debugging.

Is it failure yet?

Funny thing, “failre”. An involuntary violation of an expectation. Or something like that. Thing is, expectations can be wrong and ridiculous. “This shouldn’t take more than an hour”, it might say. Yet. Here. We. Are.2

Working on a tough problem can make me ponder such things. After scouring the Xstate docs, delving into Github issues and trying half a dozen different approaches, I’m still where I was days ago: the thing ain’t working. And I start asking: Have I gone about this the wrong way? Have I wasted time here? Should I have moved on from this sooner or looked at other, more creative solutions instead of throwing myself against this wall over and over?

I feel like if I were to do this again, I would at least ask for help sooner, instead of trying it on my own for so long.

When do I use it?

So many words have been said about how to use GSAP with Vue. And so few about when.

Nobody even mentions this question in the talks and articles I’ve seen. — And this is all I care about! When I’m researching a new field and see half a dozen different tools doing ‘basically the same thing’, the big question on my mind is: When do I use which?

Is this considered a stupid question? Is the answer maybe too obvious? Do the ppl with experience know in a coherent way or is that knowledge too intuitive? Or is it so context-dependent that you could at best say something trite like “whatever your project requires”? Or could it be that the pros forgot how burning of a question this is for a beginner?

I don’t know. I feel like even if this were a hard question (rather than an obvious one), we could give people some useful information to make informed choices. Maybe we could simplify and say,

with these things being equal:

  • knowledge — I’m gonna be learning any tool from scratch
  • the quality of each tool’s documentation
  • the requirements of the codebase (e.g. Vue)

this tool would make for the smallest bundle size, that tool would produce the smoothest animations, and that tool would give you advantages you didn’t even know existed, because you’re new to the field and that’s ok.

I wish…

  • would allow me to put spawned actors on my statechart. Half the reason I wanted to use Xstate is to see what I’m doing.
  • discussions of the type ‘when to use X’ were more common than none-at-all
  • ‘small’ bugs would have the courtesy to stay small


  1. For the nerds: it’s about persisting state with spawned actors, see this Github discussion.

  2. See the concept of the ”Monitor, aka the “discrepancy-reducing/-increasing feedback loop”.