Skip to main content

How we built a simple site to tell if it's safe to leave the office

4 min read

AT&T ParkKnown is based at 421 Bryant St in South Beach, San Francisco - right around the corner from AT&T Park, home of the San Francisco Giants.

Normally, it's a beautiful place to be; we're a short walk away from the waterfront, and we'll often take some time in the afternoon to stroll over to the marina. It's well connected by both BART and MUNI, and heading elsewhere for a meeting is a piece of cake.

That is, unless it's game time, when the streets are filled with enthusiastic, orange jersey wearing fans and every transport method becomes a sardine-tin-like nightmare. More than a few times, we've left the office after a hard day's work only to fall into a nightmarish commute home.

No more! We now have Is It Safe to Leave South Beach?, a simple, mobile-friendly site that lets us know if it's a good time to head out for our commute. And the best part is, it took us about half an hour to write. Here's how we did it.

1. Get the game times

MLB produce iCal feeds for baseball games in all the major cities. Here's the page for the Giants. We could just subscribe to this in our calendar applications, but I don't want my list of meetings to be polluted by baseball game times. I want to be able to proactively check to see if it's safe to leave the office, not be notified whenever there's a game on.

Nonetheless, the "home game" calendar feed is a useful database of when those games are, so let's keep that.

2. Parse the game times

There's no point in reinventing the wheel. There are lots of calendar parsers on GitHub, but I used this one by Martin Thoma, which incorporates some modifications by John Grogg. It's very simple, which is exactly what we need: a lightweight way to turn a feed into structured data that we can filter internally.

Once we've converted our calendar file to structured data, we can loop through it in order to find any games that are either starting or ending at a time close to now.

While the game is set to start and end at particular times in the calendar file, I've noticed that these may have some variance in real life, and the streets are full for a while both before and afterwards. To be safe, I've set a window:

  1. If the game starts later than an hour ago, and earlier than an hour from now, then we consider the game to be starting
  2. If the game ends later than an hour ago, and earlier than an hour from now, then we consider the game to be ending

With a two hour window for both the start and end times of the game, we can be pretty sure we won't be caught in a traffic storm when we leave the office.

Importantly, we do this processing in a library function which sets the following variables:

  • $safe - either the word "YES" or "NO".
  • $subtitle - some explanatory text, for example "A game is starting".
  • $description - either some more details about the game, or some details about the next game if one isn't happening right now. This is directly taken from the calendar file, but only the first paragraph of the description is displayed.

3. Display the game times

We display these variables in a simple HTML page. $safe gets displayed in an h1 tag; $subtitle is in an h2; $description is in a paragraph tag underneath.

Using CSS media queries, we make sure that the text is big enough to be prominent on the user's screen, but not so big that it appears off-center or that words are unnaturally wrapped.

Because we created our content in a library function and saved it in a set of variables, we can create different versions for free. I created a JSON version, which means anyone in South Beach can create their own interface or application that uses this information if they want to. PHP's JSON encoding function makes this easy:

  • create a data structure containing our variables
  • pass a Content-type: text/json header to the browser
  • pass the data structure through json_encode and echo the result to the browser

4. Never board a MUNI train crammed full of baseball fans again

And that's it! The whole hack took me about 30 minutes, including registering the domain name and setting up some hosting space. It's pretty simple, but now I have an at-a-glance way to know if it's safe to go home.

Photo by Manny Hernandez.