Site logo

👋 Hello, I'm Surya

I do web development for many years, joining development teams in tech companies to build various products. I love building delightful interfaces. More about me...

Projects.

Invoiza: Invoice Generator thumbnail

Invoiza: Invoice Generator

Create and manage invoices with customizable template, duplicate invoices and Generate PDF.

next-ts-tailwind-starter thumbnail

next-ts-tailwind-starter

Starter kit for Next.js project packed with TypeScript, Tailwind and many more stuff.

React Tailwind Snippets thumbnail

React Tailwind Snippets

Collection of UI patterns built using Tailwind CSS for React applications.

Blog.

Apr 3, 20232 mins read

How to Process Google Analytics 4 Data using Google BigQuery

Google Analytics 4 (GA4) is a powerful tool that provides valuable insights into user behaviour on your website. By tracking user interactions and events, GA4 can help you understand how visitors interact with your website and identify areas for improveme...

software-engineeringgoogle-analyticsanalytics
Apr 1, 20232 mins read

How to Setup Google Analytics 4 in Next.js

Google Analytics 4 (GA4) is the latest version of the popular web analytics tool offered by Google. As the successor to Universal Analytics, GA4 comes with several new features and enhancements that provide businesses and marketers with more insights into...

software-engineeringanalyticsgoogle-analytics
Dec 10, 20224 mins read

Setup Local to Develop WordPress Site Locally in Fedora

Local is a development tool to develop WordPress sites locally. It provides many useful features to initiate a new site, do backup and many more. It supports various operating systems including macOS, Windows, Debian and rpm-based Linux systems. This ar...

software-engineeringwordpressweb
Sep 16, 20226 mins read

Enable Tailwind Dark Mode in Next.js and Storybook

Nowadays, dark mode on web pages becomes popular because it provides more comfort for some people, including me. Using Tailwind we can configure it easily and choose one of 2 available strategies, the media strategy which leverage preferes-color-scheme...

software-engineeringjavascript
Sep 10, 20225 mins read

Setting Up Web Project using Next.js, Tailwind and Storybook

Next.js and Tailwind are popular frameworks in modern web development. I’ve used them in some projects and really happy with the result. Storybook is one library to create component documentation which can be integrated to project written in many UI...

software-engineeringjavascript
Feb 14, 20215 mins read

The Books I Read in 2020

Inspired by DHH's article about  his reading list in a year , I would like to make one as a reminder about how far I've already learned during the year of 2020. Actually, I've started to actively read books since 2013 and had experiencing struggles to kee...

learning-materialbook
Aug 5, 20193 mins read

Mengenal Makefile

Jika melihat beberapa repositori di Github, misalnya Babel , kita akan menemui sebuah file dengan nama Makefile . Makefile adalah file konfigurasi yang dibaca oleh GNU Make untuk menentukan langkah-langkah menghasilkan suatu output . GNU Make pada...

software-engineeringtools
Aug 23, 20182 mins read

Melakukan Update Dependensi NPM

Sekitar bulan November tahun 2017, Github merilis sebuah fitur yang dinamakan Security Alert . Fitur ini berfungsi untuk memeriksa repositori proyek terhadap kemungkinan celah keamanan pada dependensi yang digunakan. Jika potensi celah keamanan terdeteks...

software-engineeringtoolsjavascript
Aug 17, 20182 mins read

Catatan Gitlab CI

Beberapa hal yang perlu diperhatikan ketika menggunakan Gitlab CI: Perintah git berakhir dengan exit 1 Perlu diingat bahwa Gitlab CI akan menganggap pipeline berhasil jika semua tugas yang harus dijalankan pada .gitlab-ci.yml berakhir dengan exit code 0 ...

software-engineeringci/cdgit