Omnisurface Stars Archive

Launched

October 2020

Filed Under

A list of tags for this post.

Role

  • code
  • design

Stack

  • Eleventy
Won on all three surfaces page at Omnisurface Stars
The new archive features responsive and accessible data tables.

This project is a redesign of an old project. Omnisurface Stars was a Wordpress blog active from 2009-2010. It was a labor of love for a small group of horse racing enthusiasts and friends aimed at tracking horses that had won on all three racing surfaces: dirt, synthetic and turf.

Compiling this data was no small task given that the American horse racing industry does not make basic data readily available in usable formats (still true in 2020, sadly). The information compiled is not complete, and probably has errors, but it felt worthwhile to preserve the effort. And there’s still probably some value for those who follow racing to have it as a quick reference since there’s no other way to easily find this information.

There were a handful of posts at the old site, but they were mostly about noting who had to potential to join the ranks of the Omnisurface Stars, so I did not bring those over to the new site. The original listings were embedded Google Sheets, which was fine at the time, but relatively easy to improve upon now.

The original datasets at Wordpress
The original embedded Google Sheets datasets.

Given my new found love of Eleventy, and in particular its data cascade, it was an easy choice and implementation. I manually converted the Google Sheet data to JSON given that my current skill level does not include writing scripts for such things. It wasn’t too terrible. I detailed the process here for anyone interested in the doing the same.

Moving the JSON locally into the project was a nice performance boost. It also meant that I could use data tables instead of embedded Google Sheets, which provided more flexibility for responsiveness and accessibility.

Responsive layout on small sized screens
Moving the data into JSON files made it easy to make the data tables responsive. Screenshot from Sizzy App

It’s nice to have a sustainable home for this project. I did a full write-up including decisions and implementation detail in the Responsive and Accessible Data Tables article.

Link opens in a new tab or window View Project