Catatan.
Kumpulan pelajaran dari kode, pekerjaan, keluarga, dan perjalanan kecil sehari-hari.
73 tulisanPilihan untuk mulai
012025-10-05
GitHub Copilot + VS Code + Marp = Slide Presentasi dalam Hitungan Menit
Pelajari cara membuat slide presentasi dengan cepat menggunakan GitHub Copilot, VS Code, dan Marp. Panduan ini memandu kamu menyiapkan tools dan memanfaatkan AI untuk menghasilkan konten, sehingga kamu bisa fokus menyampaikan ide tanpa repot dengan desain slide tradisional.
↗022025-05-096 Logical Fallacy yang Sering Terjadi di Dunia IT (dan Cara Menghindarinya)
Logical fallacy seperti appeal to authority dan false dilemma bisa berujung pada keputusan IT yang salah. Pelajari contoh dan cara menghindarinya di artikel ini.
↗032025-03-14Gunakan <button>, Bukan <div>, untuk Elemen yang Bisa Diklik
Menggunakan <button> alih-alih <div> untuk elemen interaktif meningkatkan aksesibilitas, navigasi keyboard, dan dukungan pembaca layar. Tombol secara alami dapat difokuskan, merespons Enter dan Spasi, dan membutuhkan lebih sedikit kode tambahan. Hindari kompleksitas yang tidak perlu, gunakan elemen semantik yang tepat untuk kegunaan yang lebih baik dan kepatuhan terhadap standar aksesibilitas web.
↗042025-02-17Contoh Widget React Grid Layout DnD dan Resizable
Postingan ini mendemonstrasikan cara membuat widget layout grid React dengan komponen yang bisa ditarik (draggable) dan diubah ukurannya (resizable) menggunakan pustaka react-grid-layout. Kita akan membangun dashboard sederhana dengan widget yang dapat diatur ulang oleh pengguna.
↗Semua tulisan
2026
19 tulisanMenjalankan TypeScript 7 dan ESLint Secara BerdampinganCara menjalankan compiler native TypeScript 7 untuk build dan type-check, sambil mempertahankan TypeScript 6 agar ESLint tetap memiliki akses ke Compiler API yang dibutuhkannya.↗Mengotomasi Ritual Pagi Kerja dengan Claude SkillCerita bikin satu Claude Skill untuk compress ritual pagi kerja—Teams, Forecast, Outlook, Gmail, sprint board, sampai standup—jadi satu alur terpadu.↗Socratic AI: Saat AI Membantu Kita Berpikir, Bukan Sekadar MenjawabSocratic AI menerapkan metode Socrates ke chatbot dan tutor virtual: AI tidak langsung memberi jawaban, tetapi menuntun pengguna lewat pertanyaan agar kemampuan berpikir tingkat tinggi tetap terlatih di era AI.↗Cara Aku Ngatur Uang: Budget Harian, Money Lover, dan Nabung-InvestasiSistem keuangan personal yang aku pakai sehari-hari: anggaran global di Money Lover yang kasih rekomendasi budget harian, kebiasaan nyatet tiap transaksi, sampai transfer manual rutin ke tabungan, deposito, dan SBN.↗Yang Aku Pelajari dari Pakai Sanity di Dua Project ClientCatatan dari dua project company profile dwibahasa yang aku bangun pakai Sanity dan Next.js — soal localized field, revalidation via webhook, live preview, sampai kebiasaan audit schema.↗1 Minggu Komuting Sepeda ke Kantor: Ini yang Aku PelajariSatu minggu penuh ngantor naik sepeda sejauh 24 km PP — dari soal posisi, helm, baju, hingga insiden pisang terbang.↗Vibe Coding Slideshow Galeri untuk Upacara Adat DesakuTahun ini aku jadi seksi Humas di upacara Caru Nawa Gempang di Desa Adat Celuk, dan salah satu tugasku adalah membuat slideshow foto untuk proyektor. Begini ceritanya.↗Serang Orangnya, Bukan Argumennya: Pelajaran Logika dari Kasus Pesta BabiKetika kritik terhadap film Pesta Babi dijawab dengan pertanyaan soal sumber dana, kita sedang melihat contoh ad hominem: menyerang orangnya, bukan isi argumennya.↗Cara Membangun Konten CMS Offline-First dengan TanStack Query, AsyncStorage, dan Contentful Sync APIPola praktis offline-first untuk aplikasi React Native dan Expo yang memakai Contentful, TanStack Query, AsyncStorage, dan Contentful Sync API.↗Maestro E2E Testing on a React Native Debug BuildMost Maestro guides assume you're testing against a release build. But during active development, you naturally want to test against the debug build that's already running. Here's how to handle the Metro bundler dev menu overlay that can break your tests.↗Bioskop di Tengah Jalan Berlubang: Sebuah Catatan tentang PrioritasKetika Rp 15,3 miliar dianggarkan untuk membangun bioskop di Gianyar, sementara jalan berlubang masih menjadi cerita sehari-hari warga — apakah ini langkah yang paling mendesak?↗Yang Tidak Diceritakan Orang Tentang Dua Tahun Pertama Punya AnakDua tahun pertama punya anak jauh lebih berat dari yang dibicarakan. Tentang kehadiran, support system, dan pentingnya kejujuran sebelum memutuskan.↗The Stress Loop: Framework Sederhana untuk Melewati Hari-Hari BeratBukan toxic positivity. Bukan menyalahkan diri sendiri. Hanya sebuah loop sederhana — Beri Nama, Tuliskan, Ambil Tindakan, Evaluasi — untuk melewati kebisingan di hari-hari yang berat.↗Stres Tidak Membayar TagihanmuStres adalah kondisi mental, bukan strategi. Mau kamu stres atau tidak, masalahnya tetap sama besarnya — yang penting adalah tindakan yang kamu ambil. Dan stres justru akan merusak kemampuanmu untuk bertindak.↗Berkembang bersama AI — tidak perlu setup yang luar biasaBerkembang bersama AI bukan tentang setup yang sempurna atau konfigurasi yang kompleks — tapi tentang kebiasaan yang terbentuk dari penggunaan nyata sehari-hari.↗Kerja Keras untuk Siapa?Banyak yang berdebat soal etos kerja — apakah worth it bekerja keras di tempat kerja? Jawabannya tergantung satu hal: kamu kerja keras untuk siapa.↗Cara Mengasah Skill yang Paling Penting di Era AIDekomposisi masalah, komunikasi teknis yang presisi, pemahaman konsep dasar, dan mindset code review bukan sekadar buzzword. Ini adalah skill konkret yang bisa dilatih — begini caranya.↗Programmer di Era AI: Arsitek, Bukan Sekadar Penulis KodeAI mengubah cara programmer bekerja. Tapi inti pekerjaan kita tidak pernah soal sintaks — selalu soal memahami masalah. Ini skill-skill yang justru makin penting.↗Logika di Balik Doa: Refleksi tentang Konsep Jalur LangitRefleksi tentang Jalur Langit: doa sebagai coping mechanism, survivorship bias, dan tawakal yang beririsan dengan stoikisme.↗
2025
51 tulisanTempa Rencanamu: Bagaimana AI Membantu Kita Melihat Jalan Lebih JelasPerencanaan adalah segalanya. Dengan AI, tempa terus seperti pedang, dan jalan akan menjadi jelas. Temukan bagaimana AI berperan sebagai pandai besi modern untuk mengasah rencanamu dan mengungkap arah tujuanmu.↗AI Berpikir dengan Percaya Diri, Anda Harus Berpikir KritisAI selalu terdengar percaya diri, namun bukan berarti ia selalu benar. Pelajari mengapa berpikir kritis lebih penting dari sebelumnya saat bekerja dengan alat bantu AI.↗Slimming Seperti Pohon Bonsai 🌳Pertumbuhan sejati terkadang berarti memangkas. Bonsai mengajarkan kita bahwa pemangkasan yang cermat menciptakan keseimbangan dan keindahan — dan prinsip yang sama berlaku dalam pekerjaan maupun kehidupan.↗Prioritas Testing di Era AI: Smoke Test dan Dokumentasi Terlebih DahuluPendapat saya tentang prioritas pengujian modern: mulai dengan smoke test dan dokumentasi, lalu tambahkan pengujian e2e, komponen, dan unit. Pendekatan praktis untuk pengembangan bertenaga AI.↗Pelajaran dari Bersepeda 🚴♂️Kembali bersepeda setelah bertahun-tahun mengajarkan tentang proses, kesadaran, dan kebahagiaan sederhana dalam hidup.↗Memperbaiki Bug 'Ghost Changes' di Bulk Edit TablesMenyelami proses debugging masalah state management yang rumit, di mana sistem mendeteksi perubahan yang sebenarnya tidak ada, dan bagaimana membandingkan dengan nilai asli berhasil memecahkan masalahnya.↗Hidup Itu Soal Terus BergerakKadang cara terbaik untuk menemukan makna bukan lewat perencanaan yang sempurna, tapi lewat gerakan sederhana, tetap hidup melalui tindakan, menjadi bagian dari ritme kehidupan.↗Jebakan Ekspektasi InstanBagaimana tuntutan hasil yang serba instan memicu keraguan diri, dan bagaimana usaha yang sabar dan konsisten membangun pertumbuhan yang tahan lama.↗GitHub Copilot + VS Code + Marp = Slide Presentasi dalam Hitungan MenitPelajari cara membuat slide presentasi dengan cepat menggunakan GitHub Copilot, VS Code, dan Marp. Panduan ini memandu kamu menyiapkan tools dan memanfaatkan AI untuk menghasilkan konten, sehingga kamu bisa fokus menyampaikan ide tanpa repot dengan desain slide tradisional.↗Paradoks Pilihan: Ketika Terlalu Banyak Opsi Sama Buruknya dengan Tidak Punya PilihanMengeksplorasi dampak psikologis dari terlalu banyak pilihan (choice overload) versus tidak punya pilihan sama sekali, dan bagaimana menemukan keseimbangan optimal untuk kesehatan mental.↗Work-Life Balance vs Work-Life Integrity: Memahami Dua Pendekatan Hidup ModernDalam dunia kerja modern, konsep work-life balance dan work-life integrity sering kali menjadi perdebatan. Artikel ini membahas perbedaan antara kedua pendekatan ini dan bagaimana masing-masing dapat diterapkan dalam kehidupan sehari-hari.↗🐞 Kuis: Temukan Bugnya – Deteksi Bahasa dari URLArtikel berbentuk kuis yang membahas bug umum dalam deteksi bahasa berbasis URL dan cara memperbaikinya.↗Ketika Stuck dan Menunggu Bantuan, Coba Rapikan Kodemu, Siapa Tahu…Refactoring kode saat buntu bisa jadi kunci menemukan bug dan membantu proses debugging.↗Pentingnya Test Case Manual: Saat Kode Tak Bisa Bicara, Skenario Harus BekerjaMengapa test case manual tetap penting meski automated testing sudah jadi standar, lengkap dengan template praktis untuk tim pengembangan.↗Saya Ingin Menggendong Anak Saya , Bukan Karena Terpaksa, Tapi Karena PilihanBahasa yang kita gunakan membentuk cara kita memandang dunia. Menggendong anak bukan beban, tapi pilihan yang penuh makna.↗Pengalaman Menggunakan KasPOS & Printer Blueprint ECO58D untuk Cetak Struk Bisnis KecilPengalaman menggunakan aplikasi kasir KasPOS untuk bisnis kecil dengan printer thermal Blueprint ECO58D. Simpel, tanpa langganan, dan bisa cetak struk.↗Conditional Rendering: Taruh di Dalam KomponenBest practice untuk menempatkan logika conditional rendering di dalam React component menggunakan context atau internal state.↗6 Logical Fallacy yang Sering Terjadi di Dunia IT (dan Cara Menghindarinya)Logical fallacy seperti appeal to authority dan false dilemma bisa berujung pada keputusan IT yang salah. Pelajari contoh dan cara menghindarinya di artikel ini.↗Best Practice Satu Branch per TicketMengapa satu Git branch per Jira ticket adalah best practice, dan bagaimana bekerja secara efisien ketika ticket-ticket saling bergantung satu sama lain.↗vscodeCusotmTheme: Tampilan Segar dan Rounded untuk Visual Studio CodeUbah tampilan Visual Studio Code kamu menjadi lebih segar dan modern dengan vscodeCusotmTheme karya mahmoud-asdf. Package kustomisasi sederhana namun efektif yang membuat pengalaman coding terasa lebih bersih dan kekinian.↗Programmer StoikBagaimana filosofi Stoik bisa membantumu tetap tenang dan efektif di dunia pengembangan perangkat lunak yang terus berubah.↗Pertanyaan SokratesPertanyaan Sokrates adalah cara yang ampuh untuk menggali lebih dalam, berpikir lebih jernih, dan mengungkap asumsi-asumsi tersembunyi. Pelajari cara menerapkan metode kuno ini dalam kehidupan modern.↗Tingkatkan Kualitas Kode dengan CodeMetrics di VS CodeUkur kompleksitas kode secara real-time menggunakan CodeMetrics, sebuah VS Code extension ringan yang membantu kamu menulis kode yang lebih bersih dan mudah dipelihara.↗Growth Mindset untuk Programmer: Cara Bertumbuh dan Sisi Negatif yang Perlu DiwaspadaiMengenal growth mindset secara sederhana, penerapannya dalam dunia kerja sebagai programmer, serta potensi sisi negatifnya yang perlu kamu tahu.↗Membangun State Machine dengan XState dan Menggunakannya di Berbagai React Components (TypeScript)Pelajari cara membangun state machine dengan XState dan menggunakannya di berbagai React components dalam TypeScript.↗Mengelola ClassName dengan clsx di ReactPelajari cara menggunakan clsx untuk mengelola className secara dinamis di React dengan lebih bersih dan efisien.↗EU Cyber Resilience Act (CRA): Meningkatkan Keamanan Siber Produk DigitalEU Cyber Resilience Act (CRA) bertujuan untuk meningkatkan keamanan siber produk digital dengan menetapkan kerangka kerja umum untuk persyaratan keamanan, pelaporan insiden, dan sertifikasi. Pelajari tentang ketentuan utama, implikasinya bagi bisnis, dan bagaimana CRA selaras dengan strategi keamanan siber Uni Eropa yang lebih luas.↗Perbandingan Lengkap Metode safeParse dan parse di ZodMemahami perbedaan antara safeParse dan parse di Zod sangat penting untuk validasi data yang efektif di TypeScript. Artikel ini membahas perbedaan perilaku, kasus penggunaan, dan kapan harus memilih salah satunya untuk memastikan penanganan error yang kuat dan mudah diprediksi di aplikasi kamu.↗Gunakan <button>, Bukan <div>, untuk Elemen yang Bisa DiklikMenggunakan <button> alih-alih <div> untuk elemen interaktif meningkatkan aksesibilitas, navigasi keyboard, dan dukungan pembaca layar. Tombol secara alami dapat difokuskan, merespons Enter dan Spasi, dan membutuhkan lebih sedikit kode tambahan. Hindari kompleksitas yang tidak perlu, gunakan elemen semantik yang tepat untuk kegunaan yang lebih baik dan kepatuhan terhadap standar aksesibilitas web.↗Simulasi Waktu di Cypress dengan cy.clock dan cy.tickSaat menulis test Cypress, ada skenario di mana kamu perlu memanipulasi waktu. Misalnya, menguji expiration session atau pembaruan UI yang terjadwal membutuhkan kontrol atas jalannya waktu. Di sinilah `cy.clock()` dan `cy.tick()` sangat berguna.↗Menangkap dan Menyimpan Request Headers di Chrome ExtensionPelajari cara menangkap dan menyimpan request headers di Chrome extension menggunakan webRequest API.↗Spot the Bug: Memperbaiki Nilai Maksimum yang Salah di JavaScriptMenyelami bug JavaScript yang umum terjadi saat mencari nilai maksimum dalam sebuah array dan cara memperbaikinya.↗Mengecek apakah Sebuah Point Berada di Dalam Polygon dengan Turf.jsPerlu tahu apakah sebuah point berada di dalam polygon di JavaScript? Fungsi turf.booleanPointInPolygon memudahkan hal ini!↗Contoh Widget React Grid Layout DnD dan ResizablePostingan ini mendemonstrasikan cara membuat widget layout grid React dengan komponen yang bisa ditarik (draggable) dan diubah ukurannya (resizable) menggunakan pustaka react-grid-layout. Kita akan membangun dashboard sederhana dengan widget yang dapat diatur ulang oleh pengguna.↗Teknik Grounding 5-4-3-2-1: Debugging Kecemasan ala ProgrammerPelajari bagaimana teknik grounding 5-4-3-2-1 bisa membantumu men-debug kecemasan layaknya seorang programmer. Reset mental ini menggunakan input sensorik untuk memutus siklus overthinking dan membawa fokus kembali ke momen saat ini.↗Perbedaan Antara Functional Testing dan Visual TestingFunctional testing memeriksa apakah aplikasi berfungsi sesuai harapan, sementara visual testing memastikan tampilan UI terlihat benar. Menggabungkan keduanya menjaga aplikasi tetap fungsional dan konsisten secara visual.↗Event-Driven ProgrammingEvent-driven programming adalah paradigma pemrograman di mana alur program ditentukan oleh events seperti aksi pengguna, output sensor, atau pesan dari program/thread lain.↗Kekuatan Memulai dari Hal Kecil: Mengapa POC Itu PentingMembuat Proof of Concept (POC) adalah strategi yang ampuh untuk menghadapi tantangan perangkat lunak yang kompleks. Dengan menguji ide menggunakan implementasi minimal, developer bisa memvalidasi kelayakan, menemukan hambatan lebih awal, dan meningkatkan efisiensi. Artikel ini membahas manfaat, kasus penggunaan, dan langkah-langkah membangun POC yang efektif.↗Memahami ID dan UUID: Apa Bedanya?Unique identifier memainkan peran penting dalam pengembangan software. Artikel ini membahas perbedaan antara ID dan UUID, kapan sebaiknya digunakan, serta praktik terbaik dalam memilih identifier yang tepat.↗Mengoptimalkan Penanganan Input Pengguna dengan `useDebounce` di ReactMenangani input pengguna secara efisien adalah hal yang krusial dalam aplikasi web modern. Di React, pembaruan state yang terlalu cepat bisa menyebabkan masalah performa dan API call yang tidak perlu. Hook `useDebounce` hadir sebagai solusi untuk menunda eksekusi fungsi sampai pengguna berhenti mengetik atau berinteraksi. Dalam artikel ini, kita akan mengeksplorasi `useDebounce` menggunakan analogi sederhana: sistem lampu lalu lintas. Kita akan membahas implementasinya, kapan sebaiknya digunakan, dan best practices-nya.↗TypeScript 5.8 dan Flag --erasableSyntaxOnly: Meningkatkan Kompatibilitas JavaScript dan Mempersiapkan Codebase untuk Masa DepanTypeScript 5.8 memperkenalkan compiler flag --erasableSyntaxOnly yang dirancang untuk meningkatkan kompatibilitas dengan sistem tipe JavaScript yang terus berkembang. Flag ini membatasi penggunaan elemen syntax yang tidak bisa dihapus begitu saja, seperti enums, namespaces, dan parameter properties, yang membutuhkan transformasi saat runtime. Dengan begitu, pemisahan antara type annotations dan kode yang dieksekusi menjadi lebih bersih. Artikel ini membahas implikasi dari fitur ini, kesesuaiannya dengan proposal JavaScript terkini, serta potensi dampaknya terhadap praktik pengembangan TypeScript.↗JavaScript flatMap(): Transformasi dan Perataan Data Secara EfisienMenangani data terstruktur secara efisien adalah tugas krusial dalam JavaScript, terutama saat bekerja dengan nested array atau memproses respons API. Fungsi `flatMap()` menawarkan solusi yang elegan dengan menggabungkan mapping dan flattening dalam satu langkah. Artikel ini membahas bagaimana `flatMap()` menyederhanakan konversi data, khususnya saat berurusan dengan struktur data bersarang seperti respons API.↗Mengotomatiskan Perintah dengan VS Code TasksVS Code punya sistem task yang membantu mengotomatiskan perintah-perintah berulang seperti menjalankan script, menginstall dependency, dan mengeksekusi test. Dengan menggunakan `tasks.json`, developer bisa mendefinisikan dan menjalankan perintah umum secara efisien. Artikel ini membahas dasar-dasar konfigurasi dan menjalankan task di VS Code.↗Menggunakan Kombinasi Atribut Data untuk React KeysDalam React, memberikan prop `key` yang unik pada setiap elemen dalam sebuah list sangat penting untuk performa dan konsistensi UI. Ketika identifier unik alami seperti `id` tidak tersedia, developer sering kali menggunakan index array sebagai solusi, yang justru bisa memicu masalah pada UI. Pendekatan yang lebih baik adalah membuat key yang unik dengan menggabungkan beberapa atribut data. Artikel ini membahas cara efektif menggunakan kombinasi atribut data sebagai key di React list.↗Memahami Perilaku Height CSS Flexbox dengan flex-growArtikel ini membahas interaksi yang kompleks antara property `flex-grow` di CSS Flexbox dan pengaturan height secara eksplisit, dengan fokus khusus pada bagaimana `height: 0px` memengaruhi perilaku elemen di dalam flex container. Memahami hubungan ini sangat penting bagi web developer yang bekerja dengan responsive layout dan scrollable content area.↗Bukan Hanya npm update, Tapi Juga npm outdated: Panduan Lengkap dengan ContohTemukan mengapa menjalankan npm outdated sama pentingnya dengan npm update untuk mengelola dependency proyek Node.js kamu. Panduan lengkap ini menjelaskan bagaimana npm outdated memberikan wawasan penting tentang package yang sudah usang, membantu kamu tetap aman, efisien, dan up-to-date. Pelajari dengan contoh detail, langkah-langkah praktis, dan tips untuk mengintegrasikan perintah ini ke dalam workflow kamu.↗Memahami Partial Type di TypeScriptArtikel ini membahas utility type `Partial` di TypeScript, mulai dari cara kerjanya, kapan sebaiknya digunakan, hingga penerapan praktisnya untuk mengelola optional properties secara efisien di berbagai skenario.↗Perbedaan `null` dan `undefined` di JavaScript: Penjelasan dan Contoh PenggunaanPahami perbedaan utama antara `null` dan `undefined` di JavaScript, mulai dari definisi, contoh penggunaan, hingga best practices kapan dan bagaimana menggunakannya. Kuasai konsep fundamental ini untuk menulis kode yang lebih bersih dan efektif.↗Menguasai requestAnimationFrame: Panduan Animasi Halus di JavaScriptPelajari cara membuat animasi yang halus dan efisien di JavaScript menggunakan requestAnimationFrame. Temukan manfaatnya, contoh praktis, dan tips untuk mengoptimalkan animasi demi performa terbaik dan pengalaman pengguna yang mulus!↗TDD: Kunci dari Koding AI Otonom dengan Claude CodePelajari bagaimana Test-Driven Development memungkinkan Claude Code bekerja lebih otonom, melakukan verifikasi mandiri pada perubahan, dan menghasilkan kode yang berfungsi dengan intervensi manusia minimal.↗Langkah Mudah Membuat QR Code untuk Ulasan di Google MapsQR Code adalah solusi praktis yang bisa digunakan untuk langsung mengarahkan pengguna ke halaman ulasan Google Maps bisnis kamu. Di artikel ini, aku akan tunjukkan cara membuat QR Code dengan mudah dan cepat yang bisa kamu gunakan untuk meningkatkan jumlah ulasan di Google Maps.↗
2024
3 tulisanCuci Muka, Segar Seketika, Kerja Pun Jadi Lebih SegarSaat merasa stuck, kelelahan, atau kewalahan, percikan air sederhana bisa membuat perbedaan besar. Cuci muka membantu saya me-reset diri, menyegarkan pikiran, dan tetap bertahan, bahkan di hari-hari paling berat sekalipun.↗Bagaimana Time Blocking Meningkatkan Produktivitas dan Kesejahteraan SayaSaya menemukan bahwa menggunakan time blocking membantu saya mengelola waktu dan energi dengan lebih efektif. Pendekatan sederhana ini telah meningkatkan produktivitas dan kesejahteraan saya.↗Bagaimana Pomodoro Kustom Mengatasi Masalah 'Hard Restart' SayaKesulitan kembali fokus setelah istirahat? Saya memodifikasi teknik Pomodoro dengan menambahkan fase review singkat, dan hasilnya luar biasa untuk produktivitas saya. Begini cara kerjanya!↗