Writing

Tulisan Empat esai soal shipping, desain, dan kode.

Tag 10 tag di empat esai.

Portofolio yang akhirnya saya selesaikan

Portofolio yang akhirnya saya selesaikan Semua desainer yang saya kenal punya situs portofolio yang baru jadi setengah.

8 Mei 2026 · 7 menit bacaPortofolio yang akhirnya saya selesaikanKebanyakan portofolio tinggal di kuburan bernama Drafts. Saya punya tiga di sana. Percobaan tahun 2022 yang mati di hero section. Percobaan tahun 2024 dengan home page yang sudah jadi dan nol halaman proyek. Lalu yang sekarang ini, apa pun namanya. Bedanya, yang ini ada di domain sungguhan, berisi proyek sungguhan, dan kamu sedang membaca tulisan yang membuktikannya.Dua yang pertama gagal karena penyakit yang sama dengan portofolio desainer mana pun: saya terus memperlakukan situsnya sebagai target yang bergerak. Setiap kali duduk untuk merilis satu halaman, saya selalu menemukan enam hal yang ingin saya ulang dulu. Pasangan font baru. Skala spacing yang lebih rapat. Palet warna yang "lebih bagus". Kerjaannya terus melebar sampai memenuhi semua perfeksionisme yang tersedia, dan perfeksionisme saya tidak ada batasnya.Jadi kali ini saya bikin tiga aturan dan benar-benar saya jalankan. Aturan satu: rilis satu tile sehari, walaupun jelek. Tile jelek di canvas lebih baik daripada tile sempurna di kepala saya. Hero kuning bertuliskan "I'm Syauqi" naik paling pertama, sama sekali tidak mirip versi akhirnya, dan satu tile jelek itu yang membedakan codebase sungguhan dari sekadar file Figma.Aturan dua: setiap section dapat tepat satu gaya. Tidak ada kartu di situs ini yang meminjam gaya kartu lain. Home page-nya berisi enam belas tile dengan enam belas ide visual yang berbeda. Tiket akademik ala boarding pass, badge perusahaan berbentuk stiker, heatmap bergaya buku besar, carousel polaroid, pull-quote ala majalah. Batasannya kejam: bikin sendiri atau curi. Imbalannya, saya tidak pernah bosan melihat kartunya, jadi pengunjung juga tidak.Aturan tiga: deadline lebih ampuh daripada reviewer. Saya memaksa diri commit di depan umum. Repo-nya langsung saya buka begitu home page-nya berhasil render. Push ke branch privat sambil "dipoles dulu" itu jebakan yang sama, cuma beda cat. Begitu sudah publik, saya harus jalan terus, karena repo publik yang ditelantarkan itu harus ada penjelasannya.Perfeksionisme itu sebutan halus untuk tidak pernah rilis. Situs yang sedang kamu baca ada karena saya berhenti mengedit README dan mulai merge. Versi yang kamu lihat hari ini bukan versi yang saya bayangkan. Versi yang saya bayangkan sampai sekarang belum ada. Yang ada sekarang cukup oke, dan cukup oke di internet lebih baik daripada sempurna di file Figma.

Framer, sebagai alat produksi

Framer, sebagai alat produksi Yang saya pelajari selama satu setengah tahun merilis halaman produk HitPay di Framer.

12 Apr 2026 · 6 menit bacaFramer, sebagai alat produksiHampir sepanjang karier saya, Framer itu alat prototyping. Kamu bikin mockup yang bisa diklik, ekspor jadi link yang bisa dibagikan, dapat feedback, lalu balik lagi ke React. Framer Sites mengubah itu: apa yang kamu bikin di Framer bisa jadi halaman yang benar-benar dibuka pelanggan. Kedengarannya sepele, sampai kamu harus merilis halaman beberapa kali seminggu.Hal pertama yang kamu pelajari: "desain langsung di canvas" itu beda dengan "desain di Figma, lalu implementasi di kode". Ini workflow ketiga dengan ototnya sendiri. Kamu harus berpikir dalam component sejak awal, karena reuse di halaman Framer bukan hasil refactor, tapi memang bawaan. Bikin component-nya sekali, dan tiga halaman produkmu otomatis punya ritme hero yang sama tanpa perlu diusahakan.Yang kedua soal motion. Framer jauh lebih royal soal animasi dibanding React. Kamu bisa menautkan transform ke scroll, bikin stagger untuk children cukup dengan satu angka, dan gampang memasang hover state yang mengubah tiga properti sekaligus. Godaannya, semua mau dipakai. Disiplinnya, pilih satu atau dua ide motion per halaman, lalu biarkan ide itu yang membawa seluruh halaman.Batasannya muncul di tempat yang sudah bisa ditebak: konten yang sangat dinamis, alur auth yang rumit, tabel data yang berat. Framer bukan tempatnya. Tapi untuk lapisan marketing yang membungkus semua itu, Framer tempat yang sangat pas. Kami memisahkan urusannya: Framer untuk landing page dan marketing produk, aplikasi React kami untuk produknya sendiri, dan sambungan di antara keduanya cuma sebuah link.Ada beberapa pelajaran kecil yang terus saya lupakan lalu pelajari lagi. (1) Variable menghemat waktu berminggu-minggu. Siapkan token warna, tipografi, dan spacing sebelum kamu bikin satu component pun. (2) Breakpoint itu state. Layout mobile bukan desktop versi kecil, tapi desain lain dengan kata-kata yang sama. (3) Posisi scroll itu konten. Perlakukan scroll seperti timeline, bukan seperti halaman yang panjang.Kalau kamu desainer yang bisa membaca kode, Framer menarikmu ke arah shipping. Kalau kamu developer yang bisa berpikir secara desain, Framer menarikmu untuk memikirkan halaman itu sebenarnya untuk apa. Dua-duanya tarikan yang berguna. Kerjaan yang saya bikin di sana lebih matang daripada kerjaan saya di tempat yang canvas dan codebase-nya beda ruangan.

