Hacker News Flipboard: Visualizing Top Stories on a Split-Flap Display

Hacker News Flipboard: Visualizing Top Stories on a Split-Flap Display

Hacker News Flipboard is a digital visualization that renders the top 20 stories from Hacker News on a simulated split-flap departure board. The project transforms the standard text-based front page into a mechanical-style display, featuring rank, score, and titles on individual flap cells.

Real-Time Data Integration via Quickish Cloud Functions

The board is powered by a Quickish Cloud Function that fetches the Hacker News front page on a scheduled basis and broadcasts the data to all active boards. This architecture ensures that the display remains synchronized across different clients without requiring individual page refreshes.

Display Layout and Visual Logic

The visualization organizes content into a specific structural layout to mimic a physical train station board:

  • Row Structure: Each story is represented as a row following the format RANK · POINTS · TITLE.
  • Color Coding: The rank is displayed in the signature Hacker News orange, while the score color dynamically changes based on the number of points.
  • Content Trimming: Story titles are automatically trimmed to fit the available flap cells.
  • Pagination: Each page contains a blank lead row, ten stories, a spacer row, and a small footer.
  • Header: The top amber line is dedicated to displaying the current #1 story on Hacker News.

Interactive Controls and Customization

The interface provides several tools for user interaction and board management:

  • Audio Feedback: A toggle button (♪) allows users to enable or disable the mechanical clicking sounds associated with the flap transitions.
  • Display Modes: A fullscreen toggle (⛶) is available for immersive viewing.
  • Board Settings: The settings menu (⚙) allows users to adjust page timing (the duration each page is displayed before flipping) and manage a security token.
  • External Integration: The board supports external updates via a POST request to the cloud function using a private token, enabling the headline to be driven by scripts, crons, or webhooks.
  • Manual Overrides: Users can click any row to pin custom text over the live data feed.

Technical Foundation

Hacker News Flipboard is a remix of the original Quickish flipboard project, utilizing the Quickish platform's ability to handle live data broadcasting and cloud-based scheduling.

Sources