Add new frontend implementing fromScratch design by Timendus · Pull Request #649 · librespeed/speedtest

Timendus · 2024-08-12T14:46:59Z

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 #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.

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 · 2024-08-12T14:53:55Z

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 · 2024-08-13T06:45:57Z

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

Chris-ZoGo · 2024-09-03T14:05:08Z

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 · 2024-10-19T18:02:24Z

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 · 2024-10-26T16:03:55Z

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

… newdesign

Timendus · 2024-11-01T12:52:28Z

@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?

sstidl · 2024-12-29T19:09:25Z

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?
sorry to say that i cannot reproduce this. when i run in standalone mode (where there is no server) the selection list is shown.

try to check out the new "newdesign" branch and try the docker/test/ procedure...
thnx

sstidl · 2024-12-29T19:34:25Z

i think dda7841 did it.

the "active" class makes it visible again, so i do it after the single-server check

sstidl · 2024-12-29T19:42:50Z

@Timendus i will close this PR now here because i cannot update your source. please review #694 if you like.

Tachi107 · 2026-03-25T23:48:10Z

I like the new redesign, but somehow I also find the content is now way harder to read. Is it only me?

stefanstidlffg · 2026-03-26T06:39:25Z

I like the new redesign, but somehow I also find the content is now way harder to read. Is it only me?

Can you send a screenshot and explain what you mean?

Tachi107 · 2026-03-26T09:48:37Z

I don’t think a screenshot is needed, as we probably see the same thing. I guess, though, it has something to do with the colours and/or letter spacing. I’m not a designer though, so I cannot really point my finger at anything specific. I just can tell there’s something that my eyes struggle with.

artun42 · 2026-04-09T20:48:15Z

I actually agree on this, @Tachi107. I'm not sure if this design is really worth it. Simple gray background was all it was needed for this kind of site.

Futuristic looking bright pink-cyan elements with gradients and space in the background feels very, very off for me. But I'm not ready to contribute new either, just pointing the obvious.

* Implement fromScratch design * Add some documentation * enable new design in docker (no alpine yet) * merge fixed docker images * alpine docker added new design * fix #685 * Implement fromScratch design * Add some documentation * enable new design in docker (no alpine yet) * alpine docker added new design * fix #685 * fix database permissions alpine, remove baby * hide serverselector on only one server * Update frontend/styling/server-selector.css Co-authored-by: qodo-merge-pro-for-open-source[bot] <189517486+qodo-merge-pro-for-open-source[bot]@users.noreply.github.com> * fix alpine image again * adjust settings.json in entrypoint so env vars are honored * Update frontend/javascript/index.js Co-authored-by: qodo-merge-for-open-source[bot] <189517486+qodo-merge-for-open-source[bot]@users.noreply.github.com> * Add feature switch for new design via config file, URL parameters, and Docker (#742) * Initial plan * Add feature switch for new design with config and URL parameter support Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com> * Improve error handling and prevent infinite redirect loops Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com> * Update Dockerfiles and entrypoint to support design feature switch Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com> * Update design-switch.js Co-authored-by: qodo-free-for-open-source-projects[bot] <189517486+qodo-free-for-open-source-projects[bot]@users.noreply.github.com> * fix: copy actions in entrypoint * Restructure design switch to place both designs at root level Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com> * Flatten frontend assets in Docker to eliminate frontend directory Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com> * fix: entrypoint settings & server-list disable entrypoint bash debug * add link to modern design --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com> Co-authored-by: sstidl <sstidl@users.noreply.github.com> Co-authored-by: qodo-free-for-open-source-projects[bot] <189517486+qodo-free-for-open-source-projects[bot]@users.noreply.github.com> * add armv7 * reformat * Add GDPR_EMAIL environment variable for Docker deployments (#743) * Initial plan * Add GDPR_EMAIL environment variable for Docker deployments Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com> * Improve GDPR_EMAIL handling with proper escaping and loop Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com> * Refine GDPR_EMAIL processing - skip index.html and improve escaping Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com> * Optimize GDPR_EMAIL sed commands and improve escaping Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com> * Clarify sed escaping comment for GDPR_EMAIL Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com> * cleanup old EMAIL ENV Var * fix: line break in html prevented sed replacement * version 6.0.0pre1 * test: add mssql docker compose tests * Update Speedtest screen recording link in README * Filter unreachable servers from selector (newdesign UI) (#769) * Filter unreachable servers from selector (newdesign UI) * Apply suggestions from code review Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * keep // servers in list Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * fix misleading comment --------- Co-authored-by: Lumi <lumi@openclaw.local> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Stefan Stidl <sti-github@stidl.com> * fix: server.json handling * Use server-list.json in classic frontend by default * Add configurable server list URLs to frontend and Docker --------- Co-authored-by: Timendus <mail@timendus.com> Co-authored-by: Stefan Stidl <stefan.stidl@ffg.at> Co-authored-by: qodo-merge-pro-for-open-source[bot] <189517486+qodo-merge-pro-for-open-source[bot]@users.noreply.github.com> Co-authored-by: qodo-merge-for-open-source[bot] <189517486+qodo-merge-for-open-source[bot]@users.noreply.github.com> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com> Co-authored-by: qodo-free-for-open-source-projects[bot] <189517486+qodo-free-for-open-source-projects[bot]@users.noreply.github.com> Co-authored-by: Stefan Stidl <sti-github@stidl.com> Co-authored-by: Lumi <lumi@openclaw.local> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Timendus added 2 commits August 12, 2024 16:28

