Talk is cheap. Show me the code.
My name is Risan Bagja Pradana and I love playing with the computer. I write about programming stuff. Sometimes I blog about my learning journey. Other times I write a tutorial or some code snippets that I found them interesting.
2020
- Building a Web-App to Track My Expense on Google Sheets
I’ve tried so many applications to track my spending in the past. None of them stick with me for six months, at least. I always found myself fighting back against those applications. It could be …
- Let's Build Stuff Again
Digging through my old hard drive and found these two folders containing more than 200 projects from my early days as a web developer in 2013. I’m amazed by so many things I’ve built …
- Vue.js: Implement Log In with Google Feature
This weekend, I was tinkering with the latest version of Vue.js (v3) and the official Google API client library for JavaScript. I tried to implement the “Log In with Google” feature on a …
- Integrating Raygun with Laravel
You can use Raygun to easily monitor any errors within your Laravel application. Once you’ve signed up for Raygun account and got your Raygun’s API key. Install the official PHP library …
- Switching to Hugo
Another day, another static site generator to switch to. The curse is real. Instead of writing more blog posts, I ended up messing up with the platform. It was once powered by Jekyll. It was once …
- Incorporating Vue UI with a Traditional Laravel Login Flow
Let’s say we want to create a traditional login flow using the Laravel framework. The users will enter their username and password and our system will send an HTTP POST request to authenticate …
- Setting Up Tailwind CSS with Vue CLI
It’s quite easy to set up Tailwind CSS within your Vue CLI project. Since Vue CLI is already shipped with PostCSS, all we have to do is to install Tailwind as a PostCSS plugin. If you look at …
- Axios: Handle Error Response with 200 Status Code
You might be using an API that does not utilize the HTTP status code properly. For example, even if the operation is failed because of the client error, the API returns a 200 status code—when in fact …
- Add Postmark's Tag in Laravel
Laravel makes it super easy to work with e-mail. It ships with an SMTP based mail driver out of the box. We can also easily use API based mail drivers like Amazon SES, Mailgun, or even Postmark. Since …
- Switching to Circle CI
I used to use Travis CI for running my test suites. But now I’m switching to Circle CI for my latest open-source JavaScript project: helpers. Though it has no build matrix feature out of the …
- How to Backup and Restore Your GPG Key
A couple of weeks ago I upgraded my MacBook to Catalina—the latest version of macOS. Once the upgrade was completed, I couldn’t sign my Git commits because my GPG key was missing. Somehow the …
2019
- Bash Script for Switching Between PHP Versions
Lately, I have to deal with the old codebase that is still using the outdated PHP version. And so I’ve found my self switching between multiple PHP versions quite often. Since I’m using …
- Colorful Google Maps Marker
When we’re using the Google Maps API and adding a marker into our map instance, by default we’ll end up with this red pin figure. The default Google Maps marker However, when we’re …
- Lazy Load Google Maps API
Yesterday I was combing through the vue2-google-maps source code. It’s a collection of Google Maps components for Vue. Then I found an interesting bit of how it loads the Google Maps JavaScript …
- How to Clear Nunjucks Cache
I’m building a static site generator (again) named Flores. Initially, I use Pug for the templating engine. But then I discovered Nunjucks. It has a lot more features and the syntax is quite …
2018
- Express Responds with Base64 Encoded Image
I want to create an endpoint that will respond with a 1x1 pixel PNG file. Instead of using the sendFile method, I choose to use the base64 encoded representation since the file size is super small. …
- Regenerator Runtime is not defined
I was tinkering with my antiquated, silly, and super tiny NPM module this morning: giphy-random. It basically for retrieving a random GIF using the Gihpy API. I simplified the code, from the …
- Bundling Your JavaScript Library with Rollup
Similar to Webpack or Browserify, Rollup is a module bundler for JavaScript. It allows us to use the modern ES module system and transform it into another module system: CommonJS, AMD, or the UMD. It …
- Vue Chart Component with Chart.js
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. …
- Building My First iOS Game
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 …
- Tutorial PHP untuk Pemula
PHP—akronim rekursif dari PHP: Hypertext Preprocessor)—merupakan bahasa pemrograman untuk web yang mulanya dikembangkan oleh Rasmus Lerdorf pada tahun 1994. PHP berjalan di sisi server (peladen) dan …
- Set Authorization Header with Apollo Client
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 …
- Python Notes from Intro to Machine Learning
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: …
- React Component with Dot Notation
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 …
- Seeding Table with Relationships in Laravel
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 …
- Track User's Location and Display it on Google Maps
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? …
- Installing SQL Server on macOS
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 …
- I Create My Own Static Site Generator
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: …
2017
- Upgrade Your SSH Key to Ed25519
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 …
- New Blog and Things I learned Building It
Hello, world! After more than four years, I finally have my programming blog again 🎉🎉🎉. It’s been bugging for quite some time. Having a blog will be a good exercise to improve my writing skill. …
2014
- Tutorial Dasar Facebook PHP SDK
Pada tutorial kali ini kita akan mempelajari dasar-dasar penggunaan Facebook PHP SDK untuk mengakses API dari Facebook. Kita akan membuat aplikasi sederhana untuk menampilkan data profil Facebook dari …
- Laravel AJAX Request dengan CSRF Token
Jika Anda menggunakan Laravel dan mengkombinasikan teknik AJAX untuk mengirim request ke server, pasti Anda pernah memikirkan: bagaimana caranya memproteksi endpoint AJAX tersebut dari serangan CSRF? …
- Realtime Notification using PHP and Pusher
Pada tutorial kali ini kita akan membangun sistem notifikasi realtime sederhana dengan menggunakan PHP serta layanan third-party dari Pusher. Pusher adalah layanan cloud untuk mempermudah pengembangan …