feat(website): Randomize service provider list daily

[hakkiai]

This PR updates the Service Providers page so that the list is no longer displayed in insertion order.
Instead, providers are now shown in a randomized order that...

• stays stable on page reload, and

• changes once per day, based on the current day of the year.

• Fixes:Randomize Service Provider List #65

[javahippie]

@hakkiai thanks for your work on this!

When I'm checking out your branch locally and test it, it looks like this for me:

Also I'm not sure why you restructured the HTML additionally to introducing a sort index. Could you try and make the change more specific to the sort function and please check the layout again?

[javahippie]

Please see above comment

[hakkiai]

Hi @javahippie, Thanks for pointing that out.

I think the layout ended up breaking because I accidentally changed more of the HTML structure than I meant to while adding the sort logic. That probably messed with the markup the CSS expects, which is why it’s rendering strangely on your side.

I’ll revert those unnecessary HTML changes and keep the original layout exactly as it was.
I’ll make the update so that only the sorting logic is touched, nothing else.

I’ll fix it and push the updated version shortly.

[hakkiai]

Hello, @javahippie

I reverted that unnecessary HTML restructuring and kept the changes only to the sorting logic.

The layout issue you mentioned is now resolved on my end

The entries are now randomized as described in the issue. The order stays stable within the configured time window and only reshuffles after that period.

• Fixed:Randomize Service Provider List #65

[javahippie]

Thanks for the update!

Can you please walk me through the code and explain how the randomization works? If I read this correctly, then:

• The day of year is appended to the company name
• The string is reversed
• The result is used as a sort key

To my understanding this would mean that all companies are listed in the same sort order, sorted ascending by the last character of their name? Is there something I am not seeing, yet?

[hakkiai]

Yes, you are right. Of course, here is the idea...

I append the day of the year, reverse the whole string, and use that as the sort key.

About the part that creates the “random” daily order is the day number being added before the reverse.

When the whole string is flipped, the reversed day digits end up at the front of the sort key,

so each day starts with a different prefix. That daily prefix changes how every name compares to the others, which is why the list ends up in a different stable order each day, not just sorted by the last character.

This is a diagrammatic representation of the logic using Mermaid, the visualize the logic better.

[javahippie]

@hakkiai If the added prefix is the same every day for every entry, how will the sort order differ from day to day?

Itemis Ag333 -> 333gA simetI
Otus GmbH333 -° 333HbmG sutO

The first three characters for the search string are always the same, becuase they are the day of year – for every single entry. At the next day, the number is incremented, but this does not change the sort order at all. All this algorithm does is sorting the list by the last character of the name.

Additionally – and I'm sorry for missing this until now – we use the static site generation for this. If we do the sorting in the templating / Ruby in the backend, we would need to release this page nightly to run the static site generator every day

[lambdaschmied2]

As this page is a static site, it won't work like this. You may shuffle the list with JavaScript, if available.

Other than that, the workflow would need a time based trigger. Don't know if that is supported though.

[lambdaschmied2]

You may also want to take a look at the available liquid filters: https://jekyllrb.com/docs/liquid/filters/

Sample can randomize your array, no need for such a complex logic: https://alexwlchan.net/til/2024/shuffle-an-array-in-jekyll/

[hakkiai]

Hi @javahippie and @lambdaschmied2,

Thanks for the feedback and suggestions.

You’re both absolutely right here, and actually now I understand where the earlier logic went wrong. My old approach didn’t actually change the order daily, and I didn’t realize that Jekyll only randomizes during builds (thanks for pointing that out, @lambdaschmied2). And because of that, the list wouldn’t update unless the site rebuilt each day.

Based on your advice, I moved the randomization to the client side using JavaScript. Now, whenever someone opens the page, the table rows are shuffled directly in their browser. This gives every visitor a new order on each load without needing daily builds.

I’ve pushed the updated code.

• Fixes:Randomize Service Provider List #65

Thanks again for pointing me in the right direction.

This is a simple diagram showing how the new logic works (if this helps):

[lambdaschmied2]

The current approch won't be stable between page reloads, which may confuse users.

#65 (comment)
As written here, there should be at least a alphabetical sorting option.