Implement fromScratch design

c1af45a

Add some documentation

c7e3fcc

sstidl mentioned this pull request Aug 13, 2024

LibreSpeed Redesign #585

Closed

sstidl linked an issue Aug 13, 2024 that may be closed by this pull request

LibreSpeed Redesign #585

Closed

sstidl added 2 commits October 19, 2024 19:41

enable new design in docker (no alpine yet)

a6e5241

Merge branch 'master' of github.com:librespeed/speedtest into newdesign

66e967a

merge fixed docker images

4b6a8b8

sstidl mentioned this pull request Oct 26, 2024

Added a modern design example #668

Merged

sstidl marked this pull request as draft October 26, 2024 16:04

sstidl added 2 commits October 26, 2024 18:38

alpine docker added new design

e8c8ac8

Merge branch 'master' of https://github.com/librespeed/speedtest into…

74644b0

… newdesign

sstidl mentioned this pull request Dec 29, 2024

Implement the new design from #649 #694

Merged

sstidl closed this Dec 29, 2024

sstidl removed a link to an issue Dec 29, 2024

LibreSpeed Redesign #585

Closed

sstidl mentioned this pull request Apr 12, 2026

chore/playwright mode test plan #778

Merged

Conversation

Timendus commented Aug 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reasons to merge this PR

Reasons NOT to accept this PR

Other notes

Uh oh!

adolfintel commented Aug 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sstidl commented Aug 13, 2024

Uh oh!

Chris-ZoGo commented Sep 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sstidl commented Oct 19, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sstidl commented Oct 26, 2024

Uh oh!

Timendus commented Nov 1, 2024

Uh oh!

sstidl commented Dec 29, 2024

Uh oh!

sstidl commented Dec 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sstidl commented Dec 29, 2024

Uh oh!

Tachi107 commented Mar 25, 2026

Uh oh!

stefanstidlffg commented Mar 26, 2026

Uh oh!

Tachi107 commented Mar 26, 2026 via email

Uh oh!

artun42 commented Apr 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Timendus commented Aug 12, 2024 •

edited

Loading

adolfintel commented Aug 12, 2024 •

edited

Loading

Chris-ZoGo commented Sep 3, 2024 •

edited

Loading

sstidl commented Oct 19, 2024 •

edited

Loading

sstidl commented Dec 29, 2024 •

edited

Loading