Markus is designing

Tokyo Yay

Around winter 2016/2017 I’ve spent some months living in Tokyo. This was not my first time in Japan, but I’ve never been there for such a long period. I had the vague plan to create a site that collects all my favorite places – so I’ve kept a journal, starred everything on Google Maps, and then built a site: Tokyo, yay!

My goals:

Design

For the main graphic I chose the Shiubya Crossing. While there are more central places in Tokyo (that are also a bit more in the east), it felt like a good fit: it was close to the places I was living, it was the first sight I’ve seen after leaving the Narita Express in 2005 and every friend who visited wanted to go there at one point.

Satellite image of the Shibuya Crossing
Shibuya Crossing from above, satellite image taken from Google Maps

For each place I’ve added a beam, all arranged in a circle. By adding places the circle shape became more and more visible so it doubles as a nod to the Japanese flag. The two main colors were grey and red. The grey is inspired by the tarmac of the streets and the warm red is just omnipresent in Japan – the Tokyo tower, all the gates and my bike.

All the places listed seen from Shibuya Crossing as SVG

The cover page lists all places alphabetically and on the detail pages nearby places are shown. This fits the way I am browsing through cities: picking a starting point (in my case most likely a café) and then getting lost in the neighborhood. All suggested places are sorted by distance with a small pointer indicating which direction to go (the distance is also shown, though as beeline).

65 m southeast of Onibus Coffee
Directions to Trasparente from Onibus Coffee

One of my favorite places to get coffee is Onibus Coffee in Nakameguro. Within walking distance there’s the small bakery Trasparente, the great pizza place Seirinkan and Cafe Facon. One can also browse by tags such as coffee.

Development

For each place I had to save the name, a short description and the position to do all the calculations. But instead of saving latitude, longitude, address, … I’ve found an easier solution: saving just the placeID and collect all the additional information via the Google Places API. That combined with the Geocoder made it easy to calculate distances and directions. And as some places might be outdated eventually this also gives me the option to query if they are still in business or not. To make the Open Graph preview more helpful I’ve created a map for each place with Mapbox.

The site itself is built with Middleman, my favorite static site generator. To make the site load fast it was very helpful to just have static files. I’ve also inlined all the CSS and SVGs to save additional network requests. To make the site work offline I’ve used Serviceworkers. It took me a bit to wrap my head around this concept, but this article by Jeremy Keith helped a lot. My implementation is mostly a copy of his, just instead of a cache first approach I’ve opted for a network first solution. In theory when opening the page all the places are cached in the background. Sadly iOS does not support this so far.

One last thing: while working on this side project I’ve became more and more interested in CSS Grid as I wanted all the places to be shown in a nice grid depending on the size of the viewport. Turns out: this can be achieved in just some lines of code, just take a look at this:

.grid {
  max-width: 640px;
}

@supports(display: grid) {
  @media screen and (min-width: 320px) {
    .grid {
      max-width: 1280px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    }
  }
}

All the items within grid are shown vertically stacked. Just if display: grid is supported and there’s more than 320 pixels horizontal space available it will be shown in columns (without the media query the content still tries to make up at least 288 pixels). So up to 1280 pixels each column takes up at least 288 pixels or one fraction of this width. I am still just scratching on the surface of what’s possible with this technique (especially in combination with Flexbox), but I am very keen on experimenting more with this.

Key Learnings

So here is once again the link: tokyoyay.com – thanks for reading!