So yeah. Svelte is awesome. Here's a little component I cooked up over the weekend. It makes it really easy to create thumb-driven, Swipable interfaces like this one:
Go check it out in the REPL.
The basic idea behind it is the following:
- Have a parent component that "injects" a
progressvalue into the child scope via the
- Listen to touch/drag events
- Change the
progressvalue based on the distance the user has dragged
- Update inline CSS rules based on the
- "Snap" the
progressvalue to a full integer value when the user stops touching. Use a tweened store to smoothly interpolate.
You can see all of that coming together in the Swipeable.svelte component and in the child elements that use the
I think it's an interesting concept to have a parent component that drives the UI state of child components through a value injected via the
let directive. It might be worth exploring this idea a bit further and develop a small component library around it. But for now, it's just an idea. Let's see...
One of the most consolidated misconceptions about programming, since the early days, is the idea that such activity is purely technical, completely exact in nature, like Math and Physics. Computation is exact, but programming is not.