Implement fair randomized ordering for design help providers - #66
Open
mithro wants to merge 3 commits into
Open
Conversation
Addresses #65 This implements client-side randomization of provider display order to ensure all companies receive fair visibility. Each visitor sees a randomized order that remains stable across page reloads. ## Implementation **Provider Template (_includes/design_help/provider.html)**: - Added ID attribute for hash-link support (#chipflow, #mabrains, etc.) - Added provider-item class for JavaScript targeting - Added data-provider-slug attribute for identification **Design Help Page (design-help.html)**: - Wrapped provider list in flexbox container - Added inline JavaScript shuffle script that: - Uses localStorage to persist random seed per user - Implements seeded Linear Congruential Generator (LCG) - Applies Fisher-Yates shuffle algorithm - Sets CSS order property on each provider - Runs inline to prevent FOUC (Flash of Unstyled Content) - Gracefully handles localStorage unavailability ## Features ✅ Randomized order: Different users see different provider sequences ✅ Persistent: Each user sees same order across page reloads ✅ No FOUC: Inline script prevents visual flashing ✅ Hash links: #chipflow etc. still work after reordering ✅ Progressive enhancement: Works without JavaScript (shows default order) ✅ Privacy-friendly: Falls back gracefully when localStorage disabled ## Technical Details - Seeded RNG ensures deterministic randomization - CSS flexbox order property changes visual order without DOM manipulation - Inline script executes before page render - Compatible with static Jekyll site generation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR implements client-side randomization for design help provider display order to ensure fair visibility for all companies. The randomization uses a seeded approach to maintain stable ordering across page reloads while providing different sequences for different users.
Key changes:
- Added provider identification attributes and CSS classes for JavaScript targeting
- Implemented seeded randomization with localStorage persistence using Linear Congruential Generator
- Applied CSS flexbox ordering to shuffle providers without DOM manipulation
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
design-help.html |
Added flexbox container and inline JavaScript for seeded randomization with Fisher-Yates shuffle algorithm |
_includes/design_help/provider.html |
Added id attribute, provider-item class, and data-provider-slug attribute for JavaScript targeting |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
🚀 Preview Deployment Ready!
This preview will be automatically updated when you push new commits to this PR. Browse all previews: https://preview.wafer.space ⚡ Deployed to custom domain • Preview will be removed when PR is closed |
|
📋 Previous verification results (archived) Click to view archived verification results from 2025-10-09T08:35:51.000Z✅ Preview Site Verification PASSEDPreview Site Verification ReportPR: #66 1. Basic Connectivity ✅
2. Content Verification
3. Multi-Page Asset VerificationDiscovering all pages in the site...
4. Link and Asset Verification (muffet)Running comprehensive muffet validation...
5. Performance Check
6. Mobile Responsiveness
Summary✅ All verification checks passed! 🔍 Automated verification • Run ID: 18370366010 • 2025-10-09T08:35:50.665Z ⏰ This verification result has been archived by Run ID: 18395276271 • A newer verification is available below |
Fixes identified by GitHub Copilot code review: 1. Define magic numbers as named constants: - Added LCG_MODULUS = 2147483647 (2^31 - 1, Mersenne prime) - Added LCG_MULTIPLIER = 16807 (MINSTD LCG parameters) - Improves code maintainability and clarity 2. Fix order assignment logic: - Changed from: providers[shuffledIndices[i]].style.order = i - Changed to: providers[i].style.order = shuffledIndices[i] - More intuitive: "provider i goes to position shuffledIndices[i]" Both changes improve code readability without affecting functionality. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
📋 Previous verification results (archived) Click to view archived verification results from 2025-10-10T03:13:32.000Z✅ Preview Site Verification PASSEDPreview Site Verification ReportPR: #66 1. Basic Connectivity ✅
2. Content Verification
3. Multi-Page Asset VerificationDiscovering all pages in the site...
4. Link and Asset Verification (muffet)Running comprehensive muffet validation...
5. Performance Check
6. Mobile Responsiveness
Summary✅ All verification checks passed! 🔍 Automated verification • Run ID: 18395276271 • 2025-10-10T03:13:32.418Z ⏰ This verification result has been archived by Run ID: 18397637001 • A newer verification is available below |
mithro
commented
Oct 10, 2025
mithro
left a comment
mithro
left a comment
Contributor
Author
There was a problem hiding this comment.
Detailed code review of fair provider ordering implementation
mithro
commented
Oct 10, 2025
mithro
commented
Oct 10, 2025
mithro
commented
Oct 10, 2025
mithro
commented
Oct 10, 2025
mithro
commented
Oct 10, 2025
mithro
commented
Oct 10, 2025
| var providers = container.querySelectorAll('.provider-item'); | ||
| if (providers.length <= 1) return; // No need to shuffle if 0 or 1 items | ||
|
|
||
| // Create array of indices |
Contributor
Author
There was a problem hiding this comment.
Minor optimization: Creating a separate indices array and then shuffling it adds an unnecessary step. You could simplify this by generating the shuffled order values directly or by using a different approach. However, the current code is clear and readable, so this is a nitpick rather than a critical issue. The performance impact with ~4 providers is negligible.
mithro
commented
Oct 10, 2025
Fixes all issues identified in code review: **Critical Issues Fixed:** 1. Hash navigation race condition - Added scrollIntoView after shuffle to ensure correct scroll position when users navigate to #chipflow etc. 2. Seed validation - Added validation to check for NaN and valid range, regenerates seed if corrupted localStorage value detected **Important Improvements:** 3. Accessibility - Added sr-only ARIA live region to inform screen reader users that provider order is randomized and may differ from visual order 4. Inline styles - Moved flexbox styles from inline to <style> block in page header **Minor Fixes:** 5. Redundant attribute - Removed data-provider-slug (duplicated id attribute) 6. Error logging - Added console.debug for localStorage errors to aid debugging All review comments have been addressed. The implementation now: - Handles hash navigation correctly after shuffle - Validates and recovers from corrupted seeds - Provides accessibility context for screen reader users - Follows better CSS practices (no inline styles) - Includes debug logging for troubleshooting - Has cleaner HTML (no redundant attributes) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
✅ Preview Site Verification PASSEDPreview Site Verification ReportPR: #66 1. Basic Connectivity ✅
2. Content Verification
3. Multi-Page Asset VerificationDiscovering all pages in the site...
4. Link and Asset Verification (muffet)Running comprehensive muffet validation...
5. Performance Check
6. Mobile Responsiveness
Summary✅ All verification checks passed! 🔍 Automated verification • Run ID: 18397637001 • 2025-10-10T05:47:57.492Z |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements client-side randomization of provider display order to ensure all companies receive fair visibility. Each visitor sees a randomized order that remains stable across page reloads.
Closes #65
Changes
Provider Template (
_includes/design_help/provider.html)idattribute for hash-link support (#chipflow, #mabrains, etc.)provider-itemclass for JavaScript targetingdata-provider-slugattribute for provider identificationDesign Help Page (
design-help.html)orderproperty applicationFeatures
✅ Fair distribution: Different users see different provider sequences
✅ Stable ordering: Each user sees the same order across page reloads
✅ No visual artifacts: Inline script prevents FOUC (Flash of Unstyled Content)
✅ Hash links preserved:
#chipflow,#mabrains, etc. still work after reordering✅ Progressive enhancement: Works without JavaScript (shows default Jekyll order)
✅ Privacy-friendly: Gracefully handles disabled localStorage
Technical Implementation
Seeded Randomization:
designHelpProviderSeedCSS Flexbox Ordering:
display: flex; flex-direction: column;orderproperty on each provider itemInline Script Approach:
Testing Checklist
Example Behavior
User A (seed: 12345):
User B (seed: 67890):
Both users see the same order on every page reload until they clear localStorage.
🤖 Generated with Claude Code