Further suggestions & future plans

[tomleb3]

Hey @davidarroyo1234 👋🏼 Hope all is well with you.

First of, let me just say that I've enjoyed working on this tool, and thanks for adding me as a collaborator. Ultimately I think the result came out good, the script was already very useful and now has a nice UI and everything. I'd like to open a short discussion and get your thoughts on some stuff.

Currently, the weak point of the script IMO is the HTML template strings. I used them since they we're the simpler option at the time, but they are bulky and difficult to read, which makes it harder not only for us, but also for new devs who would like to contribute and don't know the code. Also, the more stuff we add, the messier it will get.

This is something that I would like to improve and be happy to take upon myself to work on whenever I have some spare time. I would mainly like to discuss options for this and find out what you'll feel more comfortable with.

Here are some options that come to mind:

• jQuery -> which would make things cleaner a little but is obsolete.
• CSS in JS -> there are some ways to achieve this, and it will already improve things massively since the removed CSS clutter will make the template strings much easier to read.
• JS frameworks -> I think this is a good option. Using something like React will allow writing JSX templates which are basically JavaScript. Vue & Svelte should be good options as well, assuming that the code can ultimately be exported as a single JS line. However, although some of these frameworks are very popular now, the main downside of using it is that their popularity will likely not last forever, unlike vanilla JS, which will probably still be used after humans colonize Mars 😆

Anyway, just some thoughts. Please let me know which ideas you feel comfortable with, if any. Also if you have any other ideas, I'm open for them.

P.S. - I actually have an idea of how to implement the unfollow-notification idea that was suggested in one of the issues. And even relatively within the context of the script. Sort of. But that's a conversation for another day.

Thanks again, Tom.

[davidarroyo1234]

Hey @davidarroyo1234 👋🏼 Hope all is well with you.

First of, let me just say that I've enjoyed working on this tool, and thanks for adding me as a collaborator. Ultimately I think the result came out good, the script was already very useful and now has a nice UI and everything. I'd like to open a short discussion and get your thoughts on some stuff.

Currently, the weak point of the script IMO is the HTML template strings. I used them since they we're the simpler option at the time, but they are bulky and difficult to read, which makes it harder not only for us, but also for new devs who would like to contribute and don't know the code. Also, the more stuff we add, the messier it will get.

This is something that I would like to improve and be happy to take upon myself to work on whenever I have some spare time. I would mainly like to discuss options for this and find out what you'll feel more comfortable with.

Here are some options that come to mind:

• jQuery -> which would make things cleaner a little but is obsolete.
• CSS in JS -> there are some ways to achieve this, and it will already improve things massively since the removed CSS clutter will make the template strings much easier to read.
• JS frameworks -> I think this is a good option. Using something like React will allow writing JSX templates which are basically JavaScript. Vue & Svelte should be good options as well, assuming that the code can ultimately be exported as a single JS line. However, although some of these frameworks are very popular now, the main downside of using it is that their popularity will likely not last forever, unlike vanilla JS, which will probably still be used after humans colonize Mars 😆

Anyway, just some thoughts. Please let me know which ideas you feel comfortable with, if any. Also if you have any other ideas, I'm open for them.

P.S. - I actually have an idea of how to implement the unfollow-notification idea that was suggested in one of the issues. And even relatively within the context of the script. Sort of. But that's a conversation for another day.

Thanks again, Tom.

Yeah i agree with you, but maybe is a little bit too overkill to use react on this project haha. But we could try to at least improve that templating part.

I would like to know the way you are thinking to implement the notification system.

Thanks for all the design and functions you did. Now it's more usable.

P.S: sorry for the late answer im a little bit bussy lately.

[tomleb3]

maybe is a little bit too overkill to use react on this project

Alright, then I'll look into the "CSS in JS" option.

I would like to know the way you are thinking to implement the notification system.

