5 ms·

Show HN: Noodel.js – User interface for beautiful, dynamic content trees

33 points by zlu883 6y ago

mmgutz 6y ago
The navigation reminds me of ranger terminal file browser, which navigates dirs and files in the same way except it uses Vim keys.
076ae80a-3c97-4 6y ago
Horrendous experience on mobile. The lag due to scroll hijacking is terrible.
- zlu883 6y ago
  I agree some aspects of the mobile experience is suboptimal so far. I hope it can be improved in the future :)
livealife 6y ago
Similar to file browser in OS X
artex_xh 6y ago
actually it is really great for device with limited control keys, e.g. gaming pad.
zenojevski 6y ago
I used a similar (but not identical) multi-column drill-down navigation technique in my Unnamed Gopher Client[0]. However, instead of coding my own scroll gestures, I delegated to CSS Scroll Snap, which works beautifully, even in complicated scrolling scenarios, and scrolls natively. You can see here how accurate scrolling is: https://i.imgur.com/m9MBo4N.mp4 https://i.imgur.com/m9MBo4N.mp4 The main issue is detecting when scrolls end, but that can be addressed with a bit of cleverness. I highly recommend giving Scroll-snap a try if you can. [0]: https://github.com/zenoamaro/unnamed-gopher-client https://github.com/zenoamaro/unnamed-gopher-client
- zlu883 6y ago
  Thank you for your advice. I would very much like to depend on native scrolling for managing positions, except that I ran into some roadblocks early on and resorted to javascript. But I will look into CSS scroll snap for this.
manx 6y ago
interesting idea to provide this as a library. It reminds me of https://gingkoapp.com https://gingkoapp.com (for writing)
jwilber 6y ago
Cool library. I’m not sure if the name adds any value (something more tree-based would make more sense?), but if you’re going to use it you should make a logo with noodles or something. GitHub readme needs some images.
cateye 6y ago
The problem that I always have with these structures is that often, many-to-many relationships are needed. Being forced to have only one-to-one relationships is too limiting for any real life modeling.
- zlu883 6y ago
  That's quite true. It's not meant to be a panacea, but I hope it can be useful in situations where tree-like relationships are pervasive (like comment sections, for example).
hazz99 6y ago
I love this! Could be a really interesting form of note-taking client. I also think this has the potential to be amazing on mobile. Reminds me of notes.andymatuschak.org/
- zlu883 6y ago
  Thanks! This is indeed originally intended as a note-taking tool. After a prototype for that I realized its potential to become a generic UI framework, so I worked towards this library instead. At some point I'll probably link it back to the original tool, so keep watch if you're interested.
lloydatkinson 6y ago
Nice but the animation is not as smooth as it could be.
egfx 6y ago
I like it on desktop. My only gripe is that when you mouse-over a scrollable list on the expanded noodle and scroll then it should scroll the list your mousing over instead of the list that opened it.
greatNespresso 6y ago
Some great ideas here. I confirm the other comment complaining about the experience on mobile. Still, it looks promising

33 points by zlu883 6y ago

The navigation reminds me of ranger terminal file browser, which navigates dirs and files in the same way except it uses Vim keys.

076ae80a-3c97-4 6y ago

Horrendous experience on mobile. The lag due to scroll hijacking is terrible.

zlu883 6y ago
I agree some aspects of the mobile experience is suboptimal so far. I hope it can be improved in the future :)

livealife 6y ago

Similar to file browser in OS X

artex_xh 6y ago

actually it is really great for device with limited control keys, e.g. gaming pad.

zenojevski 6y ago

I used a similar (but not identical) multi-column drill-down navigation technique in my Unnamed Gopher Client[0]. However, instead of coding my own scroll gestures, I delegated to CSS Scroll Snap, which works beautifully, even in complicated scrolling scenarios, and scrolls natively. You can see here how accurate scrolling is: https://i.imgur.com/m9MBo4N.mp4 https://i.imgur.com/m9MBo4N.mp4 The main issue is detecting when scrolls end, but that can be addressed with a bit of cleverness. I highly recommend giving Scroll-snap a try if you can. [0]: https://github.com/zenoamaro/unnamed-gopher-client https://github.com/zenoamaro/unnamed-gopher-client

zlu883 6y ago
Thank you for your advice. I would very much like to depend on native scrolling for managing positions, except that I ran into some roadblocks early on and resorted to javascript. But I will look into CSS scroll snap for this.

manx 6y ago

interesting idea to provide this as a library. It reminds me of https://gingkoapp.com https://gingkoapp.com (for writing)

jwilber 6y ago

Cool library. I’m not sure if the name adds any value (something more tree-based would make more sense?), but if you’re going to use it you should make a logo with noodles or something. GitHub readme needs some images.

cateye 6y ago

The problem that I always have with these structures is that often, many-to-many relationships are needed. Being forced to have only one-to-one relationships is too limiting for any real life modeling.

zlu883 6y ago
That's quite true. It's not meant to be a panacea, but I hope it can be useful in situations where tree-like relationships are pervasive (like comment sections, for example).

hazz99 6y ago

I love this! Could be a really interesting form of note-taking client. I also think this has the potential to be amazing on mobile. Reminds me of notes.andymatuschak.org/

zlu883 6y ago
Thanks! This is indeed originally intended as a note-taking tool. After a prototype for that I realized its potential to become a generic UI framework, so I worked towards this library instead. At some point I'll probably link it back to the original tool, so keep watch if you're interested.

lloydatkinson 6y ago

Nice but the animation is not as smooth as it could be.

egfx 6y ago

I like it on desktop. My only gripe is that when you mouse-over a scrollable list on the expanded noodle and scroll then it should scroll the list your mousing over instead of the list that opened it.

greatNespresso 6y ago

Some great ideas here. I confirm the other comment complaining about the experience on mobile. Still, it looks promising