Avoiding the ridiculous loading time of the repository's GitHub page

[tomleb3]

Hey @davidarroyo1234

I want to add some features but I can't risk making the code any larger.
You've seen how long it takes it to load the GH page.

With a good internet connection and PC it's bearable, but anything less and it becomes quite annoying.
Obviously this is due to the ~51k characters of code in the main Readme.md file.

So we've talked in the past about the solution of a bookmarklet / browser extension / etc...
They all have their pros and cons.

I thought about something simpler.
We can add an HTML template to the code, which contains the script, and render it like a CDN.
For example, here is the CDN link for jQuery - https://code.jquery.com/jquery-3.7.0.min.js

So basically an HTML page containing just the script and should therefor be rather snappy to load.
We can add a link to it in the main Readme and explain how to use it.
Basically the users would need to open the link, click the text 3 times which will automatically select all of it, and then copy and paste, same as before.

The site could be hosted on GH pages, which is free and would be part of this repo.

Let me know what you think :)

[tomleb3]

Forgot to mention that the benefits of this method should mainly be:

1. Faster load time of the script as opposed to the embedding within the Readme.
2. Users who enter the repo are not immediately greeted with long loading times.

And the 2nd reason is important because it can potentially deter a large number of new users, who might get impatient and think the repo isn't going to load and go elsewhere instead.

[davidarroyo1234]

Totally agree, i will think this afternoon a way to implement what you said. Thanks @tomleb3

[davidarroyo1234]

Hey @davidarroyo1234

I want to add some features but I can't risk making the code any larger. You've seen how long it takes it to load the GH page.

With a good internet connection and PC it's bearable, but anything less and it becomes quite annoying. Obviously this is due to the ~51k characters of code in the main Readme.md file.

So we've talked in the past about the solution of a bookmarklet / browser extension / etc... They all have their pros and cons.

I thought about something simpler. We can add an HTML template to the code, which contains the script, and render it like a CDN. For example, here is the CDN link for jQuery - https://code.jquery.com/jquery-3.7.0.min.js

So basically an HTML page containing just the script and should therefor be rather snappy to load. We can add a link to it in the main Readme and explain how to use it. Basically the users would need to open the link, click the text 3 times which will automatically select all of it, and then copy and paste, same as before.

The site could be hosted on GH pages, which is free and would be part of this repo.

Let me know what you think :)

I was trying this, but for example in instagram and other websites, there is the Content Security Policy. So loading a cdn or doing a request to a url outside instagram or the allowed list would fail.

[tomleb3]

Yeah I wish that was possible, that would have been ideal.
What I meant is to have a GH site which only shows the script and users could copy it to console just like they do now.

The main difference is that when rendering it in a GH readme file it's very sluggish and heavy.
But if, instead, we render it in a dedicated template then it'll be faster.

I'll make an example in my forked repo in the coming days and show you what I mean :)

[davidarroyo1234]

Yeah I wish that was possible, that would have been ideal. What I meant is to have a GH site which only shows the script and users could copy it to console just like they do now.

The main difference is that when rendering it in a GH readme file it's very sluggish and heavy. But if, instead, we render it in a dedicated template then it'll be faster.

I'll make an example in my forked repo in the coming days and show you what I mean :)

Nono I understand you now haha, I will make it in the afternoon. I hope the people still understand how to do it. I will try to be precise with the new readme instructions

[tomleb3]

I think they'll manage if we explain it well enough.

Also, we have a few options here.

For example, we can render just the script, or we could maybe just have a "copy" button in the page with the script inside of it.
We could also use this page to provide the script in multiple ways.
E.g. both as a copyable script and both as a bookmarklet, etc...

If we decide to go for the second option, see Github's built-in themes for such sites.
I think they're called "Jackyll" themes or something like that.

On second thought I think it might even be nicer than just rendering the script.

[tomleb3]

@davidarroyo1234 Ok so I played around with this.
Have a look - https://github.com/tomleb3/InstagramUnfollowers

Achieves the desired result IMO.
Repository GH page loads quickly, and the link with the script does too.

Everything is fast again, and with this format I don't think we need to worry about the script's length.

[tomleb3]

If we agree on this, then I'll make a related PR at the main repo, and then you'll just need to enable deployment from the repo's settings.

[davidarroyo1234]

If we agree on this, then I'll make a related PR at the main repo, and then you'll just need to enable deployment from the repo's settings.

Looks good, maybe i would put some type of toolbar to easily copy the script

[tomleb3]

Alright, let me know if you need any help with this.

[FaisalAhmed123]

Also the lag only seems to happen on chrome based browsers like chrome or edge. Firefox is unaffected

[tomleb3]

Also the lag only seems to happen on chrome based browsers like chrome or edge. Firefox is unaffected

Interesting, haven't actually tested on Firefox.
Well, it's irrelevant now anyway since the new method should be smooth for all browsers.