Bedah Situs - Ngobrolin WEB

1:32maka yang dulu-lulu

1:34Halo, halo

1:40ada Kaisa

1:42oh, update ya, kemarin

1:44ada acara Meetup Kursor

1:46jadi, apa namanya?

1:50saya gak bisa ikut

1:52pas lagi itu ya

1:54paskah, iya

1:56jadi harus di bada dulu

1:58namanya, cafe kursor apa

2:04kursor cafe, jadi acaranya di cafe

2:06serius?

2:08iya, cafe kursor

2:10cafe kursor ya

2:14kebetulan ada devrailnya yang dateng

2:16jadi

2:18seru lah, ya kalau talknya biasa

2:20standard lah ya, jualan

2:22tanda kutip kan

2:24ngobrol-ngobrol sama temen yang

2:26seru

2:28kenapa?

2:30dapet 50 dolar

2:32makanya

2:36kemarin bilang sama penyelenggarannya

2:38kalau bisa setiap bulan ada meetup

2:40jadi setiap bulan saya talk up

2:42oh, kursor from cafe

2:44kursor from cafe tuh, kata mas Zain

2:46tuh

2:48cfc

2:50kursor from chicken

2:52oke, malam ini

2:56kita dipersembahkan oleh

2:58siapa ini?

3:00malam ini kita kembali

3:02bekerja sama

3:04bekerja sama, berkolaborasi dengan

3:06Domain Asia, jadi temen-temen

3:08yang mau bikin website

3:10atau mau

3:12fatcoding gitu ya, terus bingung kan

3:14deploynya dimana, bisa salah satunya

3:16beli domainnya di Domain Asia

3:18bisa hosting di Domain Asia

3:20itu dapat diskon 10%

3:22kalau pakai promo code nya ngobrolin

3:24webdn

3:26kalau yang mau pakai

3:28vps

3:30virtual private server, diskonnya

3:32lebih gede, 50%

3:34itu promo code nya

3:36sebentar

3:38promo code nya

3:40ngobrolin vpsdn

3:42dan kode promo nya

3:46bisa dipakai lebih dari 1 kali

3:48di akun yang sama, jadi gak perlu

3:50register, gak perlu pakai email

3:52boongan, gak perlu bikin baru lagi

3:54pake aja

3:56yes, jadi terima kasih Domain Asia

3:58mana, propertinya

4:00gak minum, gak minum

4:02minum dong, minum dari Domain Asia

4:04kalau mau beli air gelas

4:06katanya mau beli air gelas

4:08gimana sih

4:10gak ada

4:12minta sama istri, eh tolong buatin teh dong

4:16terus

4:18dia bawa ini

4:20secara

4:22gak minta

4:24pake gelas ini

4:26organic ya

4:28organic

4:30asal ambil

4:32padahal

4:40jadi malam ini kita kembali

4:42ke sesi bedah situs

4:44bedah situs itu kaya ini ya

4:46arkeolog gitu ya

4:48asannya ya

4:50kok arkeolog sih

4:52iya kaya sering arkeologi

4:56itu sih maksudnya ya

4:58iya situs

5:00perbakala

5:02tapi situs-situs baru

5:08milajofovis dong

5:10beda lagi

5:12eh salah, Tom Rider, Angelina Jolie

5:14salah

5:16oh beda ini nih

5:18beda jaman nih

5:20Tom Rider yang baru

5:22apa Ridley

5:24Ridley

5:26gak tau

5:30gak ngikutin lagi

5:32jadi malam ini kita akan

5:34membahas

5:36beberapa website

5:38yang dikirimkan

5:40melalui bantuan

5:42dari Dominicia ya, berhubung

5:44kita tunggu di GitHub

5:46yang submit gak terlalu banyak

5:48jadi udah kita bahas semua

5:50terus kita minta tolong

5:52tim Dominicia untuk

5:54mumpulin, eh ternyata banyak loh

5:56ada berapa tuh

5:58lumayan banyak, jadi kita pilih

6:0012 ya

6:02kita pilih yang

6:04menarik-menarik

6:06menariknya susah

6:08berantem dulu

6:10banyakan menarik

6:12seru-seru ya, bagus-bagus

6:14termasuk juga ada yang

6:16vibe coding kelihatannya ya

6:18jadi, dan

6:20serunya lagi, ternyata malam ini

6:22yang bikin ikutan

6:24yang bikin ikutan

6:26siapakah dia

6:30siapakah dia, wah ini tamu

6:32yang cukup sering ya, kita

6:34undang ya, berapa kali ya

6:36apakal parmas Zain

6:42tamu tak diundang

6:44eh diundang, diundang sama

6:48diundang

6:50kali ini diundang, yang dulu kan

6:52yang berung aja kan, komen-komen tamu

6:54iya betul

6:56kali ini secara resmi diundang

6:58oleh Dominicia lagi ya

7:00yang homie, rayi ya

7:02rayi

7:04betul kan

7:08ternyata ikut

7:10nah, mas Zain

7:12kesibukannya apa

7:14akhir-akhir ini

7:16ngulik apa, ngulik AI pasti ya

7:18iya sudah

7:20udah gak pernah meluas kode lagi

7:22jadi bukan pejuang kode lagi dong

7:26sekarang pejuang agent

7:28ya kan

7:30tagline saya kan

7:32berjuang dengan kode

7:34agak ada negan ya

7:36enos kode gak ada saya

7:42tapi yang mempunyai ada kode nya

7:44tapi berjuang dengan

7:46agent juga bisa masuk kan

7:48berjuang dengan agent

7:50terjadi agen ya

7:54gimana setelah

7:56antropik

7:58melarang

8:00penggunaan

8:02ke open cloud

8:04kira-kira mau pindah kemana nih

8:06tapi kan dapat bansos kan ya

8:08200 ya, dapat bansos gak sih

8:10tapi gak cukup mas

8:12berapa lama itu 200

8:16sebulan

8:18bansos 200 itu

8:20ini udah habis 95

8:22padahal berdua hari

8:24baru dua

8:26paling lama

8:30seminggu bertahanin

8:32ini 4 hari

8:34kebetulan emang

8:36dia habisin dia

8:38dia habisin ini

8:40maksimalin sampai

8:42subscription saya berakhir

8:44setelah itu

8:46ya nanti subscribe yang lain

8:48tapi bagaimana sih

8:50antropik bisa tahu kalau kita

8:52pakai

8:54bukan, eh gak tahu kalau

8:56ada dari kantor, cuman dari kantor

8:58kan cuman teams kan

9:00saya colokin ke open cloud

9:02jadi cuman satu tiket

9:06itu pun

9:08langsung habis gitu, sedangkan kalau

9:10mau lebih hemat kan emang harusnya pakai cloud code sendiri

9:12200 bolar

9:162 hari itu

9:18bukan 100 ya, 95 tadi 2 hari

9:20100 ya

9:22ada berapa agent di open cloud

9:26agent dot com

9:30berat terus ya

9:32ada situsnya

9:34ada situsnya

9:36ARK ya

9:40ARK ya

9:42ARK ya

9:44ada 12

9:4616

9:48ya pantes aja

9:504 hari 200 dollar

9:5215

9:54sebenernya bukan masalah banyak agentnya

9:56lebih ke

9:58dari 16 ini

10:00sebenernya yang aktif cuman

10:02yang aktif seharian mungkin cuman 4 atau 5

10:04cuman kaya tinggal seberapa banyak

10:06oke

10:10dipake seluruh keluarga ya

10:12kalau gak salah ya, istri anak-anak

10:14juga ya

10:16istri pakai dua privat

10:18buat istri, terus anak

10:20satu

10:22tersendiri sisanya

10:24berarti banyak juga ya

10:28dipake privat sama mas Zain

10:30lumayan kan

10:32banyak mainan kan

10:34banyak mainan

10:36oh jadi kayak chat GPT

10:38cloud.ai yang web base

10:40itu udah gak dipake lagi sama

10:42keluarganya mas Zain ya berarti ya

10:44chat GPT gak, udah

10:46walaupun ya setelah ini kan mau pindah

10:48kembali lagi

10:50tapi ya

10:52fitur native nya hampir

10:54jarang dipake sih karena

10:56kalau tadi sih

10:58dengerin podcast orang tentang open cloud

11:00podcastnya Clearvo yang sama

11:02Lenny gitu

11:04itu bedanya adalah

11:06open cloud itu udah kayak barang kita sendiri

11:08udah kayak dikustom

11:10mungkin ibarat

11:12taminya itu udah diragasin sendiri

11:14atau kalau PC itu PC dari kita sendiri

11:16itu beda kan rasanya dengan

11:18PC built in misalnya

11:20betul-betul

11:22oke

11:24kita udah akan ngomongin

11:26PC capung

11:28kita gak akan ngomongin juga

11:30sebenernya ini bisa jadi

11:32topik sendiri ya

11:34sebenernya kita mau ngomongin asil

11:36dari open cloud

11:38oh gak tau ini asil dari mana nih ya

11:40ya open cloud sih

11:42sebenernya asil dari open cloud

11:44asil dari open cloud ya

11:46keliatan banget

11:48bahasa LLM

11:50ternyata salah satu

11:52peserta yang

11:54men submit website nya adalah

11:56atau situs nya adalah Mas Zain ya

11:58nah ini adalah

12:00ini hosting nya di dominasi ya beneran ya

12:02eh domain nya ya

12:04domain nya ya

12:06ini domain nya di dominasi ya

12:08ini kan static doang ya

12:10gps buat apa gitu ya

12:12kalau besok kan sayang banget

12:14oke

12:16kok mirip-mirip kaya itu ya

12:18yang saya demoin waktu di Jogja ya

12:20ya ini mah standar

12:22UI nya

12:24apa workspreso ya standar sih

12:26begitu liat ini

12:28kesan pertama ya

12:30kesan pertama gak kelihatan

12:32yang tenggelam gitu loh

12:34kontrasnya ya

12:36kontrasnya

12:38kontras

12:48dan kuningnya

12:50kuningnya mentren kan

12:52hitam dengan

12:58kuning itu

13:00gak bersahabat

13:02hitam dengan kuning

13:06jadi pembilihan color

13:08bukan di

13:10devtools

13:12ya kalau di devtools ini ya

13:14ternyata kontrasnya emang kurang

13:16yang text nya itu

13:18ceknya gimana ceknya coba

13:20tolong diajarin saya

13:22langsung inspect ya mas

13:24inspect

13:26itu yang

13:28kiri

13:30ya boleh itu deh

13:32kiri mas kiri atas

13:34kiri atas itu ada panahnya

13:36kiri atas kiri-kiri

13:38iya

13:40nah itu kelihatan

13:42hover

13:44itu berapa dia bilang 12

13:46kalau ini kuning gak apa-apa

13:48abu-abu itu loh

13:50gak bisa di gedein

13:52gak bisa kalau popovernya

13:54bisa ya

13:56hopovernya gak bisa di gedein ya

13:58kelihatan ya

14:00kelihatannya kontrasnya

14:02aman

14:04yang ini oke karena itu dibandingin sama

14:06hitam

14:08bukan kan

14:10nah itu dia

14:12ini gak ada

14:14hovernya

14:16oh di atas dia ternyata nih

14:18itu 3.0

14:20ada tandanya

14:22kontrasnya kurang

14:24harusnya 4.5

14:26minimal

14:28harusnya minimal 4.5

14:30oke

14:32saya laporin ke opencloud

14:34maksudnya dia bener-bener interest

14:36sudah dia WCAG

14:38kompatibel

14:40udah punya itu belum workflow

14:42buat ngasih tahu

14:44biar dia otomatis auto

14:46kayak apa namanya sekarang kan lagi

14:48ngetren itu yang self

14:50apa itu

14:52kayak gini misalnya

14:54ada error

14:56nah terus biar engine-nya cukup pintar

14:58buat bikin

15:00engine skills atau apa

15:02taro di memori biar besok kalau dia bikin

15:04lagi

15:06dia otomatis cek hal ini

15:08tanpa disuruh udah punya sistem

15:10buat kayak gitu gak

15:12memori ya

15:14memori yang persist

15:16yang persistens

15:18bukan cuma di sesi ini doang

15:20bukan cuma di project ini doang

15:22karena ini kan hal yang biar kita

15:24gak usah mulang-ulang lagi kalau besok bikin lagi

