Monitoring Bali's undersea internet cable

Bali gets internet through a number of sea cables. The most important one is called the Indonesia Global Gateway (IGG). Indonesia consists of lots of islands, and it connects the biggest ones on one giant fiber line to Singapore. It's significantly improved the internet in Bali.

But sometimes it's down, under maintenance or just doesn't work for whatever reason. The problem is you never instantly know if it's just your laptop, the place you're in, the router, the neighborhood, city or entire island.

That's why I made BaliSeaCable.com, it figures that out by constantly measuring the performance of the undersea internet cable. I made it in the last 8 hours.

It runs a simple Speedtest (with speedtest-cli in a shell cron) from a server in Singapore to a Telkomsel server in Denpasar, Bali every single minute. The results are then grep'd from speedtest-cli's output and securely POST'ed with shell curl to the site (which is hosted on my main server in US). The site saves the data and displays it!

The mock up of this idea started like this, a simple map with a line to Singapore showing the cable and overlays with the speed data.

I had to draw the actual cable properly though in HTML. Here's a map of the cable:

I had to figure out how to draw SVG paths myself. I used a website called editor.method.ac to draw it over the cable map:

I first made an image of the map as background:

I then threw the SVG above it.

I learnt to animate the SVG with this tutorial: https://css-tricks.com/svg-line-animation-works/.

It's simply CSS:

svg.transfer path {
	animation: dash 50s linear reverse infinite;
}
@keyframes dash {
	to {
		stroke-dashoffset: 0;
	}
}

The SVG has three copies of it. One is the cable itself in light opacity (gray), then there's one line to the island (green) and one line back to Singapore green. They're dashed to act like data packets.

I also added a text overlay explaining the site and the current speed in top right:

And made it work on mobile:

Then tweaked the colors a bit more, because red is generally negative, so I made it blue:

And I made the map draggable with JS:

The entire site is one HTML file, so you can check the source if you want to figure out. It's pretty hacky.

I hope this helps people in Bali figure out if the internet in the whole island is down or not, so that if it is, they can take a nice break and go jump in the pool instead of work in the hot sun 😊

P.S. I'm on Twitter too if you'd like to follow more of my stories. And I wrote a book called MAKE about building startups without funding. See a list of my stories or contact me. To get an alert when I write a new blog post, you can subscribe below: