Add new frontend implementing fromScratch design

Timendus commented 3 months ago

Hey there! I hope you like pull requests from random strangers bearing gifts :)

I had a couple of days of free time, and I came across the design by fromScratch in https://github.com/librespeed/speedtest/issues/585. I thought it looked great, and that it deserved a good implementation, so I set out to make one.

I've taken the liberty of changing a couple of details, coming up with some animations and adding a few small features, but otherwise I've tried to stay as close to the "intention" of the design as I could.

desktop

mobile

If you want to take it out for a spin, I'm hosting the frontend here (at least for a little while):

http://vps.timendus.com/speedtest

(Note that it doesn't currently show the "share" feature nor the popup with privacy information because I haven't configured my server to store anything. It's configurable though.)

To use on your own server, just copy'n'paste everything in frontend to the project root (just like the other examples, only a few more files).

Reasons to merge this PR

It looks quite pretty, if I do say so myself!
Desktop and mobile support
Support for a single server or multiple servers through server-list.json
Support for all speedtest_worker.js settings through settings.json
Keep it simple, stupid:
- Zero dependencies
- No build steps
- Nothing to maintain or update over time
- Pure HTML + CSS + Javascript
- 280 KB page load (uncompressed)
Code is descriptive and well documented, I hope
It gets a Lighthouse score of 100/100 points in all four categories, if your hosting is configured properly (mine isn't currently)

Reasons NOT to accept this PR

This frontend relies heavily on modern browser features. It should work very well in all modern ("evergreen") browsers, but has no backwards compatibility with older browsers, including IE11. Adding that support would require a bunch of polyfills and build steps that I am not going to add, because I do not consider the mountain of added complexity and dependencies worth it.
I have spent very little time on the "share results" feature. It should show a popup with the existing backend-generated image, and a "copy link" button if the browser supports the clipboard API. So the shared image will look nothing like the design by fromScratch. I also haven't properly tested it, to be honest. It "should work". If you find any issues with that, I can probably still fix them for you. I will leave the PHP side of things (that generates the image) for someone else.
I am giving this to your community "as is", with zero promises of support or future work. I will not be able to maintain it beyond this initial implementation. Not that it will need much maintenance, but I want to be up front and honest about this.

Other notes

I have tested this site in Google Chrome, Chrome mobile, Chromium, Brave, Firefox, Firefox mobile, Opera, Safari and Arc. I have not been able to test with Edge. But seeing as that's Just Another Webkit Wrapper these days, I don't expect any issues there.
See the README file for some more information.

Hope you like it! And thanks for a great Open Source project!

adolfintel commented 3 months ago

Well, this definitely looks better than the old one. Thanks for your work.

The only change I'd make would be using the official logo and maybe redesign the server selection box a bit, right now I think the text is a bit huge and doesn't have enough line spacing.

I think this should be the new UI for 6.0, when we'll drop support for old stuff like IE11. What do you think @sstidl ?

sstidl commented 3 months ago

It looks modern and a little freaky but I like it. Haven't been able to test it yet

Chris-ZoGo commented 2 months ago

Thank you @adolfintel for your support!!

Regarding the changes you suggested, we are planning to add them to this year's Hacktoberfest event as a task for the design participants. If you ,or @sstidl ,or anyone in this community have any other requests, suggestions, or ideas regarding the design, we would gladly include them in our Hacktoberfest design sprint for LibreSpeed on October. Let me know if you have any thoughts on this.

sstidl commented 1 month ago

I started a new branch with the new design named newdesign

Can someone change the behaviour so that there is no server-list.json the local server is used and no selection box is shown?

sstidl commented 1 month ago

@Timendus can you try to rebase your PR to the new newdesign branch and have a look over it?

Timendus commented 3 weeks ago

@Timendus can you try to rebase your PR to the new newdesign branch and have a look over it?

I think I just managed to. Let me know if it's not so.

I can't really judge the Dockerfiles, looks fine to me, but I'm not a regular user of Docker.

Can someone change the behaviour so that there is no server-list.json the local server is used and no selection box is shown?

When the list in server-list.json is just a single item, the selection box will not be shown. So either manually configure the JSON file to hold the local server, or maybe add a little PHP script to generate the JSON file?

librespeed / speedtest