Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Noodel.js – User interface for beautiful, dynamic content trees (github.com)
33 points by zlu883 13 days ago | hide | past | web | favorite | 16 comments

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

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

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.

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

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

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.

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.

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

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/

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.

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.

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

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

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

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

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

Similar to file browser in OS X

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact