I wanted to suggest a tweak to this cool project: The panning and zooming feel very sluggish. I'm not sure if there's a technical reason it needs to be that way, but if the animation duration or spring used to control that can be made faster, it will feel much nicer to navigate around.
I was using this recently and found some situations where I didn't like the way the lines looked. Reading through the github comments from the author, it sounds like an improved version of this library is maintained within the tldraw codebase.
Panda seems really nice. As someone who does a lot of "creative" CSS work, writing styles quickly is important to me. I find writing styles as Javascript objects kinda cumbersome. I wish there was a way to use Imba's CSS system within a React or other Javascript app. https://imba.io/docs/css/syntax
Imba allows you to write CSS anywhere in a component definition using CSS-like syntax (rather than Javascript object syntax).
The syntax for adding a quick inline style is so simple:
<div [width:20px]>
You can even do hover states in an inline style:
<div [color:red @hover:blue]>
And interpolation is easy too:
<div [width:{someValue}px]>
Putting a CSS block at any level of your tag hierarchy scopes it to that tag.
<div.foo>
<div.bar>
css color:red # this applies to div.bar
em color:blue # this applies to div.bar em
"hello"
<em> "world"
CSS blocks declared in a component definition but outside of the markup, apply to the whole tag. CSS declared in a file, outside of a component definition, apply to all components defined in that file. There is also a global keyword to apply styles globally.
and there's a whole range of other useful features, a favorite of mind is the shorthand syntax for things like this:
c:red # same as color:red
d:vtc # same as display:flex flex-direction:column justify-content:center
x:10px rotate:30deg # same as transform:translateX(10px), rotate(30deg)
I understand that Imba is not appropriate for everyone and every project but I encourage you not to dismiss it. One are where it is clearly valuable is in building prototypes and side projects.
How will it work if I put 2 counter components on one page?
If it’s just using global variable for state then it will be shared between component. You can do the same thing in React, it’s just a bad idea.
If it does some magic under the hood to convert regular variables into something different like Svelte pre-5.0 (which Svelte decided to make more explicit in 5.0), then could you point me to docs describing it, I’m curious which approach they took with this.
If you look on the linked page under the "Styling Evolved" section. It appears variables are scoped to the component instance. In the example given each clock has its own variables, even though it is individually set to a different UTC.
In that case the count variable should be moved into a property of the tag. I just like putting it outside the tag because it really drives home "its just a variable".
tag Counter
count = 0
<self @click=(count++)> "count: {count}"
it doesn't have to be anything. You're free to organize your code as you wish: colocate, in a different file ... the compiler doesn't transform the variable in any way, nor does it track its "mutation", it "just" "rerenders" on every change. And it's super fast too!
I'm not aware of any easier way to build something like this than what I presented in the article, but I'd be interested to learn if there was. I did create a full-fledged prototyping/animation tool called Flinto.com, but it can't quite do this interaction with all of its details