Studio ini dibangun para kucing

Studio ini dibangun para kucing Mochi tidur siang di atas keyboard, Kopi menghakimi setiap PR, Susu menguasai radiator.

22 Mar 2026 · 4 menit bacaStudio ini dibangun para kucingStudio ini punya lima karyawan dan cuma satu yang manusia. Mochi jadi office manager: diadopsi bulan Juli dan sudah merasa kursi itu wilayahnya. Kopi jadi code reviewer paling awal. Dia duduk di monitor kedua dan menatap setiap diff seolah sedang menangkap typo yang barusan saya lewatkan. Susu menguasai radiator dan menganggap tugasnya sudah beres. Bumi muncul waktu standup pagi, lalu menghilang seharian.Kerja bareng kucing mengubah ritme saya dalam dua hal. Yang pertama paling kelihatan: dalam sehari, interupsinya jadi lebih banyak. Kucing yang minta perhatian tidak bisa ditawar. Keyboard berubah jadi kasur. Mouse berubah jadi mainan. Notifikasi Slack berubah jadi bunyi seseorang yang menghakimimu karena lengah mengawasi mangkuk. Kamu jadi lebih sering berhenti daripada yang kamu rencanakan.Yang kedua kurang kelihatan tapi lebih berguna: dalam sehari, jedanya jadi lebih banyak. Kucing yang tidur di lenganmu adalah deadline paling jujur yang pernah ada. Tiket itu tidak akan selesai. Kamu akan duduk di situ, menatap tembok, dan otakmu pelan-pelan defrag sendiri. Kebanyakan keputusan UI terbaik saya justru dimulai di salah satu jeda paksa ini, bukan di sesi mengetik sebelum dan sesudahnya.Dulu saya kira interupsi itu musuhnya deep work. Kucing-kucing ini mengajari saya memisahkan interupsi dari pengambilan keputusan. Interupsinya adalah si kucing. Pengambilan keputusannya adalah apa yang terjadi selama kucing itu nangkring di atasmu. Saya berhenti menganggap waktu kucing sebagai pajak atas produktivitas, dan mulai menganggapnya sebagai ruangan tempat pekerjaan itu benar-benar berpikir.Studionya kecil. Jumlah kucingnya lebih banyak dari manusianya. Daftar bug tetap makin pendek setiap minggu, dan entah kenapa rasanya tidak sestres tahun-tahun waktu saya kerja sendirian tanpa bulu kucing di mana-mana. Mungkin ada buku produktivitas yang bisa ditulis dari sini. Yang pasti, ada empat mangkuk yang harus diisi jam lima.

Gambar dulu, baru ngoding

Gambar dulu, baru ngoding Kenapa saya masih memulai setiap fitur baru di atas kertas.

8 Feb 2026 · 4 menit bacaGambar dulu, baru ngodingBagian favorit saya saat memulai proyek adalah waktu belum ada satu tool pun yang terbuka. Ada buku catatan. Ada fineliner. Kadang-kadang, ada kopi. Sisa hari itu bakal habis di depan layar, tapi jam pertama milik kertas. Menurut saya ini bukan sok estetik. Menurut saya ini tiang penyangga.Menggambar memaksa kamu berkomitmen tanpa sempat memoles. Waktu membuat sketsa layout, kamu tidak bisa tanpa sengaja terjebak di font picker, atau teralihkan oleh soal corner radius-nya harus 8 atau 12. Kenop yang kamu pegang cuma ini: letaknya di mana, seberapa besar, apa yang dekat dengan apa. Itulah masalah desainnya. Sisanya pekerjaan finishing.Hal lain yang dilakukan kertas adalah mempercepat fase divergen. Saya bisa membuat sketsa enam layout dalam waktu yang dibutuhkan Figma untuk me-render reflow autoLayout. Kebanyakan layout itu bakal jelek. Memang itu intinya. Lewat yang jelek, kamu menemukan yang bagus: kamu baru tahu sebuah layout itu bagus karena bisa membandingkannya. Kalau layout pertamamu jadi satu-satunya layout, itu cuma opini.Ada argumen tandingan bahwa tool AI (Cursor, v0, mainan terbaru dari Vercel) memangkas loop ini. Kamu mendeskripsikan sebuah layout, dapat empat versi, lalu pilih yang bagus. Saya juga memakainya. Tool itu bagus untuk bagian pekerjaan yang kamu sudah tahu mau bikin apa. Untuk bagian yang belum jelas, hasilnya lebih buruk: kamu akan dengan senang hati diberi empat versi rapi dari ide yang salah.Jadi saya tetap pakai buku catatan. Jam pertama untuk kertas, sembilan jam berikutnya untuk Figma, Framer, dan code editor. Hasil kerjanya terasa seperti satu keputusan, bukan seratus keputusan kecil, karena keputusan besarnya sudah saya ambil saat belum ada hal lain untuk dilihat.

Sources

Sumber Tautan keluar dari esai-esai ini.

Keep going

Masih ada lagi Bagian lain situs ini, tinggal sekali klik.

TentangSejak 2018Siapa yang membuatnya, dan dari mana.Kenalan dulu