barboard.space

A home for community music

Barboard is a Chinese-speaking community for Western pop music, founded on Baidu Tieba in 2013. I joined in 2017. As daily conversation moved to WeChat, years of charts and contest results remained scattered across posts, spreadsheets, and member-produced videos.

Members contribute personal weekly charts to BarboardLab and annual lists to the year-end rankings. In Barvision, they submit songs and vote through competition rounds.

I designed and built barboard.space to bring these activities into a shared website. The homepage surfaces current updates, while activity pages preserve the charts and results. A member directory provides another way in, through the people who contributed them.

Exploring shared music charts

The year-end archive covers 2013–2023. I converted spreadsheets with different layouts into a consistent chart format, while keeping personal selections separate from the combined ranking. Each year’s entry card previews its winning song and contributing lists; readers can move between adjacent years from the chart page.

Weekly and annual charts share a consistent order for rank, artwork, song, and artist. Their supporting figures differ: weekly charts show movement, peak position, weeks on the chart, and current points; annual charts show combined points and how many member lists included each song.

I added search for finding a specific song and linked highlights for exploring notable chart changes. Both work beyond the initially displayed rows. In the example below, selecting the biggest drop reveals the remaining entries and brings the song into view.

Following Barvision across editions

Barvision’s format has changed across its history, from contests with separate song categories to recent editions with semifinals and a final. I kept each edition’s rules, results, and individual voting records together, preserving the context behind its rankings. The 2026 event area also links to playlists and replay videos after voting has closed.

I built cross-edition search by song, artist, member, and language. Within each edition, results combine a song’s repeated appearances across rounds under the same submitting member, showing the furthest stage reached. Each result links to its edition and submitting member.

Search results can be read independently, so I presented them as individual cards on mobile. Each card keeps the song, result, edition, and submitting member together, while desktop readers can scan the same fields in a table.

Voting records require comparison across entries and voters, so I retained the grid on mobile. Identifying columns stay fixed while the individual scores scroll horizontally, keeping each score connected to its entry.

Search and score records

Detailed round-by-round results remain on the edition pages.

The 2026 import preserves published score values and includes checks against individual jury votes. Approval-vote rounds retain their published ties and are excluded from selected historical records that use a different scoring scale.

The data center also includes an edition overview, a sortable member leaderboard, and winners’ shares of the available score pool. These summaries sit alongside individual song searches; differences in voting rules still matter when comparing editions.

Connecting records through members

People provide a different route through the same history. I built a directory searchable by nickname or account name, with filters for community groups and participation in a particular Barvision edition.

I linked historical records through stable member IDs, accounting for changing nicknames and jointly submitted songs. Each profile brings a member’s contest results and ranking history together with their personal year-end selections and contributions to the community charts.

Contest records and personal charts remain in separate sections. To keep several years of selections manageable, each available personal list initially shows three songs and expands to its full Top 10.

Where source material is incomplete, the profile identifies the missing records. Members can also export their Barvision ranking history or complete contest record as an image.

Personal records and exports

The combined annual chart does not contain every song from every member’s list. For years where those selections would be missing, I used full source sheets or individual submissions to build the personal Top 10s. Where detailed records were unavailable, I kept only the known contribution counts and marked the missing personal lists.

I built image export as a separate layout for Barvision records. The ranking chart is redrawn at a fixed width, with embedded fonts and resolved styles, before it is combined with the member’s results. On supported touch devices, the file can use the system share sheet; otherwise it downloads as a PNG.

A shared interface across editions

I built the contest pages around a shared renderer and separate data files for each edition. The renderer handles differences in competition structure and voting formats, keeping page behavior consistent while preserving each edition’s rules and results.

For the recent editions shown here, I designed the event identities and translated them into theme settings for artwork, colors, and hero treatments. Shared navigation, typography, and table styling provide continuity. Separate mobile artwork avoids cropping essential parts of the desktop composition.

Chongqing 2026 uses dark surfaces and luminous accents from its event artwork. The website carries this identity through the contest pages; the audiovisual design and live broadcast system are documented in the Barvision case study.

Data updates and event support

BarboardLab’s weekly chart is compiled manually and usually published on Musictrack about a week after its chart date. I wrote a Python script to retrieve the published results and convert them into JSON. Scheduled GitHub Actions runs update the chart data, homepage ticker, and dated announcement together.

If a chart request fails, the script retains the previous data so the page remains available. A next improvement is to distinguish a newly published issue from an unchanged chart or a failed request, and notify the maintainer after repeated failures.

During Barvision 2026, the submission page used different states before registration opened, while submissions were accepted, and after registration closed. Browser-side validation and a local receipt supported the submission flow, while EmailJS handled delivery. The receipt applies to the same browser and device. After the event, playlists and replay links remain available.

The published site brings historical records and ongoing community activity into one place. Weekly charts are retrieved on a schedule, while contest and year-end archives follow separate import processes. I have not yet evaluated how members use the search and archive features over time.

I am continuing to expand the community features and migrating the site to a separate front-end and back-end architecture.