A FamilyMart in your browser
In the past, I have had the opportunity and the pleasure to go to Japan several times and to stay there from a few weeks to several months.
A few years ago, I spent three weeks in a not very touristic but charming and enjoyable neighborhood of a city located in the southwest of Tokyo. One afternoon, I spent a few hours in a local cafe, and I came up with the amusing idea to recreate the facade of a famous convenience store chain, FamilyMart, in a web browser.
After spending some time gathering reference images from the web, I started to design, using HTML and CSS, a FamilyMart like the thousands you would encounter in Japan. It was a challenging task, especially since I wanted to pay attention to details, and here is the result:
CSSでのファミリーマート
(Which, in Japanese, means “A FamilyMart in CSS”)
Oh! There are two easter eggs on that page, one quite visible and the other a bit hidden. Can you find them? ♫
An Iconic Melody
Reproducing a FamilyMart in a browser wasn’t enough! I also wanted to make something with the iconic melody that plays when the store’s doors open. I’ve always been amused by this tune.
It was spring 2020, and while spending a long day at home in front of my computer during the lockdown, I found myself having fun with a cheap MIDI keyboard in GarageBand, trying to make some music. I can’t recall exactly how I ended up figuring out how to play the FamilyMart melody, but somehow, I did. So, I found myself tinkering with sounds and the melody, and a few hours later, I came up with a short remix.
Put on your finest headphones, open your ears wide, and enjoy this masterpiece!
I did some research on the FamilyMart melody, and I discovered that it’s actually a very standard doorbell chime manufactured by Panasonic, known as the EC5227WP. Anyone can purchase it, and I believe it’s even available on Amazon. You can listen to the various chimes on this page.