[{"data":1,"prerenderedAt":450},["ShallowReactive",2],{"site-header":3,"site-footer-license":37,"article-tailwind-v3-0-rilis-jit-arbitrary-dan-banyak-lagi-with-latest":41},{"navigations":4},[5,20],{"collection":6,"item":7},"series",{"__typename":6,"title":8,"slug":9,"children_series":10},"Artikel","all",[11,14,17],{"title":12,"slug":13},"Algoritma dan Struktur Data","algoritma-struktur-data",{"title":15,"slug":16},"Konsep Dasar Pemrograman","konsep-dasar-pemrograman",{"title":18,"slug":19},"Kecerdasan Artifisial","kecerdasan-artifisial",{"collection":6,"item":21},{"__typename":6,"title":22,"slug":23,"children_series":24},"Tutorial","tutorial",[25,28,31,34],{"title":26,"slug":27},"Belajar Java","belajar-java",{"title":29,"slug":30},"Belajar Pascal","belajar-pascal",{"title":32,"slug":33},"Belajar Python","belajar-python",{"title":35,"slug":36},"Belajar Golang","belajar-golang",{"name":38,"url":39,"show":40},"CC BY-SA","https://creativecommons.org/licenses/by-sa/4.0/",false,{"article":42,"renderedBody":408,"renderedTakeaway":409,"latestArticles":410,"toc":433},{"id":43,"title":44,"slug":45,"excerpt":46,"published_at":47,"thumbnail_image":48,"tags":50,"reading_time":54,"takeway":55,"body":56,"authors":57,"series":58},"20","Tailwind v3.0 Rilis: Ada JIT, Arbitrary Values, dan Banyak Lagi!","tailwind-v3-0-rilis-jit-arbitrary-dan-banyak-lagi","Tailwind CSS v3.0 resmi dirilis dengan segudang peningkatan performa yang bikin proses coding makin asyik. Apa aja sih fitur andalan yang wajib dicoba?","2026-06-15T02:39:25.372Z",{"id":49},"d5e879fa-5cd0-4015-a155-b0cc69ff12fb",[51,52,53],"tailwind-css","css-framework","web-development",null,"- Fitur JIT (Just-in-Time) sekarang jadi mode default, bikin proses build jauh lebih kencang tanpa perlu PurgeCSS.\n- Arbitrary values memungkinkan penulisan nilai kustom langsung di class HTML menggunakan kurung siku.\n- Palet warna baru yang lebih kaya lengkap dengan fitur opacity modifier yang intuitif menggunakan tanda garis miring.","Kabar gembira! Tailwind v3.0 akhirnya resmi dirilis nih, yay! 🤩🎉\n\nBuat kalian yang belum tahu, Tailwind adalah *CSS framework* populer buat mempercantik tampilan *website*. Tapi beda dari *framework* kebanyakan, Tailwind ini membebaskan kita buat menata desain tanpa harus menulis baris-baris CSS manual. Kok bisa? Nah, soal itu kita bahas di lain kesempatan ya biar nggak kepanjangan.\n\nKemarin, tepatnya tanggal 9 Desember 2021 (kalian bisa intip *repository*-nya [di sini](https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0)), Tailwind meluncurkan versi ketiganya. Rilis kali ini membawa perbaikan performa yang signifikan, peningkatan alur kerja (*workflow*), dan pastinya segudang fitur baru. Kira-kira apa saja yang menarik buat dicoba? Yuk, mari kita bahas bareng-bareng! 😄\n\n## Fitur Baru dan Peningkatan Keren di Tailwind v3.0\n\nSebagai rilis paling dinanti sejauh ini, tim pengembang Tailwind menghadirkan banyak fitur apik yang nggak cuma mendongkrak produktivitas, tapi juga bikin *developer experience* (DX) makin mantap.\n\n> Tailwind CSS v3.0 has got to be our most exciting release ever...\n>\n> [tailwindcss.com](https://tailwindcss.com/blog/tailwindcss-v3)\n\nBeberapa fitur baru yang paling menonjol antara lain:\n\n* Mode *Just-in-Time* (JIT) sebagai bawaan — yang sebelumnya masih dalam tahap uji coba (*preview*).\n* Palet warna baru — termasuk tambahan warna untuk *box shadow* dan *text decoration*.\n* *Arbitrary values* — cara asyik buat menulis gaya *inline* dengan tetap pakai *utility class*.\n* *Print modifiers* — untuk mempermudah pengaturan tampilan saat halaman dicetak.\n* *Aspect ratio* — dukungan native untuk rasio aspek tanpa trik *padding* tambahan.\n* *Play CDN* — mencoba Tailwind JIT langsung di browser secara instan.\n* Dan masih banyak lagi tambahan *utility classes* lainnya!\n\nNah, berhubung fiturnya melimpah banget, kali ini kita bakal fokus membahas tiga fitur utama yang menurut saya paling keren dan berdampak besar. Buat daftar lengkapnya, kalian bisa langsung meluncur ke situs resmi [Tailwind CSS](https://tailwindcss.com/). Sekalian juga bisa baca-baca dokumentasinya yang ramah dan bersahabat banget buat dipelajari!\n\n## Bikin Website Makin Berwarna\n\nTailwind v3.0 hadir membawa banyak palet warna baru yang segar. Selama ini, pilihan warna bawaan Tailwind memang nggak pernah mengecewakan. Kerennya lagi, tim Tailwind mengklaim kalau semua skema warna ini dipilih secara manual (*hand-crafted*), nggak asal dibuat pakai script generator otomatis. Kalian bahkan bisa melihat pembuktiannya langsung di berkas JavaScript konfigurasi warna di *repo* GitHub mereka.\n\n> Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.\n>\n> [tailwindcss.com](https://tailwindcss.com/docs/customizing-colors)\n\nMulai dari variasi warna abu-abu, merah, oranye, ungu, sampai hitam-putih semua tersedia lengkap. Pilihan warna ini disusun rapi dengan tingkatan kontras yang presisi dari terang ke gelap.\n\n> 📷 *Ilustrasi: bagan palet warna bawaan Tailwind CSS dengan gradasi tingkat kecerahan dari skala 50 hingga 900.*\n\nMasih kurang puas dengan warna bawaan? Ingin pakai warna *custom* sendiri? Tenang, kalian tinggal mendaftarkannya saja di file konfigurasi `tailwind.config.js`.\n\nDi versi terbaru ini, Tailwind juga menambahkan dukungan warna khusus untuk *box shadow*, *text decoration*, dan *caret color* (warna garis kursor berkedip di *text box*).\n\nNggak berhenti di situ, ada juga fitur keren bernama *opacity modifier*. Fitur ini berfungsi buat mengubah tingkat transparansi (*opacity*) warna yang kita pasang. Caranya gampang dan intuitif banget, cukup tambahkan tanda garis miring `/` diikuti nilai persentase *opacity* yang kalian mau.\n\n```html\n\u003Cp class=\"bg-red/50 text-black\">\n  Teks hitam dengan latar belakang merah transparan 50%\n\u003C/p>\n```\n\n## Arbitrary Values: Inline Style dengan Gaya\n\nKalau dulu kita harus repot membuka dan mengubah file konfigurasi buat menambahkan ukuran atau warna *custom*, sekarang nggak perlu pusing lagi. Tailwind v3 memperkenalkan anotasi khusus untuk memasukkan nilai kustom langsung pada *utility class* yang sudah ada. Caranya gampang, cukup pakai tanda kurung siku `[...]` di belakang nama *utility*-nya.\n\nMisalnya, kalau kalian mau bikin teks dengan ukuran font `77px` dan warna biru `#0366D6`, kalian tinggal menuliskan kode *class* HTML seperti ini:\n\n```html\n\u003Cp class=\"text-[77px] text-[#0366D6]\">\n  Teks ini berwarna #0366D6 dengan ukuran 77px\n\u003C/p>\n```\n\nPraktis banget kan? Nggak perlu lagi bolak-balik buka file konfigurasi cuma buat satu-dua elemen unik! 🤩\n\nIngin bikin *styling* yang lebih kompleks kayak *box-shadow* kustom? Bisa juga dong:\n\n```html\n\u003Cdiv class=\"shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]\">\n  \u003C!-- Sama seperti properti CSS box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.3) -->\n\u003C/div>\n```\n\nBahkan lewat trik kurung siku ini, kita bisa menuliskan *custom properties* CSS yang belum didukung bawaan Tailwind. Jadi rasanya mirip menulis *inline style*, tapi dengan format yang rapi dan terintegrasi.\n\nKalian bisa pelajari trik selengkapnya di panduan resmi [Tailwind CSS docs](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-values).\n\n## Selamat Datang JIT, Selamat Tinggal PurgeCSS!\n\nNah, ini dia fitur juara yang menurut saya paling revolusioner di rilis kali ini. Meskipun mode JIT (*Just-in-Time*) sudah sempat diperkenalkan di Tailwind v2.1, statusnya waktu itu masih sebatas uji coba (*preview*). Walaupun tetap bisa dipakai normal tanpa kendala berarti, rasanya tetap beda dengan fitur yang sudah stabil.\n\nDulu, kalau kalian memakai Tailwind v2.2 dengan mengaktifkan mode JIT, terminal bakal memunculkan pesan peringatan (*warning*) bahwa fitur tersebut masih dalam tahap *preview* dan belum direkomendasikan untuk tahap produksi.\n\n> 📷 *Ilustrasi: pesan peringatan di terminal tentang status eksperimental mode JIT pada Tailwind CSS versi 2.2.*\n\nSekarang mode JIT diklaim sudah benar-benar matang dan resmi dijadikan sebagai mode bawaan (*default*) di Tailwind v3.0. Jadi, kita bisa mengucapkan selamat tinggal pada PurgeCSS! 🤟\n\nSedikit kilas balik, sebelum ada JIT, Tailwind memakai metode *tree-shaking* dengan bantuan PurgeCSS. Di awal pengembangan, kita bakal dibekali file CSS raksasa berisi seluruh *utility classes* yang ukurannya bisa mencapai sekitar `3MB`! Pas masuk proses produksi (*production build*), barulah sistem memindai file HTML untuk menyaring dan menghapus *utility classes* yang nggak terpakai biar ukuran file menyusut.\n\nDengan JIT, cara kerjanya dibalik 180 derajat. Tailwind memulai dari file CSS kosong. Setiap kali kalian menambahkan sebuah *utility class* di file HTML atau komponen, mesin JIT bakal langsung membuatkan *style* yang sesuai secara instan.\n\nKeuntungan terbesar dari mode JIT ini tentu saja performa. Proses kompilasi kode jadi jauh lebih cepat dibanding PurgeCSS tradisional. Saya sempat membandingkannya langsung di proyek yang sama, dan selisihnya bisa hemat sampai 15 detik! Kebetulan proyek tersebut memakai Nuxt dan PostCSS 8.\n\nSelain itu, ukuran file CSS pas tahap pengembangan (*development*) bakal sama rampingnya dengan versi produksi. Jadi nggak ada lagi cerita terminal lemot gara-gara harus memproses file CSS berukuran besar saat koding berjalan.\n\nBicara soal varian (*variants*), di Tailwind terbaru ini kita nggak usah ribet mendaftarkan varian seperti `active`, `focus`, atau `hover` di berkas `tailwind.config.js` lagi, karena semuanya otomatis digenerate berkat kehebatan JIT. Fitur *arbitrary values* yang kita bahas tadi juga bisa berjalan berkat kontribusi mode JIT ini.\n\n## Lanjut Pakai Tailwind?\n\nItulah beberapa fitur unggulan yang dibawa oleh Tailwind v3.0. Bagaimana? Tertarik buat langsung mencobanya di proyek kalian? Atau sudah siap-siap buat migrasi ke versi baru ini?\n\nKalian bisa langsung mampir ke [halaman instalasi Tailwind](https://tailwindcss.com/docs/installation) untuk mulai mencoba, atau tengok *repository* [GitHub Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) untuk melihat detail perkembangannya.\n\nSelamat berkoding ria 👋",[],{"id":59,"title":8,"slug":9,"articles":60,"parent_series":54},"9",[61,77,90,102,113,126,138,149,161,172,183,193,203,214,223,233,244,247,255,266,277,288,296,305,314,327,336,347,358,368,377,386,396],{"id":62,"title":63,"slug":64,"excerpt":65,"thumbnail_image":66,"tags":68},"41","Log Aggregation Modern dengan Grafana Loki dan Vector: Hemat Storage Tanpa Indeks Raksasa","log-aggregation-modern-grafana-loki-vector-hemat-storage","Klaster Elasticsearch kalian rakus RAM dan boros storage, ya? Padahal nggak semua kata di log perlu diindeks, lho. Yuk, kita kenalan sama duet Grafana Loki dan Vector yang jauh lebih ramah kantong!",{"id":67},"03c9d1a0-c80a-401d-9f2b-2b3ee7abb115",[69,70,71,72,73,74,75,76],"backend","observa","logging","grafana","loki","vector","devops","system-design",{"id":78,"title":79,"slug":80,"excerpt":81,"thumbnail_image":82,"tags":84},"45","Rate Limiting Algorithms: Token Bucket vs Leaky Bucket vs Sliding Window","rate-limiting-algorithms-token-bucket-leaky-bucket-sliding-window","Udah tahu kenapa *rate limiting* itu wajib, tapi masih bingung beda Token Bucket, Leaky Bucket, Fixed Window, dan Sliding Window? Yuk, kita adu empat algoritma ini bareng-bareng dan cari tahu mana yang paling pas buat API kalian!",{"id":83},"0e0ed26d-20c6-443c-bde1-4a6200f6f801",[69,76,85,86,87,88,89],"rate-limiting","redis","api-gateway","architecture","traffict-management",{"id":91,"title":92,"slug":93,"excerpt":94,"thumbnail_image":95,"tags":97},"16","Menggunakan TypeScript dengan Node.js dan Express","menggunakan-typescript-dengan-node-js-dan-express","Pengen bikin server Express di Node.js tapi pakai fitur-fitur keren TypeScript? Yuk, intip cara setup lengkapnya dari nol di sini!",{"id":96},"798b60f1-9ef5-4f73-8d43-85825fd86acc",[98,99,100,101],"javascript","nodejs","express","typescript",{"id":103,"title":104,"slug":105,"excerpt":106,"thumbnail_image":107,"tags":109},"17","Pemrograman Asynchronous vs Multithreading, Apa Sih Bedanya?","pemrograman-asynchronous-dan-multithreading-apa-bedanya","Sering dengar istilah asynchronous dan multithreading pas ngoding tapi masih bingung bedanya? Yuk, kita bedah perbedaannya lewat analogi bikin mi instan yang gampang dipahami!",{"id":108},"9c05d0ae-e829-4f1b-b9f7-a84f3e0439d3",[110,111,112],"pemrograman","concurrency","tips-coding",{"id":114,"title":115,"slug":116,"excerpt":117,"thumbnail_image":118,"tags":120},"33","Berkenalan dengan RabbitMQ: Si Kurir Pesan Serba Bisa","berkenalan-dengan-rabbitmq-si-kurir-pesan-serba-bisa","Pernah nggak sih kalian klik Bayar Sekarang dan notifikasi suksesnya muncul seketika, padahal email konfirmasi baru nyampe beberapa detik kemudian? Rahasianya ada di satu kurir tak terlihat. Yuk, kita kenalan sama RabbitMQ!",{"id":119},"f6620f79-b3b2-4f9c-8104-283a335e06c4",[121,122,69,123,124,125],"rabbitmq","message-broker","microservices","async","queue",{"id":127,"title":128,"slug":129,"excerpt":130,"thumbnail_image":131,"tags":133},"34","Kenapa Backend Butuh Database Connection Pooling?","kenapa-backend-butuh-database-connection-pooling","Pernah kena error Too many connections padahal CPU server masih santai di angka 30%? Masalahnya bukan di query kalian, tapi di cara aplikasi ngobrol sama database. Yuk, kenalan sama Connection Pooling!",{"id":132},"6f7a2d8c-2a37-4901-a522-50df8d9c0a20",[69,134,135,136,76,137],"database","postgresql","connection-pooling","performance",{"id":139,"title":140,"slug":141,"excerpt":142,"thumbnail_image":143,"tags":145},"27","Background Worker & Task Queue: Jangan Jalankan Proses Berat di Request HTTP!","background-worker-task-queue-jangan-jalankan-proses-berat-di-http","Pernah nggak sih kalian klik Daftar Akun lalu halaman loading muter sampai 15 detik tanpa kepastian? Penyebabnya klasik banget. Yuk, kita bahas kenapa proses berat nggak boleh dijalanin di request HTTP!",{"id":144},"e119c6ad-fc37-4b92-abdc-3eb20f8e34b4",[69,146,147,148,121,86,124],"task-queue","celery","fastapi",{"id":150,"title":151,"slug":152,"excerpt":153,"thumbnail_image":154,"tags":156},"28","Mengatasi N+1 Query Problem: Musuh Tersembunyi Performa Backend","mengatasi-n-plus-1-query-problem-musuh-tersembunyi-backend","Pernah bikin endpoint yang cuma nampilin 50 postingan beserta nama penulisnya, tapi response-nya lambat banget? Bisa jadi kalian kena N+1 Query. Yuk, kita bedah penyebabnya dan cara memberantasnya!",{"id":155},"34b94e14-3e9a-4778-9f1f-6df5898915fb",[134,157,158,159,160,137,69],"sql","orm","sqlalchemy","django",{"id":162,"title":163,"slug":164,"excerpt":165,"thumbnail_image":166,"tags":168},"30","Berkenalan dengan Bahasa Go: Kenapa Banyak Dipakai untuk Backend Modern?","berkenalan-dengan-bahasa-go-untuk-backend-modern","Kok bisa sih Go yang masih muda ini jadi bahasa andalan Docker sampai Kubernetes? Yuk, kita kenalan sama Goroutine, Channel, dan alasan dia hemat memori luar biasa!",{"id":167},"a368631c-f331-4c50-8322-1d0fc44927aa",[169,170,69,111,171,76],"golang","go","goroutine",{"id":173,"title":174,"slug":175,"excerpt":176,"thumbnail_image":177,"tags":179},"13","Hal yang Perlu Diperhatikan Sebelum Pindah ke Linux","hal-yang-perlu-diperhatikan-sebelum-pindah-ke-linux","Tertarik migrasi dari Windows ke Linux tapi masih ragu? Yuk, pelajari kelebihan, kekurangan, dan persiapan penting sebelum kamu benar-benar pindah!",{"id":178},"ae27713e-5025-4d13-88b6-efb4860cc5b3",[180,181,182],"linux","windows","foss",{"id":184,"title":185,"slug":186,"excerpt":187,"thumbnail_image":188,"tags":190},"11","Apa Kabar JavaScript? Rilis State of JS 2022","apa-kabar-javascript-rilis-state-of-js-2022","Survei State of JS 2022 resmi dirilis dengan lonjakan responden yang luar biasa! Framework dan build tool apa saja yang berhasil mencuri perhatian tahun ini?",{"id":189},"18df5262-d813-43d1-b1f7-5595a7f53602",[98,191,192],"web","news",{"id":194,"title":195,"slug":196,"excerpt":197,"thumbnail_image":198,"tags":200},"12","Buat PowerShell Lebih Berwarna dengan Starship","buat-powershell-lebih-berwarna-dengan-starship","Bosen sama tampilan PowerShell yang hitam putih dan kaku? Yuk, sulap terminalmu jadi lebih interaktif, estetik, dan berwarna pakai Starship!",{"id":199},"c5a8262b-43db-4479-8f6c-5a6a0d61653b",[201,181,202],"shell","powershell",{"id":204,"title":205,"slug":206,"excerpt":207,"thumbnail_image":208,"tags":210},"14","Instalasi Java dengan Visual Studio Code","instalasi-java-dengan-visual-studio-code","Mau belajar ngoding Java tapi spek laptop pas-pasan buat buka IDE berat? Yuk, cari tahu cara setup VS Code biar ngoding Java tetap lancar dan enteng!",{"id":209},"99b01cc2-11ac-4449-9927-a1a7116347df",[211,212,213],"howto","java","editor",{"id":215,"title":216,"slug":217,"excerpt":218,"thumbnail_image":219,"tags":221},"15","Kenapa Ada Banyak Sekali Distro Linux?","kenapa-ada-banyak-sekali-distro-linux","Pernah bingung pas mau install Linux tapi malah disuguhi puluhan pilihan distro? Tenang, kalian nggak sendirian. Yuk, cari tahu kenapa distro Linux bisa sebanyak itu dan apa bedanya!",{"id":220},"b5352a4b-f274-4489-aca9-36814947d514",[180,222],"distro",{"id":224,"title":225,"slug":226,"excerpt":227,"thumbnail_image":228,"tags":230},"18","React, Angular, atau Vue: Pilih Framework yang Mana?","react-angular-vue-pilih-framework-yang-mana","Bingung menentukan pilihan di antara React, Angular, dan Vue untuk proyek web kalian berikutnya? Tenang, yuk kita bandingkan kelebihan masing-masing di sini!",{"id":229},"ff111270-80c2-4ccb-83d7-d5ab8c021201",[53,231,232],"frontend","framework",{"id":234,"title":235,"slug":236,"excerpt":237,"thumbnail_image":238,"tags":240},"19","Static Typing dan Dynamic Typing: Apa Bedanya?","static-typing-dan-dynamic-typing-apa-bedanya","Pernah bingung kenapa di Java tipe data harus dideklarasikan, sementara di Python tinggal pakai aja? Yuk, cari tahu perbedaan static typing dan dynamic typing di sini!",{"id":239},"98e85e76-9e7b-42d1-b989-7c75e7f49abc",[241,242,243],"programming","types","comparison",{"id":43,"title":44,"slug":45,"excerpt":46,"thumbnail_image":245,"tags":246},{"id":49},[51,52,53],{"id":248,"title":249,"slug":250,"excerpt":251,"thumbnail_image":252,"tags":254},"21","TypeScript: JavaScript dengan Gaya dan Tipe Data Statis","typescript-javascript-dengan-gaya","Pernah pusing gara-gara runtime error di JavaScript? Yuk, kenalan dengan TypeScript yang bawa fitur static typing biar kode kalian makin rapi dan aman!",{"id":253},"f615bb1f-8e36-4d6c-9c2c-f1629407173c",[101,98,53],{"id":256,"title":257,"slug":258,"excerpt":259,"thumbnail_image":260,"tags":262},"22","Yang Baru di Nuxt 3: Nitro Engine, Vite, dan Fitur Keren Lainnya","yang-baru-di-nuxt-3-nitro-vite-dan-banyak-lagi","Nuxt 3 hadir membawa perubahan arsitektur besar-besaran untuk menyelaraskan dengan Vue 3. Penasaran apa saja peningkatan performa dan fitur barunya?",{"id":261},"8444bdbc-f60c-4d8b-8593-1b49400e8659",[263,264,265],"nuxt-3","vue-3","frontend-framework",{"id":267,"title":268,"slug":269,"excerpt":270,"thumbnail_image":271,"tags":273},"23","Kenapa Pakai FastAPI dan Kenapa Dia Kenceng Banget?","kenapa-pakai-fastapi-dan-kenapa-dia-kenceng-banget","Sering dengar FastAPI tapi masih bingung kenapa dia bisa ngebut kayak NodeJS dan Go? Yuk, kita bedah bareng rahasia ASGI, sihir Pydantic, sampai dokumentasi otomatisnya!",{"id":272},"84847c9e-70ab-4dcc-bed7-7be50165f7f4",[148,274,69,275,276],"python","asgi","pydantic",{"id":278,"title":279,"slug":280,"excerpt":281,"thumbnail_image":282,"tags":284},"26","REST API vs gRPC: Kapan Sebaiknya Mulai Pindah dari JSON?","rest-api-vs-grpc-kapan-sebaiknya-pindah-dari-json","Pernah nggak sih sistem mikroservis kalian mulai kerasa berat padahal cuma tuker-tukeran data internal? Belum tentu masalah servernya. Yuk, kita bahas kapan REST + JSON masih juara dan kapan gRPC jadi jawabannya!",{"id":283},"487500a0-9e09-469d-8736-1583c5ea83aa",[69,285,286,123,287,76],"grpc","rest-api","protobuf",{"id":289,"title":290,"slug":291,"excerpt":292,"thumbnail_image":293,"tags":295},"38","Optimistic vs Pessimistic Locking: Mengatasi Rebutan Data di Database","optimistic-vs-pessimistic-locking-mengatasi-rebutan-data-di-database","Seribu orang ngeklik \"Beli Sekarang\" di detik yang sama buat rebutan 1 tiket terakhir. Kira-kira apa yang bakal terjadi di server kalian? Yuk, kita banding *pessimistic* sama *optimistic locking*!",{"id":294},"21ab769d-6f82-4a22-be11-17ac16e9fb6b",[69,134,111,135,76,88,157],{"id":297,"title":298,"slug":299,"excerpt":300,"thumbnail_image":301,"tags":303},"24","Kenapa Butuh Rate Limiting?","kenapa-butuh-rate-limiting","Pernah nggak sih endpoint login kalian diserbu bot yang nyoba nembak ribuan password cuma dalam semenit? Yuk, kita bahas kenapa Rate Limiting itu wajib, plus cara masangnya di FastAPI!",{"id":302},"1401f9e5-6359-404a-8d80-273ddee9a372",[69,85,76,304,86,148],"api",{"id":306,"title":307,"slug":308,"excerpt":309,"thumbnail_image":310,"tags":312},"25","Kenapa Event Queue Bikin Backend Kalian Nggak Gampang Tumbang?","kenapa-event-queue-bikin-backend-kamu-nggak-gampang-tumbang","Pernah klik tombol Beli Sekarang dan notifikasi suksesnya muncul dalam sekejap, padahal di belakang layar ada invoice, email, sampai push notification yang harus dibuat? Rahasianya Event Queue. Yuk, kita bedah!",{"id":311},"d9e76018-fbcc-4c69-ad42-8f75ff229ecd",[69,76,313,122,88],"event-queue",{"id":315,"title":316,"slug":317,"excerpt":318,"thumbnail_image":319,"tags":321},"46","Mengapa C Mulai Ditinggalkan: Duel Filosofi Keamanan Rust vs Kesederhanaan Zig","mengapa-c-mulai-ditinggalkan-duel-filosofi-rust-vs-zig","Pernah denger kalau sekitar 70% celah keamanan kritis software modern itu asalnya dari bahasa C? Iya, bahasa yang udah jadi fondasi internet ini 😅. Yuk, kita bedah duel filosofi Rust vs Zig dan cari tahu mana yang pas buat proyek kalian!",{"id":320},"1942a5c9-c1f6-476d-9913-768f78d9d8eb",[322,323,324,325,326],"system-programming","rust","zig","c","memory-safety",{"id":328,"title":329,"slug":330,"excerpt":331,"thumbnail_image":332,"tags":334},"29","Memahami Database Indexing: Rahasia Query Super Cepat","memahami-database-indexing-rahasia-query-super-cepat","Query kalian mulai lelet padahal data baru nembus jutaan baris? Sebelum buru-buru *upgrade* server, yuk cek dulu *index*-nya. Yuk, kita bedah gimana *database indexing* sebenernya kerja!",{"id":333},"b123036f-1779-478c-a545-cf5f189b5fe9",[134,157,135,335,137,69],"indexing",{"id":337,"title":338,"slug":339,"excerpt":340,"thumbnail_image":341,"tags":343},"31","Mengenal Redis: Lebih dari Sekadar In-Memory Cache","mengenal-redis-lebih-dari-sekadar-in-memory-cache","Masih nganggep Redis cuma buat caching? Padahal dia bisa jadi leaderboard, message broker, sampai rate limiter lho. Yuk, kita bedah semua kemampuannya!",{"id":342},"9595b7d7-60e0-48f5-a715-f3cf60f34e1d",[86,69,344,345,346,274],"cache","nosql","in-memory",{"id":348,"title":349,"slug":350,"excerpt":351,"thumbnail_image":352,"tags":354},"32","Docker Compose untuk Developer Santai: Satu Perintah Buat Jalankan Semua Service","docker-compose-untuk-developer-santai","Pernah nggak kalian ngulang-ngulang perintah `docker run` cuma buat nyalain web, database, dan cache satu-satu? Capek, kan? Yuk, kita rapikan semuanya jadi satu file dan satu perintah!",{"id":353},"f4c08f1b-e0d0-410c-b091-c3618944fb3e",[355,356,75,357,69],"docker","docker-compose","containers",{"id":359,"title":360,"slug":361,"excerpt":362,"thumbnail_image":363,"tags":365},"35","Mengenal Idempotency Key: Rahasia Anti-Double Charge di API Pembayaran","mengenal-idempotency-key-rahasia-anti-double-charge-di-api-pembayaran","Pernah internet kalian ngadat pas lagi nekan tombol Bayar, terus panik ngekliknya tiga kali? Kalau endpoint-nya nggak idempotent, saldo bisa kepotong berkali-kali. Yuk, kenalan sama Idempotency Key!",{"id":364},"724cb83a-3ce5-4ee2-b0d7-533e3a0fc7df",[69,304,366,76,367,148,86],"idempotency","payment",{"id":369,"title":370,"slug":371,"excerpt":372,"thumbnail_image":373,"tags":375},"36","Mencegah Efek Domino di Mikroservis dengan Circuit Breaker Pattern","mencegah-efek-domino-di-mikroservis-dengan-circuit-breaker-pattern","Pernah nggak sih, satu fitur minor di aplikasi kalian mendadak lelet, eh malah bikin halaman checkout dan login ikut down total? Itu namanya *cascading failure*. Yuk, kita bahas gimana *circuit breaker pattern* (pemutus arus) nyelametin arsitektur kalian!",{"id":374},"c2e8e37f-8f9a-423f-a09d-74613b3c2924",[69,123,376,76,88],"circuit-breaker",{"id":378,"title":379,"slug":380,"excerpt":381,"thumbnail_image":382,"tags":384},"37","Kenapa Backend Butuh Graceful Shutdown? Jangan Asal Cabut Kabel Server!","kenapa-backend-butuh-graceful-shutdown-jangan-asal-cabut-kabel-server","Pernah nggak sih, abis kalian nge-*deploy* backend, beberapa detik kemudian monitoring malah banjir *alert* **502 Bad Gateway** dari pengguna? Saldo udah kepotong tapi status order belum keburu ter-*update* di *database*. Yuk, kita bahas kenapa *graceful shutdown* itu wajib banget!",{"id":383},"251a54a7-1d24-47fd-8cbc-a46fd42cbb6f",[69,75,148,355,385,76,88],"kubernetes",{"id":387,"title":388,"slug":389,"excerpt":390,"thumbnail_image":391,"tags":393},"39","Database Sharding vs Partitioning: Kapan Data Perlu Dipecah?","database-sharding-vs-partitioning-kapan-data-perlu-dipecah","Tabel transaksi kalian udah nembus miliaran baris dan tiap *query* laporan bikin *CPU* melonjak 100%? Sebelum asal pecah data, yuk kita pahami dulu beda *sharding* sama *partitioning*!",{"id":392},"08ef5fe5-d935-47b3-bbbc-d976948b2a9e",[69,134,135,76,88,394,395],"sharding","scaling",{"id":397,"title":398,"slug":399,"excerpt":400,"thumbnail_image":401,"tags":403},"40","Menyelami Distributed Tracing: Melacak Jejak Request di Balik Keruwetan Microservices","menyelami-distributed-tracing-melacak-jejak-request-microservices","Satu klik Checkout di backend kalian bisa memicu puluhan network call antar-service, tapi pas ada yang lambat, service mana sebenernya yang salah? Log aja nggak cukup buat njawab itu. Yuk, kita bedah Distributed Tracing!",{"id":402},"1ace92fa-b89c-4cef-ab75-4e4cd67a089c",[69,404,405,406,123,88,407],"distributed-systems","observability","open-telemetry","tracing","\u003Cp>Kabar gembira! Tailwind v3.0 akhirnya resmi dirilis nih, yay! 🤩🎉\u003C/p>\n\u003Cp>Buat kalian yang belum tahu, Tailwind adalah \u003Cem>CSS framework\u003C/em> populer buat mempercantik tampilan \u003Cem>website\u003C/em>. Tapi beda dari \u003Cem>framework\u003C/em> kebanyakan, Tailwind ini membebaskan kita buat menata desain tanpa harus menulis baris-baris CSS manual. Kok bisa? Nah, soal itu kita bahas di lain kesempatan ya biar nggak kepanjangan.\u003C/p>\n\u003Cp>Kemarin, tepatnya tanggal 9 Desember 2021 (kalian bisa intip \u003Cem>repository\u003C/em>-nya \u003Ca href=\"https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0\">di sini\u003C/a>), Tailwind meluncurkan versi ketiganya. Rilis kali ini membawa perbaikan performa yang signifikan, peningkatan alur kerja (\u003Cem>workflow\u003C/em>), dan pastinya segudang fitur baru. Kira-kira apa saja yang menarik buat dicoba? Yuk, mari kita bahas bareng-bareng! 😄\u003C/p>\n\u003Ch2 id=\"fitur-baru-dan-peningkatan-keren-di-tailwind-v3-0\">Fitur Baru dan Peningkatan Keren di Tailwind v3.0\u003C/h2>\n\u003Cp>Sebagai rilis paling dinanti sejauh ini, tim pengembang Tailwind menghadirkan banyak fitur apik yang nggak cuma mendongkrak produktivitas, tapi juga bikin \u003Cem>developer experience\u003C/em> (DX) makin mantap.\u003C/p>\n\u003Cblockquote>\n\u003Cp>Tailwind CSS v3.0 has got to be our most exciting release ever...\u003C/p>\n\u003Cp>\u003Ca href=\"https://tailwindcss.com/blog/tailwindcss-v3\">tailwindcss.com\u003C/a>\u003C/p>\n\u003C/blockquote>\n\u003Cp>Beberapa fitur baru yang paling menonjol antara lain:\u003C/p>\n\u003Cul>\n\u003Cli>Mode \u003Cem>Just-in-Time\u003C/em> (JIT) sebagai bawaan — yang sebelumnya masih dalam tahap uji coba (\u003Cem>preview\u003C/em>).\u003C/li>\n\u003Cli>Palet warna baru — termasuk tambahan warna untuk \u003Cem>box shadow\u003C/em> dan \u003Cem>text decoration\u003C/em>.\u003C/li>\n\u003Cli>\u003Cem>Arbitrary values\u003C/em> — cara asyik buat menulis gaya \u003Cem>inline\u003C/em> dengan tetap pakai \u003Cem>utility class\u003C/em>.\u003C/li>\n\u003Cli>\u003Cem>Print modifiers\u003C/em> — untuk mempermudah pengaturan tampilan saat halaman dicetak.\u003C/li>\n\u003Cli>\u003Cem>Aspect ratio\u003C/em> — dukungan native untuk rasio aspek tanpa trik \u003Cem>padding\u003C/em> tambahan.\u003C/li>\n\u003Cli>\u003Cem>Play CDN\u003C/em> — mencoba Tailwind JIT langsung di browser secara instan.\u003C/li>\n\u003Cli>Dan masih banyak lagi tambahan \u003Cem>utility classes\u003C/em> lainnya!\u003C/li>\n\u003C/ul>\n\u003Cp>Nah, berhubung fiturnya melimpah banget, kali ini kita bakal fokus membahas tiga fitur utama yang menurut saya paling keren dan berdampak besar. Buat daftar lengkapnya, kalian bisa langsung meluncur ke situs resmi \u003Ca href=\"https://tailwindcss.com/\">Tailwind CSS\u003C/a>. Sekalian juga bisa baca-baca dokumentasinya yang ramah dan bersahabat banget buat dipelajari!\u003C/p>\n\u003Ch2 id=\"bikin-website-makin-berwarna\">Bikin Website Makin Berwarna\u003C/h2>\n\u003Cp>Tailwind v3.0 hadir membawa banyak palet warna baru yang segar. Selama ini, pilihan warna bawaan Tailwind memang nggak pernah mengecewakan. Kerennya lagi, tim Tailwind mengklaim kalau semua skema warna ini dipilih secara manual (\u003Cem>hand-crafted\u003C/em>), nggak asal dibuat pakai script generator otomatis. Kalian bahkan bisa melihat pembuktiannya langsung di berkas JavaScript konfigurasi warna di \u003Cem>repo\u003C/em> GitHub mereka.\u003C/p>\n\u003Cblockquote>\n\u003Cp>Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.\u003C/p>\n\u003Cp>\u003Ca href=\"https://tailwindcss.com/docs/customizing-colors\">tailwindcss.com\u003C/a>\u003C/p>\n\u003C/blockquote>\n\u003Cp>Mulai dari variasi warna abu-abu, merah, oranye, ungu, sampai hitam-putih semua tersedia lengkap. Pilihan warna ini disusun rapi dengan tingkatan kontras yang presisi dari terang ke gelap.\u003C/p>\n\u003Cblockquote>\n\u003Cp>📷 \u003Cem>Ilustrasi: bagan palet warna bawaan Tailwind CSS dengan gradasi tingkat kecerahan dari skala 50 hingga 900.\u003C/em>\u003C/p>\n\u003C/blockquote>\n\u003Cp>Masih kurang puas dengan warna bawaan? Ingin pakai warna \u003Cem>custom\u003C/em> sendiri? Tenang, kalian tinggal mendaftarkannya saja di file konfigurasi \u003Ccode>tailwind.config.js\u003C/code>.\u003C/p>\n\u003Cp>Di versi terbaru ini, Tailwind juga menambahkan dukungan warna khusus untuk \u003Cem>box shadow\u003C/em>, \u003Cem>text decoration\u003C/em>, dan \u003Cem>caret color\u003C/em> (warna garis kursor berkedip di \u003Cem>text box\u003C/em>).\u003C/p>\n\u003Cp>Nggak berhenti di situ, ada juga fitur keren bernama \u003Cem>opacity modifier\u003C/em>. Fitur ini berfungsi buat mengubah tingkat transparansi (\u003Cem>opacity\u003C/em>) warna yang kita pasang. Caranya gampang dan intuitif banget, cukup tambahkan tanda garis miring \u003Ccode>/\u003C/code> diikuti nilai persentase \u003Cem>opacity\u003C/em> yang kalian mau.\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">HTML\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%3Cp%20class%3D%22bg-red%2F50%20text-black%22%3E%0A%20%20Teks%20hitam%20dengan%20latar%20belakang%20merah%20transparan%2050%25%0A%3C%2Fp%3E\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">p\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"bg-red/50 text-black\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  Teks hitam dengan latar belakang merah transparan 50%\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">p\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Ch2 id=\"arbitrary-values-inline-style-dengan-gaya\">Arbitrary Values: Inline Style dengan Gaya\u003C/h2>\n\u003Cp>Kalau dulu kita harus repot membuka dan mengubah file konfigurasi buat menambahkan ukuran atau warna \u003Cem>custom\u003C/em>, sekarang nggak perlu pusing lagi. Tailwind v3 memperkenalkan anotasi khusus untuk memasukkan nilai kustom langsung pada \u003Cem>utility class\u003C/em> yang sudah ada. Caranya gampang, cukup pakai tanda kurung siku \u003Ccode>[...]\u003C/code> di belakang nama \u003Cem>utility\u003C/em>-nya.\u003C/p>\n\u003Cp>Misalnya, kalau kalian mau bikin teks dengan ukuran font \u003Ccode>77px\u003C/code> dan warna biru \u003Ccode>#0366D6\u003C/code>, kalian tinggal menuliskan kode \u003Cem>class\u003C/em> HTML seperti ini:\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">HTML\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%3Cp%20class%3D%22text-%5B77px%5D%20text-%5B%230366D6%5D%22%3E%0A%20%20Teks%20ini%20berwarna%20%230366D6%20dengan%20ukuran%2077px%0A%3C%2Fp%3E\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">p\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"text-[77px] text-[#0366D6]\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  Teks ini berwarna #0366D6 dengan ukuran 77px\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">p\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Praktis banget kan? Nggak perlu lagi bolak-balik buka file konfigurasi cuma buat satu-dua elemen unik! 🤩\u003C/p>\n\u003Cp>Ingin bikin \u003Cem>styling\u003C/em> yang lebih kompleks kayak \u003Cem>box-shadow\u003C/em> kustom? Bisa juga dong:\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">HTML\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%3Cdiv%20class%3D%22shadow-%5B0_35px_60px_-15px_rgba(0%2C0%2C0%2C0.3)%5D%22%3E%0A%20%20%3C!--%20Sama%20seperti%20properti%20CSS%20box-shadow%3A%200%2035px%2060px%20-15px%20rgba(0%2C%200%2C%200%2C%200.3)%20--%3E%0A%3C%2Fdiv%3E\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">div\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">  <!-- Sama seperti properti CSS box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.3) -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">div\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Bahkan lewat trik kurung siku ini, kita bisa menuliskan \u003Cem>custom properties\u003C/em> CSS yang belum didukung bawaan Tailwind. Jadi rasanya mirip menulis \u003Cem>inline style\u003C/em>, tapi dengan format yang rapi dan terintegrasi.\u003C/p>\n\u003Cp>Kalian bisa pelajari trik selengkapnya di panduan resmi \u003Ca href=\"https://tailwindcss.com/docs/adding-custom-styles#arbitrary-values\">Tailwind CSS docs\u003C/a>.\u003C/p>\n\u003Ch2 id=\"selamat-datang-jit-selamat-tinggal-purgecss\">Selamat Datang JIT, Selamat Tinggal PurgeCSS!\u003C/h2>\n\u003Cp>Nah, ini dia fitur juara yang menurut saya paling revolusioner di rilis kali ini. Meskipun mode JIT (\u003Cem>Just-in-Time\u003C/em>) sudah sempat diperkenalkan di Tailwind v2.1, statusnya waktu itu masih sebatas uji coba (\u003Cem>preview\u003C/em>). Walaupun tetap bisa dipakai normal tanpa kendala berarti, rasanya tetap beda dengan fitur yang sudah stabil.\u003C/p>\n\u003Cp>Dulu, kalau kalian memakai Tailwind v2.2 dengan mengaktifkan mode JIT, terminal bakal memunculkan pesan peringatan (\u003Cem>warning\u003C/em>) bahwa fitur tersebut masih dalam tahap \u003Cem>preview\u003C/em> dan belum direkomendasikan untuk tahap produksi.\u003C/p>\n\u003Cblockquote>\n\u003Cp>📷 \u003Cem>Ilustrasi: pesan peringatan di terminal tentang status eksperimental mode JIT pada Tailwind CSS versi 2.2.\u003C/em>\u003C/p>\n\u003C/blockquote>\n\u003Cp>Sekarang mode JIT diklaim sudah benar-benar matang dan resmi dijadikan sebagai mode bawaan (\u003Cem>default\u003C/em>) di Tailwind v3.0. Jadi, kita bisa mengucapkan selamat tinggal pada PurgeCSS! 🤟\u003C/p>\n\u003Cp>Sedikit kilas balik, sebelum ada JIT, Tailwind memakai metode \u003Cem>tree-shaking\u003C/em> dengan bantuan PurgeCSS. Di awal pengembangan, kita bakal dibekali file CSS raksasa berisi seluruh \u003Cem>utility classes\u003C/em> yang ukurannya bisa mencapai sekitar \u003Ccode>3MB\u003C/code>! Pas masuk proses produksi (\u003Cem>production build\u003C/em>), barulah sistem memindai file HTML untuk menyaring dan menghapus \u003Cem>utility classes\u003C/em> yang nggak terpakai biar ukuran file menyusut.\u003C/p>\n\u003Cp>Dengan JIT, cara kerjanya dibalik 180 derajat. Tailwind memulai dari file CSS kosong. Setiap kali kalian menambahkan sebuah \u003Cem>utility class\u003C/em> di file HTML atau komponen, mesin JIT bakal langsung membuatkan \u003Cem>style\u003C/em> yang sesuai secara instan.\u003C/p>\n\u003Cp>Keuntungan terbesar dari mode JIT ini tentu saja performa. Proses kompilasi kode jadi jauh lebih cepat dibanding PurgeCSS tradisional. Saya sempat membandingkannya langsung di proyek yang sama, dan selisihnya bisa hemat sampai 15 detik! Kebetulan proyek tersebut memakai Nuxt dan PostCSS 8.\u003C/p>\n\u003Cp>Selain itu, ukuran file CSS pas tahap pengembangan (\u003Cem>development\u003C/em>) bakal sama rampingnya dengan versi produksi. Jadi nggak ada lagi cerita terminal lemot gara-gara harus memproses file CSS berukuran besar saat koding berjalan.\u003C/p>\n\u003Cp>Bicara soal varian (\u003Cem>variants\u003C/em>), di Tailwind terbaru ini kita nggak usah ribet mendaftarkan varian seperti \u003Ccode>active\u003C/code>, \u003Ccode>focus\u003C/code>, atau \u003Ccode>hover\u003C/code> di berkas \u003Ccode>tailwind.config.js\u003C/code> lagi, karena semuanya otomatis digenerate berkat kehebatan JIT. Fitur \u003Cem>arbitrary values\u003C/em> yang kita bahas tadi juga bisa berjalan berkat kontribusi mode JIT ini.\u003C/p>\n\u003Ch2 id=\"lanjut-pakai-tailwind\">Lanjut Pakai Tailwind?\u003C/h2>\n\u003Cp>Itulah beberapa fitur unggulan yang dibawa oleh Tailwind v3.0. Bagaimana? Tertarik buat langsung mencobanya di proyek kalian? Atau sudah siap-siap buat migrasi ke versi baru ini?\u003C/p>\n\u003Cp>Kalian bisa langsung mampir ke \u003Ca href=\"https://tailwindcss.com/docs/installation\">halaman instalasi Tailwind\u003C/a> untuk mulai mencoba, atau tengok \u003Cem>repository\u003C/em> \u003Ca href=\"https://github.com/tailwindlabs/tailwindcss\">GitHub Tailwind CSS\u003C/a> untuk melihat detail perkembangannya.\u003C/p>\n\u003Cp>Selamat berkoding ria 👋\u003C/p>\n","\u003Cul>\n\u003Cli>Fitur JIT (Just-in-Time) sekarang jadi mode default, bikin proses build jauh lebih kencang tanpa perlu PurgeCSS.\u003C/li>\n\u003Cli>Arbitrary values memungkinkan penulisan nilai kustom langsung di class HTML menggunakan kurung siku.\u003C/li>\n\u003Cli>Palet warna baru yang lebih kaya lengkap dengan fitur opacity modifier yang intuitif menggunakan tanda garis miring.\u003C/li>\n\u003C/ul>\n",[411,414,417,425],{"id":315,"title":316,"slug":317,"excerpt":318,"thumbnail_image":412,"tags":413},{"id":320},[322,323,324,325,326],{"id":78,"title":79,"slug":80,"excerpt":81,"thumbnail_image":415,"tags":416},{"id":83},[69,76,85,86,87,88,89],{"id":418,"title":419,"slug":420,"excerpt":421,"thumbnail_image":422,"tags":424},"44","Transactional Outbox Pattern: Solusi Konsistensi Database dan Message Broker Tanpa 2PC","transactional-outbox-pattern-konsistensi-database-message-broker","Pernah nggak kalian lihat pesanan udah masuk database, tapi email konfirmasinya nggak pernah kekirim? Itu gejala *dual-write problem*. Yuk, kita bedah Transactional Outbox Pattern biar data dan *event* kalian nggak lagi berselisih paham!",{"id":423},"e3c617fd-1486-4b82-b937-94fbec846c77",[69,123,88,134,122,76,135],{"id":426,"title":427,"slug":428,"excerpt":429,"thumbnail_image":430,"tags":432},"43","Dead Letter Queue (DLQ) & Retry Policy: Menyelamatkan Pesan Nyasar di RabbitMQ Tanpa Bikin Worker Macet","dead-letter-queue-retry-policy-rabbitmq-resilient-messaging","Pernah nggak sih, *worker* kalian nolak satu pesan terus-terusan sampai CPU melonjak 100%? Itu namanya *poison message loop*, jebakan klasik di RabbitMQ. Yuk, kita bahas cara pasang *retry policy* dan *dead letter queue* yang bener!",{"id":431},"6c0a7ead-4841-4073-b29e-df7ae0f2aa3c",[121,122,69,88,123,124,274],[434,438,441,444,447],{"text":435,"depth":436,"id":437},"Fitur Baru dan Peningkatan Keren di Tailwind v3.0",2,"fitur-baru-dan-peningkatan-keren-di-tailwind-v3-0",{"text":439,"depth":436,"id":440},"Bikin Website Makin Berwarna","bikin-website-makin-berwarna",{"text":442,"depth":436,"id":443},"Arbitrary Values: Inline Style dengan Gaya","arbitrary-values-inline-style-dengan-gaya",{"text":445,"depth":436,"id":446},"Selamat Datang JIT, Selamat Tinggal PurgeCSS!","selamat-datang-jit-selamat-tinggal-purgecss",{"text":448,"depth":436,"id":449},"Lanjut Pakai Tailwind?","lanjut-pakai-tailwind",1791045072750]