Basically, the general idea I have is using Github's workflows. The user will need to fork the repo and do some setup. The workflow will automatically run at the specified interval and will compare a stored "previous unfollower list" to the current.

This could be set up in a way that will send an email or a message via the Telegram bot or any other way probably. Not sure if there are any obvious problems with this idea though..

sorry for the late answer im a little bit bussy lately.

It's fine :)

[davidarroyo1234]

maybe is a little bit too overkill to use react on this project

Alright, then I'll look into the "CSS in JS" option.

I would like to know the way you are thinking to implement the notification system.

Basically, the general idea I have is using Github's workflows. The user will need to fork the repo and do some setup. The workflow will automatically run at the specified interval and will compare a stored "previous unfollower list" to the current.

This could be set up in a way that will send an email or a message via the Telegram bot or any other way probably. Not sure if there are any obvious problems with this idea though..

sorry for the late answer im a little bit bussy lately.

It's fine :)

But this will not work i think. You will need to log in from a different ip, use the 2FA etc etc.. Instagram will see a strange ip login. And could get ban. (Maybe im not understanding how github workflow works. Correct me if im wrong.).

The css on js option sound good to me.

[tomleb3]

But this will not work i think. You will need to log in from a different ip, use the 2FA etc etc.. Instagram will see a strange ip login. And could get ban. (Maybe im not understanding how github workflow works. Correct me if im wrong.).

Yeah it's definitely not easy. But it's an idea 🤷🏼‍♂️ Who knows, maybe at some point :)

The css on js option sound good to me.

👍🏼

[davidarroyo1234]

But this will not work i think. You will need to log in from a different ip, use the 2FA etc etc.. Instagram will see a strange ip login. And could get ban. (Maybe im not understanding how github workflow works. Correct me if im wrong.).

Yeah it's definitely not easy. But it's an idea 🤷🏼‍♂️ Who knows, maybe at some point :)

The css on js option sound good to me.

👍🏼

I would first implement the css in js and then we could think about the notification system. Its a bit more complex to do i think.

[onnipotenza]

Hi, i wanted to thank everyone who worked on this amazing tool, i really like it

By the way i want to make a suggestion: it would be great if there was an option to exclude a list of users, like a whitelist or something like that. (because i have a bunch of pages that i follow that doesn't have the blue thing so everytime i have to select manually who to follow rather than just using select everyone).

[tomleb3]

@onnipotenza Nice idea! This can definitely be useful IMO, and gives me some ideas. The implementation should be rather simple, but need to consider how this can be integrated into the UI. I'll check some options, perhaps this will indeed be added.

[tomleb3]

Hey @davidarroyo1234 I have some new stuff I've been working on related to this post. Trying to open a PR in the repo, getting a permission error. Has anything changed in the repo params?

[davidarroyo1234]

Hey @davidarroyo1234 I have some new stuff I've been working on related to this post. Trying to open a PR in the repo, getting a permission error. Has anything changed in the repo params?

mm nop, i didnt change anything. I'll check if github has done some changes.

Can you post a photo of the error?

[tomleb3]

TODO list:

• [x] - Add the option to write actual CSS
• [x] - Manage a whitelist for unfollowers, which should be remembered for future use @onnipotenza

Leaving this here as a reminder for myself. Shouldn't be too difficult to implement, but will require some new UI and making some relevant decisions.

Not sure when I'll get around to this, but I do believe it will be added.

[mavr1k]

Hello folks! Thanks for creating and supporting an excellent tool as an alternative to AppStore trash with a huge number of ads. One probably useful idea from my side: Didn't you consider wrapping it in the chrome extension?

[davidarroyo1234]

Hello folks! Thanks for creating and supporting an excellent tool as an alternative to AppStore trash with a huge number of ads. One probably useful idea from my side: Didn't you consider wrapping it in the chrome extension?

I have consider doing it, but I dont know if violates some chrome store rules or some law. Also is not as "transparent" for a user. Here you can see all the code that is being use.

I could create a downloadable chrome extension in the repo and then if someone wants it could import itself.

[mavr1k]

Hello folks! Thanks for creating and supporting an excellent tool as an alternative to AppStore trash with a huge number of ads. One probably useful idea from my side: Didn't you consider wrapping it in the chrome extension?

I have consider doing it, but I dont know if violates some chrome store rules or some law. Also is not as "transparent" for a user. Here you can see all the code that is being use.

I could create a downloadable chrome extension in the repo and then if someone wants it could import itself.

Sounds great to me, thanks! I also think that a good approach would be is to add the possibility to pull the latest script version from the master branch. As this repo is public, it could easily done over HTTP

[tomleb3]

@davidarroyo1234 Wanted to get your thoughts on something. As we've concluded before, adding React or any other framework to this project would be overkill. However, it is possible to add just JSX capabilities. This would require adding babel to the npm dependencies, but that isn't an issue IMO.

JSX is a much nicer way of combining HTML with JS then what we currently have, and it will make some stuff a lot cleaner. Most notably, it will add the option to use components just like in React. Using components will make it so that everything can be nicely organized. For instance, you can have a "results" component and a "unfollow-log" component, etc.. for different parts of the app. This will make it a lot easier to understand what's happening in the code, since ATM we have these parts of code scattered about in different places that seem detached from eachother.

I've played around with it a bit and it seems to work just fine. It will also compile to plain JS just like scss with css, etc..

Wanted to know WDYT about this change and how comfortable you are with JSX.

[bestfizzz]

Hello, I notice that the unfollower list json come in chronological order: First item=most recent; last item=the earliest user you followed. You can find the unfollower's index in the list then whitelist everyone after that index. This feature is useful for hacked accounts to "restore" their original state.

[davidarroyo1234]

with

I usually use angular so im not used to jsx. But we could try it.

We should not make a very large code to copy.

[davidarroyo1234]

I will take a note for a future sort option. Thanks!

[tomleb3]

I usually use angular so im not used to jsx. But we could try it. We should not make a very large code to copy.

It shouldn't enlarge the code IIRC, as the babel simply compiles everything to regular JS at build. I'll start slowly working on stuff and will open a PR when I'll have at least a minimal example.

@davidarroyo1234

[davidarroyo1234]

I usually use angular so im not used to jsx. But we could try it.

We should not make a very large code to copy.

It shouldn't enlarge the code IIRC, as the babel simply compiles everything to regular JS at build.

I'll start slowly working on stuff and will open a PR when I'll have at least a minimal example.

@davidarroyo1234

Okay, thanks @tomleb3!

[eshdoesntexist]

hello first of all thanks for making such a useful tool!

I have a few suggestions.

It shouldn't enlarge the code IIRC, as the babel simply compiles everything to regular JS at build. I'll start slowly working on stuff and will open a PR when I'll have at least a minimal example.

instead of a framework, I'd like to recommend the use of a template engine like handlebars. this should lead to a smaller code size as well because libraries like react and vue require virtual doms which increases the size by a lot.

I also think that a good approach would be is to add the possibility to pull the latest script version from the master branch. As this repo is public, it could easily done over HTTP

can you please look into turning it into a chrome extension, I think that should make the script much more user-friendly.

If I get time ill try to implement these changes and make a PR.

[tomleb3]

Hey @eshdownbad ! First of all, thanks and do feel free to contribute.

As for the framework discussion, we've decided not to go with it, as it is overkill in this case. However, it is possible to write JSX without React, and IMO it will be very beneficial in this case (mainly the ability to make reusable components, and have more options when it comes to placing attributes on the elements). It also shouldn't enlarge the code much, as it ultimately compiles into pretty much regular JS as I've mentioned in the past.

I am not familiar with Handlebars but it definitely sounds interesting. I'll give it a look and see if it has any clear advantages over JSX.

[tomleb3]

BTW I toyed around with using JSX without React like I've mentioned before. And while it generally works, it doesn't actually React to changes in data, which makes sense. So while it improves some aspects of the code, I'm not sure it's good enough to persue.

My main issue, as I've mentioned before, is that the manual DOM manipulation is very janky and difficult to keep track of.

Tried "Handlebars" like the user above suggested, but didn't feel comfortable enough with it.

If we eventually would like to incorporate a framework, then 2 good options IMO are:

• Preact: light version of React (~3kb)
• PetiteVue: light version of Vue (~6kb)

Wanted to know if you have any thoughts on this. If you have any other idea on how to avoid the uncomfortable DOM manipulation, let me know :)

@davidarroyo1234

[davidarroyo1234]

@tomleb3 Preact sounds good, if you can recreate a minimal example to inject in chrome i would appreciate it. (some html code and state change or something)

[tomleb3]

Preact sounds good, if you can recreate a minimal example to inject in chrome i would appreciate it. (some html code and state change or something)

Definitely. I'll start working on it in my spare time.

[tomleb3]

Hey @davidarroyo1234 ! I'm currently doing some work and adding some new stuff. Wanted to ask, where did you get the types for the API responses? i.e. the stuff in model/user.ts. Can't find documentation for it anywhere.

Also, I see that you made all fields optional, is it supposed to be that way? I'm asking since I'm also adding some TS rules (most notably strict) which now forces me to handle the potential undefined value wherever those fields are used.

[davidarroyo1234]

Hey @davidarroyo1234 ! I'm currently doing some work and adding some new stuff. Wanted to ask, where did you get the types for the API responses? i.e. the stuff in model/user.ts. Can't find documentation for it anywhere.

Also, I see that you made all fields optional, is it supposed to be that way? I'm asking since I'm also adding some TS rules (most notably strict) which now forces me to handle the potential undefined value wherever those fields are used.

There is not documentation for the types of user.. It's manually done, using the chrome devtool on the network tab. Then grab the response when you click on the follower list.

With the response you can write the model manually or use some online/offline mapper.

I made the fields optional because i don't know if instagram will send me every time this values.

[tomleb3]

OK, I think we can assume them to be non-optional until proven otherwise. Reason being that if we leave them optional, we'll have to do assertions everywhere in TS strict mode, which will bloat the code. If you think that's a safe assumption then I'll add this change also.

[davidarroyo1234]

OK, I think we can assume them to be non-optional until proven otherwise. Reason being that if we leave them optional, we'll have to do assertions everywhere in TS strict mode, which will bloat the code. If you think that's a safe assumption then I'll add this change also.

I mean, all the values should come from the api, but its not 100% sure...

[tomleb3]

True, technically we can't rely on them being there. But then again we also don't handle cases where they are not provided anywhere in code. So, whether if they are optional or not, if not provided, currently the code will likely break.

So it leaves us with 2 options. Either keep them optional and handle the missing value anywhere these fields are used, which would bloat the code. Or assume they always exists, at least until we're proven otherwise, which might not be the safest, but as mentioned, we don't handle it now either.

Let me know your thoughts on this.

[onnipotenza]

Or assume they always exists, at least until we're proven otherwise, which might not be the safest, but as mentioned, we don't handle it now either.

I think this option is better. Because at least you will know if they always exits or not.

[tomleb3]

I think it's time to close this issue. Most things that were suggested here were indeed added by this point. So we can definitely say that we've accomplished what we set out to do here.

[davidarroyo1234]

I think it's time to close this issue. Most things that were suggested here were indeed added by this point. So we can definitely say that we've accomplished what we set out to do here.

Yep, Good job. If someone else has any other idea open a issue or discussion.

God joob @tomleb3

[tomleb3]

Thanks @davidarroyo1234 ! Been fun working on this. Definitely very humbling to see the rise in the amount of stars for this script. Probably going to reach 1k rather soon 🌟 🚀