Hi all! this is an experimental Github trending UI that records the permanence of repositories and developers on trending chart and their relative gain / loss positions.
The frontend is based on zircleUI, which is a frontend library to develop zoomable UIs I created a year ago, while the backend is powered by the awesome work of Hu Chen (https://github.com/huchenme/github-trending-api)
There are a lot of cool projects based on Github Trending (you can find some of them at https://libraries.io/search?q=github+trending), this proposal is just a conceptual approach.
Thats weird usually the animations tend to be smooth even in less powerful cpus and I've just check the external links and seems to work well.
Could you tell what type of device and browser are using?
Thanks
Chrome Android mobile...I want to hold down a circle and be presented a link to bookmark, open in a new tab, go back from when I click it, etc. instead it just does local animation to another circle which is probably what GP was disappointed about (i.e. your nav should work with browser nav instead of against it).
Thank for the clarification! this experiment is not using router right now that could improve its use. It's a SPA.
However, if you want to see a particular repository you simply should click on the button "star it" and another tab may be opened with this repo.
Make the project title a link. It isn't intuitive that the "Star It" button is the link out. I want to see a project before I consider its value (adding a star).
You could convey more information with a table. It would be more readable, easier to look over, and accessible. You could even have fancy animations and decorations when a user selected a cell/column/row.
This kind of zoomy interface doesn't easily allow lateral movement in the data (in fact, it forces the user into a sort of 'depth-first' navigation).
Thank you for take your time to comment!
I understand your preference for a more classical approach, but in this experiment, I'm just exploring some uses of the zircleUI library.
Regarding the label "star it", you are right it is confusing because you are not actually adding a star, you are just opening a link to the repository.
Thank you. I'm totally agree on what you said. It would be easier to navigate the different repos without zooming-out and zooming-in every time you want to see next repo.
I just have a few try on it and I find it quite laggy.
Example : go to -> top devs -> choose one dev -> go back . Here is super laggy. Am I the only one ? (Edit : no i'm not :D)
Seems really the wrong application for this paradigm.
Animations are fluid on my laptop, but IMHO too long. Especially if there's little on the screen at once, transitions have to be fast and not get in the way.
I think for this kind of UI the transitions shouldn't be so fast because the idea is not loose context. However, I would add a property to ZircleUI to set the speed the developer feel more confortable.
I do think this kind of UI needs an animation, but I don't think its necessary for that animation to be slow.
I too feel like I'm waiting forever for it to "get there". The other thing I don't care for is that it takes 2 steps to go change the language...
This is solved in this app by repeating the language switcher under the top list, but then repeating content starts to break the "Where am I" question.
I personally love this! I think the concept is especially fitting for mobile use. It would be nice to be able to swipe left/right to advance between project pages and projects themselves.
45 comments
[ 2.7 ms ] story [ 113 ms ] threadThe frontend is based on zircleUI, which is a frontend library to develop zoomable UIs I created a year ago, while the backend is powered by the awesome work of Hu Chen (https://github.com/huchenme/github-trending-api)
There are a lot of cool projects based on Github Trending (you can find some of them at https://libraries.io/search?q=github+trending), this proposal is just a conceptual approach.
Here is the repo https://github.com/zircleUI/github-trending-plus
* Accessibility is 0. Cant open external links in a new tab. None of my navigation shortcuts work.
Maybe try developing with CPU throttling activated in the Chrome DevTools? https://umaar.com/dev-tips/88-cpu-throttling/
Animations aren't awful here. (Core i5, 12Gb RAM, Linux, Firefox)
You could convey more information with a table. It would be more readable, easier to look over, and accessible. You could even have fancy animations and decorations when a user selected a cell/column/row.
This kind of zoomy interface doesn't easily allow lateral movement in the data (in fact, it forces the user into a sort of 'depth-first' navigation).
Regarding the label "star it", you are right it is confusing because you are not actually adding a star, you are just opening a link to the repository.
Sorry about that It would be great if you want to open and issue in https://github.com/zircleUI/github-trending-plus
Consider it done.
> I understand your preference for a more classical approach
It isn't a preference for the 'classic' so much as I have a certain expectation of functionality.
If you had a way to navigate to other nodes at the same level in different branches , I would be much more comfortable with the usability.
Keep building stuff.
Animations are fluid on my laptop, but IMHO too long. Especially if there's little on the screen at once, transitions have to be fast and not get in the way.
I too feel like I'm waiting forever for it to "get there". The other thing I don't care for is that it takes 2 steps to go change the language...
This is solved in this app by repeating the language switcher under the top list, but then repeating content starts to break the "Where am I" question.
Much worse than a plain list in terms of usability (and thankfully most web designers seem to have learned that lesson).
Still, nice experiment.
Small mistake though, when it can't find trends, it has a small typo in the error message:
Languaje should be Language :)De nada ;)
But for what it's worth, it does work nicely on my mobile device. That was a pleasant surprise.
Good work!
Looks great!