Create OAUTH app to see following status and follow/unfollow

[ronilaukkarinen]

Experimented something in experimental/app.js, didn't get it to work yet.

If anyone could help, I'd appreciate.

[koyuawsmbrtn]

You could try getting a lot of routines from my other project. The API documentation at https://docs.joinmastodon.org was also pretty helpful.

Some inspiration (of course you can't copy that 1:1):

• https://github.com/koyuspace/litterbox/blob/main/src/ts/ui/user.ts#L26
• https://github.com/koyuspace/litterbox/blob/main/src/pages/action/follow.astro

[ronilaukkarinen]

Thanks! I'll experiment more soon.

[ronilaukkarinen]

Got the proof of concept working with Svelte + Vite. I kinda suck at it but got a working code... Not performant and I get rate limited by it so it's not functional :( Spent couple of days learning, the code is in web-app branch. For some reason api/v1/accounts/relationships returns empty array although everything is correct. With search endpoint and following=true I can check if I'm following the user but 200+ search queries = rate limit block.

I also had lots of challenges with follow/unfollow buttons. Finally decided to give each button an unique ID based on the account. It worked, although I couldn't get it work if the button is pressed second time after following/unfollowing. That should not matter though for now because it's assumed people just follow/unfollow once and the page can be refreshed.

With the rate limiting queries this approach is however dead in the water. I'm not sure how to check followed status of hundreds of users without getting rate limited. I doubt it's even possible. Too bad, I really started to like this idea.

[ronilaukkarinen]

For reference, here's the full main.js as a proof of concept.

[koyuawsmbrtn]

I'm getting a 429, is that normal? Also can we use yarn instead, I think it's much more snappier

[ronilaukkarinen]

I'm getting a 429, is that normal?

429: Too Many Requests is literally you getting rate limited, exactly the point I tried to make. Mastodontti.fi seems to have quite tight limits. I'm really sad about this because I'd like to check the following status for every user but because of this it feels impossible. Unless there's effective way to delay/cache requests.

Also can we use yarn instead, I think it's much more snappier

I'm not very familiar with yarn, how to replace the project with it?

I'm considering getting the code from web-app branch and combining it with master branch in some ways because:

1. I really like the Vanilla JS way instead of jQuery, the less dependencies the better
2. Svelte + Vite is too heavy for this purpose, I kinda need one html file and JS file, nothing else.

Will experiment more over the weekend.

Thanks for your input so far @koyuawsmbrtn, I really appreciate it! ❤️

[koyuawsmbrtn]

I'm not very familiar with yarn, how to replace the project with it?

You just run npm i -g yarn and then yarn and delete the old npm package-lock file.

I really like the Vanilla JS way instead of jQuery, the less dependencies the better

I kinda used it for prototyping, there's this site which should help replacing the jQuery functions with vanilla JS: https://youmightnotneedjquery.com

Svelte + Vite is too heavy for this purpose, I kinda need one html file and JS file, nothing else.

You could do that once we get rid of the dependencies. I found the Twemoji function pretty useful though, because it makes it look more close to Mastodon.

[ronilaukkarinen]

Compared $.get, fetch(), forEach, jQuery's append and Vanilla JS append, Fetch API and XMLHttpRequest. It seems that the combination of Vanilla XHR and append are 100x faster than others. The winner in the contest for the slowest method is document.getElementById("user-list").innerHTML += userTemplate; inside the loop, I don't know why I did that earlier.

Now it's speedy and nice. I might try the OAUTH with a different approach tomorrow.

[ronilaukkarinen]

I made it!