trafnar

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

Comment · 3 years ago

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

Comment · 3 years ago

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

Comment · 3 years ago

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.

Comment · 3 years ago

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

Comment · 3 years ago

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

Comment · 3 years ago

Update: it works on Android now

Comment · 3 years ago

Thanks for the reminder.

Comment · 3 years ago

I fixed the android issues, sorry about that

Comment · 3 years ago

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

Comment · 3 years ago

Thanks for the motivating comment :)