Implement Recommendations #444

2021-10-02T00:23:51-04:00

jackyzy823 commented

2021-10-02 00:23:51 -04:00

(Migrated from github.com)

UI looks like:

Desktop

Mobile:
1.toggle off

2.toggle on

TODO:
Should we limit numbers of recommendations in twitter api. or limit numbers in display (random pick) or just display them all?

UI looks like: Desktop ![Screenshot from 2021-10-02 05-18-51](https://user-images.githubusercontent.com/2900871/135703414-376f43cc-0e0a-413a-8cc9-bb832946a583.png) Mobile: 1.toggle off ![Screenshot from 2021-10-02 05-19-32](https://user-images.githubusercontent.com/2900871/135703425-abfc4c05-b042-44cb-8d28-5846ff46a7a4.png) 2.toggle on ![Screenshot from 2021-10-02 05-19-54](https://user-images.githubusercontent.com/2900871/135703426-f6b62236-f89f-48e0-93bd-996a9e662479.png) <del>TODO: Should we limit numbers of recommendations in twitter api. or limit numbers in display (random pick) or just display them all?</del>

👎 2

zedeus commented

2022-01-01 02:30:39 -05:00

(Migrated from github.com)

This feature is nice, but I'm having mixed feelings about it. I think some might see it as an anti-feature, Twitter trying to stuff "You might like" recommendations down the throat of users making the experience more "noisy", while it can also be a great way to discover similar accounts. You know what I mean? I feel like maybe it should be opt-in with a preference, and only show 3 with a "Show more" link at the bottom similar to tweet threads. I'd also like to call it "Similar accounts" or "Recommendations" for a more neutral wording.

A different issue is design. I'm quite happy with Nitter's profile layout, in particular my choice to make the profile "sticky" by default, so you can see what timeline you're browsing at all times. This does however mean there's a limit to how much stuff we can put on the left side before you run into issues. Here's how Twitter currently looks:

Instead of on the left side, they have the gallery, recommendations, and trends on the right-hand side. If the window gets too narrow, they simply hide everything instead of turning it into a mobile-friendly column like Nitter. One step towards a more "scalable" layout would be enabling the mobile view dropdowns for gallery and recommendations in desktop view, expanded by default instead of collapsed. In other words, the distinction between desktop and mobile for the sidebar dropdowns should be minimal, only using media queries to invert the behavior between mobile and desktop (unchecked checkbox should mean expanded on desktop and collapsed on mobile). That way you can just collapse the gallery if your screen isn't tall enough to see the recommendations. I would also like to be able to show trends as well (opt-in of course), so being able to collapse on desktop is a must. On that note it would be great to have a more generic way to create these "dropdown panels" for the profile side bar that can be reused between the gallery, this and upcoming trends, both in the view code and scss. You don't have to do this unless you really want to, I can take care of it after the PR.

So in short:

"You might like" -> "Similar accounts"
Add a new preference group called "Features", make one called similarAccounts off by default, add one called profileGallery on by default, and move infiniteScroll into the group
Limit the amount of displayed accounts to 3
Add a "Show more" link which opens a separate page with every fetched account shown (I consider this out of scope for this PR and not a necessity by any means, but it would be nice and not that hard, we already have an account list view used for search and list members)

This feature is nice, but I'm having mixed feelings about it. I think some might see it as an anti-feature, Twitter trying to stuff "You might like" recommendations down the throat of users making the experience more "noisy", while it can also be a great way to discover similar accounts. You know what I mean? I feel like maybe it should be opt-in with a preference, and only show 3 with a "Show more" link at the bottom similar to tweet threads. I'd also like to call it "Similar accounts" or "Recommendations" for a more neutral wording. A different issue is design. I'm quite happy with Nitter's profile layout, in particular my choice to make the profile "sticky" by default, so you can see what timeline you're browsing at all times. This does however mean there's a limit to how much stuff we can put on the left side before you run into issues. Here's how Twitter currently looks: ![image](https://user-images.githubusercontent.com/9434921/147845526-0a62d41c-3659-4ec6-a229-6bd4e1f64570.png) Instead of on the left side, they have the gallery, recommendations, and trends on the right-hand side. If the window gets too narrow, they simply hide everything instead of turning it into a mobile-friendly column like Nitter. One step towards a more "scalable" layout would be enabling the mobile view dropdowns for gallery and recommendations in desktop view, expanded by default instead of collapsed. In other words, the distinction between desktop and mobile for the sidebar dropdowns should be minimal, only using media queries to invert the behavior between mobile and desktop (unchecked checkbox should mean expanded on desktop and collapsed on mobile). That way you can just collapse the gallery if your screen isn't tall enough to see the recommendations. I would also like to be able to show trends as well (opt-in of course), so being able to collapse on desktop is a must. On that note it would be great to have a more generic way to create these "dropdown panels" for the profile side bar that can be reused between the gallery, this and upcoming trends, both in the view code and scss. You don't have to do this unless you really want to, I can take care of it after the PR. So in short: - "You might like" -> "Similar accounts" - Add a new preference group called "Features", make one called `similarAccounts` off by default, add one called `profileGallery` on by default, and move `infiniteScroll` into the group - Limit the amount of displayed accounts to 3 - Add a "Show more" link which opens a separate page with every fetched account shown (I consider this out of scope for this PR and not a necessity by any means, but it would be nice and not _that_ hard, we already have an account list view used for search and list members)

👍 1

zedeus (Migrated from github.com) reviewed

2022-01-01 02:36:02 -05:00

src/parser.nim

					
				@ -449,6 +449,10 @@ proc parseTimeline*(js: JsonNode; after=""): Timeline =

				    elif "cursor-bottom" in entry:

Typo

jackyzy823 commented

2022-01-07 08:06:43 -05:00

(Migrated from github.com)

I feel like maybe it should be opt-in with a preference

ok. I will make it a preference.

Limit the amount of displayed accounts to 3

I'd like to fetch all and then random show user 3 of them. It is just because I hate that when i click show more in twitter page, they ask me to login :-(

it will take some days to finish these all.

> I feel like maybe it should be opt-in with a preference ok. I will make it a preference. > * Limit the amount of displayed accounts to 3 I'd like to fetch all and then random show user 3 of them. It is just because I hate that when i click show more in twitter page, they ask me to login :-( it will take some days to finish these all.

❤️ 1

zedeus commented

2022-01-07 10:36:00 -05:00

(Migrated from github.com)

Picking 3 by random could work, but I wonder if they rank/sort the list somehow, which would result in worse recommendations of course. Do you know? Looking at some API responses and manually assessing how relevant the results are for a few examples should be enough to get a feel for how they do it.

zedeus commented

2022-01-23 02:25:14 -05:00

(Migrated from github.com)

Due to a semi-emergency caused by Twitter I had to make a lot of changes, especially in routes/timeline.nim. Let me know if you need help rebasing, I see quite a lot of conflicts.

Due to a semi-emergency caused by Twitter I had to make a lot of changes, especially in `routes/timeline.nim`. Let me know if you need help rebasing, I see quite a lot of conflicts.

This pull request has changes conflicting with the target branch.

src/consts.nim
src/parser.nim
src/redis_cache.nim
src/routes/rss.nim
src/routes/timeline.nim
src/sass/profile/_base.scss
src/types.nim
src/views/profile.nim
src/views/timeline.nim

View command line instructions

Manual merge helper

Use this merge commit message when completing the merge manually.

Merge commit title

Merge pull request 'Implement Recommendations' (#444) from jackyzy823/api-recommends into master

Merge commit body

Reviewed-on: https://git.merrycorps.xyz/PAS/nitter/pulls/444

Merge pull request 'Implement Recommendations' (#444) from jackyzy823/api-recommends into master

Reviewed-on: https://git.merrycorps.xyz/PAS/nitter/pulls/444

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u origin jackyzy823/api-recommends:jackyzy823/api-recommends

git switch jackyzy823/api-recommends

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch master

git merge --no-ff jackyzy823/api-recommends

git switch jackyzy823/api-recommends

git rebase master

git switch master

git merge --ff-only jackyzy823/api-recommends

git switch jackyzy823/api-recommends

git rebase master

git switch master

git merge --no-ff jackyzy823/api-recommends

git switch master

git merge --squash jackyzy823/api-recommends