Implement fair randomized ordering for design help providers

[mithro]

Problem

Currently, design help providers are displayed in a fixed order determined by Jekyll's collection ordering. This means the same company always appears first, potentially giving them an unfair advantage in visibility and user attention.

Proposed Solution

Implement client-side randomization of provider order that:

• Randomizes the display order for each visitor
• Maintains a stable order for each individual user across page reloads
• Works gracefully without JavaScript (shows default order)
• Avoids visual flashing or layout shifts (FOUC)
• Preserves hash link functionality (#chipflow, #mabrains, etc.)

Technical Approach

Method: CSS Flexbox order property + inline JavaScript with seeded randomization

Implementation:

1. Wrap provider list in a flex container
2. Add inline <script> that runs before page render
3. Check localStorage for designHelpProviderSeed (create random seed if missing)
4. Use Linear Congruential Generator (LCG) for deterministic seeded randomization
5. Apply Fisher-Yates shuffle algorithm
6. Inject <style> tag with CSS order properties before render

Benefits:

• No FOUC: Inline script runs synchronously before render
• Persistent: Each user sees the same randomized order on every visit
• Progressive enhancement: Works without JS (shows default Jekyll order)
• Hash-compatible: Element IDs unchanged, only visual order changes
• Static-site friendly: No server-side requirements

Files to Modify

• _includes/design_help/provider.html - Add data-provider-slug attribute
• design-help.html - Add flex container and inline shuffle script

Success Criteria

• Different users see different provider orders
• Individual users see consistent order across page reloads
• No visual flashing or layout shifts
• Hash links (#chipflow) work correctly after reordering
• Graceful degradation: page works without JavaScript
• All providers have equal chance of being shown first