somerville porch -- er- couchfest post-mortem

The Somerville Arts Council brought Porchfest to the Boston area in 2011, just 4 years after the first one in Ithica.  This year because of COVID-19 they switched to an online streaming-and-prepared-video model, and I helped design a robust front end. Here are some lessons learned for other porchfests and for my future self...

I started helping Somerville in 2016 by making static versions of their band list and map that would withstand the crush of traffic on the day of (very spiky traffic - a LOT of people hit your site in a short number of hours and if you have to go back to the database for each page display / band search and you're not carefully tuned, you might have problems.)

This year we asked performers to consider either: A. a live stream B. a new video made just for the event or C. selecting an existing video for the event, and then there was a fourth category of bands who had signed up before we knew it was not going to be a real-world happening, but didn't update with a new link.

I had a lot of wacky ideas about how to present this on the day of, thinking some sort of live social media feed would add excitement, but we decided to keep it relative simple. We asked for a single performance link from each band, and a description of what type of thing (live stream, new video, existing video) it was.

Here's the design I ended up with, with the top art and tile layout borrowing heavily from what was already on the live version of the site:

Traditionally the "time zone" thing has been very important to Somerville Porchfest (since when people are walking in real space, it's nice to make sure they have interesting options within walking distance.) For the virtual version, we still encouraged the use of "where you are determines what time you play live music" idea a bit (so as to stop everyone playing at the same time) but for the map, I decided to use color not for the "time" aspect but for indicating if it was a live performance (which I think is much more exciting and like a regular porchfest event) or a video (still a critical option for bands with multiple players!) And I listed the live performances first, and the premier videos after that (each list sorted by time), followed by bands who provided picked videos, and then all the other groups. Also, I put the genre information SAC had collected from each group instead of the address they were playing at. (The map at top is still interactive, you can click on a circle and see what band is located there.)

FWIW, I've started using Leaflet.js, a terrifically easy to use API - Google Maps has started a charging model that's terrible for event-based websites, when almost all the traffic happens in a short time frame... last year I started getting charged a couple hundred bucks.

Another lesson we're slow to remember year after year is that bands will always want to change things at the very last minute. When you're making a site that is a snapshot (for performance reasons) rather than reading live from the database, it's great if you can work out a way to publish changes quickly right up to show time.

Actually, we were surprised at how many bands came in the last week. For the weeks prior, it was looking like a dozen live streams, a hand full of premiers, maybe 20 odd other videos... we ended up with 46 live streams, around 20 premieres, and 20 other videos.

Some other techie and design notes:
1. I disabled "scrollwheel zoom" in leaflet, it was grabbing the scroll on laptops in an unfriendly way.
2. Originally I used softer pastel colors, and colored the whole background of the cards, but using a stronger color as trim seems to have worked out much better. (I had to swallow my ego when the people I was working with disliked the pastels :-D )
3. I couldn't find a way to change the "z index" on the map, so I had to add the circles on the map in the reverse order as they were displayed.
4. I kept this as vanilla ECMAscript. Honestly the new syntax features make it pretty easy to manipulate the data for a site and with the new quote syntax you don't even need a separate template engine.
5. A simple responsive design using flexbox worked well, setting a 500-600px viewport to start.

Next year we definitely want to switch to a model that spits out the JSON like every ten minutes or so, rather than being constantly live (which might tax the server) or static (which means we have to manually push to see changes bands make.)

Also, I think had we had most of the bands signed up when I designed this, I might have put in a text-based name/keyword filter, or more sophisticated break down by time of day. Lesson learned! But here's hoping next year will be back in full, house-to-house swing!