15:26sejauh ini sih saya masih manual

15:28cuma

15:30bukan maksudnya manualnya

15:32jadi kalau ada hal penting itu

15:34berarti jangan sampai lupa lagi ya

15:36nanti dia ingat gimana

15:38buat skill aja kan

15:40bahkan bukan

15:42ya bisa jadi itu

15:44dari situ bisa jadi turunnya bisa ke skill

15:46cuma kan skillnya kan juga

15:48gak selalu di info kan

15:50jadi kadang biar dia

15:52tau kapan dia harus info skill itu ya

15:54itu harus ada di kalau di open call

15:56harus ada di tools atau di memory

15:58atau di agents

16:00atau update UI skill

16:02maksudnya ini kan bakal ngaruhnya

16:04cuma kalau besok bikin UI lagi

16:06berarti pilih warnanya harus

16:08pertimbangin contrast

16:10itu berarti manual kita

16:12suruh update aja

16:14ya jadi selama ini selalu

16:16saya bilang saya bisa screenshot juga sih

16:18kalau mau screenshot ininya

16:20mau-mau-mau

16:22telegramnya

16:24gak terlalu tadi mas

16:26boleh ya

16:28aman ya

16:30langsung dibenerin tuh

16:32langsung live session

16:34iya langsung disuruh ya

16:36selesai ngomong dia udah berubah

16:38warnanya jadi putih

16:40udah di deploy lagi

16:42ini deploynya kemana mas

16:44di tap

16:46deploynya ke cloud cloud

16:48sekarang yang ini

16:50juga sih jarang-jarang juga sih

16:52saya kenyob telepoksi

16:54bisa

16:56screenshot telegram

16:58telegramnya

17:00sudah ready mas Riza

17:10mas Zain

17:12udah

17:14nah ini

17:18mungkin biar agak gedean

17:20wah

17:24hati-hati nanti ke spill

17:26oh itu

17:28kurang kelihatan ga?

17:30udah udah

17:32cukup

17:34teman-teman yang lain boleh di info

17:36yang nonton

17:38baru saya bilang ini

17:40bahkan saya gak kasih tau elemen yang mana

17:42saya copy aja

17:44saya copy textnya

17:46karena saya gak kasih tau juga

17:48dia gampang juga carinya

17:50dia tinggal nge-grab setengah aja

17:52terus

17:54dari sini dia cari oh ya

17:56kurang-kurang

17:58itu tadi nge-hover

18:00elemen dia bisa langsung dapetin

18:023,7 contrast ratio nya

18:04langsung

18:06ini apa nih mas?

18:08ini continuous deployment berarti bisa

18:10otomatis di deployment dia setelah selesai

18:12iya kan

18:14karena saya sudah set up CI nya

18:16jadi harusnya

18:18commit push

18:20and PR created

18:22oh baru PR doang

18:24baru PR

18:26oh belum di approve ya

18:28tapi bisa di preview sih

18:30bisa di preview di

18:32sini sebentar

18:34oh ya udah oke harusnya

18:36oke langsung

18:38saya approve aja ya

18:42langsung keliatan

18:44kalau masalah

18:46subject review

18:48eh gak bisa

18:50perlu sendiri nih

18:52ini karena saya yang res PR

18:54oke karena ini kan saya set up

18:56saya set up

18:58buat harus di approve gitu kan

19:00tapi dia tuh

19:02set up nya sekarang open cloud nya

19:04gak selalu konsisten create PR sebagai dia

19:06jadi yang commit ini civil jack

19:08kalau dilihat PR nya

19:10mungkin kalau mau liat PR nya bisa

19:12di share di masrisya sekarang

19:14berarti masing-masing agen dibikinin

19:16akun github sendiri ya

19:18so far karena yang coding cuman

19:20willjack sih cuman willjack aja yang saya

19:22kasih link ke

19:24yang saya kasih akun github

19:26akun

19:28oh gak bisa share

19:30tapi

19:32saya salut dengan timnya

19:34github ya

19:36dengan dunia agen-agen

19:38yang itu request ke github itu

19:40menggila kali ya

19:42karres api nya mereka lewat

19:44github sialai

19:46I can approve it myself

19:52so please

19:54oh iya ada syaratnya ya harus

19:56di approve sama yang lain ya

19:58iya gak boleh approve sendiri kan

20:00gitu kan

20:02ini update open cloud yang baru nih

20:04bisa ada streaming bisa jadi

20:06gak ketauan kalau dia typing

20:08typing dan

20:10iya

20:12ini yang beresan

20:14yang barusan

20:16itu bisa dilihat

20:18bisa di preview ya

20:20betul

20:22nah better

20:24spek lagi

20:28ini kalau dulu zaman muda

20:30udah

20:32udah selesai

20:34apalagi ini

20:36enak sekali

20:40luar biasa

20:42tapi gimana coba ceritain ini

20:44situsnya untuk ini ya

20:46untuk

20:48kumpulan kafe2

20:50komunitas yang vibe coding ya

20:52iya jadi sebenernya komunitas ini tuh

20:54kita sih gak diniatin buat

20:58bikin komunitas sebenernya cuman

21:00waktu itu niatnya ngombo-ngombo aja

21:02terus kok makin lama

21:04makin rame

21:06lama-lama

21:08ya obrolanya karena

21:10masih dari zaman-zaman AI juga ya jadi kita obronya

21:12bahas seperti pudding mulu gitu kan

21:14bahkan dulu waktu kita awal

21:16ngumpul itu masih belum

21:18saya belum pakai

21:20klatcode sih tempatnya saya belum tau ada klatcode

21:22walaupun sudah launching sih waktu itu

21:24mungkin gak nyampe

21:26satu tahun lalu kan

21:28iya april may tahun lalu lah ini kira-kira udah setahun lalu

21:30iya april may tahun lalu waktu kita ngumpul awal itu

21:32itu belum ada klatcode kan

21:34itu kita masih

21:36waktu kita

21:38waktu kita WFC-an bareng-bareng itu kita masih

21:40banyak ngobrolnya tapi gak coding gitu kan

21:42tapi lama-lama makin ada klatcode makin nyobain macem-macem

21:44ada bits segala macem gitu kan

21:46jadinya beneran beneran masih bisa kerja

21:48walaupun kita ngobrol gitu jadi ya yaudahlah gini

21:50kita namain vibe coding from kafe2 karena kita

21:52banyakan ngobrolnya sebenernya

21:54dan data coding juga cuman yang coding bukan kita kan

21:56WFC

21:58jadi lebih-lebih apa ya

22:00kalau dulu kan masalahnya

22:02adalah kalau WFC kebanyakan ngobrol

22:04jadi gak kerja

22:06sekarang yang kerjain AI kita

22:08ngobrol sambil nunggu

22:10hasilnya

22:12jadi make sense ya

22:14iya jadi make sense

22:16untuk dilakukan

22:18untuk dilakukan

22:20dari situ era nya karena makin besar

22:22udah punya nama awalnya juga gak ada namanya

22:24awalnya cuman group aja

22:26terus ada namanya

22:28waktu itu kita mencanangkan

22:30kalau udah 100 orang anggota group

22:32whatsapp nya kita bikin

22:34ternyata beneran udah 100

22:36yaudahlah aku bikin

22:38ok

22:40laika juga disitu ya

22:42pamer dong

22:44pernah ikut 2 kali

22:46oh iya ya ada

22:48persoalnya agak jauh biasanya

22:50itu pada di untara banget kan

22:52lumayan jauh cuman pernah ikut 2 kali

22:54iya 1 kali

22:56waktu itu kita yang keselatan

22:58terus 1 kali ke utara juga ya

23:00iya

23:02wah jakarta sama bandung

23:04coming soon

23:06wah ini gimana nih prosedurnya

23:08ngisi ya join ya

23:10ya join dulu aja

23:12buat kumpul-kumpul

23:14siang-siang

23:16kenapa?

23:18orang jakarta keliatannya

23:20gak se slow itu

23:22kumpul-kumpul siang-siang

23:24ada juga

23:26mungkin tergantung demografinya juga

23:28mungkin kan

23:30biasanya kan yang di jakarta

23:32yang pekerjanya harus

23:34di jakarta karena kantor

23:36di jakarta misalnya gitu kan

23:38iya kan banyak yang gak fah juga

23:40mas ivan kan juga gak ngantor juga

23:42sebenernya

23:44saya

23:46iya saya gak

23:48ngantornya di rumah ini kantor saya

23:50eh, tekniknya kan kalau kita ada

23:52versi di jakarta bisa dateng

23:54mas ivan harusnya

23:56oh susah dia, kalau di bekasi

23:58baru dia bisa dateng

24:00ada kendala

24:02kalau

24:04kalau culture di jakarta itu kalau misalnya

24:06ada kegiatan nih

24:08satu kegiatan itu udah habis seharian

24:10udah gak bisa

24:12karena waktu ya, karena commuting ya

24:14waktu sama jarak, sibukan

24:16keliatannya yogyakarta sama jakarta

24:18iya misalnya nih

24:20misalnya kumpul-kumpul

24:22atau, ini hari kerja ya

24:24bukan weekend ya, kalau hari kerja nih

24:26misalnya

24:28eh nanti kita jam 4 atau jam 5

24:30ngumpul-ngumpul gitu kan

24:32sama GDI gitu

24:34atau WordPress Meetup

24:36sama komunitas, itu saya dari rumah itu

24:38udah jam 2 jam 3

24:40jam 2 lah, atau jam setengah 3

24:42udah jalan tuh dari rumah tuh

24:44harus sampe tujuan

24:46bisa jam 4, setengah 5

24:48nanti, pak kan makan

24:50ngobrol-ngobrol jam 7 jam 8

24:52anggap lah jam 8 biasanya

24:54sampe rumah udah setengah 11 mas

24:56nah itu

25:04jadi kalau di jakarta itu

25:06kalau dinihatin ya

25:08saya makanya kayak sama

25:10sama kayak

25:12saya pernah ngomong sama Mas Riza

25:14dia bilang dia bisa coding dari HP

25:16dari mall, dari mall saya bilang

25:18dia udah coding dari mall, lewat HP katanya

25:20karena bisa pake TMAX

25:22kalau saya ngomong sama dia

25:24kalau saya sudah jalan-jalan ke mall

25:26itu saya udah gak akan pegang coding lagi

25:28saya nikmati aja jalan-jalan di mall

25:30karena untuk bolak balik itu udah habis waktu

25:32mending saya nikmati sekarang jalan-jalan

25:44sebelum ada open-closed saya nyetir

25:46sambil buka laptop di sebelah

25:48wah ini oh

25:52lebih ini lagi

25:54lebih ekstrim lagi

25:56kan sebelum

25:58ada open-closed kan harus

26:00setiap mau trigger apa kan prong kan harus buka laptop

26:02harus di enter

26:04approve ya

26:06jadi buka, misalnya lagi kerja nih

26:08terus tau-tau, oh ini jadwalnya

26:10anak les gitu kan yaudah akhirnya

26:12kan masih kerjakan

26:14terus ganti internet ke data link

26:16terus taruh laptop di samping kan

26:18anak-anak di belakang kan

26:20yaudah entar sambil jalan

26:22nanti di namung arah

26:24oh udah selesai, entar lagi

26:26itu sebelum

26:28itu sebelum ada open-closed

26:30kan tinggal yes no, yes no aja kan

26:32itu sebelum open-closed

26:34begitu ada open-closed ya udah gak harus buka laptop

26:36tinggal buka HP aja

26:38kalau gak salah Mas Zain yang bilang ya

26:40"Mudik bawa Starlink

26:42sama baterai AKI

26:44masukin Mac mini, Mac mini-nya connect

26:46Starlink sama jalan terus ya?"

26:48enggak enggak, bukan

26:50ini bukan pakai Starlink yang mobile

26:52soalnya

26:54saya bawa Starlink buat mudiknya, tapi nanti di

26:56untuk mudiknya ya di atas lokasi ya

26:58oh kira-kira di jalan

27:00di atas mobil

27:02pasang part itunya Starlink-nya

27:04terus Mac mini-nya

27:06sambungin ke AKI

27:08ternyata bisa

27:10ternyata bisa, gue bisa bayar paket yang

27:12yang sejuta setengah apa kalau gak salah

27:14bisa, ada paket

27:16buatnya yang di pesawat, pesawat tuh pakai Starlink

27:18rata-rata, kapal pesiar pakai Starlink

27:20itu kan jalan

27:22posisinya

27:24kalau mau bisa upgrade paketnya, terus

27:26taruh di atas mobil, bahkan bisa beliin

27:28beli mount-nya gitu, jadi

27:30limon yang ditaruh di mobil, terus jalan aja

27:32tinggal terdiri-diri

27:34itu baterai

27:36bisa dicolok ke

27:38Mac mini, jadi tinggal bawa

27:40pakai tentengan gitu, Mac mini-nya

27:42udah jalan, konek Wi-Fi

27:44Starlink

27:46kenapa harus bawa-bawa Mac mini

27:48taruh aja di ruangan server

27:50di rumah

27:52waktu, nah misalnya

27:54di rumah saya masih sering mati lampu

27:56saya belum beli UPS, jadi

27:58kalau mati lampu, dihariin sendiri ya

28:00iya, nah saya juga baru tau

28:04tapi ternyata Mac mini itu bisa

28:06auto start-up juga ternyata

28:08kalau mati lampu, bisa-bisa

28:10ada setinggan auto start-up

28:12after power failure

28:14karena

28:16dia bisa dijadikan ini juga kan

28:18media server, kayak buat TV gitu

28:20oke, kita lihat ini ya

28:26saya mau

28:28mau

28:30performance

28:32oh iya

28:34karena saya ahlinya performance

28:36ahlinya performance ini

28:38di cek ya

28:40mau

28:42layar sendiri apa

28:44layar sendiri

28:46oke

28:48salah

28:50benar ya

28:52tadi saya cek

28:54ada masalah phone

28:56dan CLS

28:58jadi CLS

29:00ya

29:02buat temen-temen yang misalnya

29:04mau, ini kan

29:06gedein sedikit ya

29:08eh, bisa gak sih gedein

29:10bisa, jadi

29:12bisa buka, oh kita tutup dulu ya

29:14klik kanan, inspect

29:16terus

29:18ke performance

29:20nah

29:22kalau di tes begini aja mungkin cepat

29:24tapi supaya

29:26kalau kita

29:28membutuhkan untuk supaya melihat

29:30performance situs kita itu

29:32bagus apa tidak, usahakan

29:34di throttle, karena di luar sana

29:36gak semua orang pakai Mac

29:38gak semua orang pakai iPhone

29:40jadi jangan pakai spek dewa

29:42untuk

29:44ngedeteksi

29:46atau mengaudit performance

29:48jadi kita harus throttle

29:50CPU nya kita turunkan

29:52saya suka pakai mid-tier mobile

29:54dan network nya saya turunkan ke

29:56fast 4G

29:58disesuaikan lah ya, cuman

30:00lumrahnya di Indonesia sudah 4G

30:02umum lah ya

30:04disesuaikan dengan target

30:06user nya kali ya, target user nya

30:08misalkan dia

30:10koneksinya pakai handphone kah, atau pakai

30:12laptop, gitu ya

30:14yes betul, nah

30:16dan field matrix nya ini dari Crocs ya

30:18Chrome User Report

30:20nah kelihatan tuh dari

30:22dari Crocs

30:24mengatakan lcp nya

30:26fitus ini kurang baik

30:28atau bisa diperbaiki lagi

30:30CLS nya juga masih tinggi

30:32kalau dari sisi

30:34INP nya

30:36so far so good, jadi kita

30:38kalau kita mau lihat ya kenapa dia bisa tinggi

30:40dan kenapa bisa jadi CLS

30:42tinggal di record

30:44untuk INP di klik aja sekali

30:46gitu, dah

30:48itu supaya, karena INP itu

30:50membutuhkan input

30:52oke, kita lihat

30:54nah

30:56kalau di sebelah

30:58performance panel ini mirip dengan

31:00lighthouse, jadi data nya

31:02sebenarnya sekarang sudah mulai disinkronkan

31:04jadi kalau kalian pakai

31:06page speed

31:08inside, page speed itu yang ini ya

31:10page speed word def

31:12kalau misalnya di

31:14analyze

31:16ini juga bisa, ini yang online

31:18ini namanya lab test ya

31:20lab test itu artinya

31:22forensik

31:24ya untuk melihat

31:26ketika, sedangkan

31:28kalau crocs yang ada disini nih

31:30field origin itu artinya

31:32data yang dikumpulkan oleh

31:34google dari

31:36penggunaan browser

31:38chrome namanya chrome UX report

31:40jadi kita rata-rata kalau menggunakan

31:42khusus chrome ya

31:44google chrome, bukan chromium

31:46bukan opera, bukan

31:48edge, bukan brave

31:50jadi khusus google chrome

31:52di laptop

31:54mobile

31:56semua akan mengirimkan datanya

31:58secara anonimus

32:00dan itu namanya chrome UX report

32:02nah, dan dikumpulkan lah

32:04data dari situs ini

32:06secara percentel

32:08percentel 75

32:10artinya

32:12majority dari

32:14situ pengguna

32:16masih mengalami

32:18masalah lcp dan cls

32:20nah

32:22ini udah selesai belum

32:24oh baru tau saya crocs bisa dilihat disini

32:26ya

32:28ini kelihatan nih

32:30ini lab testnya

32:32kelihatan

32:34jadi yang saya bilang apa yang sama itu

32:36adalah hasil analisis yang bagian sini

32:38sekarang sudah disamakan dengan

32:40apa yang kita lihat disini

32:42cuma disini bisa lebih detail

32:44kalian lihat, kenapa lcp nya bisa tinggi

32:46kalau menurut kalian

32:48kira-kira lcp nya yang mana ya

32:50kita tinggal klik

32:52dan kita bisa lihat, ini lcp

32:54ini kelihatan nih

32:56di bawah sini kelihatan ya

32:58kelihatan gak sih

33:00ini ada dcl

33:02ada fcp

33:04fcp first content load

33:06dcl itu

33:08dom content load

33:10ini page load, dan ini lcp

33:12nah ini

33:14menarik nih, kenapa dia bilang

33:16lcp nya setelah

33:18selesai semua di download

33:20bahkan setelah page load malah

33:22sekitar mau lcp nya itu

33:24di depan sebenarnya kan

33:26jadi lcp nya apa sih

33:28ternyata

33:30lcp nya adalah

33:32test

33:34bukan image

33:36lcp itu

33:38ditentuin oleh

33:40broser

33:42broser

33:44jadi setelah

33:46jadi gak selalu

33:48image atau pasti

33:50title, ya gak bisa

33:52kita harus lihat hasil analisa itu

33:54betul

33:56dan lcp itu selalu berubah-ubah

33:58saat page load

34:00misalnya ada text, ada image

34:02jadi nanti lcp itu adalah

34:04just content full paint

34:06di secara kalkulasi

34:08broser, elemen inilah yang paling

34:10besar di viewport ini

34:12ada algoritma khususnya

34:14jadi di above

34:16default bagian mana sih

34:18yang paling dominan, jadi kalau user

34:20lihat itu sekilas, ngerasa oh

34:22ini udah ada content yang

34:24signifikat, nah itu agak

34:26upstart kan ya sebetulnya, tapi harus

34:28ya makanya harus dicek dari dev tools

34:30dari sekilas

34:34pendangan mata saya, saya tau

34:36ini pakai react

34:38dan kenapa

34:42elemen render delay nya tinggi banget

34:44jadi time to first bite nya

34:46disini, tetapi elemen render delay

34:48kenapa elemen ini

34:50lama banget di delay, ya karena

34:52apa itu istilahnya, hydration

34:54jadi dia harus

34:58men download dulu

35:00semua manifest

35:02JSJS ini

35:04sebelum dia

35:06ada dua, kalau gak salah ada dua ya

35:08ada dua render blocking

35:10yaitu CSS

35:12CSS sendiri dan

35:14font

35:16dan saya yakin

35:18disini ada cafe car

35:20cafe JS

35:24ya ini kayaknya

35:26nah kayaknya setelah

35:28dia butuh

35:30cafes ini

35:32membutuhkan index ini

35:34dan index ini membutuhkan

35:36chunk, jadi ada

35:38tiga channeling

35:40sebelum dia bisa

35:42men render

35:44text

35:46sehingga

35:48lcp nya tinggi banget

35:50jadi kalau salah satu dari sini telat

35:52di download, ya udah pasti

35:54ini akan lambat

35:56itu analisa dari

35:58INP

36:00nah kita liat lagi

36:02kenapa ada

36:04CLS, CLS nya tinggi ya nih ya

36:06tuh, CLS nya tinggi

36:08layout shift

36:10layout shift culprit

36:12dia katanya ada layout shift

36:14di

36:16detik 128

36:18disini ada screenshotnya

36:20kita liat aja pelan-pelan

36:22apa yang terjadi

36:24tuh

36:26oh itu kan

36:28karena buka menu nya

36:30iya karena saya buka menu nya

36:32cuman dia disini yang terjadi

36:34ini ini ini ini ini ini ini ini ini ini

36:36dimension image ini

36:38nah

36:40hydration lagi

36:42dan itu

36:44sorry, hydration

36:46dan font

36:48font iya iya

36:58kayaknya bukan image deh

37:00ini lebih

37:02kalau dari ini kan dia JS nya selesai di download nih

37:04kita bisa liat

37:06ini kan ini selesai di download yang si

37:08bmw njs ini

37:10selesai di download

37:12maka semua hadir senjalan

37:14tapi si text

37:16gak ada sebenarnya

37:18cuman si text ini belom dirender

37:20secara react kali ya

37:22react nya belom jalan lah

37:24ceritanya, masih baru text nya doang

37:26setelah semuanya

37:28kena

37:30JS nya jalan

37:32ngerender element

37:34baru JS nya di implement

37:36terjadilah

37:38shifting

37:40jadi enak

37:44intinya

37:46gak perlu tools yang

37:48mewah-mewah yang harus dibeli

37:50di luar sana

37:52dari chrome, brosannya chrome sendiri

37:54sudah sangat cukup untuk

37:56debug core web

37:58vital

38:00langkah lau agak canggih ini ya

38:02tools nya

38:04iya tools nya

38:06seriusin

38:08iya

38:10iya

38:12kalau

38:14performance panel

38:16memang sangat seriusin banget sama si google

38:18untuk di improve terus

38:20bahkan

38:22kalau misalnya

38:24situs nya yang

38:26bisa dilihat nih kenapa nih

38:28ini kalau dilihat ada task nya

38:30yang merah-merah ini, artinya dia

38:32apa namanya

38:36butuh

38:40cpu spike ya

38:42ini kayaknya bukan

38:44dari mas zain punya

38:46ini dari chrome extension

38:48saya, jadi bisa di ignore

38:50kok bisa tau dari extension

38:54ini tulisannya

38:56chrome extension itu

38:58saya ngomong tapi langsung cepet

39:04melihat, karena sehari-hari saya

39:06melihat ini

39:08iya

39:10misalnya

39:12misalnya gini deh

39:14kita lihatnya cuman task

39:16tapi apa task ini

39:18kita bisa tanya sebenernya ai

39:20dan ai nya ini pakai

39:22jamanan nano ya

39:24what is

39:26what is

39:28this jsl

39:30process

39:32ini di screenshot aja

39:36kasi ke open cloud

39:38bisa gak deh, paham gak deh

39:40kalau open cloud langsung sekalian jalanin chrome ya mas

39:46oh iya bisa juga ya

39:48bener juga

39:50oh ini juga

39:52yang punya saya

39:54yang saya barusan tunjuk juga itu

39:56ternyata chrome extension nya saya

39:58yang jalan, gak tau yang mana satu

40:00jadi sebenernya dari proses yang punya

40:02mas zain, gak ada yang long

40:04task jadi aman-aman aja

40:06cuman terjadi ada

40:08phosphate flow disini

40:10phosphate flow karena

40:12css

40:14jadi css nya ada

40:16yang render lagi

40:20jadi ada last complex

40:22jadi kayak css nya tuh

40:24memaksa untuk

40:26si browser

40:28untuk menggeser

40:30biasanya karena dimension

40:32bisa di baca

40:34lebih dalam untuk apa itu

40:36force reflow

40:38biasanya jadi

40:40css sebelumnya sudah ngasih dimension

40:42sekian tapi css selanjutnya memaksa untuk

40:44bergerak jadi itu namanya

