Ngobrolin Astro
Ringkasan Episode
Bantu KoreksiEpisode ini membahas secara mendalam tentang fitur server-side Astro yang menjadikannya framework yang sangat versatile. Diskusi dimulai dengan pembahasan mengapa Astro menjadi favorit banyak developer akhir-akhir ini - kemampuannya mengakomodasi berbagai jenis developer dengan UI library yang berbeda-beda dalam satu proyek. Topik utama meliputi sistem file-based routing, API routes yang bisa mengembalikan JSON, middleware, helper untuk cookies, data fetching dengan web standard, dan konsep Island Architecture di sisi server (Server Islands) yang memungkinkan on-demand rendering untuk konten yang dinamis. Fitur menarik yang dibahas adalah Astro Actions - RPC-like function dengan type safety dan validasi input otomatis yang memudahkan komunikasi antara client dan server tanpa boilerplate code. Episode juga membahas ekosistem adapter Astro untuk berbagai platform deployment seperti Node.js, Cloudflare Workers, Vercel, dan Netlify.
Poin-poin Utama
- β’Astro sangat versatile karena bisa mengakomodasi berbagai UI library (React, Svelte, Vue, dll) dalam satu proyek tanpa perubahan signifikan
- β’Menggunakan file-based routing di src/pages dengan dukungan dynamic routes dan API routes untuk endpoint JSON
- β’Server Islands memungkinkan on-demand rendering komponen tertentu tanpa memηΊη² performance keseluruhan halaman
- β’Astro Actions menyediakan type safety dan validasi input otomatis untuk fungsi server yang bisa dipanggil dari client atau server-side
- β’Helper bawaan untuk cookies memudahkan operasi get, set, dan delete dengan TypeScript auto-completion
- β’Ekosistem adapter yang luas memungkinkan deployment ke berbagai platform seperti Node.js, Cloudflare Workers, Vercel, dan Netlify
- β’AstroDB menyediakan ORM sederhana dengan koneksi ke libSQL, SQLite, atau database lain
Dapatkan hanya di Domain Asia
Selamat malam
Mana?
Yang lain lah, ini kayak...
Ini kalau bingung ya
Eh, next time
Bikin pakai itu aja random
Pakai scene ID, scene ID nya si itu
Si Google sebenernya
Oh, si Google ya. Sekarang nyobain ya, bikin
Bikin soundboard
Iya, jadi kita masukin aja prom nya
Kalau kita tuh lagi mau ngomongin tentang
Astro, contohnya malam ini
Hari ini, hari apa
Kondisi hati seperti apa
Terus
Terus suar dia play aja
Pakai scene ID
Bikin soundboard
Gadakan
Soundboard, kita kan isinya
Cuma buat kelompok, lawak, jaringnya
Jangan potong
Justru itu, jadi
Apa, kita bikin otomatis
Gitu ya
Bisa nggak ya? Gak usah otomatis, manual aja dulu
Oke, manual aja
Oh, tema ya, thematik ya
Lihat transkrip lengkap (2647 segmen lagi)
Jadi begitu mulai, langsung mulai
Soundnya
Emang udah dapet akses ya?
Udah dapet akses ya?
Oh belum
Kira ini udah dapet
Eh pesan sponsor dulu, pesan sponsor
Oh pesan sponsor
Siapa yang bacain?
Saya saja deh
Oke, episode ini
Disponsori
Ya bukan sponsori ya
Hasil kolaborasi dengan Domenicia
Nah
Kalau temen-temen yang mau
Yang tertarik mau beli layanan Domenicia
Terutama
Ini ya, apa namanya
Jasa hosting ya
Hosting, bisa pakai
Promo code nya ngobrolin
WebDN, nanti dapet diskon
10% untuk semua paket
Web hosting
Berlaku untuk siklus 1 atau 2 tahun
Di pembelian pertama
Jadi kalau mau langsung 2 tahun, ya dapet
Diskon 10%
Kemarin nyobain beli domain
Host Node.js juga
Oh iya, bisa Host Node.js
Rust, Go
Dan berbagai platform
Moderan lainnya
Kemarin saya cobain, beli domain
Tapi gak dapet, gak dapet 10%
Diskon nya gak, gak diskon
Gak diskon
Bukan hosting Nessia ya
Domenicia, tapi
Diskon nya, diskon hosting
Domain dan hosting Nessia
Mungkin dimulainya dari domain dulu
Jalan domain
Nanti kita undang
Nanti kita undang CTO
Kenapa namanya Domensia ya
Uy, CTO nya, kenal ya
Kenal
Samparin aja langsung ke kantor nya
Saya ketemu waktu di Jogja
Saya ketemu waktu di
Manila
Oke, ya terima kasih ya
Buat Domensia, buat sponsor
Episode kali ini
Oke, malam ini kita akan membahas
Kembali tentang Astro
Untuk yang keberapa kali ya
Untuk yang 3 kali ya
Kedua
Kedua
Kali yang pertama kan cuma
Astro in general
Astro in general, oh iya
Yang kedua baru What's New in Astro kan
Sebenarnya kan, yang baru-baru
Dari versi 4
Ke versi 5, 4
Doang Astro, emang ada lagi
Yang
Enggak ada ya
Cuma satu ya, baru satu ya
Oh iya
Astro update itu
Enggak ada ya, yang baru di Astro 4
Oh iya, yang baru di Astro 5
Enggak ada ya, oh enggak ada
Berarti baru satu ya
Jadi dulu kita pernah bahas Astro
Saat bahas
Island architecture
Ya itu juga masuk, jadi ini
Menyempil ya
Terus pas kita bahas, apalah misalnya
Bahas tentang feed, apa feedcon
Terus service-surveillance
State of JS, kan pastinya banyak
Topik Astro juga ya
CSS Rap juga pakai Astro kan
Oh iya bener
Makanya kita nanya
Tapi kita kebahas Astronya
Pasti itu kan
Terus
CSS Rap
Terus apa, coding agen
AI coding agennya Google
Jules
Pakai Astro
Oh, menurut teman-teman
Kenapa Astro bisa populer ya
Kenapa Astro bisa populer ya
Cantumkan di kolom komentar
Ya coba, coba
Ada yang udah pakai atau ada yang
Udah nyoba, terus pengalamannya
Dimana, terus
Kira-kira dibandingkan dengan framework lain
Apa yang membuat Astro
Apa ya, kayak jadi
Favorit akhir-akhir ini ya
Jadi favorit
Karena bosan dengan teyak
Nggak sih, sebenarnya kalau populer
Bisa dong
Semua UI library bisa
Nggak, cuma tiga kan, nggak semua
Ya, tiga sama
Astro diangkat
Agak relatif ya
Sebetulnya kalau buat kerja
Konteks kerja, ya kalau menurut gue sih
Masih
Belum menyamai Next.js
Misalnya
Gampangnya kalau di kantor
Yang pendeknya
Establish lah, bukan agensi
Kalau agensi mungkin projeknya karena banyak
Dan kota ganti bisa nyoba lebih
Relatif, lebih bisa nyoba hal baru ya
Cuma kalau misalnya bukan
Di agensi
Pakai Astro, buy-in-nya mungkin
Belum sekuat
Next.js kecuali emang
Yang perusahaan yang
Teknologi orientif ya, kayak kalau
Kerja di Google gitu
Ya mungkin buy-in-nya lebih gampang ya
Karena produknya juga kan banyak
Misalnya di Google itu
Yang pakai Astro kan
Jules, terus
Firebase kalau nggak salah, dokumentasinya
Atau punya block page-nya
Firebase
Itu kan kayak produk yang terpisah kecil-kecil
Jadi mungkin dapetin buy-in-nya relatif
Lebih gampang ya
Dan di tempat kerja
Para developer-nya up-to-date
Sama trend, nah tapi kan
In reality, dalam kehidupan nyata
Nggak semua tempat kerja
Orang-orangnya kayak kita lah
Kesaranya yang emang
Tertarik coba
Teknologi-teknologi
Baru terus, jadi sebenarnya ya
Kalau soal kebularitas itu
Astro sudah nyediain lho
Migrate from Next.js
Migrate from many thing itu ada tuh
Migrate from Eleventy
Migrate from Gatsby
Iya iya iya iya iya iya
Boleh boleh boleh
Dari kantor
Kalau apa?
Di apa?
Di kiri, di kiri
Menurut kiri
Nah tuh banyak tuh
Migrate dari Eleventy, Gatsby
Pelikan? Pelikan ini?
Oh Python
Pelikan, Spellkit
Migrate dari Fort WordPress saja ada tuh
Oh iya benar
Kan
Apa? Eka juga
Salah satu yang ngikutin Spellkit
Dan Spellkit ikutin nggak Spellkit?
Sempet kan ya
Ngikutin cuma nggak intensi banget
Nggak intensi ya? Terus kenapa tiba-tiba
Berubah jadi favoritnya jadi ke
Astro, bukan ke Spellkit lagi sekarang
Alasannya apa sih?
Ya karena versatile, sangat versatile
Nah apa?
Nah kita kan kalau yang episode ini
Kesempatan nya apa? Kebahas soal server
Site-nya ya, jadi
Ya, sisi server-nya
Framework group kan makin lama makin
Apa ya? Makin luas kayak runtime
Nambah banyak
Di sisi server-nya
Terus di sisi
Frontend-nya juga jelas
UI Library dan UI Framework
Bukan tampak banyak
Nah Astro itu termasuk yang
Relative bisa
Versatile banget, kayak bisa
Adaptasi ke
Macam-macam kebutuhan itu
Itu yang belum ditemuin, ya Relative
Belum ditemuin di berbagai framework
Meta framework lainnya sih
Jadi kayak contoh gampangnya tadi
Misalnya kalau migrate dari
Next.js UI komponennya kan
Udah pake React semua tuh
Nggak usah kalau
Utip sisi Frontend-nya
Relative nggak perlu banyak perubahan
Nah, terus
Kalau yang server-side-nya
Nanti kita bahas lebih detail kan
Apa sih yang teori bisa jadi
Express-nya versi jaman sekarang
Cuma kalau dari Frontend
Ya itu, mau dari swell kit
Dari swell kit kan berarti otomatis
Semua komponennya pake swell
Nah, itu nggak perlu ada pekerjaan ekstra
Bahkan mau nyampur
Mau nyampur berbagai
Komponen, misalnya ada satu tim yang
Somehow ngerjain pake React
Ada tim lainnya
Bikin komponennya pake swell
Nah, itu semua harus digabung dalam satu proyek
Astro bisa
Itu lumayan menunjukkan
Ya, jadi nggak
Kalau menurut itu sih memuaskan
Bikin semua macem-macem
Genis developer, ya itu
Developer, swell, terus mau pake
Apalah, mau pake, ya dengan segala
Ecosystem-nya ya, mau pake tailwind
Boleh, orang performance yang
Apa, peduli banget sama performance
Bisa pake yang cuma .Astro
Yang by default
Tanpa pake inside Java Strip sama sekali
Jadi kayak bisa bikin
Banyak pihak sih
Oke, oke
Tapi menarik juga ya, maksudnya
Waktu beberapa episode yang lalu
Kan kita sempat
Interview tim Google
Yang bikin CSS rap kan
Mas Adam
Sama
Bramus
Bramus
Vandem
Terus
Sebenarnya ini pertanyaan telat sih
Harusnya ditanyakan ke mereka ya
Kenapa mereka lebih memilih Astro dibandingkan
Kalau dulu ingat nggak
Ada loh dia jawab
Ada ya
Kita tanya ya
Ada, dia jawab
Kita bahas
Kita bahas ya
Oh nggak inget ya alasannya kenapa
Itu tadi
Yang mereka bisa lulis dengan
Routingnya
Routing dan lain-lain
Mereka bisa lulis simple CSS
Jadi maksudnya
Tak perlu di
Mereka pakai .Astro
Astro Komponen
Yaudah Java Strip aja
CSS nya Vanilla CSS
Tapi semua otomatis
Ya maksudnya diolah
Pake teknologi ya
Standard default ya
Karena mereka dari perspektif mereka
Sebagai orang yang root-end banget kan
Tapi dengan
Kenyamanan kemudian meta framework modern
Jadi ya itu tadi
Maksudnya bisa mengakomodasi
Memfasilitasi berlalu macam-macam jenis developer sih
Flexibel ya
Flexibel ya
CSS berarti itu kan minimal
Java Strip banget nggak ada
Bahkan katanya Java Strip itu hanya untuk
Kalau nggak salah hanya
Vector fitur yang minor
Dan semuanya CSS
Ya sekaligus
Showcase bahwa CSS sekarang udah bisa
Melakukan banyak hal gitu
Yang dulu butuh Java Strip untuk
Animasi ini untuk
State itu tapi sekarang sudah bisa
Dihandle sama CSS kan ya
Salah satunya yang kita bahas minggu lalu
Kayak bikin karussel aja udah bisa full
Semuanya CSS Vanilla gitu kan
Yang kalau dulu harus pakai library
Atau harus pakai Java Strip
Mungkin itu juga ya alasannya ya
Karena kan
Maksudnya nulis CSSnya jadi gampang
Kayak mereka tuh beneran nulis CSS
Beneran
Di import, di scope
Pohnya diolah sama Astro
Cuma maksudnya nggak harus
Apalah install-install apa
Udah beneran function
Iya yang paling make sense sih
Kalau dipaksain pakai
Angular
Dungkir balik kali mereka ya
Ya kalau Angular kan
Biar bisa import misalnya
Import file CSS
Harus install loader misalnya atau
Angular nggak bisa cuma nulis
Style tag apa
Di dalam komponenya sendiri bikin
Style literally style tag
Terus dalamnya vanilla CSS
Ya nggak bisa kan, harus ya ada caranya
Atau harus cari-cari dulu
Loader atau apalah
Betul, betul, betul, oke, oke
Iya
Ini apa namanya
Teman-teman yang menonton
Udah ada yang pakai Astro
Belum sih, kalau kita
Kayaknya baru mengagumi dari jauh ya
Belum pernah bener-bener pakai buat
Production, buat produk
Mainan di lokal saja
Hanya sekadar tahu
Sekadar tahu
Jadi kalau ditanya sama
Teman-teman di DevFest tentang Astro
Minimal bisa ngejelasin
Konsep dan pola pikir
Astro-nya
Ya, yang saya alami adalah
Kok pernah
Di production
Di production, tapi di suatu
Project yang kecil banget
Jadi kayak itu nggak mengingatkan suatu
Project pake Naxx atau apa
Tapi Naxx vertil apa, terus kita
Semua nggak dengar
Tapi komponennya kan view semua
Ya udah, pokoknya akhirnya nggak pakai Astro
Cuma maksudnya itu kayak
Itu project juga
Kita cuma kayak memaintain
Tapi nggak bakal nambah fitur lagi
Cukup jadi wanti-wanti sih
Pas dapet lagi itu pokoknya ke project yang kita harus
Maksudnya tim gue harus
Ngerjain secara aktif
Nambah fitur dan lain-lain
Itu nggak boleh pakai
Teknologi baru yang
Masih, maksudnya apa
Harus disepakati dulu ya
Harus disepakati ya
Bisa lakukan
Tapi kalau khusus untuk kasus itu
Itu kasusnya
Sebuah waktu project deadline
Dan emang actualated
Gak akan diapapain lagi, jadi nggak apa-apa
Dan itu juga
Setelah 2 atau 3
Dan itu nggak pernah di update lagi
Sebuah udah dikunci aja versinya
Mau nya itu jalan, udah fix
Ya nanti suatu hari kalau
Note-nya berubah ya udah
Kekusingan gue
Tapi kalau buat sekarang nggak pernah diapapain lagi sih
Jadi kalau apa
Di professional pernah
Terus kalau buat voids
Pernah juga dulu banget, tapi
Pas masih, ya itu jaman astro 2
Astro 2 sama yang pataton
Terus gue menang 1 price
Tapi barengan sama peserta lain
Jadi kayak ada 1 posisi
Dikasih buat 2 orang
Jadi setengah
Setengah
Oh kalau dapat swag, berarti swagnya dibagi 2 gitu ya
Digunting
Gak dapat swag
Gak dapat swag
Ya berarti sama ya
Mas Rehan juga nyoba-nyoba ngulik aja ya
Kita juga baru nyoba-nyoba ngulik
Pengen migrasi blog
Males ya, migrasi melulu
Enggak bikin artikel
Enggak bikin website teribadi gitu
Lebih memilih
Bikin apa, pakai yang udah ada
Tapi lebih produktif untuk
Nulis aja, daripada harus ganti lagi
Males banget
Dan teknologinya pakai, apalah, Nexus, Gatsby
Stack management-nya, apa
Stack atau apalah
Stack
Tapi isinya cuma 1 blog
Fellowworld
Oh dulu pernah pakai Gatsby
Lebih sibuk
Bungkar pasang
Web site
Banding isi website-nya sendiri
Betul, dulu pakai Gatsby
Pernah, dan kemudian menyesal
Bahwa harus GraphQL
Aduh males balik deh
Cari yang lebih simpel
Tapi ingat gak sih jaman dulu itu
Kalo misalnya udah pakai
Udah bisa pakai
React, Gatsby
GraphQL, Apollo
React Helmet
Segala macam itu
Hydration
Itu kayak pakai semua
Kekompleksitas itu
Sampai puyeng pakainya itu
Merasa keren
Jadi rockstar gitu ya
Dabu banget gue ya
Javascriptnya jadi 6 mega
Keren lho
6 mega
Itu semua, tapi karena baru belajar
Bukan ngerasa keren sih
Sebenernya gak bisa
Jadi bisa kayak checklistnya nambah panjang
Kayak ngerasa seneng karena checklistnya
Jadi panjang aja sih
Kan pertama kalinya belum kerasa
Itu tadi yang jadi 6 mega
Tidak punya trade-off-nya
Atau kekurangannya, semua kan baru kerasa kan
Lama-lama baru kerasa
Maksudnya pas nyentang checklist itu seneng
Terus cuma pas udah jalan
Pas nambah fitur
Yang besar baru kerasa
Belum lagi mau
Install GTM aja harus pakai
Dangerously set inner HTML
Dangerously set HTML
Dangerously
Oke kita kembali ke Astro ya
Jadi yang saya alami
Sebenernya bukan
Penggunaan Astro, tapi lebih ke
Beberapa tahun yang lalu
Ketika Express Stagnan
Nggak ada update
Baru update baru-baru ini kan
Beberapa bulan terakhir kan
Ngeluarin versi 5
Yang mungkin dari versi 4-nya udah 2-3 tahun
Kayak Stagnan
Akhirnya kan kita penasaran
Ini Express masih di maintain gak sih
Kalau di maintain sih masih
Maksudnya ini aktif gak sih projectnya
Kita mau cari deh alternatifnya
Buat web server gitu
Untuk Node.js
Munculah alternatif kayak Hono
Saya udah pernah coba Hono
Terus apa lagi ya
Ada banyak sih sebenernya
Kalau mau lari ke Dino juga bisa
Pakai Boon juga bisa, ada banyak kan
Cuman yang
Kemaren-kemaren
Saya perhatikan ternyata
Astro juga bisa dijadikan
Web server aja
Hanya untuk API gitu
Hanya untuk API
Jadi cuma dipakai untuk routing-nya
Saja, sementara
Dengan yang gak dipakai
Itu
Itu membazir gak sih
Efektif gak sih
Maksudnya dia kan udah include sama front-end kan
Tapi kalau kita cuma pakai
Back-end-nya doang itu
Sama aja sih Node.js juga begitu ya
Kita bisa juga pakai buat back-end-nya doang ya
Node.js memang buat
Node.js memang buat back-end
Next.js
Kita pakai Next
Untuk back-end aja
Pake array-nya gitu
Maksudnya yang dipakai kan lebih utamanya untuk routing-nya kan
Iya routing-nya
Routing-nya doang kan
Gak masalah
Gak masalah ya
Ketimbang maintain sendiri
Ketimbang maintain sendiri
Kenapa gak sih
Gue mikirnya kenapa dulu
Kenapa cuma buat API
Kenapa
Kan pasti ada
Lesenya kan
Misalnya yang teorinya adalah
Javascript developer
Ya kan
Kalau orang yang bikin API itu
Bolang atau RAS atau
Blah-blah-blah developer gak mau nyentuk
Rondak ekosistem Javascript sama sekali kan
Tapi in this case kan
Berarti
Harus pakai Javascript atau TypeScript
Karena front-end-nya
Bagian depannya
Hanya mau pakai Next.js
Jadi back-end-nya pakai Astro
Back-end-nya pakai Astro
Kok jadi Astro
Siapa tangguh
Eh banyak loh yang begitu
Masa
Banyak loh
Jadi banyak yang menganggap Next.js itu adalah
Front-end framework
Kita butuh server lagi untuk
Serve API
Serius-serius
Serius
Jadi Next.js itu dianggap
Sebagai front-end
Jadi kita butuh
Entah itu Laravel, entah itu Astro
Atau Express
Untuk jadi back-end
Menyediakan API
Jadi si Next.js itu baca
API dari si server ini
Serius
Nah itu developer yang bakal digantiin sama
AI
Kalau AI kan tinggal nge-crawling dokumentasi
Bener kan
Aku tak bisa ber-work
Ada kontek gini
Tersusnya karena penajur adek
Kayak masalah gak sih
Yang udah ada
Sebenernya back-end dari
Express itu gak boleh
Diutang-atik dari cara mendehunya
Udah mendeh, udah pergi semua itu
Bikin, nah terus
Butuh front-end yang modern
Banyak client side-chain
yang kompleks lah
Yang pusing kalau bikin express, bikin baru
Kalian bisanya apa? Nanya ke
Orang yang sekarang disini kan
Next.js
Kalau karena konstrain yang itu kan
Lebih ke apa ya
Bukan perkara teknis
Tapi, perkara circumstances kan
Perkara keadaan, cuma kalau misalnya
Ada developer yang bikin project baru
Yang gak tau misalnya
Next.js atau astro
Bisa buat API endpoint ya
Itu beda kan system
Itu digantiin
AI aja lah
Mungkin ada faktor ini
Kan di website-nya Rie
Kan sekarang create track app udah gak ada
Digantikan dengan Next kan
Mungkin orang-orang yang
Teman-teman yang baru belajar React
Oh kalau mau pake React
Pake Next.js aja
Buat supaya untuk bundling
Untuk routing dan lain-lain
Gak perlu install-install lagi, udah jadi satu paket
Seperti create track app
Gitu, padahal sebenernya ada pilihan lain
Kayak pake fit lah
Fit ya
Lebih simple
Tapi kan di website-nya sekarang ada gak sih
React itu
Dia merekomendasikan apa?
Kayaknya ada gak
Jadi yang direkomendasikan secara prominent banget
Sebagai replacementnya React.js
Emang
Next.js
Tapi kayak kalau scrolling
Bawa sepenyembelin film
Sebenernya bisa lo pake fit
Pake fit dan React aja
Ada dua yang dia
Direkomendasikan, Next.js sama Remix
Remix satu lagi
Oh Remix masuk
Yang direkomendasikan adalah
Full Step framework kan
Sama Remix
Itu kan setelah type juga kan
Maksudnya apa?
Bentar lagi berubah dong
Remix gak mau pake React lagi
Bentar lagi kan, mau ganti dia kan
Dia mau
Move away dari React ya
Jadi yang
Remix sekarang jadi
Remix sekarang jadi
React Router
Yang Remix yang
Yang sebelumnya itu
Nanti bertransformasi jadi framework lain
Begitulah
Kadang-kadang kan ada juga teman-teman
Yang baru belajar React
Langsung ke Next.js gitu kan
Jadi mungkin ya memang
Mindsetnya ya gitu, oh kalau mau pake React
Pakailah frameworknya Next.js gitu
Jadi kepikiran itu front-end
Tapi komunikasiinnya ya
Dari dokumentasinya
Kayak apa
Tapi sebenernya ini bukan fenomena baru ya
Dari dulu sih
Itu pertama kali banget belajar
React juga Gatsby
Gatsby
Mana yang fitur Gatsby
Sebagai meta framework
Mana yang fitur React
Mana yang fitur JavaScript
Javascript dalam hal ECMAScript
Mana yang fitur Web API
JavaScript ya implementasi
Browser ke-4 ini
Apa? Karena maksudnya
Yang lebih menarik kan
Ngulik dari starter site
Dari contoh-contoh
Contoh itu kan ya nggak apa
Orang yang bikin starter
Starter site dan bikin
Contoh-contoh module itu
Mereka udah paham perbedaan itu semua
Tapi kalau yang baru belajar kan nggak bererti
Bedainya jadi kayak harus ya pelan-pelan
Sama lama dengan ngulik
Ngerti ngebedainya
Cuma di awal pasti ada kerancuan
Kayak gitu sih
Hmm
Ini ada pertanyaan bagus nih
Astro support markdown
Apakah highlight code-nya juga
Include?
Ada dong pakai Shiki bisa
Oh harus insta lagi kan
Maksudnya di
Kalau SSG ya build time
Kalau SSR ya pokoknya di server
Pokoknya nggak dipersing
Di client yang tau kan
Highlighting yang
Warna-warninya itu kalau di client site kan
Suka bikin apa ya
Itu ya
Copy and paste kan pokoknya bikin core website
Lagi lag nah ini nggak aman
Aman ya
Ada
Ada official integrationnya
Namanya markdown
Mana linknya
Oh itu format
Kayak
Format kayak MDX
Gitu deh ternyata
Oh
Ini buildnya dia ya
Markdown dia
Markdown
Ada MDX juga bisa
Juga ada
Bisa ngerender
Astro component ya
Iya
Kalau markdown kita ya kayak MDX
MDXnya juga aja
Kayak MDX ya
Menarik
Oke
Nah
Mas Rehan saya penasaran nih
Action-nya Astro sama kayak
Solid start kayaknya nggak bakal
Solid start itu
Action-nya kenapa
Apa yang bikin bagus? Saya penasaran
Apakah ada framework yang fitur
Policy include seperti
Laravel
Policy include itu
Apa ya kita nggak tahu
Laravel
Policy
Include
Apa
RBC
Control access
Access control
Control access
Nggak ada sih kalau
Astro ya nggak ada sih
Nggak ada
Kalau yang mau sampai sekompleks
Laravel pakai Phoenix kan
Kemarin kita bahas Phoenix
Phoenix
Kalau JavaScript
Ada nggak ya yang seperti
Meteor
Kompleks kan itu
Ya udah angular
Angular dah jelas dah
Emang ada? Oh ya ada kali ya
Ya
Angular kan satu ekosistem sendiri
Iya
Termasuk juga ORM-nya
ORM-nya pilih sendiri terserah
Kalau di Astro itu biasanya milihnya
Drizzle
Pake Drizzle bisa Prisma bisa
Prisma
Bebas
Tapi dia ada data base-nya nggak?
Ada ada
Astro ada data base
Connection-nya
Connection-nya aja
Bukan ORM-nya kan
Bukan
Adapter-nya
AstroDB
Ya
Data base
Oh ada
Data base
Itu
Official integrations
Tadi yang di official integrations
Di doc-nya pergi ke doc-nya tadi
Oh ini
Integrations
Sorry integrations
Ke bawah
Lagi DB
Ini
AstroJSDB
Installation
Kemudian add DB
Integration DB
Astro ini-nya loh
Astro
Fully managed SQL
Data base salah ini service-nya dia
Ini apa? Ini guide
Service-nya dia kayaknya
Bukan
Mereka nggak nyadikan hosted service
Bukan
Jadi sebelumnya
Dia dulu nyadikan hosted service
Sekarang udah nggak kita bisa connect
Udah nggak ada ya
Apapun
Mereka udah sunset yang hosted di
Mereka
Nah ini enak sih cuma ininya
Tetep ada jadi kayak
Ya nggak full ORM
Cuma untuk connect data base
Apa? Nanti dijelasin kok
Scroll aja ke bawah
Tapi tetep
Kita butuh ORM ya
Kalau mau ya
Kalau mau pakai ORM, kalau nggak langsung query di sini
Oh ini udah
Semacam ORM
Define table
Define column
Ini udah jadi ORM malah ya
Iya
Cuma kalau nggak mau pakai itu
Udah mau
Apa, mau pakai Prisma atau
Lain-lainnya derisulsi bebas-bebas
Oh
Berarti ini termasuk ORM ya berarti ya
Nah tuh scroll ke bawah sih
Ya ORM
Simple kali ya
Nah to libsql
AstroDB can connect to any
Local libsql database
Or to any server that
Is libsql remote protocol
Jadi kalau yang gampang dan gratis
Mau bikin aja di kursor
Udah copy aja copy URL database
Sama copy token yang di environment variable
Udah beres tuan
Libsql ini
Spinoffnya
Sqlite ya
Yang dulu kita pernah bahas itu loh
Jadi ini Sqlite
Itu kan open source
Tapi nggak menerima
Isu atau request feature
Open sama sekali
Open source dalam arti
Source code-nya
Tidak terlalu gitu
Tapi nggak terima masukan apapun
Jadi kalau buat apa
Jadi si
Ini sih orang-orang dari TURSO
Sama maintainer lainnya sih dari public
Bikin yang namanya libsql
Portnya Sqlite
Hmm
Oke
Nah kita
Nggak melencin mana-mana nih
Tapi database
Masih ada hubungan sih
Ya kan server side
Server side
Nah ngomongin server side
Berarti ada beberapa hal kan ya
Yang bisa kita bahas ya
Yang pertama adalah routing sistemnya
Kalau kita mau pakai astro
Artinya kita harus menggunakan
Routing system
Dengan gaya
Filebase ya
Filebase routing sistem
File structure ya
Ya jadi mengikuti folder ya
Ya ada
Mengikuti server foldernya
Jadi apapun yang ada
Di src/pages
Dia akan menjadi halaman tersendiri
Misalkan about
Dia akan
About.ts ya
Maka dia akan jadi
Tss ya
Atau astro.astro
Halaman kan
Bisa txx bisa
MD
Markdown juga bisa ya
Kalau kita mau
Return JSON
Bisa ada API route
Ada ininya
Wait namanya
API route
Oh bisa dynamic route juga
Kalau misalkan kita mau
Pakai by id
Tapi model
Bentukannya kaya gini nih
Kalau yang udah
Pernah pakai gates b
Atau nxt ya
Pasti udah
Familiar lah ya
Dan by default
Belunya ini astro ini ssg only
Static only
Jadi tetap beraku sih
Itu apapun yang di
Folder pages
Atau gotastro.txt
Dengan atau tanpa
Dynamic routing
Itu ya built time
Jadi html css biasa
Itu
Itu by default kaya gitu
Cuma belakangnya
Mereka ada
Mengadopt si ssr juga
Jadi ya itu
Kalau ssr bisa bikin API endpoint
Terus ya itu
Ada kaya istimewanya
Ada filter editor ya
Cuma bisa di ssr
Tadi ada res api
Mas Riza
Terus cara buat
Ini namanya
Bukan
Parameter
Maksudnya kita return json
Saya mau bikin
Satu route
Yang writtennya json
Misalkan ini ya
src/pages/post
Tapi posnya itu
Isinya adalah
Json list of
Article
Endpoints
Ini ada-ada
Topos
Link ini gitu
Bicet
Ini ya
Endpoints
.json.ts
Jadi
/pages
/nama file
.json.ts
Berarti nanti kita manggilnya data .json
Ini ya
Data .json
Oke
Nah ini kan penting ya buat server ya
Kalau misalkan kita cuman
Mau return
Dalam bentuk json berarti
Memungkinkan sekali
Untuk menggunakan astro ya
Tuh
Gayu lebih jago daripada kita
Tapi endpoint juga bisa
Bisa berlaku buat
Static ssg
Bisa buat ssr
Apa?
Kalau static ya gak pernah berubah
Json nya dibuild ya udah jadi json
Ya file json
Tapi ini bisa jalan di ini kan
Bisa jalan di server side kan
Oh iya pasti jalan di server side dong
Bisa tapi open
Jadi kalau pernah pakai swellkit
Pasti familiar sama itunya deh
Jadi export cons
Export cons pre-render
Sama dengan false
Oh harus dikasih tahu dulu
Jadi bisa hybrid
Atau bisa dari astro config
Jadi kalau mau misalnya
Ssr semua
Ya lupa lah berutnya apa
Ya pokoknya
Kalau config ya berarti sama semua
Tapi kalau misalnya mau apa
Customize by page by round
Ya itu di round nya
Export cons pre-render sama dengan
True atau false
Okay
Menarik menarik
Berikutnya lagi
Kalau ngomongin server pasti ada
Middleware ya
Kaya request sama response kan
Ini ternyata
Udah pasti lah ya karena server render pasti ada
Request ya dan bisa
Return response
Response nya ini juga menggunakan web
Standard ya
Standard gak dimanggil patch sendiri
Ya seneng lah
Tidak ada extra
Komponen
Jadi nih
Murni menggunakan javascript
Vanilla ya, response ini
Adalah objek dari javascript ya
Jadi gak perlu install
Apapun, jadi gak ada dependency
Server endpoint
Udah point nya kita bagus disitu kayak status code nya
Customize status code
Atau timeline nya ya
Semuanya disitu
Itu tadi mas Riza
Scroll sedikit ke atas
Lagi lagi
Lagi lagi lagi
Nah itu export cons pre-render
False
Jadi gak bisa di pre-render ya
Ya
Jadi gak di cash
Nah ini
Kita kalau mau bikin CRUD
Delete yang model nya kayak gini ya
Jadi ini
Hanya untuk CRUD aja
Yang berdasarkan ID
Yang diberikan
Misalkan 0123
Terus dia akan masuk ke params
Params.id
Get product dari database
Entah apapun itu
Kemudian dia akan return
Kalau gak ada 404
Kalau ada dia akan return 200 beserta
Datanya
Tapi gak ada schema
Harusnya ada schema lagi
Iya
Kalau schema kalau kayak mau bikin
Oh biar type same
Ada fiturnya
Zot
Namanya Astro actions
Hmm
Namanya Astro actions
Ya nanti selesai ini dulu
Kalau pos gimana ini?
Ini kan jack doang
Function pose gitu
Oh gitu ya
Ada contohnya?
Ada
Ini HTTP methods
Metode apapun lah
Ya apapun yang nilai
Get host, delete, put
Ya standar lah
Kalau yang udah pernah pake socket, next.js
Pasti udah kurang lebih
Udah familiar ya
Naham bentuknya
Oh
Oke juga nih
Jadi mau bikin
Back end-nya pake ini mas
Iya, mendingan kesini aja ya
Iya, STS jadi port-end doang
Terus, apa, masih
Buat skrper and points ini
Enaknya tuh
Astro punya helper buat cookies
Itu helpful banget
Helper buat cookies
Gimana tuh?
Gimana tuh?
Bentar nyari dulu ya
Helomannya yang mana
Ya intinya memudahkan buat set, delete, get
Pull piece
Cookie kan strict ya
Cape itu nge-parsing-parsingnya
Mau nya nge-set service-nya
Mat-nya kayak gimana
Karena string ya gak bisa
Pake IntelliSense yang
Otomatis ngisi
Nah, bentar
Pull piece
Ya intinya ada semacam
Astro cookies
Di private chat
Astro cookies dot
Blah-blah-blah
Oh
Enak sekali
Nah, apa
Scroll aja terus ke bawah
Yaitu contoh penggunaannya
Nah, atas lagi dikit
Untuk lebih detail
Astro dot cookies
Linknya diklik aja
Nah, itu ada cookies dot get
Set
Set itu kayak yang
Ada option
Nah, ada cookie features-nya
Itu MaxH, HTTP only
Enak banget, auto-fill kan
Tinggal kontrol
Pas-pasi, langsung muncul semua
Karena ada typescript
Oh, iya, iya
Wah, seru nih
Boleh, boleh, boleh
Oke, yang juga
Yang ini bisa dipakai dari
Astro page component juga
Jadi misalnya pages slash
About dot astro atau apapun
Apapunnya routing component
Tinggal baca aja
Astro dot cookies misalnya kita mau apa
Apalah nge-check
Settingan dirt node
Nge-check apalah login atau apa
Ya, bisa dibaca dari
server-side component dot astro
Tapi nggak bisa dari UI
Component ya, nggak bisa dari
React atau Svelte
Atau lain-lainnya langsung
Ya, kalau mau dioper harus dari dot astro
I see
Oh, bisa ini juga, bisa integrasi
Sama back-end lain, kayak Hono atau Elysia
Kalau itu belum pernah
Belum tahu
Nah, berikutnya
Tadi kan udah, kita udah dapet
Routing-nya, mau pakai
Mau bikin API juga bisa
Mau main-main cookies juga bisa
Data fetching
Data fetching-nya pakai apa disini?
Itu ada, tuh, tuh
Tuh, tuh, tuh
Ini nggak diakal-akalin sama
Astro
Kalau NSJS
Kalau NSJS kan dia ada kitchen
sistemnya kan, ya
Di fetching-nya kan
Ini adalah
KTM L2-nya
KTM L2-nya
Webstandard, webstandard ya
Ya, bawaan runtime
Kalau di server-side
Ya, kan sekarang udah ada
Ya, satu bun, udah punya fetch juga
Ya, ya
Relatif dikit hal baru yang perlu
Di pelajarin ya, selain tadi
Apa, selain struktur routing ya
Selain file-nya namanya apa, ditaro mana
Isi kodingannya
Relatif dikit yang harus dipelajarin kan
Kalau kita lihat, misalnya kita developer yang
Udah pernah pakai framework lain
Oh, langsung bisa
Yang gue suka, cara konsep
Menulis kodenya tuh
Kayak ada dash-dash-dash itu
Di batas, ini lho
Area business logic, dan di bawah itu
Ini lho area UI
Gue suka itu
Iya, mau CSS juga bisa ditambahkan
Di sini langsung ya
Di bawahnya, style
Bikin style text
Kan kalau kayak React kan
Acakadu semua
Jadi satu semua ya
Kan React itu kan harus dari
Function, return apa, komponennya itu
Return, return komponennya
Iya, mau
Mau apa, namanya
Mau di looping, harus menggunakan
Harus ada return-nya, jadi harus pakai map
Gitu kan
Jadi banyak
Banyak indentasi
Si astro-komponen ini
Kemisahannya adalah
Kayak yang dibahas mas Dan Abramov
Di blogpost-nya kemarin
Yang kita bahas, jadi yang di front-letter itu
Yang ada dash-dash-dash 3 kali itu
Di atas itu dunia server
Itu gak masuk ke client
Sama sekali
Jadi apapun yang terjadi di atas itu
Terjadi di server
Persis kayak PHP
Persis kayak PHP
Kalau kita yang gak
Sadar, maksudnya
Gak nyadar tentang
Bedain itu
Kan di atas itu
Ada await response.json
Kalau ada await sesuatu
Di process yang lama
Berarti ya kosong
Belum render apa-apa, itu kan
Terjadi di server
Implikasinya kalau orang
Memakain kopas-kopas tanpa
Perjalanan kerjanya
Si astro itu
Gadgeteer-nya, caveat-nya
Kayak gitu, kalau misalnya ada
Process yang berat, patching yang lama
Data yang berat, async
Semua gak akan ketunda
Ketundanya di server, gak ngirim apa-apa
Oke
Oke, berarti
Untuk data patching
Semuanya terjadi di sisi server
Di client bisa gak?
Iya boleh di server, bisa dong
Bisa dan enak banget
Jadi kalau di atas
Itu kan kayak di contoh patch
Di atas, berarti itu di server
Tapi kalau misalnya di HTML-nya
Di area bawah
Kita lulus script, apa
Script tag biasa
Oh, script javascript
Itu dia akan jadi client-side
Oh
Oke, oke
Dan bisa pakai
Type script juga otomatis
Ditransfile atau
Dibuild jadi javascript biasa
Cuma kalau di bawah, pokoknya jalannya
Di client-side, jadi kalau misalnya
Itu gimana kita ngaturnya aja, apa yang
Harus terjadi di server, apa yang
Harus terjadi di client dan semua bisa
Dijalanin di
Satu komponen dengan
Syntax yang familiar
Yang standar
Client load itu artinya
Client-side rendering ya?
Jadi
Client-side javascriptnya itu
Opt-in by default itu semua
Gak pakai
Client-side javascript, even
Bahkan kita mau ngerender
Komponen reaksual segala macem
Ya di render HTML biasa
Tapi kita opt-in-nya pakai
Directive client
Bisa macem-macem
Ada setting yang client.load gitu
Dehydrate-nya di loading-nya
Pas
Load
Terus bisa pas idle
Jadi sebenernya di belakang layar itu pakai
On idle itu
Ya pokoknya
Web API yang ngedetek pas
Main thread-nya
12.000 baru di loading
Ada juga
Client.visible
Kalau ga salah, ya lupa namanya apapunnya
Semacam itu, itu
Dibalik layar pakai intersection
Jadi kalau yang pixel
Udah mau masuk layar
Ya itu yang ini kan
Island architecture kan
Berarti kan
Yang dia
Benar mirip PHP
Iya
Kan kalau
Teman-teman ngikutin
Syntax FM
Podcastnya Syntax FM
Si Wes Bosz sama
Scott Olinski
Itu mereka punya pendapat
Bahwa Node.js itu
Meniru
Arahnya itu menuju ke PHP
Sebenernya
Iya ngeliat apa namanya
Pergerakannya, roadmap-nya gitu
Itu kayak
Emulasi apa yang dilakukan PHP
Berapa tahun yang lalu, termasuk juga React
Kalau teman-teman
Ngikutin video awal-awal
React, itu banyak
Dicontohin kode PHP karena
Di Facebook menggunakan PHP
Jadi mereka familiar dengan PHP
Makanya mereka mencoba
Membangun framework
Frontend framework yang
Mereka familiar
Itu PHP, jadi modelnya itu mirip
Sebenernya
Cuma ada kelebihan
Kalau ekosistem JavaScript
Bisa mundur mandir client, server
client, server, kayak astro itu kan
Tadi ada server
Ya pun lah React juga
Kalau PHP server ya server
Iya
Jadi kayak PHP tapi versi
New and improved
Iya itu dia
Yang penting kan itu
Nyontek boleh tapi harus lebih bagus ya, jangan sama
Atau lebih jelek
Itu sama, kalau PHP aja
Betul
Tadi kan ngomongin server
Server island
Island architecture
Dan kalau nggak salah
Di video kita sebelumnya yang tentang astro itu
Mereka lagi
Experiment dengan istilahnya
Server island, jadi island
Architektur tapi di sisi server
Dan sekarang kayaknya udah ya, udah diimplementasi ya
Server island
On demand render
Dynamic or personalized island
Individually without sacrificing
The performance of rest
Of the page
Ya kayak island architecture
Tapi si island
Sebelumnya kan
Pemahaman island kita itu di hydrate
Di client side kan, misalnya
Satu halaman static
Tapi mesti ada misalnya
Comment section atau like button
Yang di hydrate
Karena butuh client side interactivity
Nah ini mindset
Apa cara mikir kayak gitu
Tapi dipindahin ke server, buat apa
Buat kayak hal-hal yang perlu
Kukis atau authentication
Atau mungkin sering berubah
Dan lain-lain
Jadi yang tadi Eka sempat
Ceritain kalau ada await
Kemudian di bawahnya ini
Akan jadi halaman putih
Blank, berarti bisa
Diakalin pakai ini gitu
Betul, itu solusinya
Jadi ada press holder dulu
Ada skeleton dulu ya, muncul skeleton dulu ya
Dia pake common
Press holder sih dia bahasanya
Press holder ya
Jadi ada fallback
Press holder nya dulu
Yang kayak skeleton apa gitu kan
Yang kayak lagi loading nih, lagi loading gitu kan
Habis itu baru dia
Menggantikan, oh pakai server
Titik 2 Diver aja gitu ya
With an adapter install
Oh dia pakai adapter
To perform delay rendering
Kayaknya ujung-ujungnya
Ujung-ujungnya htmx nih
Over the wire aja gini
Mungkin
Kalo itu yang filosofinya htmx ya
Itu ya
On demand
Rendering
Mana sih
Server adapter
Server adapter di bawah tadi
Dibawah ya
Enggak tau
Server endpoint
Jadi itu server endpoint
Soalnya IPR out
Ya bener, jadi
Rasa rasanya jadi kayak ngambil
Kayak pakai
Over the wire lagi
Antara htmx atau
Request response
Ya ya ya, request response ya
Nah intinya yang menarik sih itu
Fallback kontennya
T-Render sebagai html biasa
Masak biasa
Itu fallback nya
Ya
Jadi ya tadi itu ngatasin
Misalnya sebenernya nunggu
Process fetching avatar
Atau semacamnya ada generic avatarnya
Cuma
Tapi kita bikin sendiri
Kita bikin sendiri sih
Ya kan itu
Gimana kita nentuinnya
Kalau avatar ya
Bentuk buletan abu-abu doang
Ya, tapi ini terjadi
Di CC server gitu
Avatar warna biru
Ini ngomongin avatar yang mana nih
Ngerti ngerti
Back sound dong
Back sound
Oke
Terus dia tau
Ketika ada data nya
Udah siap itu dari mana ya
Ini resolve nya abu-abu
Cara yang sama kayak react server
Komponen kelihatannya sih
Sebetulnya ada kayak indikatornya
Mana yang direplace kan
Sebenernya
Itu dia chip track
Element nya
Detail nya sih gak tau
Cara kerja yang sama sama react server
Komponen juga gitu kan
Itu kata Reyhan, coba buka block nya
Ini, block nya ini bukan
Iya
Ada contohnya gak
Performance
Personalization
Ya, ide nya kan ini tadi kan
Cuma maksudnya gimana bisa tau
Berarti kan dia semacam ngasih
Dia kan bikin idea
Avahtar tadi tuh
Ada mapping nya
Avahtar ya
Tuh kanan-kanan atas
Server defer itu loh
Makanya tadi kan
Ada server routing tadi
Jadi semuanya pakai
Waktu setelah
Di render page load
Dia gak request lagi ke user button
Oh, request lagi
Bukan push dari server
Ke client ya, bukan ya
Request lagi
Oke, oke, oke
Ini dia ya
The best of both worlds
Jadi ini static HTML
Server personal content
Semua static
Bisa di caching
Bisa di caching
Jadi ingat itu loh, konsep apa ya
Pernah Google yang sistemnya itu
Yang kayak kerangka
Apa namanya ya
Kayak header, footer
Segala macem itu kan static ya
Apshel, apshel
Jadi ingat konsep jaman itu
Apshel jadi semua static
Dan yang perlu direfresh
Itu aja yang di request
Tapi itu client side
Client side rendering kan
Betul
Kalau sekarang server
Semuanya di server ya
Wah seru ya
Ternyata
Oke, apalagi nih yang
Berhubungan dengan server
Kalau exactly gimana
Dia nggak ngejelasin
Cuma kan kemungkinan bakal semacam ada map kan
Di server mereka punya map
Biar tahu pas udah nyampe client
Mana yang di replace
Mana yang di hydrate
Nah ini actions mantap ini
Bentar, bentar
Tunggu, macam Laravel Vault
Laravel Vault itu kayak gimana
Laravel banyak banget ya
Produknya ya
Komunitasnya besar
Elegantly craft
Functional API for
Live wire that support
Single file component
Oh
Kayak Riek
Kayak Riek
Yang sama
Oh maksudnya tadi
Mungkin membahas tentang
Yang apa
Ternyata tadi mirip
Jadi Astro kayak Jontek ini
Karena
Gayanya mirip ya
Dibatasi oleh
Saling menginspirasi lah ya
Saling Jontek
Tapi ini pakai live wire mas
Iya
Ini pasangannya live wire
Ya vendor
Ini maksudnya
Khusus buat ekosistem
Html over
The wire ya
Kirim htmlnya lewat
Websocket ya
Tergantung
Antara Websocket
Atau API
Ini berarti
Jalannya di server di client
Semuanya itu jalan di server
Semuanya itu jalan di server
Setelah di client
Setelah di client wire click itu
Jalannya di
Jalannya di client
Kirim ke
Server, nanti server replace
Iya
Ya kan live wire
Jadi semuanya terjadi di server
Cuman perubahannya dikirimkan
Lewat
Websocket entah itu Websocket atau
Http ya
Volt malas buat komponen kelas
Langsung logicnya di band
Gak usah buat kelas baru
Buat yang malas
Gak usah bikin di controller
Gak usah bikin di controller jadi langsung ya
Oke
Action
Action
Gimana nih Eka, bingung saya
Seru banget
Pertanyaannya, cuma jawabannya seru banget
Bukan ngejawab ya
Baru senyumnya soalnya kemarin
Action
Kalau tadi kan kita bikin API
Involve, harus bikin satu per satunya
Get, post, terus apa
Boiler white code-nya
Gak banyak
Terus gak ada type safety-nya
Data yang dibalikin dari situ
Misalnya kita punya bikin
Data JSON
Terus kita mengambil dari
Komponen lain, misalnya entah page
Komponen ASTRO, atau UI Komponen ASTRO
Atau React P ASTRO
Swell dan lain-lain
Yaudah kita gak otomatis ada technique-nya
Terus kita gak bisa mastiin
Standard semua trade-off-nya
API JavaScript
Inputnya
Solidus Input kita reshandle
sendiri
Sebuah hiatasi
Sama ASTRO Action
Jadi itu definisi
Di kalimat pertama cukup
Deskriptif sih
Mendefinisikan dan call
Then end function
Type safety
Apa pun yang bisa kita lakukan
Di API Android
Yang tadi kita lihat
Bisa di lakukan Action
Tapi dengannya
Dengan bikin features
Type safety, jadi kita bisa
Validasi inputnya pakai Swell
Konteksnya juga tersedia
Jadi kalau mau pakai
Cookies dan lain-lain, termasuk si
Helper ASTRO Cookies tadi juga bisa
Terus kita
Ngereturn net-nya
Nanti di call dari mana pun si Action itu
Bakal udah ada type
Apa? Typing-nya
Data type-nya
Type hints, ya
Type hints, error pun
Errornya tuh entah
Kan error bisa dari validasi input ya
Atau bisa error dari
Action-nya, misalnya kita
Apalah, manggil data dari
Post yang butuh token
Tapi token-nya salah atau
Unauthorized dan lain-lain
Atau server error, itu udah
Bisa dibedakan juga, jadi gampang banget
Buat render, apa?
Balikin error-nya
Memproses error-nya di UI
Nah
Jadi kayak Action itu
My Action bisa dipanggil dari
Mana pun, itu kan contohnya
Page index ASTRO
Mau dipanggil dari UI
Component juga bisa
Dari software
Data sama error-nya
Itu type
Oh, ini berarti mirip
Kayak RPC bukan? Remote Procedure Call
Gak tahu, belum rambut
Kayaknya sih, mirip ya
Mirip kan, maksudnya kita bisa
Pandit fungsi di yang lain kan
Di bagian lain dari service kita
Di komponen lain
Di komponen lain, betul
Nah, itu Distance Depth-nya itu
Itu sebetulnya
Cuma udah
Under the hood
Udah di-input ASTRO
Nah, scroll lagi ke bawah
Iya, kayak RPC
Nah, itu
GetGreeting itu terserah
Namanya apa terserah kita
Ini contohnya GetGreeting
Ini dipanggil fungsi
Dari sini
Inputnya apa
Bentuknya objek
Di dalam objek itu ada nama
Bentuknya string
Terus handler
Bisa dibuat opsional, apapun bisa
Nah, handler gitu
Yang di-execusi
I see
Oke, oke, oke
Jadi, di dalam handler ini
In real life, misalnya kita nge-fetch
Dari API external
Atau kita manggil ke database
Atau apapun
Aktifitas apapun yang umum dilakukan
Di server terserah di situ
Electro error juga bisa di situ
Oke
Nah, daten di belakang itu otomatis
Sudah ada typo
Nah, itu
Ini contoh
Client side
Oke, ini client side ya
Yang karena di luar ini ya
Terus, kalau buttonnya
Diklip
Kalau diklik, nanti
Nah, kita import aja
Oke, di import
Terus
Langsung action GetGreeting
Bener
Kayak RPC
Ini
Kayak TRPC, salah satunya
Tuh
Kan, di server
Ada namanya
Greetings
Dot query
Greetings dot query
Ya kan? Dia manggilnya begini kan
Remote procedure call, berarti kan?
Iya, mirip lah
Mirip lah ya
Gak tau benerannya, gimana ya
Bagaimana konsepnya di belakang
Terus, gitu tuh GetGreeting
Kalau misalnya kita mengisi
Argumennya salah
Ya otomatis langsung dimerah-merah
Type script
Karena
Dia ada type
Definitionnya disini ya
Misalnya kita cuma GetGreeting
Tapi gak ada objeknya
Atau objeknya fieldnya bukan name
Namanya 123
Angka gitu, integer
Nah, itu pasti dimerahin sama type script
Mirip TRPC, iya
Maksudnya lebih, kita ngomongnya bukan
TRPC-nya sih, remote procedure call-nya
Yang basicnya ya, TRPC salah satu implementasinya
Iya ya, besar juga
Baru kebayang nih
Ya ditambahkan kesini
Berarti kan ini memang useful ya
Untuk mempermudah
Untuk mengurangi learning curve
Antara server-side dan client-side
Client-side, betul
Karena
Kalau kita tadinya tanpa ini
Imagine
Berarti kan kita harus bikin
Raise API endpoint-nya
Terus bikin
Komponennya di client
Terus kita fetch, post
Dan response lagi
Kalau ini kan jadinya
Sangat dipermudah
Yang membantu banget tuh validation
Sama type
Type type declaration
Generation
Full full banget
Berarti ini akan
Sangat berguna
Kalau menggunakan type script, kalau pakai javascript
Siapa yang pakai javascript?
Cuma orang yang pakai astro
Itu kemungkinan ya
Bukannya
Ada fitur itu
Di VS Code muncul nggak sih
Kalau anggaplah ini TS kita ganti
Dias gitu, tetap muncul nggak sih
Coba ini kadang kodenya kan
Kodenya sendiri
Bukan
Type script kan ini
Bukan kan
Ini valid javascript kan
Iya
Dia pakai zod kan
Validasinya
Validasinya kan
Cuma yang nggak bisa sebaliknya
Iya, ini tergantung fitur
Dari si VS Code-nya
Dari editor-nya
Dia bisa nampilin atau nggak
Ini javascript banget semuanya
Nggak ada type-type-nya sama sekali
Terus scroll lagi
Scroll ke bawah lagi
Masih banyak fitur
Serunya
Organizing ini nggak seru sih
Cuma buat grouping
Bisa di file aja
Ini nggak seru lagi
Inlink return data yang tadi
Bisa data, bisa error
Nah, ini error yang
Scroll ke bawah lagi
Kalau misalnya nggak mau ngecek error
Bisa or throw
Ini kurang penting
Nah, ini yang menarik nih
Handling back-end error
Jadi ada yang namanya action error
Itu kayak class
Class yang extend
Error class biasa
Cuma ada action error
Jadi buat mengindikasi
Ini error dari, bukan error dari
Serigasi input-nya
Error dari action-nya
Untuk contohnya
Contoh aja
Kupis
Apa cek nggak ada session-nya
Berarti unauthorized, tapi in real life
Misalnya kita pakai API external
Kita nge-fetch pose
Kita try-catch pastikan
Itu pas di-catch-nya
Kita throw action error
Berdasarkan kode yang dibalikin dari
External service-nya misalnya
Menarik
Nah, balik lagi ke component-nya
Ini juga kayak apa
Udah langsung aja bisa mencek
Jenis error-nya apa
Ya pokoknya kayak
Dx sih, wilayah Dx
Apa, Dx-nya jadi enak banget
Buat ngerjain front-end-nya
Oh, ini
JSX sih ya
Berarti ini React ya
Iya sih, ini
Nah, itu apa
Kalo di client-side kita bisa navigate
Misalnya harus redirect
Redirect ya
Nah, terus ini ada
Iya, di client
Tapi kalo di server juga bisa
Astro dot redirect
Ada itunya sendiri
Ada helper-nya sendiri
Jadi action-nya sendiri
Jalan di back-end, jalan di server
Tapi bisa dipanggil
Isomorphic, bisa dipanggil
Ya, standar lah, bisa dipanggil dari client-side
Bisa dipanggil dari
Server-side component
Nah, ini nih yang seru banget
Ini bisa accept dot form
Accept value-nya form
Nah, itu di front-end-nya
Tinggal bikin component form
Ini sih agak mirip
React server component kali ya
Atau mirip apa sih yang
Di remix, ya itu pokoknya bikin
Form aja, jadi gausah
Kalo ga mau nulis JavaScript, gausah
Bikin JavaScript sama sekali
Oh, di handling-nya di sisi server
Validasi-nya juga di sisi server
Iya, semua juga gitu, cuma ini
Pakai form aja, jadi pure HTML
Only bisa jalan
Misalnya email sama terms
Jadi bikin aja
Value actions-nya
Diisi pake nama
Action itu tadi
Validasi input error-nya gimana?
Itu. Nah, scroll terus ke bawah
Ke bawah ya? Ini ya?
Iya, lanjut-lanjutkan
Ada step-by-step-nya dong
Nah, email sama terms
Itu tadi dari nama input yang
Di dalam form kan
Ini handler
Handler-nya terserah diapain? Itu sih
Maksudnya server-side
Kayaknya handler-nya ini
Setelah validation
Selesai deh
Baru dia akan jalani handler
Udah validation-nya
Iya
Kalau validation-nya gagal, langsung
Balikin, dan bahkan ada type-nya
sendiri, bisa dicek namanya input error
Lanjut
Nah, ini
Tapi bisa dari server-side
Ini kan dari client-side
Nah, ke atas sedikit
Ke atas sedikit
Scroll atas lagi
Scroll atas lagi
Nah, ini
Kita kebalinya kan si call-action
From an HTML form action
Or alternatively
Jadi kalau ini, kalau contohin kan
Dari JavaScript client-side
Tapi kalau bukanan nggak mau nulis
Dari JavaScript sama sekali
Cuma pakai form itu
Cuma pakai form element HTML juga bisa
Ini
Luh, mana dia
Kayaknya belum ditulis dia
Ini call-action from HTML server
Ini kali
Becari dulu
Ini bukan
Call-action from HTML
Nggak ada form-nya di sini
Ya, betul-betul
Lockout button
Scroll ke bawah
Ke bawah?
Mana?
Bentar
Link-nya sih udah betul
Coba deh, find lockout button
Lockout
Lockout button-nya
Itu dia, bentar
Eh, nggak
Bukan deh, cari lagi
Ini
Nah, ya betul
Nah itu, kalau nggak
Kalau tadi kan contoh pakai client-side
JavaScript ya
Dupingan query selektor, form
Form-nya kalau disubmit, prevent default
Terus await action
Nah, ini kalau nggak mau nulis
JavaScript sama sekali, ini jalan
Jadinya
Sama dengan actions.lockout
Kayak remix
Kayak remix ya
Nah, itu bawahnya
Ini contoh yang lebih
Kalau pakai upload file
Terus pakai encoding type
Tetapi upload
Kita harus define action dulu kan
Define action
Ada action-nya
Itu telah file-nya didapat ke mana
Ada handler-nya, iya
Terus input-nya apa aja, loop field-nya
Di dalam form-nya
Ada yang namenya sesuai
Sama namenya sesuai
Kayak misalnya, itu kan namenya sama dengan file
Type-nya apa, file
File-nya harus DC gitu ya
Nggak boleh kosong
Atau tadi misalnya name
Atau apapun string
Ya, di dalam form-nya
Harus ada input name sama dengan
Apa, email
Oh, ini kalau mau redirect setelah
Form-nya disubmit ya
Iya, itu dari server side
Kalau yang tadi itu
Yang dibawah, kalau dari client side
Mesej validasi input error
Nampil gimana pada form
Dibawah input warna merahnya gitu
Oh, ini kan tinggal styling aja kan
Tinggal pakai if aja
Kalau error, nampilin error
Mesejnya gitu kan ya
Dan
Ada helper-nya
Buat ngecek itu input error
Atau bukan, jadi buat ditaruh di bawah
Misalnya email, coba deh
Find is input error
Is input error
Is input error
For more complex input validation
On the back-end, you can
Use provided is input error
Utility function
To retrieve input error, use
Is input error
Kita ambil dari actions
Ini kita perlu tulis
Enggak kan, ini udah built-in ya
Ya built-in, tapi kita harus import
Kita import
Terus habis itu, kalau ada
Error-nya dikumpulkan dari action ini
Maka dia akan
Itu kan tadi, itu compose data
Data comma error dari hasil
White actions.newsetter
Nah, error-nya itu bisa kita cek
Maka is input error, apakah dia input error
Kalau input error
Udah otomatis itu udah
Type save semua juga
Error dot books dot email
Nah, atau dot email
Atau dot apa, itu tergantung
Input fields yang kita
Definisio ini
Di action-nya tadi
Iya, iya, iya
Kebayang, kebayang
Jadi, ya udah kan
Misalnya ada error dot books dot email, tinggal direner
Di balah, dot input email
Seru ya
Apa lagi yang mau kita bahas
Yang berkaitan dengan server
Session, session terakhir
Session?
Ini belum pakai sih
Cuma, ini di Laraftel
Kalau gak salah juga ada
Apapunnya, ya itu
Share data between request
Kalau request kan biasanya cuma
Dikit ya
Kalau pengen persisting
Pengen nyimpan suatu data yang
Setiap request ada
Nah, ini
Ada innovation
Nah, ini menarik sih
Belum nyoba, cuma menarik
Bisa pakai provider, jadi
Ini kan tergantung servernya apa ya
Jadi, kalau gak salah, kalau pakai Netlify
Atau Vercel Adapter
Dia udah otomatis
Tapi kita bisa
Define sendiri
Jadi kita punya radius ya, pakai radius
Untuk nyimpan session-nya ya?
Ya
Semacam key value
Key value storage ya
Storage-nya disimpan dimana, kalau tadi
Kalau tadi kan dia, ini
Contohnya di Redis
Kalau kita pakai Cloudflare
Bisa di Cloudflare Session
Ya
Di CDN berarti
Kalau gak salah, ini kalau kita pakai Netlify
Atau Vercel kan mereka punya product
Ya, apalah namanya, gak tahu namanya
Apanya semacam kayak gitu
Key value storage juga, itu udah input
Ya
Berarti session-nya disimpan di database ya
Tapi database yang berbeda
Yang key value storage kayak Redis
Atau
Di database service
Apa service hosting yang kita pakai ya
Kalau di PHP
Di Memory
Memory
Di File
Di File juga bisa ya
Bisa
API endpoint
Oke
Menarik
Middleware
Tadi udah dibahas ya
Bisa masukin ke dalam konteks
Standard ya
Kalau ya, kayak bookie
Helper-nya tadi, itu juga berlaku
Di middleware, jadi pokoknya
Di seluruh
Astro, kan ada konteks
Sebenernya kalau
Yang pernah pakai Express dan semacamnya
Pasti udah familiar
Di konteks ya, ada
Conteks.bookies
Itu bisa diproses pakai
Itunya Astro juga
Oke, ya middleware-nya ya
Oke
Ada lagi yang mau dibahas
Nanggung, ada lagi, satu lagi nih
Adapter
Ecosystem
Jadi tadi kan kita
Kita udah liat
Adapter yang offisial ya
Tadi cuma ada
Note, Cloudflare
Versel, sama Netlify
Tapi ini
Astro ini kayak filosofinya tuh kayak
Ya bisa dibilang, bertentangan lah
Kebalikannya Next.js, kalau Next.js kan
Ya walaupun
Lock-in
Bisa mungkin lock-in ke Versel
Yang dibikin
Ya mungkin bukan dibikin sih, cuma maksudnya
Ada behavior khusus yang
Bikin sulit
Bisa
Langsung kita
Deploy di null
Atau di environment lain kan
Harus banyak adaptasinya kan
Dan itu harus ya
Developer sendiri yang figure out gimana caranya
Untuk deploy Next.js
Macam-macam environment lain
Tanpa breaking fitur-fiturnya
Nah kalau Astro itu sebaliknya
Malah kayak di-encourage
Mereka punya yang offisial
Tapi kalau misalnya
Siapa pun yang mau bikin
Adapter custom buat runtime
Entah apa
Itu dikasih dokumentasinya
Dikasih cara dikitin
Berarti bisa jalan di Cloudflare
Cloudflare Edge juga kan ya
Ada Cloudflare Worker
Maybe
Worker
Ada adaptornya
Udah ada ya
Itu yang offisial
Nah kalau misalkan
Sebetulnya ke depannya service
Bukan cuma Node
Node.js, Cloudflare
Webcell, Hama, Netlify
Kalau misalnya mau bikin
Adapter buat deploy
Astro dengan mudah
Coba
Ke third party service
Ke third party service coba
Third party service
Ke atas
Third party services
Deployment guide
Itu
Udah ada semua ya
Bisa ke pages
Tapi kalau itu SSR ya
Ya SSR
Sorry SSG
Ya static type generation
Oh mungkin
Ada yang mau bikinin adapter untuk
Bisa ke hosting
Domensia boleh ya
Hosting
Node.js
Ya Node.js
Oh iya benar juga
Langsung Node.js ya
Benar benar benar
Bisa ke Firebase juga
Firebase
Hosting kan
Coba Cloudflare, saya pengen tahu
Cloudflare gimana sih
Bisa ya langsung ke
Ke
Worker ya
Worker
Wah boleh nih
Itu kan tadi udah di address semua
Di adapternya maksudnya apa
Kalau buat nge build static
Gimana kalau buat
Build yang server side
Yang SSR, kayak gimana
Oke
Dan kalau nggak ada
Bisa udah disediakan
API untuk membangun
Adapter ini ya
Bikin sendiri atau minta ke service yang kita
Pakai, tolong bikin dong
Banyak juga ya
Flick itu apa
Coba dono, flick, flight control
Kayak produk-produk yang
Dengar aja
Fliver, body, apa
Apa itu
Kinsta
Kalau Kinsta tahu
Oh tahu, apa tuh
Ini juga
Hosting
Hosting ya
Fliver itu produk
VPS
VPS
Oke
Independence injection
Astro pakai apa
Saya nggak tahu
Butuhnya buat apa
Butuhnya buat apa
Dan kenapa harus pakai apa
Pakai JavaScript aja nggak bisa ya
Dependency injection
Yang gue tahu sih ada namanya
Integration
Integration itu kayak plugin yang bisa
Akses macam-macam lifecycle-nya
Lifecycle-nya Astro, nggak terus bisa
Install dependency juga
Jadi kalau buat kayak mem-package yang
Kita harus install-install
Daripada user yang mau pakai library
Itu harus install dependency
Banyak ribut ya namanya
Integration
Nggak tahu itu ngejawab atau nggak sih
Pertanyaannya itu atau bukan nggak tahu sih
Integration
Ke
Framework ini
Kalau yang unofficial ya kita bisa
Bikin apapun
Hmm
Nah itu bisa nge-access lifecycle-nya
Kayak apa lah deh
Jadi kayak ada hooks-hooks-nya
Cuma belum pernah bikin beneran sih
Cuma ngeliat punya skills
Kalau barusan nge-search ini
Ada kayak Inversify JS
Injection JS
Sama T-Series
Oh Microsoft
Ada Microsoft
T-Series
Hmm
Sama
T-Series
Tapi belum pernah pakai
Barusan Google
Soalnya
Sama belum pernah pakai
Tapi kan tadi malah buat install dependency
Salah ya
Ini salah satu teknik
Dalam loading
Pattern
Kayaknya vanilla juga bisa
Bisa bisa
Pakai vanilla
Maksudnya
JavaScript biasa aja bisa
JavaScript biasa aja harusnya bisa
Karena itu
JavaScript kan
Funksional kan
Jadi memungkinkan
Menyerimkan
Berbagai data atau fungsi
Sebagai parameter dari
Algumen dari fungsi yang lain
Jadi harusnya dengan JavaScript aja
Sebenernya bisa
Berarti ini Inject-nya itu
Pas runtime
Setiap jalan
Atau pas build-time aja
Saat runtime
Runtime ya
Pas di kode kan
Kode-nya kan
Kita mau nge-inject
Value apa ke
Komponen lain
Ini sebagai
Alternatif aja ya
Tapi kita belum pernah pakai ya
Baru googling
Bahkan belum pernah nge-jalanin
Depensi Injection sih
Bisa kerja
Seperti beberapa tahun
Tanpa paper
Tapi bagus nih hal-hal kayak gini nih
Yang tiba-tiba ditanya ini
Tiba-tiba nggak ngerti
Benar-benar
Ini lumayan populer
Di angular ya
Lumayan populer di angular
Angular pakai Depensi Injection
Kalau butuh
Dashboard bisa kombin dengan Strapi
Strapi itu CMS bukan?
LMS
Iya CMS ya
CMS
Bisa pakai apapun sih
Headless
Service apapun
Komponen UI apapun
Dan bisa
Create markdown
Sebagai content source
Oh jadi
Backoffice-nya ya
Ya
Oke oke oke
Mungkin untuk Astro
Cukup sekitu ya
Terima kasih buat diskusinya
Kita perlu bahas
Topik buat Minggu depan
Minggu depan belum ya
133
Oke episode 133
Kita mau bahas apa?
Enggak
Saya ganti
Depensi Injection apa?
Serius
Emang bisa?
Yakin apa mau baca dulu
Iya mau belajar
Oh jadi orang yang tahu
Siapa ya
Siapa ya
Ini kemarin
Kita punya tamu nggak sih
Kita punya featuring
Minggu depannya lagi ya
Minggu depannya lagi
Bahas tentang database itu
Kita di tanggal 17
Ini
Depensi Injection
Ini fundamental ya
Iya pattern
Okay
Ini kita
Mendapatkan
Banyak ide dari
Mas Irfan nih
Minggu lalu
Dia submit banyak topic
AI
Assistant
Kemudian storybook
Shopify front-end
Relative component
Dan games
Storybook kita belum pernah
Bahas specifically
Ya belum
Terus motion
Ada banyak
Bisa kita ambil
Huh?
Ya kita mau voting kan ya
Flutter
Saya itu
Mending kayak
Tailwind
Ada kan tailwind tadi
Ada tailwind ya
Tailwind
Dokumentasi sama storybook deh
Oke sebentar
Ada satu yang mau saya
Suggest
Beda situs
Ada yang sudah submit soalnya
Nantap
Takutnya kalau mandi
Oh ya udah
Gapapa
Ya boleh
Mumpung ada yang submit
Cuma bentar
Ini kan project client
Ini maksudnya apa
Sisi kayak atasnya
Ini gapapa nih
Bentar bentar bentar
Oh udah gak bisa
Eh bentar
Amazing ticket
Yang pentingnya maksudnya
Ini gapapa berarti
Kita si client yang
Punya amazing ticket ini
Kalau gak masalah
Udah mati
Githubnya juga
Oh bukan belum
Kok gak bisa back
Ayo
Iseng submit
Mau submit website yang dibuat kantor
Tapi takut clientnya gak bersedia
Jadi paling ini ada satu website bantuin temen
Oh ini bukan
Oh dia bikin sendiri
Oke oke
Tadi belum baca sisa kalimatnya
Ya udah aman
Kita bahas minggu depan ini
Deal
Sama inilah
Apa namanya
Website-nya danantara
Website-nya danantara
Kenapa mau dibahas
Atau website yang lain
Oh boleh
Tapi minggu depan
Saya absen dulu
Ngeri
Tapi gak apa-apa
Kalau ada yang submit
Salah satu timnya yang submit
Gak apa-apa kita terima dengan senang hati
Tapi kalau orang yang submit
Yang punya atau yang bikin
Perwakilan yang bikin
Saya bikin mohon
Nah itu boleh
Website posongan
Storybook bagus buat
Dokumentasi, ya storybook bagus
Query container telwin sudah dibahas
Telwin aja belum
Ya nanti kita masukin
Oh telwin juga bisa dipecah ya
Jadi macam-macam, jadi 2 episode minimal tuh
Telwin in general, telwin hidden gem
Ya atau telwin versus
Vanilla
Ya biar-biar
Kita pernah bahas itu kan
Maksudnya kayak perang ya ada yang suka
Dengan class name yang panjang
Begitu atau ada yang
Lebih prefer gaya
Gaya bootstrap
Dia nyediain satu
Class name yang
Meliput beberapa
Class name nya si telwin kan
Jadi lebih clean aja
Menarik sih kalau telwin itu banyak misconceptionnya
Soalnya jadi kayak
Kayak bootstrap, oh kalau pakai telwin
Berarti bakal kelihatan sama semua
Ya padahal
Telwin kan gimana nyediain
Item-itemnya doang, gimana you decide-nya
Aja kan, kalau misalnya yang
Bikin ya kayak kita, maksudnya
Bahkan gue sebagai front-end dev yang
Mungkin
Kalau buat yang estetik dasar
Kayak contrast dan lain-lain kan
Telwin udah ngebantu banget kan
Ada token namanya design token
XS, SM,
LG, large yang ukuran-ukuran
Gitu kan ada wirarkinya, H1 paling gede
H2 lebih kecil
H3 lebih kecil lagi, maksudnya
Kalau dari segi gitu
Ya kalau kita pakai defaultnya
Ya emang gitu-gitu aja, tapi
Kalau saya pengen kreativitas yang lebih estetis
Atau indah, atau punya karakter
Branding sendiri, ya you hire
Visual designer lah
Buat bikin jadi macam-macam
Atau pakai yang kayak DCUI,
Telwin UI, dan lain-lain
Iya, kalau misalkan
Mirip-mirip ya karena
Basically kita copy paste
Dari contoh atau dari Telwin UI
Dari UI component
Yang berdasarkan Telwin
Jadi mirip-mirip semua
Itu sebenarnya customizable kan
Tokennya itu bisa dikustom
Kayak misalnya kombinasi warnanya bisa dikustom
Terus maksudnya style-style bordernya
Varian, kan ada variance juga
Misalnya varian-varian kartnya
Warna primary, secondary
Kombinasinya kayak gimana
Itu beneran semua configurable kan
Telwin itu cuma nyediain sistemnya
Dan reasonable default
Ya kalau misalnya kita semua pakai reasonable default
Terus hasilnya sama semua ya
Aneh juga kalau Telwinnya misalnya
Sama Telwin
Itu dia teaser untuk episode Telwin
Yang gak tau kapan
Kita tubuh aja
Biasanya gini kelas Telwin
Padahal episode Astro
Satu lagi episodenya
Why you don't need
Vanilla CSS, use Telwin
Why
Itu baru-baru ya
Orang penuh marah-marah nih
Episode minggu keberapa, why you need
Telwin, abis itu why you don't need
Telwin gitu ya
Telwin versus
Vanilla aja udah
Terus thumbnail-nya
Telwin is in good step
Orang yang terpaksa emosi gitu
Padahal pas show
Gak
Kita dahulu kan yang
Itu ya bedah situs dulu ya
Coating-nya mungkin buat 2 minggu lagi
Karena minggu depannya ada mas Donny yang makan
Jakuri versus Vanilla
Jakuri versus Vanilla
Oke
Mungkin untuk malam ini
Udah hand dulu, terima kasih banyak
Buat diskusinya teman-teman semua
Kita ketemu lagi minggu depan
Dengan topik bedah situs
Dari teman kita
Sampai jumpa lagi, selamat malam
Selamat istirahat, terima kasih banyak
Buat domain Nesia, jangan lupa
Buat
Yang mau hosting
Kode-kode ngobrolin web DN
DN itu Domain Nesia
Jadi ngobrolin web DN
Oke
Itu yang pilih
Kode promo itu mas Niza itu
Jadi mujarat
Bisa mas Niza kan yang bikin itu
Kodenya
Nggak, itu dikasih
Kita terima-terima aja
Dikasih sesuai nama
Referral
Jadi
Kita ketemu lagi minggu depan
Dengan topik yang berbeda
Selamat malam, selamat istirahat
Sampai jumpa, bye-bye
[musik]
Deskripsi asli dari YouTube
π£οΈπΈοΈ Selasa malam waktunya #NgobrolinWEB! Malam ini kita kembali akan membahas Astro, fokusnya di sisi server. Masih bersama Ivan dan Eka. Buat yang penasaran yuk mari ramaikan! π· Gunakan kode NGOBROLINWEBDN dan dapatkan DISKON 10% Untuk Pembelian Web Hosting DomaiNesia: Beli Web Hosting DomaiNesia disini: https://my.domainesia.com/ref.php?u=25754 π DISKON 50% Cloud VPS Turbo dengan Kode Promo: NGOBROLINVPSDN Beli Web Hosting DomaiNesia disin: https://www.domainesia.com/cloud-vps/?promo= Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
3 Jul 2024
Ngobrolin Elixir
Episode ini membahas tentang Elixir, bahasa pemrograman fungsional yang berjalan di BEAM (Erlang Virtual Machine), bersa...
18 Jun 2025
Ngobrolin Database
Episode ini membahas Database Scaling, khususnya perbedaan antara horizontal scaling dan vertical scaling. Topik ini dia...
1 Feb 2023
Ngobrolin Storage
Melanjutkan episode cookie minggu sebelumnya, pembahasan bergeser ke tempat penyimpanan lain di browser β bukan basis da...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .