trafnar

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.

Their app listens to your calls and transcribes things. I think this visualizer helps indicate when it is actively listening.

It's still relevant, the language hasn't changed much since I made this course.

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)

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}"

Yes, via https://www.todesktop.com/ which makes it very easy.

I’ve been building all my projects with Imba for the past few years, I love it.

- TaskTXT - Plain text todos and tasks with timers https://www.tasktxt.com

- ReadyRunner - GPT chat for desktop https://www.readyrunner.ai

- Chonky Menu Re-Creation - Breakdown of a fancy menu UI https://www.nathanmanousos.com/posts/chonky-menu

I’ve made several videos about Imba too:

- Building a counter in 49 seconds: https://www.youtube.com/watch?v=8XS5q9xhaMc

- Video timeline UI: https://www.youtube.com/watch?v=GbKTEqmCAJM

- All of my Imba videos here: https://www.youtube.com/playlist?list=PLYxkh3w952l5cwxYLcCsd...

I made the (free) official course on Scrimba: https://www.imba.io/learn/imba

Which is also on YouTube: https://www.youtube.com/watch?v=8DcOgcCy7zs

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.

I assume you are referring to the CSS shorthands Imba provides. Yes, they are controversial... and optional. These all work the same in imba:

  css div { background-color: red; display: flex; flex-direction: column; }
    div@hover {background-color:blue;}

  css div background-color: red display: flex flex-direction: column
    div@hover background-color: blue

  css div bgc:red @hover:blue d:vflex

You don't need any special state management tools like "stores" or "setState" you can just use regular variables.

  let count = 0
  tag Counter
    <self @click=(count++)> "Count is: {count}"
  imba.mount <Counter>, document.body

Update: it works on Android now

Thanks for the reminder.

I fixed the android issues, sorry about that

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

Thanks for the motivating comment :)

I think I fixed the Android issues, can you give it another try?

What I like about Imba is that you can update a variable, and the result in the view/page is updated, without any special syntax.

  let count = 0

  def increment
    count++

  tag App
    <self>
      <button @click=increment> "Increment"
      <div> "Count: {count}"

  imba.mount <App>

Try this example here: https://scrimba.com/scrim/cpbmKzsq

(Imba is a compile-to-js language that includes JS/HTML/CSS and a react-like framework all as part of the language. https://www.imba.io)

It's not a true Astro integration, but Imba works with Vite, and I was able to use that to include Imba code in my Astro site. A real integration would allow for server-side rendering of Imba components, which would be great.

Yeah, I totally get what you mean. I was focused on recreating the effects in original menu that this was inspired by, which was meant for mobile, so the context is very different.

If I was making something like this for use in a real desktop/web app, I'd certainly approach it differently.

Thanks for understanding!

If you look at my other work you'll see that I'm like the polar opposite of a designer that does things that look cool and fancy rather than optimizing for usability.

This was meant as a study in how to do certain types of fluid animations.

I changed it to use lite-youtube-embed which doesn't request that stuff until after the user clicks to play the video

I don't know, maybe by mistake?

I looked into it, it is the YouTube embed on the page that is triggering that, I suppose any YouTube embed will cause that.

Is my demo trying to access all that stuff??

Yeah, it would certainly need to be (and readily could be) optimized if used in production.

I’m not sure as I haven’t communicated with the original author, but I think it requires a lot of the same custom work.

I’ve mostly not had issues on desktop, what browser are you using?

It was built in a fairly indecent way, but in my testing it always was responsive so I never optimized it, since it’s just meant as a learning tool.

That doesn’t sound like how it’s supposed to work so maybe something is not rendering correctly, or I don’t understand what you are describing exactly.

It runs pretty smooth on my iPhone, but yes, it is a prototype meant for education, not suitable for production use.

> So, I recklessly replaced all the elements of my menu that needed to animate with SpringLayers and just set the whole thing to re-render sixty times a second. I thought surely this would cause performance issues because I’d be re-calculating a spring value for each property of each animated layer each frame, but I never had an issue (on desktop at least), so given that this is a prototype, I just went with it.

Sorry! You can watch a video version of it here: https://www.youtube.com/watch?v=1VgrdLfDozo