40:46force reflow

40:48mesti css js

40:50juga bisa force reflow

40:52ads paling banyak

40:54menghancurkan

40:56force reflow

40:58jadi bisa dilihat

41:00dan force reflow itu mengakibatkan

41:02long task

41:04itu yang banyak

41:06membuat INP nya jelek

41:08namun situs ini INP nya bagus

41:10udah di reflow ya mas

41:12coba di refresh

41:14sudah di reflow

41:16asik

41:18kita coba

41:22kalau

41:24kalau mau misalnya

41:26jangan dihilangkan ya

41:28tidak perlu kalian

41:30buka lagi

41:32buat perbandingan

41:34tinggal di klik

41:36before dan after

41:38ini ada kedua

41:40biasanya kalau saya

41:42ngomong sama

41:44misalnya

41:46tim saya bilang

41:48ini ada masalah

41:50mereka tinggal kirimkan saya bisa

41:52di download trace nya

41:54nanti saya ambil trace nya

41:56saya masukin upload

41:58saya bisa lihat apa yang dia lihat

42:00jadi klien biasanya ini lambat

42:02nanti saya tolong kirimkan

42:04saya ajarkan download nanti saya

42:06analisis kenapa lambat dari tempatnya

42:08zip

42:12sudah zip gede banget kalau gak salah

42:14jason sih banyak

42:16iya banyak

42:18oke

42:20better ya kita liat

42:22lcp nya turun drastis nih

42:24iya

42:26mlebar sekali ini nya

42:28tapi masih jauh sih

42:30secara ini

42:32iya

42:34dia improve nya gimana

42:36ada

42:38PR nya

42:40PR nya yang 2-1 ya

42:42ya bentar

42:44itu gak semuanya

42:46yang di jelasin sama sifan

42:48jadi yang dari penjelasan-penjelasan

42:50yang pengen input sih

42:52lihat apa sih

42:54preload above default

42:56image nya di preload

42:58terus google font nya biar gak render blocking

43:00keren ya

43:02Google font nya

43:04sudah gak

43:06render blocking keren

43:08ini memang harus kayaknya

43:10karena css in js kan ini

43:12jadi auto

43:14auto compile

43:20cuma ini

43:22terlalu telat dia download nya

43:24kenapa ya ini gak bisa digeser lagi ya

43:26ada delay ya

43:28karena dia butuh download ini

43:30download ini

43:32oh iya

43:34karena ini di throttle ya

43:36kalau memang mau lihat dia

43:38dengan kecepatan normal

43:40tanpa throttle-throttle

43:42ini gak ada masalah nih situs

43:44cepat ya

43:46iya

43:48cuma kalau kita throttle

43:50kan kelihatan tuh

43:52jadinya

43:54oh iya

43:56cuma

43:58kembali lagi demografi kita kan

44:00gak semua

44:02internet nya

44:04secepat kilat

44:06gak semua pakai stanley-nya

44:08lihat PR nya

44:12dia jago loh kayak yang

44:14yang minimal buat ngomongin input ya

44:16ada di private chat

44:18ada di link

44:20yang cls kan

44:22tadi tuh gue udah curiga tuh gara-gara

44:24image juga nah terus dia

44:26ngasih fixed dimension apa

44:28ke image nya

44:30dikasih hate

44:32sama auto

44:34cls fixed gue

44:36image nya udah di optimize

44:38cls nya sudah

44:40belum sih

44:42ya itu asumsi dia

44:44di lokal dia

44:46oh

44:48image optimization yey

44:50render blocking yey betul

44:52ya inget dulu

44:54siap-siap

44:56digantiin

44:58sama opus

45:00dia masih ngelira

45:02lcp nya itu adalah si hero

45:04logo

45:06oh iya

45:08ternyata bukan

45:10makanya butuh insert lebih lanjut emang dari inspeksi manual

45:12ini lah yang membedakan fact powder

45:14yang cuman bisa nunjukin

45:16eh error

45:18jelek gitu

45:20ya tapi

45:22theoretically bisa di automasi

45:24juga kan yang kayak tadi

45:26ivan nyontohin download aja

45:28hasil ini nya zip nya

45:30kasiin ke willjet

45:32kasiin guiden

45:34iya cuman untuk tau download dimana

45:36juga kan iya makanya

45:38dari kita semua inti apa cuman

45:40ngomongin tau

45:42jadi ini adalah multiplier

45:44kan si ai nya itu

45:46memultiplai skill

45:48atau knowledge kita

45:50tapi multiply nya

45:52terang gila ratusan kali

45:54sebenernya

45:56secara umum kan ini yang kita lakukan juga secara

45:58manual kan kalau kita improve

46:00biasanya kita sendiri yang melakukan

46:02oh kita nemu masalah nya apa kita

46:04kayak image optimization itu kan dulu saya

46:06masih sering tuh ada misalnya ada lima puli image ya

46:08saya satu-satu jalanin script image optimization

46:10ke situ

46:12dulu zaman

46:14warga-warga juga mba eka kan

46:16mba eka sempet bantu upload ke cloudinary

46:18terus di hardcode

46:20cloudinary

46:22cloudinary terus main-main

46:24apa query param nya biar

46:26image

46:28loading nya

46:30aduh sekarang semua

46:32automatic

46:34terakhir disini ada nih

46:36kalau misalnya kalian

46:38masa nya tanpa perlu di record dan reload

46:40disini juga bisa nih

46:42kalau mau langsung liat nih

46:44ada interaction nya bisa kelihatan nih

46:46klik klik klik klik klik

46:48bisa liat INP nya tuh

46:50INP nya

46:52terus

46:54bisa liat layout save nya dimana

46:56apa yang terjadi dimana

46:58yang terjadi INP

47:00disini langsung di home page nya

47:02live matrix bahasanya

47:04ee.. ya demikian

47:06bentar, penasaran ya

47:08ada satu small thing

47:10coba apa

47:12pengen ngetes agen nya

47:14buka yang halaman chapters yogyak deh

47:16buka halaman yang chapters

47:20yogyak

47:22nah itu kan ada yang kepotong tuh

47:24nah coba tersendiri aja

47:26tapi harusnya ga usah bilang

47:28dibenerinnya gimana

47:30coba dia bisa

47:32ya ya

47:34sebenernya itu cuma pake CSS doang

47:36tinggal ditambahin satu property

47:38aja work break break work

47:40nah si CSS

47:42apa si agen nya ngefixnya

47:44ribet

47:46kalau bisa sih pasti bisa

47:48ya lebih busa

47:50cuma kadang kalau

47:52AI system itu

47:54ya kan CSS nya ga terlalu

47:56ya ga secanggih skill react

47:58dan lain-lain bisa ngefix

48:00tapi kayak pake property banyak banget

48:02padahal sebetulnya itu cuma pake satu property

48:04bisa langsung ngefix

48:06belum update ya dengan web

48:08API ya

48:10apa box yang paling kanan

48:12growing nya tuh kan kepotong

48:14kayak dia bikin nge-stretch

48:16layarnya nge-stretch, nge-leber kan

48:18coba seru bener ya

48:20kenapa ada horizontal

48:24horizontal ini ya

48:26horizontal scroll ya

48:28karena nge-stretch

48:30gara-gara si growing itu

48:32ini harus dikasih dimensi

48:36ga ada dimensinya ya

48:38iya ga ada dimensi

48:42tinggal ngasih

48:44gede soalnya, kalau buka di desktop gede

48:46itu kalau buka di desktop gede banget

48:48gede banget

48:50harus kasih minimum height aja

48:52kalau minimum height kan dia langsung

48:54ngambil space jadi ga perlu

48:56dorong-dorong

48:58itu kalau di desktop kurasa banget itu textnya loncat

49:04oke, gede banget

49:10ya, kita masih ada satu

49:12web lagi yang mau kita bahas

49:14makasih

49:16ya untuk

49:18websnya dari Mazain

49:20makasih udah submit

49:22terima kasih teman-teman

49:24rame-ramein ya

49:26kalau mau di sini silahkan

49:32kalau mau undur diri juga boleh

49:34sebelum mudah-mudahan

49:44event apa

49:46ada event terdekat ga

49:48kayaknya mau ada meet up

49:50open cloud ya di Jogja ya

49:52iya satu ini open cloud

49:54sebenernya tapi kan kamis ini ada

49:56kamis ini ada lagi offline

49:58di Jogja, terus satu ada

50:00di Jogja juga open cloud

50:02terus minggu depan

50:04di Jakarta

50:06tapi sayangnya ga bisa dateng

50:12minggu depan an?

50:16minggu depannya?

50:18minggu depan di Jogja

50:20kalau yang di Jakarta 18 April

50:2218

50:24ga bisa juga kan

50:26mau berangkat

50:28ya sudah

50:30kita ketemu

50:32lain kesempatan Mazain

50:34di Jakarta

50:36makasih banyak

50:38makasih

50:40terima kasih

50:42lain kali nanti diundang-undang lagi

50:44sekarang

50:46kita

50:48mau mengundang

50:50Mas Baliyun

50:52untuk naik

50:54sorry ya kelamaan ya

50:56nungguin ga?

50:58nunggu 20 menit

51:00kayaknya Mas Baliyun

51:02sorry

51:04maaf

51:06rencananya satu

51:08website

51:10nantinya 30 menit

51:12biasa kita

51:14suka ngelur ngidul

51:16mungkin ini ya

51:18kita udah pernah ketemu

51:20belum sih?

51:22kenalan dulu kali ya

51:24perkenalkan nama saya

51:26Baliyun Taja

51:28saat ini sedang bekerja

51:30dan kuliah

51:32kuliah oke

51:34kuliah di?

51:36di Binus

51:38Binus

51:40diurusan?

51:42tembil sistem informasi

51:44bulan kuliahnya online

51:46online

51:48domisili dimana?

51:50domisili site ini di Jakarta

51:52oh Jakarta

51:54tapi ambilnya online ya oke

51:56Binus ada

51:58di Jakarta juga

52:00karena lagi

52:02sambil kerja kan

52:04sambil kerja

52:06oke kerjanya sebagai?

52:08asas

52:10di Telkom

52:12oh

52:14semester berapa sekarang?

52:16ini baru namanya KKN Mas

52:18kuliah kerja nyata

52:20kuliah dan kerja

52:22iya real

52:24sekarang semester 8

52:28semester 8

52:30oh bentar lagi ya

52:32kalau belajar kodinya

52:34udah mulai dari SMK sih

52:36oh iya

52:38di Telkom

52:42di Telkom ada universitas juga

52:44nggak usah dibawah

52:46ini namanya networking

52:50kalau di internet gitu

52:52boleh cerita tentang

52:56website-nya

52:58eh mana ini

53:00namanya photomade.id

53:02oh tadi bukan gitu

53:04bacanya Mas Riza

53:06kalau ada orangnya langsung bener bacanya

53:08tadi emang gilanya

53:10otomate

53:12otomate kudasai

53:14jadi ini adalah

53:20side job

53:22side job oke

53:24base-nya di Malang

53:26i see

53:28wah udah kuliah kerja

53:30ada side job juga ya

53:32luar biasa

53:34itu namanya

53:36hustle

53:38hustle culture

53:40lanjut lanjut lanjut

53:42yang mau saya

53:46tanyakan tuh sebenernya ini sih

53:48cara naikin SEO

53:50di webnya tuh gimana gitu sih

53:52oke

53:54SEO

53:56sama ini

53:58sekankan website ini tuh

54:00cuma react doang gitu ya Mas

54:02nah ternyata

54:04buat

54:06natur content

54:08management sistemnya tuh susah gitu

54:10jadi kayaknya emang harus ada

54:12dashboard-nya sendiri gitu ya

54:14content

54:16management-nya oh sekarang ini

54:18berarti langsung

54:20decode ya kontennya

54:22hardcode gitu ya

54:24iya betul

54:26ini didiploid ke mana

54:28gede banget

54:30apanya maksudnya hosting-nya gitu

54:34hosting-annya

54:36iya hosting-annya

54:38dominisial lah Mas

54:40dominisial

54:42oh dominisial

54:44yang paket hosting ya berarti ya

54:46iya

54:48oke

54:50ini berarti

54:52jatuhnya itu

54:54landing page ya

54:56jadi informasi aja ya

54:58isinya ya

55:00gaada aplikasinya ya

55:02cuma lihat ada jadwal

55:04ada calendar-nya

55:06ada calendar-nya ini calendar-nya juga

55:08hanya react

55:10aja ya berarti ya gaada database

55:12gaada jadi sementara itu

55:14sebenernya di hardcode gitu

55:16jadi tiap mau nambah

55:18jadwal event

55:20gitu ya harusnya

55:22langsung ya langsung code ya

55:24oke

55:26jadi tadi pertanyaannya berkaitan

55:30dengan SEO sama

55:32ini react apakah perlu

55:34menggunakan

55:36framework ya seperti Next.js

55:38atau yang lain gitu ya

55:40apakah perlu dimigrasi ke Next

55:42oke

55:44ada yang mau memberikan

55:46komentar

55:48mungkin saya perlu tahu

55:56mungkin-mungkin

55:58pengen tahu kenapa

56:00pilihan pertamanya Next.js

56:02kita bukan

56:04Next.js di sini

56:06pengen tahu dulu

56:08sebelum saya mematahkan

56:10inika atau engga

56:12menyangga terima

56:14perlu tahu dari masnya

56:16pilihan utamanya Next.js kenapa

56:18sebenernya

56:20kalau bilang gitu malah sebenernya

56:22saya pemilihannya malah sama Laravel sih mas

56:26oke

56:28malah jadi lebih pengen tahu

56:30lagi kenapa pertama kali

56:32memikirkan Next.js

56:34iya

56:36anyway

56:40ada masalah utama

56:44yang harus saya katakan di sini

56:46karena

56:48saya pencinta

56:50performance dan

56:54setiap kali situs itu

56:56yang selalu saya lihat itu adalah

56:58bagaimana situs itu

57:00bisa memberikan informasi yang bagus

57:02dengan cepat dan efisien

57:04dan

57:06menggunakan

57:08resource

57:10dari CPU, bandwidth

57:12dan waktu dari si penggunanya

57:14sedikit mungkin

57:16kalau dari situsnya sendiri

57:18banyak hal yang bisa

57:20diperbaiki

57:22contohnya kalau misalnya saya lihat

57:24di sini

57:26saya sampaikan ini dulu supaya nanti pemilihan

57:28framework selanjutnya ya

57:30jadi akan mengerucut nanti

57:32apa yang cocok buat

57:34frameworknya

57:36jadi karena kalau misalnya

57:38saya katakan oh ternyata kamu harus pakai

57:40Next.js tapi hal utama

57:42atau soulnya

57:44atau goalnya

57:46engga tercapai sama aja

57:48saya bilang harus pakai

57:50Astro

57:52atau pakai Laravel

57:54atau pakai WordPress dan ternyata cara buildnya

57:56sama ya hasilnya akan sama

57:58engga ngaruh

58:00jadi sebenernya mau pakai framework apa aja

58:02sebenernya

58:04ada hal-hal

58:06yang harus diperhatikan

58:08contohnya

58:101x page load

58:12misalnya saya coba gini aja ya

58:14salah

58:181x page load

58:20kita bisa lihat di bawah sini

58:22keliatan ga ya?

58:241x page load aja

58:26situs ini

58:28memakan bandwidth

58:30dari si user

58:32itu sebesar 57mb

58:341x load

58:36artinya kalau

58:38banyak foto kali ya, banyak aset ya

58:40banyak hal

58:42nanti kita lihat satu-satu kenapanya

58:44jadi artinya

58:46artinya

58:48kalau misalnya si user itu punya bandwidth terbatas

58:50contohnya pakai

58:52apa ya?

58:54pakai data

58:56yang harian

58:58satu giga, dua giga

59:00dia buka 10x

59:02udah habis setengah giga

59:04ya kan?

59:06atau ya cash lah

59:08tapi intinya bisa habis 57mb

59:101x buka

59:1260mb ya kurang lebih ya

59:14dan yang paling besar

59:16tentunya kayaknya ini di

59:18image brand tadi

59:20kelihatan 800

59:22ya

59:24dan kalau misalnya kita lihat size-nya

59:26yang paling besar itu

59:28bisa 2 giga

59:302 mega

59:322 setengah ya

59:34ada 4 mega sendiri

59:364,8

59:38brand 5, brand 6

59:40yang kayak gini, framework apapun

59:42nggak akan solve

59:44tetap akan begitu

59:46jadi itu yang harus diperbaiki

59:48jadi pemilihan image

59:50ini gede banget ya image ya

59:52oh gede banget ya

59:54ini dimana?

59:56image yang dimana ya?

59:58oh yang dibawah

1:00:00galeri-galeri

1:00:02ya galerinya

1:00:04kan kecil

1:00:06nggak di resize

1:00:08dengan hanya kamu mengecilkan ini semua

1:00:10menjadi dibawah status

1:00:12kilobyte

1:00:14website kamu sudah jauh

1:00:16banget lebih cepet

1:00:18sudah jauh

1:00:20lebih cepet

1:00:22sebentar

1:00:24kalau counter-argument

1:00:26kalau misalkan nih pakai Next

1:00:28atau pakai Astro

1:00:30kan dia ada komponen image yang bikin

1:00:32otomatis, itu bakal ngaruh kan?

1:00:34nggak juga?

1:00:36ngaruh dong

1:00:38ngaruh

1:00:40tapi tetap aja

1:00:42musen mengaruh apapun

1:00:44kalau misalnya originalnya sudah kecil

1:00:46saat dia dipakai

1:00:48Next dan

1:00:50lebih optimize lagi kan

1:00:52apalagi kalau

1:00:54deploy-nya misalnya ke versel

1:00:56yang sudah langsung ada cdn-nya

1:00:58dan itu dipakaiin webp

1:01:00otomatis conversion

1:01:02ke webp, maka jauh lebih cepet

1:01:04dan pertanyaan selanjutnya, apakah

1:01:06untuk png?

1:01:08nggak juga kan?

1:01:10jpeg?

1:01:12dengan mengubah ini ke jpeg

1:01:16kalau ke webp

1:01:18susah juga kan

1:01:20mengubah webp di lokal

1:01:22jadi jpeg

1:01:24aja sebenarnya cukup, nanti

1:01:26kalau ada cdn-nya yang bisa

1:01:28mengubah ke webp, pakai cloudflare

1:01:30misalnya di depannya ada cloudflare

1:01:32sudah otomatis bisa di-convert

1:01:34ke webp

1:01:36biasanya

1:01:40pas di-in pakai source set

1:01:42image

1:01:44element image source set

1:01:46kalau perlu

1:01:48picture element

1:01:50buat kondisional

1:01:52misalnya kalau

1:01:54layar kecil, gambar mana

1:01:56yang di-loading

1:01:58layar besar, cuma biar lebih efektif

1:02:02itu sebenarnya ada di

1:02:04image responsive, kalau misalnya

1:02:06next.js itu bisa ya

1:02:08sudah ada image component kan ya

1:02:10image component ya

1:02:12next.js ada, astro ada

1:02:14astro juga ada

1:02:16Laravel

1:02:18Laravel juga ada ya

1:02:20ya itu yang dari

1:02:24si frontend yang buat

1:02:26ini, templating-templating ini

1:02:28inertia, bukan inertia

1:02:30setau gw sih gak ada ya

1:02:32kalau yang image ya

1:02:34yang otomatis bikin

1:02:36source set, terus dia

1:02:38dia bikin

1:02:39oke, fine, kalau

1:02:41gue gak tau banyak Laravel, tapi

1:02:43WordPress pasti ada

1:02:45otomatis lagi kalau WordPress

1:02:47cegal install plugin atau gimana?

1:02:49enggak, enggak, WordPress by the core

1:02:51tinggal upload image-nya, tinggal taruh

1:02:53webp get image

1:02:55webp get image, langsung sudah

1:02:57sudah pakai source set

1:03:01jadi sebenarnya

1:03:03kembali lagi, pembilihannya

1:03:05mau pakai frame apa aja, bisa

1:03:07kalau misalnya

1:03:09kalau ini react

1:03:11react murni ya maksudnya?

1:03:13iya betul, react sama

1:03:15react image responsive

1:03:17pake CT atau

1:03:19pake yang lain

1:03:21CT ya

1:03:23kayaknya banyak deh react

1:03:25image responsive component

1:03:27dipakein

1:03:29kayak gini

1:03:31atau

1:03:33kalau pakai AI mah disuruh aja

1:03:35pakai react mentahan juga buat lah

1:03:37jadi seperti ini

1:03:39atau posting image-nya

1:03:41di CDN, kayak Cloudinary

1:03:43misalnya, mereka tuh punya free tier

1:03:45sama bisa

1:03:47otomatis generate ya itu

1:03:49macam-macam ukuran

1:03:51sebentar, ini nge-noding sendiri

1:03:53atau pakai AI, dibantu AI?

1:03:55dibantu AI

1:03:57oh dibantu AI

1:03:59tinggal minta AI-nya

1:04:01suruh dia jadiin

1:04:03tapi kalau mau install

1:04:05saya sih nggak nyaranin pakai popular

1:04:07library, karena sebenarnya hal yang ini tuh

1:04:09udah begini aja

1:04:11nggak perlu pakai library gitu

1:04:13bisa sebenarnya gitu

1:04:15tinggal bikin satu component image

1:04:21yang image dump

1:04:23component lah bahasanya ya

1:04:25component tinggal dipakein banyak-banyak

1:04:27kemana-mana, semua image tag

1:04:29diganti jadi image component

1:04:31apa lagi ya

1:04:35kalau dari sisi performance itu yang paling

1:04:37kritik

1:04:39yang signifikan ya

1:04:41ya kritikal

1:04:43kalau itu sudah diperbaiki semua, barulah

1:04:45bisa kita

1:04:47pikirkan

1:04:49selanjutnya, karena lcp-nya

1:04:51masih perlu diperbaiki

1:04:53terus kemudian cls-nya

1:04:55masih juga

1:04:57perlu diperbaiki, karena ini gerak-gerak

1:04:59ininya si logo-nya

1:05:01dan ini nggak bisa di...

1:05:03iya

1:05:05ini logo-nya kuat

1:05:07ini gede ini

1:05:09oh iya

1:05:11image-nya lumayan 2.000 kali

1:05:132.000 pixel

1:05:15padahal tampilannya kecil gini ya

1:05:17iya

1:05:19di tampilannya 80 pixel

1:05:21jadi harus dioptimasi lagi

1:05:23terus kayaknya ada iframe juga nih ya

1:05:27yang di instagram ini ya

1:05:29iya

1:05:31terus lazy load, lazy load

1:05:33lazy load semua nih

1:05:35loading lazy yang di bagian bawah

1:05:37ini juga

1:05:39dia berputar-putar, ini tuh pakai

1:05:41wp ya, sudah wp kok ini

1:05:43kenapa dia...

1:05:45ya yang itu sebelumnya kan

1:05:47png kan, terus

1:05:49gede banget

1:05:51terus aja bawa wp

1:05:53harusnya berarti semua

1:05:55ya wp bawa aja ya

1:05:57tapi tetap aja gede, 600 kilobyte

1:05:59sebisa mungkin setiap image itu

1:06:01cuma

1:06:03perlu di load di bawah 100 kilobyte

1:06:05150 itu udah

1:06:07mentok, 673

1:06:09600 ya

1:06:11iya

1:06:13kadang-kadang

1:06:15kalau kita bikin animasi kayak gini

1:06:17tapi gak tau ya, ini tergantung

1:06:19use case juga

1:06:21kadang-kadang video bisa lebih kecil daripada

1:06:23kita bikin animasi kayak gini

1:06:25jadi bikin, di jadikan

1:06:27ini di jadikan video aja animasinya

1:06:29mungkin lebih kecil ukurannya

1:06:31mungkin ya, webm

1:06:33namanya webm

1:06:35iya, kecil lagi

1:06:37iya

1:06:39kalau bisa sih

1:06:41apa, image-image yang untuk

1:06:43untuk foto

1:06:45itu pake jpg

1:06:47atau wp

1:06:49kalau yang buat logo

1:06:51atau asset icon dan lain-lain

1:06:53baru png lebih cocok

1:06:55jadi ukurannya juga menyesuaikan

1:06:57oke, kembali ke pertanyaannya

1:07:03apakah perlu pake next.js

1:07:05kalau saya

1:07:09pake apa aja bisa

1:07:11asal tau

1:07:13pakainya

1:07:15dan apa yang

1:07:17tujuannya

1:07:19jadi, kembali ke

1:07:21yang saya sampaikan tadi, tujuan utamanya

1:07:23adalah bagaimana kita bisa memberikan

1:07:25informasi ke si user

1:07:27secepat mungkin

1:07:29dan seefisien mungkin

1:07:31dan user itu untuk mendapatkan

1:07:33informasi tersebut

1:07:35cepat dan hemat

1:07:37jadi harus serba

1:07:39diet

1:07:41cepat dan hemat

1:07:43jangan load

1:07:45jangan berikan

1:07:47sesuatu yang mereka gak perlu di awal

1:07:49ada sebuah perumpamaan

1:07:53kalau di sebuah restoran, kamu datang ke restoran ini

1:07:55dan kamu datang

1:07:57duduk dikasih menu

1:07:59terus

1:08:01kamu nya

1:08:03mau pesan, tapi

1:08:05gak ada yang

1:08:07bantuin kamu

1:08:09dan kamu nanya kenapa gak ada bantuin kan

1:08:11tapi mereka itu sedang mempersiapkan

1:08:13semua makanan nya dulu

1:08:15jadi, waktu kamu minta

1:08:17baru dikasih

1:08:19jadi, sudah siap

1:08:21itu kan jadinya gak efisien

1:08:23karena mereka harus memasak semua makanan nya

1:08:25nunggu, baru kamu bisa

1:08:27ini

1:08:29dapatkan

1:08:31yang bener kan adalah

1:08:33kamu minta dulu, dibuatkan

1:08:35dan dikirimkan

1:08:37jadi, pikirkanlah

1:08:39dengan konsep seperti itu

1:08:41usahakan web yang kamu buat itu

1:08:43memberikan informasi

1:08:45se-

1:08:47se-efisien mungkin

1:08:49nah, dari si CSS nya

1:08:53juga banyak sekali

1:08:55ini CSS nya

1:08:57dan setiap satu CSS

1:08:59ini CSS semua

1:09:01iya, ini CSS semua ini

1:09:03dan satu CSS itu

1:09:05render blocking

1:09:07artinya

1:09:09browser tidak akan melakukan

1:09:11apapun

1:09:13sebelum loadnya selesai

1:09:15sebelum CSS itu

1:09:17didownload dan diparsing

1:09:19dan di eksekusi

1:09:21jadi dia render blocking

1:09:23nah

1:09:25kelihatan nih

1:09:27kalau miskin saya gak, karena ini

1:09:29kayak saya pakai disable cache ya

1:09:31tapi, makanya kelihatan nih, jadi

1:09:33kayak

1:09:35double-double downloadnya nih

1:09:37karena

1:09:39secara request

1:09:41per komponen kamu request ulang

1:09:43oh, ini dari

1:09:45iframe ya, dari iframe ya

1:09:47instagram kali ya

1:09:49oh, ini kayaknya soalnya

1:09:51randomize

1:09:53CSS class

1:09:55berarti harusnya di lazy load

1:09:57si bagian instagram nya

1:09:59instagram nya di lazy load

1:10:01hmm

1:10:03ini iframe embed ya

1:10:05iframe itu bisa loading lazy ko

1:10:07iya

1:10:09kayaknya ya

1:10:11ini iframe

1:10:13nih

1:10:15bisa ko iframe

1:10:17loading lazy

1:10:19tuh

1:10:21tuh

1:10:23dan teknologi sudah

1:10:25sudah baseline ko

1:10:27sudah baseline, tinggal kamu tambahin loading lazy

1:10:29dia sama dengan lazy

1:10:31jadi sebelum dia

1:10:35didownload

1:10:37oh, saya kasih tau sebuah ini lagi

1:10:39kita coba ya

1:10:41saya berandai-andai

1:10:43kita bisa lakukan begini nih

1:10:45network application

1:10:47salah, source

1:10:49kita coba

1:10:51satu magic

1:10:53menemukan

1:10:55gak bodoh-bodoh banget, kayaknya

1:10:57override fact

1:10:59to create directory

1:11:01the workspace override

1:11:03kok gak bisa sih

1:11:05head folder manually

1:11:07gak bisa, kan belum didownload

1:11:09oh, dia taro disitu gitu

1:11:13iya

1:11:15bisa

1:11:17override content

1:11:19kok gak mau dia

1:11:21override

1:11:25yeah, over

1:11:27enable

1:11:29oke

1:11:33salah, bukan

1:11:35bukan ini

1:11:37untung diingetin sama Siza

1:11:39oke

1:11:43allow, terus kemudian

1:11:45saya override

1:11:47override content

1:11:49nah

1:11:51terus kita masuk

1:11:53cari

1:11:55iframe

1:11:57dia pakai Rie, gak bisa

1:12:01belum didownload ya

1:12:05div nya kosong

1:12:07div nya kosong

1:12:09ini pentingnya server render

1:12:13eh, sebentar

1:12:15ini gak server render ya

1:12:17ada server render gak

1:12:19kalau vt, tapi gak bisa dihosting dong

1:12:21kalau server render

1:12:23harus

1:12:25bisa, kan si dominasi nya bisa

1:12:27bisa kali

1:12:29ada

1:12:31atau kalau mau static

1:12:33ya dibuild aja

1:12:35emang ini kan sebenarnya landing page

1:12:37seberapa sering sih dibuild ulang

1:12:39cari aja yang ssg

1:12:41buat dibuild

1:12:43iya, ssg juga bisa

1:12:45oh, udah astro aja

1:12:47udah complete tuh

1:12:49kayak gini

1:12:51cepet nih, minta ampun

1:12:53kalau mau build ulang

1:12:57pakai astro aja

1:12:59iya, jadi kalau pertanyaannya

1:13:01next ya

1:13:03sebenarnya lebih ke

1:13:05tujuannya apa tadi ya

1:13:07jadi kita simpulkan sedikit ya

1:13:09kenapa harus menggunakan next

1:13:11kalau tujuannya untuk menambah performance

1:13:13itu bukan alasan

1:13:15yang tepat, kenapa? karena

1:13:17dengan kita menggunakan framework

1:13:19itu justru menambah berat

1:13:21bukan menambah ringan

1:13:23karena dependensinya makin banyak

1:13:25ya walaupun kayak image tadi

1:13:27bener, mungkin itu bisa dioptimize

1:13:29sama next.js atau astro

1:13:31atau yang lain gitu

1:13:33jadi

1:13:35kalau pertanyaannya

1:13:37misalkan tadi

1:13:39oh, saya mau server render, harus pakai

1:13:41misalkan manual pakai vt, agak ribet

1:13:43nah, baru kalau mau pakai next boleh

1:13:45pakai astro, kita lebih sarankan

1:13:47juga boleh, atau pakai yang lain

1:13:49misalkan pakai

1:13:51paravel, pakai inertia

1:13:53juga bisa, jadi

1:13:55dipilih aja

1:13:57tapi itu alasannya

1:13:59sudah seperti itu, bukan alasan untuk

1:14:01menambah performance, kalau

1:14:03menambah framework, malah mengurangi

1:14:05performance justru

1:14:07nah bentar, kalau saya mau liat

1:14:09silahkan, silahkan

1:14:11silahkan

1:14:13nah, ini kan

1:14:15kalau dari sisi bisnis, kan

1:14:17sebenarnya ini bisa macem-macem

1:14:19tujuan ya, karena

1:14:21pastinya juga kan, apa

1:14:23masih lagi belajar juga, masa kuliah

1:14:25mungkin pengen explore, ya wajar lah

1:14:27itu wajar kan kita pengen explore

1:14:29tapi daripada cuma bikin

1:14:31to do atau hello world

1:14:33atau apa, ya kita pengen build

1:14:35sesuatu, pakai teknologi yang kita

1:14:37penasaran buat explore untuk

1:14:39real use case, ya kalau menurutku

1:14:41itu valid-valid aja sih, jadi kalau

1:14:43emang tujuannya explore, pengen tahu

1:14:45next.js, ya boleh, bukan nggak boleh

1:14:47tapi kalau dari sisi bisnis nih

1:14:49pure bisnis, ya

1:14:51itu kan udah jalan ya, itu the works

1:14:53maksudnya

1:14:55si calon customer

1:14:57udah bisa liat juga, bisa liat

1:14:59info-nya, ya udah

1:15:01tetap react aja, tapi dioptimize

1:15:03misalnya pakai itu tuh

1:15:05apa?

1:15:07VTSSG

1:15:09maksudnya SSG itu

1:15:11build time, ya udah

1:15:13static

1:15:15jadi degenerate secara static, yang

1:15:17degenerate adalah HTML, CSS

1:15:19JavaScript-nya udah langsung degenerate

1:15:21semua, jadi nggak

1:15:23apa nggak di render secara dynamic

1:15:25udah itu bisa ditaruh di hosting

1:15:27apa aja dengan mudah, nggak perlu

1:15:29nggak perlu fungsionalitas

1:15:31server-side, itu kalau dari

1:15:33sisi bisnis

1:15:35cuma kalau perkara itu tadi

1:15:37masih banyak sarankan, mau pakai Astrolux

1:15:39atau mau pakai apa, ya kalau itu sih

1:15:41bebas ya, mau explore apapun

1:15:43tapi tadi keliatannya di awal

1:15:45ada bilang

1:15:47perlu CMS, nah

1:15:49kalau tujuannya biar pakai CMS

1:15:51next.js, bukan, belum jadi

1:15:53solusi, karena next.js kan nggak

1:15:55ada CMS kan juga

1:15:57tetap aja kalau mau CMS

1:15:59yang jadi satu, itu kan

1:16:01WordPress, terus sekarang

1:16:03Cloudflare juga baru bikin namanya

1:16:05Dash, kalau pengen yang jadi

1:16:07satu sama CMS itu, tapi

1:16:09kalau pengen pakai CMS

1:16:11terpisah, kan banyak tuh headless CMS

1:16:13ya itu sih bebas, pakai

1:16:15apa, pakai framework apapun

1:16:17nah, cuma lagi-lagi, itu kan

1:16:19agak sedikit overkill juga ya

1:16:21maksudnya untuk, ini kan keliatannya

1:16:23cukup simple, landing page-nya

1:16:25seberapa sering dan seberapa banyak

1:16:27maksudnya, perlu CMS

1:16:29yang full feature, tetung complex

1:16:31terus, seberapa perlu sih, itu kalau

1:16:33dari mindset business yang

1:16:35beneran, apa, sisi

1:16:37business-nya kan, itu perlu

1:16:39dipertimbangin juga

1:16:41kalau itu udah jalan, itu

1:16:43kayak gitu aja, cuma dioptimize

1:16:45pakai saran yang dari

1:16:47Ivan tadi, sama

1:16:49oh, tadi SEO ya

1:16:51SEO ini tadi aku liat, ada

1:16:53satu kesalahan yang fatal sih, kalau

1:16:55pakai react-nya sih nggak apa-apa ya, kalau

1:16:57SEO, maksudnya sekarang juga udah bisa

1:16:59apa, search engine

1:17:01udah bisa nge-crawl dengan baik

1:17:03tapi coba deh, siapa

1:17:05yang searscreen, buka

1:17:07heymeta.com

1:17:09open graph image-nya

1:17:11ilang, nggak ada, dan

1:17:13itu lumayan fatal sih, karena

1:17:15kalau kita ngirim

1:17:17misalnya kita promote link website-nya nih

1:17:19nah, ketik

1:17:21fotomate.com, eh

1:17:23fotomate.id ya

1:17:25kita kirim di whatsapp dan lain-lain

1:17:27open graph image-nya nggak ada, itu kan

1:17:29nggak muncul ya

1:17:31eh?

1:17:33nggak usah pakai protokol

1:17:35fotomate.id aja

1:17:37oh

1:17:39ttp-nya nggak usah

1:17:41tapi sebenarnya ada loh dia punya

1:17:43ini, cuma nggak kebaca aja kali ya

1:17:45nggak keload kayaknya ya

1:17:47eh, sorry, ininya

1:17:49metanya ada sebenarnya

1:17:51ada, ada, ada, tapi image-nya

1:17:53404

1:17:55oh

1:17:57iya, jadi nggak muncul

1:17:59nah itu ada image-nya, jadi bukan belum diisi

1:18:01tapi udah diisi, cuma 404

1:18:03image-nya nggak ada

1:18:05nggak bisa diakses image-nya

1:18:07lupa upload atau gimana

1:18:09gitu ya

1:18:11oke

1:18:13tambahan dari saya, kalau untuk

1:18:15CMS

1:18:17mungkin CMS juga

1:18:19menambah dependensi ya

1:18:21jadi lebih berat, karena kita harus

1:18:23baca query database dan

1:18:25lain-lain

1:18:27kalau misalkan nanti seandainya memilih

1:18:29untuk pakai Astro, kayaknya udah cukup ya

1:18:31buat konten ya, Astro kita

1:18:33bisa pakai markdown biar lebih gampang

1:18:35ngedit, apa namanya, ngedit

1:18:37kontennya, jadi nggak perlu

1:18:39pakai HTML atau React gitu

1:18:41kita pakai data atau pakai

1:18:43JSON, kayaknya udah lebih dari

1:18:45cukup ya untuk landing page

1:18:47iya, pakai JSON udah lebih kars ya

1:18:49ya React mode-nya kayak gini juga pakai JSON juga bisa kan

1:18:51makanya diwork, pengen explore

1:18:53betul

1:18:55berarti Astro itu sudah

1:18:57bisa, ya

1:18:59Next juga bisa sih pakai JSON dan

1:19:01pakai markdown juga harusnya bisa

1:19:03iya, kayaknya untuk CMS

1:19:05belum perlu, menurut saya ya

1:19:07menurut saya pribadi kayaknya belum perlu

1:19:09cukup menggunakan kayak markdown atau JSON

1:19:11data, kemudian

1:19:13di-load ke website-nya

1:19:15karena ini kan landing page ya jatuhnya

1:19:17terus kalau

1:19:19untuk SEO juga kayaknya

1:19:21untuk server render

1:19:23lumayan butuh

1:19:25terutama performance juga

1:19:27jadi mungkin pilihannya ya tadi ya

1:19:29bisa jadi SSG

1:19:31static site generator

1:19:33bisa pakai Astro juga yang ada SSG-nya

1:19:35kayaknya Next juga ada ya

1:19:39ada fitur itu ya, tapi ya antara dua itu lah ya

1:19:41kurang lebih sama

1:19:43untuk SEO

1:19:47untuk SEO

1:19:49benerin performance dulu

1:19:51karena performance itu sangat

1:19:53penting bagi SEO

1:19:55selama ininya masih belum

1:19:57jadi apa yang terjadi adalah

1:20:01kamu menghabiskan namanya crawler

1:20:03budget

1:20:05jadi crawler,

1:20:07masih pengkatanya crawler itu sudah bisa

1:20:09render JavaScript, tapi belum tentu

1:20:11bisa segini besar

1:20:13render JavaScript bisa jadi banyak ya

1:20:15karena dia bakal time out

1:20:17juga nih ngedownload

1:20:1950M, 60M

1:20:21dan JS-nya

1:20:23berapa gede ya, coba kita lihat JS doang nih

1:20:25JS doang dia 17M

1:20:27ya kan

1:20:29jadi dia

1:20:31akan

1:20:33mengeluh gitu si

1:20:35crawler

1:20:37crawler bot-nya

1:20:39untuk lebih

1:20:41tau lebih dalem kamu coba pakai

1:20:43search console

1:20:45google search console ya

1:20:47google search console nanti disana

1:20:49bisa

1:20:51disini ada nggak ya

1:20:53bisa simulasi

1:20:55ya dia bisa simulasi

1:20:57bisa simulasi

1:20:59itu sudah saya masukin ke situ sih mas

1:21:01ya, bisa kamu

1:21:03simulasiin

1:21:05kayak gini

1:21:07ngobrolin, ngobrol.in-nya

1:21:09ini bisa disimulasi

1:21:13contohnya ngobrolin web nih

1:21:15yang library animasi

1:21:17copy

1:21:19masukin kesini

1:21:21apa yang dilihat oleh si

1:21:23apa yang

1:21:25Googlebot

1:21:27tes live url nih

1:21:29nanti dia bisa kita lihat si

1:21:31Googlebot itu

1:21:33melihat apa dari situs kita

1:21:35aku bisa cek

1:21:37oh, bisa ya

1:21:39bisa

1:21:41bisa

1:21:431 menit, 2 menit ya

1:21:47itulah gunanya

1:21:51ngobrolin web mas

1:21:53dan sekarang

1:21:55Googlebot itu sebenarnya sudah pinter

1:21:57dan yang dia butuhkan

1:21:59kan cuma text kan, jadi selama

1:22:01semua image di lazy load

1:22:03terus nggak ada

1:22:05client-side render-nya nggak

1:22:07terlalu ekstrim yang

1:22:09sampai stack, itu tuh

1:22:11aman kok, maksudnya

1:22:13text-text yang penting

1:22:15buat crawling

1:22:17itu hampir pasti

1:22:19masuk

1:22:21nah, kita lihat ya, kan ini hasil

1:22:23live test-nya nih

1:22:25dari si Google

1:22:27ini HTML yang dia baca

1:22:29terus ini screenshot yang dia lihat

1:22:31coba aja buka screenshot-nya

1:22:33dari situs yang kamu buat

1:22:35bisa nggak dia render?

1:22:37kenapa?

1:22:39biasanya ada di more info

1:22:41itu ada javascript

1:22:43masalah-masalahnya bisa kelihatan

1:22:45biasanya, tapi nggak semua-semua

1:22:47nggak semua dia record

1:22:49ini website ngobrolin web juga kita

1:22:55pakai AI kok

1:22:57cuma kita udah tahu

1:22:59yang butuh di perbaiki bagian mananya

1:23:01kita bisa kasih tahu

1:23:03"tolong dong ini image-nya

1:23:05kecilin" atau apa gitu ya

1:23:07kadinya umu semua, sekarang umunya udah

1:23:13berkurang ya, gara-gara pakai AI

1:23:15nggak mau pakai umu

1:23:17jadi, kedepannya

1:23:23nanti kita lihat, setelah

1:23:25dari ini

1:23:27diperbaiki, bisa

1:23:29lebih

1:23:31efisien

1:23:33iya, buat ini ya

1:23:35untuk perbaikannya

1:23:37targetnya begini nih

1:23:39oh iya, tadi Mas Zain aja nggak sampe 100 ya

1:23:49Mas Zain punya 65

1:23:53react nih, makanya nggak bisa

1:24:03kalau kita pakai astro ya

1:24:05server render

1:24:09nggak bisa, SSG

1:24:11memang bisa-bisa aja

1:24:13react kalau SSG bisa

1:24:15ini kita bukan server render kali

1:24:19kita SSG nih

1:24:21nggak pakai server ya

1:24:25iya

1:24:27iya, gitu

1:24:29mungkin ada yang mau ditanyakan lagi

1:24:31perlu nggak pakai

1:24:33udah terjawab semua ya

1:24:35iya, sejauh ini

1:24:37udah

1:24:39udah dicatak semua sih mas

1:24:41nggak mencoba sedang-sedang

1:24:43targetkan

1:24:47targetkan 100 semua

1:24:49nanti kita undang lagi

1:24:51ijo-ijo ya

1:24:55nanti kalau udah ijo, nanti kita

1:24:59nanti kita interview lagi

1:25:01apa yang sudah diperbaiki

1:25:03ini berapa lama bikinnya

1:25:05sampe jadi

1:25:07kayak sekarang

1:25:09di-plan image-nya ya

1:25:11sekitar 15 hari mungkin

1:25:1515 hari ya

1:25:17wah, mantep ya

1:25:19cepet ya

1:25:21itu full in 5 coding

1:25:23atau kayak copy paste dari

1:25:25CGPT atau apa

1:25:27dari editor-nya udah

1:25:29atau complete yang kayak

1:25:31pakai agent gitu

1:25:33editor-nya sih pakai

1:25:35kursor, cuma

1:25:37cuma kalau

1:25:39react-nya ya, karena emang

1:25:41agak paham sedikit, jadi ya

1:25:43kalau yang nggak paham baru di-kursor

1:25:45yang gitu sih, ditengani ke AI

1:25:47kan biasanya

1:25:49kalau dari AI gitu atau dari

1:25:51agent kan kita tanya mau bikin gini-gini-gini

1:25:53pasti yang disarankan pakai Next.js ya

1:25:55You're absolutely right

1:25:57oh kerahin dari agent

1:25:59pakai VT atau itu

1:26:01dari sendiri ya

1:26:03apa, instruksi sendiri ya

1:26:05tolong pakai react sama VT gitu ya

1:26:07ya, itu dari saya sendiri sih

1:26:09karena ya maksudnya sebelumnya

1:26:11karena udah familiar ya

1:26:13oke, ya

1:26:15bagus sih, maksudnya nggak langsung

1:26:17ke Next.js itu angka

1:26:19yang bagus juga

1:26:21Next.js pakai apa tuh namanya yang baru itu

1:26:23pengganti webpack

1:26:25turbo pack ya

1:26:27nggak tau apa

1:26:29noncingnya udah ya, udah bisa dipake ya

1:26:31oke, nggak ada

1:26:33nggak bisa dipake buat ini semua

1:26:35iya, nggak di-open

1:26:37nggak di-open

1:26:39ada lagi mungkin terakhir

1:26:43yang mau ditanyakan atau ada yang mau

1:26:45disampaikan

1:26:47eee

1:26:49ini cukup sih mah dari saya

1:26:51terima kasih mas

1:26:53sama-sama yang membantu

1:26:55dan

1:26:57semoga dengan KKNnya

1:26:59kuliah kerja dan

1:27:01menjadikan nyata semua

1:27:03kuliah kerja nyambi side hustle

1:27:05nah, itu betul tuh

1:27:07kuliah kerja nyambi

1:27:09nah

1:27:11kuliah kerja nyambi

1:27:13wah, mantap lah

1:27:19kayaknya bahan skripsinya udah banyak ya

1:27:21kalau udah kerja gitu ya

1:27:23udah selesai meeting dia

1:27:29selesai meeting ya

1:27:31selesai meeting

1:27:33selesai meeting

1:27:35kita mau

1:27:37mau pamit, mau udahan

1:27:39jadi terima kasih banyak buat Mas Zain

1:27:41buat Baliyun, dan buat teman-teman yang

1:27:43yang udah submit, dan udah nonton juga

1:27:45ini ada, ada pertanyaan-pertanyaan

1:27:47tuh, mau dijawab dulu mah

1:27:49kita jawab dulu

1:27:51jawab, nanggung

1:27:53prospek

1:27:55kerja tech yang akan ada untuk masa depan

1:27:57pecut AI

1:27:59udah ada yang bikin pecutnya

1:28:03udah ada yang bikin pecutnya

1:28:05oh iya

1:28:07pecut AI

1:28:09eee, itu siapa namanya

1:28:15eee

1:28:17bikin service-service sih sebenernya

1:28:19prospek kerja tech yang akan ada

1:28:21bikin service-service

1:28:23epeding specialist

1:28:25infra

1:28:29network engineer

1:28:31iot, hardware

1:28:33kita bukung cina yang ya

1:28:39gak bisa cina yang sih kalau teknologi sih

1:28:41agak susah ya

1:28:43atau kan juga akan di-redefine juga

1:28:45maksudnya dev-ox yang seperti apa dulu

1:28:47di-redefine seperti apa dulu

1:28:49yang jelas kan role-role

1:28:51mas Jiri

1:28:53oish

1:28:55role engineer juga berubah kan

1:28:57developer kan berubah ya

1:28:59role-nya

1:29:01iya dulu banget

1:29:03programmer nulis

1:29:05kode assembly atau kode apalah

1:29:07yang low-level, dulu kan

1:29:09belum kepikiran programmer ada yang nulis

1:29:11JS atau CSS

1:29:13dan lain-lain

1:29:15nah maksudnya besok kita nulis

1:29:17apaan nih, maksudnya kita

1:29:19melakukan pemrograman dengan cara apa

1:29:21itu sih yang gak tau kan

1:29:23VT+

1:29:25ada yang tau gak VT+

1:29:27itu yang baru kan ya

1:29:29keluarannya VT+

1:29:31iya

1:29:33itu apa

1:29:35versi berbayarnya

1:29:37webnya

1:29:39jadi jadi bisa kaya apa ya

