Failure and fit

Tom Szwaja — Tue, 05 Sep 2023 07:05:28 +0000

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.¹ 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.²

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...

stately.ai 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

For the nerds: it's about persisting state with spawned actors, see this Github discussion. ↩
See the concept of the "Monitor", aka the "discrepancy-reducing/-increasing feedback loop". ↩

Context and complexities

Tom Szwaja — Mon, 21 Aug 2023 14:49:15 +0000

This is my brain churning away after hours whether I want to or not. I might as well write this down.

I'm doing some new things in my current project -- animations, state machines -- and I need an outlet for the inevitable frustrations.

Just so You know, I'll be throwing around jargon relating to the stack. Not because it's cool, but because I wanna let this be a stream-of-consciousness kind of thing.

If You want any of this to go into more detail, let me know. I can write a mean guide! (meaning, a very friendly one)

So what are you doing?

I'm building a todo app. I wanna focus on interactions. I wanna design and build some animations.

Here's me trying to model just how to check off an item:

I can already tell this is going to be fun.

More context

My goals on this project are:

reality: build something interesting-looking for my portfolio
build a UI that feels like something. I want feedback through animations

I'm also going to be using this app for my grocery shopping day-to-day, so I want this thing to shine ✨.

Here's my level of expertise:

I'm using state machines for the first time. I heard they were dope. Managing a UI like this has been on my todo list for a long time.

I'm pretty new to animations. I've played with CSS transitions and animations and react-spring before, but this will be on another level. The vision is to use the state machines to control the animations.

Oh and I want there to be dragging. Also first time long time.

Stack

Figma for designing and prototyping
stately.ai to visualize\think through the application
Xstate to implement the state machine
Pinia?
Vue.js as UI framework
unoCSS
smth smth animations
started with the Vitesse Lite template (shoutout to @antfu !)

Animations

I have some tools on my radar. It feels like there's gonna be a lot to try out:

Vue's native animation capabilities...
... maybe combined with custom CSS animations
@vue/motion
GSAP
RIVE

So far

Prelude

I've built a todo app last year. Been using it ever since, buggy as it is. Messed around with animations there, quickly realized how midfuckingly complex they make everything and abandoned the concept. But now I've reworked the design, I've got the state machines, I've got insomnia, so let's goooo!

Design

Made some designs

Prototyped some animations (is there a simpler way to embed webm here?)

need app -- animation prototype 1 - YouTube

When I can't embed WEBM, I make a Youtube short. Goes with this devlog about modelling animations with XState:https://tsxoxo.com/blog/thinking-through-animat...

youtube.com

need app -- animation prototype 2 - YouTube

When I can't embed WEBM, I make a Youtube short. Goes with this devlog about modelling animations with XState:https://tsxoxo.com/blog/thinking-through-animat...

youtube.com

This is still pretty lo-fi. I realized I know so little about how to actually build and choreograph animations in the browser that I better not go to far into this. I feel there's gonna be iteration (compromises) here. I would maybe love for my todo items to become fluid like water when they get checked off, but building that (and keeping performance... fluid, hhehe) is another matter.

I'm gonna come back to designing once I get a grip on the technical limitations. I wanna especially find out

how the spring animations of @vue/motion jibe with the dragging
how easy it is to choreograph animations

Especially with the dragging and checking off it will be a matter of trying it out with my hands to see what feels right. And there's of course performance issues. I want no less than buttery smooth.

Project setup

Set up a basic Pinia store. Not sure how this will interact with Xstate
Implemented the C in CRUD. Items are stored in localStorage <3
Skeleton styling

Also, a Notion page because can't have anything in my life happening without managing it in Notion. I'll be writing about writing this article there, later.

Modelling

I did this for the first time today -- making a statechart in the Xstate ecosystem. It got kind of intense. I think this is what made me write this piece here in the first place.

This is me seriously learning Xstate and state machines for the first time. I come to it with like the most basic of basic understanding ("there are states and transitions, aha") but pretty much everything else is new.

I spent most of the day reading the docs and designing several machines focusing on just a single interaction: checking off an item. Mind you, checking off an item will be done by dragging it to one side. Think archiving stuff in Gmail or adding a song to your queue in Spotify.

So what's the big deal -- you drag, and it gets checked off, right?

Right, easy stuff -- until you add transitions.

A sample problem

Say you check off an item -- meaning you dragged it to the right -- what happens next? Well, I want it to pop out of existence and move on to the next life (on the DONE list). This popping out will be animated in some way. After it's gone, there will be a gap -- we'll miss you, todo item.

Then I'd like the rest of the list to scooch and fill dat gap in a smooth motion. Seems easy enough to do with Vue's <Transition>. (I call this part "list-reordering".)

But, hmm, I often open my todo app and then check off several items one after the other: bam bam bam! So how would that jive with the above sequence of events then?

I see two options:

A. After an item gets checked off, the app 'locks itself' into the list-reordering animation. I have to wait for that to finish, and onlt THEN I can check off the next item.

B. OR, after an item gets checked off, the list doesn't fill dat gap immediately. Instead, there is a window of time where the list stays put and I can check off the next item right away. Only when I'm done and lift my finger from the screen for good, does the list reorder itself and fill all the gaps at once.

I vote for option B. That seems like the road I wanna go. It also leaves room for implementing some kind of combo reward-feedback, which I'd also really like to do. (Nothing like a m-m-m-mULTIKILL in a supermarket.)

So how do you model this process? I tried 3 ideas so far: first with an if-then (see the very first image in this article), then a flag, then a sub-state. This is the sub-state attempt:

Doing this one, I started to realize how deep my ignorance goes.

The depths

It's all connected: how do I model animations? How do I model the items? Does it make sense to make them actors? What kind of actors? Would it cause performance issues to have many state machines 'running' at the same time? I'm sure it wouldn't help.

So that's where I'm at now. I'm starting to scratch the surface of what I don't know. So I can at least put my confusion into words. Progress takes many forms.

Next steps

I wanna get specific:

research how to model animations with xstate -- read guides, look at examples
look at other relevant examples: todo-lists using xstate, vue apps using xstate
possibly, if I'm sick of looking and reading, implement dragging

Let me know if You want more!
Until next time,
Tom

Forem: Tom Szwaja