RuangRaung personal blog

Rencana awalnya sebenarnya simpel banget: saya cuma mau bikin sudut kecil bernama Ruang Jeda. Tapi ya namanya juga hidup, kadang semesta punya rencana lain—atau dalam kasus ini, ada orang yang gercep banget beli domainnya duluan, kampret emang, haha. Begitu tahu domain idaman sudah nggak bisa diambil, saya sempat termenung sebentar, sampai akhirnya muncul nama: RuangRaung.

Jujur saja, nama baru ini malah terasa jauh lebih "urang pisan".

Blog ini ternyata nggak ditakdirkan cuma jadi tempat tenang buat sekadar istirahat atau ngadem. RuangRaung justru didedikasikan untuk segala chaos yang sering muncul tiba-tiba tanpa permisi. Karena ya tahu sendiri lah, hidup nggak cuma butuh jeda, tapi butuh tempat buat melepas penat—wadah buat meraung biar nggak stres teuing, literally raaaawr!

Awalnya cuma mau pakai subdomain di astronoix.com, tapi dipikir-pikir hoream lah, mending punya rumah sendiri di ruangraung.com. Sambil begadang merapikan sistem build-nya malam ini, saya sekalian utak-atik logo baru. Ada sedikit hint teriakan di bagian akhirnya, yang kalau diperhatikan lebih detail, simbol itu sebenarnya huruf R—inisial dari blog ini.

Jadi, selamat datang di RuangRaung. Wadah sederhana untuk meneriakkan sisa-sisa renungan tentang rupa, karya, dan kerasnya waktu yang sakapeung mah rada ngeselin.

Mari meraung bersama di sela waktu yang tersisa.

Membangun kembali web kantor diawali dengan eksperimen menjinakkan AI. Lewat tiga tahapan strategis, saya mengubah kekacauan kode menjadi workflow yang rapi dan hasil yang konsisten.

Beberapa waktu lalu, saya dapat tugas untuk me-revamp website Solecode Academy. Desain di Figma sudah matang, tinggal pindah dari Framer ke hosting sendiri. Karena ingin cepat, saya coba pakai cara modern: pakai AI. Awalnya saya pakai Claude Code, tapi jujur, hasilnya sempat hancur dan gak sesuai sama ekspektasi.

Dari situ saya belajar: kita gak bisa menyuruh AI langsung jadi. Kita harus membuat AI-nya paham dulu apa yang ingin dicapai secara bertahap. Berbekal diskusi dengan ChatGPT, saya akhirnya menemukan workflow yang pas dengan membaginya menjadi tiga stage:

Stage 1: Key Mockup & Template HTML
Tahap awal adalah membuat template HTML untuk semua halaman. Saya kasih referensi figma dan live URL biar si Claude analyze dulu konteksnya. Di sini saya suruh dia bikin Claude.md dan DesignGuideline.md sebagai aturan baku biar visualnya konsisten dan gak berubah-ubah di tengah jalan.

Stage 2: Pemilihan Framework & CMS
Setelah template HTML beres, saya minta rekomendasi framework dan CMS yang paling cocok buat project ini. Di tahap ini juga saya mulai menentukan reusable component dan memastikan tampilan mobile-nya aman. Begitu semua kebentuk, langsung saya push ke GitLab sebagai checkpoint.

Stage 3: Fixing & Interaksi
Bagian akhir lebih ke fixing bug, refaktor kode, dan implementasi interaksi serta animasi dikit-dikit supaya webnya lebih hidup. Apapun perubahannya, saya selalu suruh AI untuk update document biar konsistensinya terjaga kalau nanti mau nambah halaman baru.

Figma yang Rapi adalah Kunci
Satu rahasia penting: rapikan Figma sebelum "disuapkan" ke AI. Pastikan pakai Auto Layout dan penamaan layer yang jelas. Saya juga ekspor variabel warna serta tipografi ke file JSON.

Kuncinya adalah kata "Implement" dan "Compare". Saya minta AI mengimplementasikan desain, lalu membandingkannya dengan URL live lama. Kalau ada yang kurang, minta dia nambahin satu-satu. Jangan sekaligus, biar dia gak bingung atau malah berimajinasi liar (AI drift).

Pelajaran Berharga
Sebagai orang yang punya background frontend, saya jadi paham kalau AI itu asisten, bukan pengganti sepenuhnya. Kita tetap harus memegang kendali arsitektur kodenya. Kalau dia mulai muter-muter gak jelas, di situlah peran kita untuk meluruskan sendiri.

Sekarang, webnya sudah aman dan siap dikembangkan lebih jauh. Ternyata, kolaborasi dengan AI itu memang soal sabar dan teliti melihat detail.

Selamat mencoba workflow gerilya ini!

Membangun "RuangJeda" menjadi perjalanan seru selama tiga hari. Bermodal bantuan Claude Opus dan Gemini, blog ini akhirnya mengudara sebagai tempat saya merawat rasa di sela waktu yang tersisa.

Proses rilisnya blog ini sebenarnya berawal dari keresahan sederhana: saya butuh tempat untuk menaruh semua "sampah" pikiran, catatan belajar desain, sampai dokumentasi teknologi supaya tidak menguap begitu saja. Saya ingin sebuah wadah yang personal, yang membiarkan saya bercerita tanpa tekanan.

Yang bikin berkesan tentu bukan cuma baris kodenya, tapi perjuangan di balik layar. Bayangkan saja, dalam waktu tiga hari itu saya harus bolak-balik antara Claude Opus dan Gemini. Bahkan ada trik "gerilya" gonta-ganti akun demi menjaga limit token tetap aman. Ya, kamu tahu sendiri, token itu tidak gratis, jadi saya harus putar otak supaya drafnya tetap panjang tapi kantong tidak ikut jebol.

Secara visual, saya memilih untuk tidak mau ribet. Desain kasarnya saya buat di Figma, lalu eksekusinya menggunakan kit dari shadcn/ui supaya cepat. Arsitekturnya pun saya buat se-efisien mungkin: pakai Astro untuk frontend dan PHP untuk membaca file Markdown secara dinamis. Intinya, saya ingin sebuah tempat yang begitu dibuka, saya bisa langsung menulis tanpa perlu pusing memikirkan desain lagi.

Jadi, blog ini benar-benar menjadi perwujudan dari namanya sendiri. Sebuah jeda. Sebuah momen untuk menata rupa dan merawat rasa di sela waktu yang tersisa.

Selamat datang di monolog kecil saya.