1:29:41kaya monorepo ya

1:29:43terus kaya build process

1:29:45semua workflownya

1:29:47itu kaya

1:29:49kaya pernah saya bilang

1:29:51di group, kita mau bahas

1:29:53VT+ yang baru kan

1:29:55ini kita jadi satu episode

1:29:57sendiri itu iya

1:29:59bukan ada VT yang baru

1:30:01itu kaya jadi satu

1:30:03satu episode

1:30:05sendiri itu nanti kita kulik sendiri

1:30:07ya, nanti kita submit ya

1:30:09terima kasih ya

1:30:11ini nya, apa namanya

1:30:13ide nya

1:30:15gampang dan cepat

1:30:17team astro

1:30:19tecut AI

1:30:21lama-lama mas Zain

1:30:23pindah haluan nih ke astro juga nih

1:30:25nungguin

1:30:27itu ya, nungguin remix gak selesai-selesai ya

1:30:29iya

1:30:31tapi

1:30:33sekalian selesai

1:30:35kalau ternyata bisa

1:30:37dengan mudah diadopsi oleh LLM

1:30:39misalnya kalau seandainya produk-produk

1:30:41baru ini sejalan dengan

1:30:43preferensi LLM yaudah

1:30:45saya sih yang mana aja yang LLM suka gitu aja lah

1:30:47kalau penerawangan pun

1:30:49yang keliatannya yang

1:30:51pendatang baru, relatif baru

1:30:53tapi LLM friendly

1:30:5510 stack universe nih

1:30:57kenapa?

1:30:59dokumentasinya bagus

1:31:01terus mereka tuh

1:31:03provide agent skills

1:31:05skill nya tinggal install

1:31:07gampang install skill nya

1:31:09gak tau, gampang aja dipakainnya

1:31:11sama saya yang penasaran

1:31:15yang saya penasaran

1:31:17yang masih with list itu

1:31:19UI.si itu

1:31:21bawa nyetil win

1:31:23itu gak tau entar mereka bakal bikin apa

1:31:25baru lagi, itu masih with list ini

1:31:27kita gak tau apa itu disini

1:31:29kita itu

1:31:31domain harganya berapa ya?

1:31:33yang pesan mereka

1:31:35mecat, pesan mereka

1:31:37efisiensi berapa persen

1:31:39itu udah income nya

1:31:41oh buat beli domain

1:31:43buat beli domain

1:31:45buat beli domain

1:31:47iya

1:31:49acara apa?

1:31:51ini acara ngobrolin web

1:31:53tapi kita lagi buka situs

1:31:55yang kita buka itu situsnya Mazayn

1:31:57sama Ambaliun yang disubmit

1:31:59lewat Domensia ya

1:32:01ada lagi pertanyaan

1:32:03yang belum kita tanya

1:32:05eh jawab, ada venue gak

1:32:07di Bekasi ini? pertanyaan yang tadi

1:32:09ini saat yang waktu

1:32:11itu kayak vibe cafe

1:32:13vibe from cafe

1:32:15banyak sih

1:32:17cafe, tinggal tanyain aja

1:32:19satu-satu yang mana bisa

1:32:21yang mana bisa dipakai buat

1:32:23meetup

1:32:25iya cuma

1:32:27iya cuma maksudnya

1:32:29ada komunitasnya atau gak mungkin

1:32:31bukan 4 huruf

1:32:33ini 2 huruf

1:32:352 huruf, UI.SH

1:32:37aja udah mahal

1:32:39apalagi 2 huruf

1:32:41lebih mahal lagi ini

1:32:43berapa juta sendiri

1:32:45yang paling mahal

1:32:47AI provider

1:32:49ada situsnya kan

1:32:51Mazayn sama Ivan bikin itu

1:32:53situs yang isinya

1:32:55iya cuma

1:32:57susah tractionnya

1:33:01eh susah ngisi datanya makin

1:33:03cepet banget perubah, cepet banget abis

1:33:05update nya

1:33:09capek nge update nya

1:33:11karena

1:33:15bansos-bansos

1:33:17begitu bilang bansos sekarang

1:33:19besok-besok

1:33:21waktu hitungan jam udah habis

1:33:25terus

1:33:27itungan berapa bulan udah

1:33:29gak kabar lah

1:33:31gak bansos lagi

1:33:33bansosnya hilang

1:33:35ini ada pertanyaan

1:33:39pada pake AI apa aja, kalau Mazayn kan tadi

1:33:41ke cloud code ya

1:33:43iya, tapi akan bergeser

1:33:45ke codec sih mungkin

1:33:47codec sih ya

1:33:53kalau sekarang full opus sih

1:33:55ya makanya harus beli yang mahal

1:33:59pakai kursor sih

1:34:01kursor ya

1:34:05kursor itu bisa milih model ya

1:34:07bisa

1:34:09kayak yang auto gitu

1:34:11yang auto ya

1:34:13itu

1:34:15kalau boleh tau

1:34:17ada fasilitas dari kantor

1:34:19atau dari kampus, atau bayar sendiri

1:34:21atau masih yang gratisan

1:34:23oh bayar sendiri

1:34:25oke

1:34:27entar-entar

1:34:29model sekarang ya jadi developer ya

1:34:31kalau

1:34:33karena entry level untuk

1:34:35ini kan harus pakai kartu kredit apa

1:34:37pakai jenius dan segala macem

1:34:39atau sekitarnya bisa gak sih yang debit card

1:34:41virtual itu

1:34:43bisa ya

1:34:45oke, berarti sebenernya jadi kalau teman-teman

1:34:49yang di kuliah

1:34:51gak punya kartu kredit, bisa berarti ya

1:34:53gak usah harus

1:34:55punya kartu kredit, oke

1:34:57kalau anak kuliah

1:34:59yang mau nyoba coding masih telat gak?

1:35:01gak, gak ada telat

1:35:03iya, orang yang

1:35:05udah bekerja berapa tahun juga belajar coding

1:35:07juga belum telat, masih bisa kok

1:35:09apalagi dengan adanya AI, makin

1:35:11makin mudah

1:35:13Lila Jovovich aja

1:35:15udah kurang

1:35:17berapa lagi tuh

1:35:19gak tau ya, dia baru ngerilis

1:35:21ini ya, Mempalace ya

1:35:23gak tau, tapi

1:35:27Mila Jovovich tau

1:35:29Resident Evil kan

1:35:31dia baru ngerilis

1:35:33github repo

1:35:35Mempalace namanya

1:35:37itu Mila juga sih

1:35:39kayaknya, tapi

1:35:41gak tau juga

1:35:43gak percaya

1:35:45itu ketahunya

1:35:47Udai P itu percaya karena dia videonya

1:35:49ini kayak repo doang

1:35:51iya, repo doang

1:35:53siapa aja bisa bikin atas nama dia

1:35:55iya, saya bisa

1:35:57kalau mau bisa bikin repo atas nama Prabowo mungkin

1:35:59tapi

1:36:01mungkin

1:36:03tapi bisa

1:36:05kalau kalian lihat gininya

1:36:07liat si Milanya

1:36:09dia ada, dia

1:36:13di instagramnya si Mila ada

1:36:15ada video tersebut

1:36:17iya

1:36:19iya, di instagramnya si Mila

1:36:21ada video yang sama

1:36:23tapi gak tau itu asli apa tidak

1:36:25oh iya bener ya

1:36:27di instagram

1:36:29enggak

1:36:31enggak

1:36:33dan itu

1:36:35followernya

1:36:37lima juta

1:36:39dan jantan biru

1:36:43ya maksudnya kalau mau bikin fake

1:36:45niat bener

1:36:47iya sih

1:36:49enggak sih ya, lebih

1:36:51tuh, Mbak Mila itu

1:36:55kurang umur berapa lagi

1:36:57Mbak Mila

1:36:59saya umur 2.37

1:37:01lagi belajar coding

1:37:03tuh, bisa

1:37:05Mbak Mila aja bisa

1:37:07iya, Mbak Mila aja bisa

1:37:11berapa lama Mbak Mila Jovovich?

1:37:13Mbak Mila

1:37:1750 tahun tuh

1:37:1950 tahun

1:37:2150 tahun, jangan kalah sama Mbak Mila

1:37:23dia jurusan apa, jangan-jangan dia jurusan

1:37:25komputer sains lho

1:37:27bentar, ini Mbak Mila Jovovich yang artis

1:37:33atau bukan, jangan-jangan namanya

1:37:35artis

1:37:37yang benar

1:37:39yang pemain Resident Evil

1:37:41oh ada Mas Danang

1:37:45kabur-kabur

1:37:47udahan berarti, saatnya udahan

1:37:49udah diusir kita nih

1:37:55next bahas apa tuh

1:38:05next bahas

1:38:07spider yang ada request per month

1:38:09ada kredit, ada quota

1:38:11bingung mau milih yang mana

1:38:13oh, bisa-bisa

1:38:15isi dong, isi dong dimana

1:38:17di kesanain

1:38:19kesanain, kesanain

1:38:21udah gaada kesanainnya

1:38:23github.com/ngobrolin

1:38:25ga diperpanjang sama Mas Irfan

1:38:27kesini, kesini, kesini

1:38:31kesini aja ya, kesini nih

1:38:33kesini

1:38:35github.com/orgs/ngobrolin

1:38:37session discussions

1:38:39atau ke ngobrol.in aja

1:38:43ngobrol.in

1:38:45eh Mas Zain itu ga jadi

1:38:49apply ke z.ai

1:38:51buat ini

1:38:55minta subdirektori N

1:38:57jadi

1:38:59z.ai + N gitu

1:39:03keren tuh

1:39:05udah cocok banget

1:39:09jadi ambasadurnya

1:39:11kenapa, kan pasti ada pertanyaan

1:39:13motivasi, kenapa kamu cocok

1:39:15sebagai ambasadur z.ai

1:39:17namanya aja lah Mas Zain

1:39:19iya, namanya saya udah Zain

1:39:21yang cocok apa lagi

1:39:25kebalik ya

1:39:27ini bagus sih

1:39:31ini dari opus pindah ke

1:39:33GLM aja ya

1:39:35GLM, GLM

1:39:37iya, 51

1:39:3951 nya ok lah, bagus kok

1:39:4311-12 sama Kimi

1:39:45Kimi 2,5

1:39:47tapi Mas Riza

1:39:51alirannya Quen, kalo Mas Riza

1:39:53alirannya Quen, kalo saya alirannya

1:39:55Eka

1:39:57Eka GLM

1:40:01aku punya lagi promo aja

1:40:03ok, cukup kali ya

1:40:07kita bahas model-model

1:40:09model-model, nanti lain waktu lagi

1:40:11terima kasih

1:40:13buat semuanya, terima kasih buat Mas Zain

1:40:15buat Baliyun, sukses terus

1:40:17buat ini ya

1:40:19karir dan pendidikannya

1:40:21situsnya juga

1:40:23semoga lebih keren pada depannya ya

1:40:25kita pamit, selamat malam

1:40:27selamat istirahat, bye bye

1:40:31baru pertama kali melihat tayangan dan halaman ini?

1:40:33atau mungkin

1:40:35telah kesekian kali melihat untuk membandingkan kembali

1:40:37dengan lainnya?

1:40:39jika Anda mencari tahu mengenai layanan web hosting

1:40:41terbaik, kami pastikan Anda berada

1:40:43di tempat yang tepat

1:40:45dengan Domainizia, dapatkan pengalaman

1:40:47menggunakan layanan hosting yang lebih baik

1:40:49dengan SSD berperforma

1:40:51tinggi dalam infrastruktur cloud yang

1:40:53telah dioptimalkan untuk kebutuhan personal

1:40:55maupun bisnis

1:40:57teknologi ini memungkinkan Anda memperoleh

1:40:59layanan yang lebih stabil serta proteksi

1:41:01dari korupsi data

1:41:03hosting Domainizia juga telah mendukung Node.js

1:41:05Python, Ruby, Go, PHP

1:41:07Java, serta binary Linux

1:41:09lebih dari

1:41:11200.000 pelanggan telah mempercayakan

1:41:13layanan hosting di Domainizia

1:41:15kepercayaan yang kami jaga dengan

1:41:17garansi uptime 99,9%

1:41:19serta garansi uang kembali 100%

1:41:21buat website Anda lebih mendingin ya

1:41:25segera berali web hosting Domainizia