Chart.js is an amazing chart library for JavaScript. It’s modern and performant; built on top of the HTML5 canvas. It includes 8 different chart types which super easy to extend and configure. On top of it all, the generated chart just looks beautiful.

Last night I did some tinkering to integrate Chart.js within the existing Vue code base. So, how can we do that? If you want, there’s actually a wrapper for Chart.js already available for Vue: vue-chartjs. If you take a look at the vue-chartjs source code, it’s actually pretty simple and straightforward. …


Sunday night two weeks ago, I had nothing better to do. So I started googling for some iOS tutorial and landed on this amazing video tutorial by Ray Wenderlich. It’s quite exciting and easy to follow for a total beginner like me. I delved into Swift documentation before and got bored easily. 😝

On that tutorial, you’ll learn the basic of iOS development by building some simple game named Bull’s Eye. It generates some random number between 1 and 100. It then challenges the user to estimate and move the slider as close as possible to that random number. The…


A GraphQL API often requires us to provide an authorization header to authenticate the request. How can we provide this authorization header using the popular Apollo Client library?

It turns our Apollo already provides us with the apollo-link module. apollo-link is a composable network layer that we can use to configure the HTTP request. With apollo-link, we can create chainable middlewares that will construct our final HTTP request.

Suppose our initial code to instantiate an Apollo Client look like this:

Let’s say we store our authorization token on a local storage. To set the authorization header, we need to…


I rarely use Python. I only have one repository at Github that is written in Python: iris-flower-classifier. And it was written two years ago!

A few days ago I took this free course from Udacity: Intro to Machine Learning. The machine learning related codes are quite easy to grasp since it simply uses the scikit-learn modules. But most of the supporting Python modules that are provided by this course were like a black-box to me. I had no idea how to download a file in Python or what’s the difference between a list, a tuple and a dictionary.

That’s why…


This is my answer to someone’s question on StackOverflow. How can we define a React component that is accessible through the dot notation?

Take a look at the following code. We have the Menu component and its three children Menu.Item:

const App = () => (
<Menu>
<Menu.Item>Home</Menu.Item>
<Menu.Item>Blog</Menu.Item>
<Menu.Item>About</Menu.Item>
</Menu>
);

How can we define a component like Menu? Where it has some kind of “sub-component” that is accessible through a dot notation.

Well, it’s actually a pretty common pattern. And it’s not really a sub-component, it’s just another component being attached to another one.

Let’s use the above…


This is my answer to someone’s question on StackOverflow. How can we seed table with relationships in Laravel? Let’s learn how to define relationships on the Eloquent model and use Laravel’s model factory to seed the database.

Model and Table Structure

Before getting started, let me explain the context of the question. Let’s say we have a Customer model. This model has two relationships to other tables. First, it has a one-to-one relationship with CustomerAddress model—it means a single customer only has one address. The second relationship is one-to-many with CustomerPurchase model—it means a single customer may have multiple purchase records.

Let’s briefly explore…


Globe by Nicole Harrington on Unsplash.

This is actually my answer to someone’s question on PHP Indonesia Facebook group. How can we track user’s location continuously using the Geolocation API and display it on Google Maps?

Before getting started, we’re going to need an API Key to use the Google Maps JavaScript API. As a safety measure, don’t forget to set the HTTP referrers on your API key to your own domains.

Displaying Google Map on your Page

First, let’s start with a simple example: display a map on our HTML page using Google Maps Javascript API.

Our HTML Structure

Create a new file and put the following HTML structure:

Safe it as index.html


Crates by Frank McKenna on Unsplash

It’s a bit inconvenience when working on a project that uses the Microsoft SQL Server while your dev machine is either Linux or macOS. I always ended up setting up and using a remote test database.

But now it’s no longer the case. October last year, SQL Server 2017 for Linux finally went into general availability. It’s container images are also available on Docker hub for us to use. That means we can finally install SQL Server on macOS!

Good news, everyone! (Source: Giphy)

Installing Docker

First, you’re going to need Docker. If you haven’t had it installed, heads up to the…


It’s me fooling around — Colorful clown by Levi Saunders on Unsplash

Instead of writing a blog post more often, I decided to redesign my four months old blog, ditched Jekyll and built a custom static site generator. The conversation went like this:

My inner Yoda: “Write more often this year, you must”

Dark side of the Force: “I find the combination of Ruby and Javascript is disturbing”

Me: “Okay, let’s reinvent the wheel and build the static site generator entirely in Javascript!”

Join me to the dark side! (source: Giphy)

I’m easily seduced by the dark side. It’s my bad habit. Rather than putting more thought into the writing, I procrastinate…


Upgrade your SSH key! Photo by Matt Artz on Unsplash

If you’re a DevOps engineer or a web developer, there’s a good chance that you’re already familiar and using the SSH key authentication on a daily basis. Whether it’s for logging into the remote server or when pushing your commit to the remote repository. It provides us with better security than the traditional password-based authentication.

But, when is the last time you created or upgraded your SSH key? And did you use the latest recommended public-key algorithm? …

Risan Bagja Pradana

I read Linux man pages before going to bed 🤓 https://bagja.net

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store