20 times denser: making my own festival program page for Off Avignon

🔧 DIY festival program browser for Off Avignon

This website is not helping.

Last week I wrote about the massive theater festival in Avignon. With 1000+ daily shows, Off Avignon is as magnificent as it is overwhelming. After the last week's experiment in LLM curation (finding shows that match our interest), this week let's look at something more basic: the experience of browsing the festival program.

Off Avignon has a website that’s really elegant, but just doesn’t believe in information density. Especially on mobile, where shows are displayed in a long scroll, with only one show fitting the screen at a time:

If only the list was short, this could work. But it's interminable! With 1400 entries, we’d need to swipe on the screen 1400 times to get to the bottom. (And, with so many shows to see, we don’t have no time for scrolling. 🚀)

Wouldn't be nice to have a denser program? Maybe one that just lists clickable show titles along with their showtime; and fits 20 or so at the same time?

Clearly, the only reasonable response to this situation is to take a break from the arts, put on the programmer hat, and make my own alternative program page 🔧.

The data pipeline

First, I need the information about the shows. I wrote the data sourcing pipeline in a Jupyter notebook.

The first snippet of code emulates the same calls that the festival website makes to fetch shows. Using these calls we assemble a full flat list of show URLs:

Now I need just a tiny bit of information about each of these shows. I want to make something minimalist, so let’s only fetch the title and the showtime. This information can be parsed from the page of each show:

We can use Chrome dev tools to find the HTML structure around each element of interest:

and then parse it accordingly:

At the end we get a JSON file with the title and the showtime for each entry:

The browser

The good thing about making simple tools is that I don’t have a lot of choice to agonize over. I have the shows and the showtimes, let’s display them in a table.

The HTML file is just an empty scaffolding:

We build the content in a small JS script, based on the JSON file that we just made.

It’s tedious code, but generative AI helpers like GitHub Copilot are pretty good at writing it.

The result

The resulting program is what we said it would be: a simple list of clickable links, sorted by the show time:

Otherwise, it’s just a simple list of links. The information density is much better: it fits 20-30 shows on one smartphone screen, and you can scroll to the bottom in a minute or so.

As a little bonus, I added a “favorite” feature that pins the shows we’re interested in to the top of the list. It's all stored locally using the Web Storage API (see Simple lasts longer), so no registration is required (or possible).

Conclusion

This simple page has been very helpful during my week in Avignon.

I have a hypothesis that it could be helpful to more people attending the festival and have some anecdotal evidence to support it :). What I don’t know is how to make more of the attendees aware of it. The 2024 edition is now over, but I want to figure this out for the next one 💫.

More on this

• ⭐️ This festival program project is inspired by Paris Cine Info, a fantastic website I use every week. Created by a friend 🫶, it shows a simple, scrollable, readable list of the movies playing in the many many cinemas in Paris. (Paris has the best repertoire cinemas in the world; come for the wine and stay for the cinemas.)

• 👾 The tech stack of this project reuses / follows the high level architecture of my Space Invader map. The data pipeline is a Python notebook, it produces a simple JSON file, this is then presented by a single-page HTML/JS website. It's a really simple setup that works well for such minimalist hobby projects.

Postcard from Paris

Bercy Beaucoup looking dramatic in the evening light. Good to be back in Paris!

Here’s to more nice summer evenings 💫,
– Przemek