Web Performance Update - Ngobrolin WEB

1:48Ada beberapa update terutama dari tools-tools yang mungkin temen-temen tahu.

1:54Atau mungkin belum tahu.

1:56Jadi malam ini kita akan diskusikan bareng-bareng sambil menunggu narasumbernya.

2:02Satu lagi nih narasumbernya.

2:04Yang punya topic, yang punya materi nih.

2:06Belum join. Belum join dia.

2:09Nah kan baru diomongin sudah bisa join.

2:14Nah udah muncul.

2:16Dari ini lagi dari sungai. Pinggir sungai dia.

2:19Habis berenang ya.

2:20Bagus gak suaranya?

2:21Kayaknya kepala musiar lagi nih.

2:24Wey kepala musiar.

2:26Ini pakai laptop yang satu lagi.

2:32Oh ganti laptop.

2:34Tadi gak bisa ya?

2:36Laptop kerja soalnya laptop yang biasa dipakai buat nge-live.

2:42Kalau dipakai live kelamaan dia panas.

2:47Throttle.

2:49Oh.

2:51Somehow.

2:53M berapa? M3?

2:55Yang mana? Yang nama?

2:57Yang kantor.

2:59Yang kantor M4.

3:01M4? M4 aja throttle ya?

3:04Bukan. Kantor bagus. Luar biasa bagus.

3:07Oh yang kantor bagus.

3:08Yang nama? Yang punya sendiri?

3:10Intel.

3:11Intel. Intel i9.

3:13Oh Intel ya.

3:14Terkenal panas dan throttling.

3:17Kalau Intel ya wajar.

3:19Jadi salah satu saat kita nge-live itu.

3:26Eka kenapa? Barusan suara robot.

3:29Kalau M4.

3:32Iya sama.

3:34Suara robot juga.

3:37Koneksi ya? Koneksi ya?

3:41Koneksi.

3:43Suaranya kayak robot.

3:46Koneksi ya?

3:48Oh.

3:50Ya. Jadi.

3:52Yang seperti yang kita omongin sebelumnya.

3:56Kita akan bahas tentang performance.

3:58Beberapa update yang berhubungan dengan

4:02tools untuk mengukur performa website.

4:05Atau web. Aplikasi web ya.

4:08Kita.

4:10Kalau teman-teman yang di link in.

4:12Kita live di dua lagi di itu sama link in.

4:14Jadi kalau teman-teman yang ada di link in.

4:16Kita live.

4:19Utamanya. Channel utamanya memang di YouTube ya.

4:22Kalau baru tahu di link in.

4:24Kalau bisa pindah ke YouTube juga boleh.

4:26Kalau mau di link in juga gak apa-apa.

4:28Cuman kita gak bisa.

4:30Gak bisa ngetik.

4:32Gak bisa komen di link in.

4:37Teman-teman bisa komen.

4:38Kita nya gak bisa posting komen ke link in.

4:41Jadi cuman bisa read only.

4:45Doh ilang lagi.

4:47Kena throttle nih.

4:49Performanya kurang bagus berarti.

4:51Redtop nya.

4:53Kenapa barusan?

5:01Login dulu.

5:03Login?

5:05Oh. Refresh.

5:07Iya. Terus di refresh.

5:09Oke.

5:11Kita langsung mulai aja.

5:13Malam hari ini kita bahas web performance.

5:15Kita mau bahas dari

5:17Web Vitality The Jazz.

5:19Yap.

5:21Jadi topik itu dari saya.

5:23Ya.

5:25Semuanya sih kayaknya.

5:27Oh ini dari link in. Halo.

5:33Kita mulai melembarkan sayap.

5:39Nah.

5:41Teman-teman

5:43yang

5:45mungkin yang

5:47sudah tahu pakai Web Vitality The Jazz

5:49atau yang belum tahu

5:51ada loh

5:53tools dalamannya

5:55Web Vitality The Jazz

5:57yang sebenarnya dia ini aja ya.

5:59Rapper dari

6:01performance API.

6:03Jadi dari web

6:05performance API diwrappling

6:07untuk mempermudah kita

6:09kayak

6:11mengambil data.

6:13Ya.

6:15Ya. Kayak kalau di load.

6:17Terus dia bisa mengambil data

6:19onLCP, onFID,

6:21salah. onFID udah nggak ada.

6:23onLCP, onCLS

6:25sama on

6:27TTFB segala macam.

6:29Kita bisa harvest datanya di JavaScript.

6:31Melalui JavaScript.

6:33Yang kita bisa proses tentunya

6:35menuju

6:37yang saya lakukan di kantor

6:39saya kirim datanya

6:41ke

6:43sebagai custom

6:45metric ke

6:47Google Analytics.

6:49Jadi bisa saya tracking manual.

6:51Atau teman-teman

6:53punya tools lain yang

6:55beacon,

6:57kind of beacon gitu. Kayak kirim data

6:59ke mana bisa pakai Web Vitality The Jazz.

7:05Ada kok tutorialnya dari

7:07banyak yang bisa

7:09bikin

7:11dari GTM.

7:13Terus dibikin

7:15segmentation-segmentationnya.

7:17Terus kemudian dia sudah

7:19nge-load Web Vitality dari GTM.

7:21Lalu kirimkan data

7:23nanti langsung di-export

7:25datanya ke Looker Studio.

7:27Jadi kalian bisa lihat grafiknya.

7:29Oh dashboard.

7:31Jadi grafiknya langsung

7:33data yang kalian kumpulin

7:35sendiri dari user kalian.

7:37Jadi ini adalah

7:39bukan lab data, tapi

7:41field data. Jadi dari user.

7:43Nah, yang terjadi di sini adalah Web Vitality

7:49nyah.

7:51Release sebelum Google I/O biasa.

7:53Oh, sudah

7:55mendekati Google I/O ya.

7:57Sekarang, release. Jadi kalian

7:59tahu dari saya Web Vitality 5

8:01itu release sekarang sebelum

8:03nonton Google I/O announcementnya nanti.

8:05Data ini sudah bukan

8:11NDL lagi, masih di Jakarta sudah dipublish.

8:13Oke.

8:17Jadi ini

8:19jadi ini, kalau biasanya

8:21kan kita pakai Inspek Element

8:23gitu kan, terus ke

8:25Performance.

8:27Atau kita menggunakan

8:29tools kayak

8:31Xspeed, atau yang

8:33ini kan, misalnya.

8:35Tadi Mas Riza pakai ini namanya

8:37lab data. Jadi

8:39kita sebagai

8:43performance researcher

8:45mencoba mendibug

8:47performance di device

8:49kita. Sedangkan

8:51Web Vital.

8:53Web Vital JS ini

8:55adalah script

8:57monitoring yang kita

8:59panamkan.

9:01Ya, di client side.

9:03Kayaknya si Eka harus

9:09reload dulu.

9:11Cari sinyal, cari sinyal.

9:15Coba di-reload kali ya.

9:17Coba restart. Coba refresh.

9:23Refresh browser.

9:27Nah, sudah

9:29ngefreeze ya.

9:31Jadi kalau kita pakai

9:33Web Vital JS ini,

9:35begitu website kita

9:37di-load oleh user, itu akan direkam ya.

9:39Performance-nya berdasarkan

9:41dari sudut pandang user ya.

9:43Gimana Eka? Coba cek.

9:47Ih, ilang lagi.

9:51Ibu Eka suaranya pecah.

9:53Pecah, berarti lucu ya.

9:55Kalau pecah.

9:57Kalau gak salah, waktu 10 stack

9:59minggu lalu, ada kan

10:01Web Vital, bisa nge-load Web Vital JS kan?

10:03Iya, ada, ada.

10:05Iya, bawaan dari

10:07framework-nya ya.

10:09Termasuk juga waktu create track

10:11app juga ada.

10:13Bagaimana suara

10:15Eka masih pecah nggak?

10:17Coba tes Eka.

10:19Ya, lebih kan kan?

10:21Menurut saya.

10:23Saya nggak ketahuan pecah atau nggak.

10:25Iya, makanya.

10:27Ya, jadi

10:29berarti ini lebih

10:31apa ya, lebih real ya

10:33dibandingkan kita tes

10:35kalau pakai page speed atau

10:37extension ya, atau pakai

10:39aspect.

10:41Sebenarnya,

10:43real-nya itu

10:45maksudnya begini, device

10:47jadi

10:49kondisi device di lapangan,

10:51kondisi internet

10:53di lapangan user kita.

10:55Ya, network masing-masing user.

10:57Ya, kan berbeda-beda.

10:59Jadi kita nggak bisa

11:01nggak bisa menggunakan

11:03standar kita yang menggunakan

11:05MacBook M4 untuk

11:07ngetes performansitas kita.

11:09Dan kita bilang sama

11:11klientek, dengan

11:13Wi-Fi yang super cepat, saya bilang

11:15ini bisa USB cepat-cepat aja gitu.

11:17Tapi ternyata bisa dengan

11:19koneksinya

11:21jelek, sama juga bohong.

11:23Benggak taunya kliennya

11:25pakai internet explorer

11:27versi 6 gitu kan.

11:29Bisa jadi.

11:31Ya, berbeda ya.

11:33Ternyata testing-nya

11:35ngaco berarti ya.

11:37Betul.

11:39Jadi pakai web,

11:41jadi tools ini banyak sih

11:43yang pakai framework-framework

11:45sudah banyak pakai, terus kemudian

11:47kayak kalau kita

11:49kayak pernah kan di 10 stack yang lalu

11:51udah pakai, udah ngebundle ini

11:53kalau nggak salah, next juga pakai.

11:55Udah ada, iya, udah ngebundle.

11:57Udah memasukkan

11:59web fighters-nya tinggal dipakai.

12:01Kecil kok, nggak sampai kurang lebih 2K ya.

12:052Kbyte.

12:07Dikompresi.

12:09Dikompresi, 2Kbyte

12:11oke lah.

12:13Jadi tinggal pakai

12:15tinggal pakai

12:17wrapper-wrapper-nya, onlcp,

12:19onimp, oncls, itu nanti

12:21angkanya

12:23langsung kelihatan, iya.

12:25Nah ini kan callback-nya itu

12:27console-lock.

12:29Callback-nya itu bisa ke

12:31function kalian sendiri, bisa pakai

12:33more sent to analytics-ka,

12:35more sent to

12:37pages-ka, whatever lah gitu ya.

12:39Kalian kirim data kemana, iya.

12:41Biasanya kirim begin ke

12:43analytics atau ke

12:45atau simpan ke database.

12:47Iya, simpan database.

12:49Berat sih, cuman ya.

12:51Sebenernya simpan database

12:53ujung-ujungnya ya, cuman simpan database

12:55jangan database sendiri.

12:57Iya, pakai service terpisah ya

12:59external service, jadi dia cuman lempar aja.

13:01Terus nggak perlu nunggu,

13:03nggak perlu apa namanya

13:05waiting gitu ya, sampai datanya kesimpan ya.

13:07Ya kan bisa misalnya kita

13:09udah punya API sendiri kan

13:11buat masukin database,

13:13terus saya postgres, terus ada

13:15aplikasi lain misalnya yang pakai

13:17database atau apalah

13:19analytics apapun.

13:21Biasanya, kalau mau

13:23di open source-kan semua, bisa pakai

13:25yang namanya, kalau dari apace

13:27apa itu namanya?

13:29Yang buat data gede,

13:31datadoc.

13:33Datadoc.

13:35Iya kayaknya ya, kalau nggak salah, ada ya.

13:37Bukan apace apa gitu.

13:39Ini berbayar ya?

13:41Bukan, bukan datadoc, intinya

13:43dari apace, terus kemudian datanya

13:45bisa di visualisasikan ke

13:47atau elastic search deh,

13:49gampang ya, itu kan free ya,

13:51open source ya.

13:53Neuralic?

13:55Neuralic bayar.

13:57Ya simpannya misalnya ke

13:59elastic search, terus kemudian

14:01di visualisasikannya

14:03di Grafana, bisa.

14:05Kalau mau

14:07bikin sendiri,

14:09tapi kalau nggak mau bikin

14:11sendiri, ada yang namanya

14:13Lighthouse CI.

14:15Coba tuh buka Lighthouse CI.

14:17Cuma ini kayaknya

14:25project sudah diabandon.

14:27Abandon ya?

14:29Iya.

14:31Kenapa?

14:33Masuk, apa kuburan?

14:37Maksudnya,

14:39kapan terakhir kali di, ini coba

14:41kapan terakhir kali?

14:437 bulan.

14:45Ya sih, kurang begitu dimaksudkan.

14:47Masih lah, masih jalan.

14:49Dan fail lagi.

14:51Itu docks lagi.

14:53Docksnya aja gagal.

14:55Coba turun, ada,

14:57dia bisa visualisasikan data

14:59Lighthouse ini.

15:01Ya, bisa

15:03bandingin halaman ke halaman.

15:05Cuma ya per branch.

15:09Berdasarkan pull request ya?

15:11Berdasarkan pull request atau branch ya?

15:13Ini untuk CI/CD kan,

15:15musti pipeline gitu.

15:17CI, CI.

15:19Untuk CI. Nggak pakai CD.

15:21Kalau semisalnya

15:23temen-temen nggak mau

15:25pakai begini-beginian,

15:27ada yang namanya

15:292.

15:31Crux Dashboard sama

15:33Crux Visualize. Masih bisa ada di

15:35dock.

15:37Oh, pakai Looker Studio.

15:45Ya, coba masukin.

15:47Siapa mau masukin?

15:49Activate kek atau apa kek?

15:51Lagi dimatiin.

15:59Lagi dimatiin.

16:01Lagi dimatiin.

16:03Lagi dimatiin.

16:05Ini, ya,

16:07ini crux data ya.

16:09Chrome UX Report

16:11dari

16:13sebenarnya pakai WebFighter juga

16:15di belakangnya.

16:17WebFighter JS juga di belakangnya.

16:19Kurang banyak datanya.

16:21Kurang banyak.

16:23Coba LCP.

16:25Coba lo pakai yang

16:27itu.

16:29Kekiri.

16:31Ada bintang di kiri, bintang di kiri.

16:33Kiri, kiri, kiri.

16:35Sidebar.

16:37Ah, coba.

16:39Ada nggak datanya?

16:41Mudah-mudahan banyak.

16:43Nggak banyak-banyak amat batas data yang

16:45mengunjungi situsnya Mas Riza.

16:47Iya, kurang banyak.

16:49Kalau mau lihat

16:51yang banyak ya tes salah satu

16:53situs yang banyak isinya.

16:55Web.dev lah.

16:57Yang pasti

16:59banyak.

17:01Dan bagus.

17:03Oh, iya, benar.

17:11Nah, ini data

17:13yang sudah dikumpulkan

17:15dari si Google

17:17Anonymous Data.

17:19Oh, yang dari, apa namanya?

17:21Chrome, ya, Chrome UX.

17:23Chrome UX.

17:25Jadi, datanya ini

17:27berasal dari semua

17:29pengguna Google Chrome.

17:31Chrome, ya,

17:33Chrome only. Bukan Chromium ya, Chrome.

17:35Ya, Chrome, Google Chrome saja ya.

17:37Google Chrome.

17:39Yang

17:41tersebar di semua

17:43device, mulai dari

17:45Android,

17:47Android,

17:49dan desktop.

17:51Desktop, tablet iOS ya.

17:53Ini kan

17:55part dari, ini kan bukan rendering,

17:57ini part dari product.

17:59Tepat lah.

18:01Apa, layer atasnya

18:03browser engine.

18:05Bukan, nggak ada hubungan sama browser engine ya.

18:07Iya, nggak ada hubungan. Ini part

18:09dari product. Jadi,

18:11saat kita menginstal ini, kita sudah setuju

18:13kalau datanya dikirimkan.

18:15Meskipun, data yang dikirimkan

18:17Anonymous. Kalian bisa lihat bunker

18:19sendiri nanti datanya di Google Data Studio.

18:21Ya,

18:23itu Google BigQuery.

18:25Kalian bisa lihatannya, kok data,

18:27raw datanya ada, kok.

18:29Jadi, jangan takut, wah Google,

18:31blablabla. Tapi,

18:33cukup transparan

18:35data ini. Ini ya.

18:37Namanya table field-nya

18:39ini. Jadi, nggak ada

18:41nama, nggak ada

18:43IDF,

18:45PII, nggak ada PII.

18:47Iya.

18:49Jadi, cuman

18:51mengirimkan

18:53data aktivitas,

18:55web yang kita

18:57akses,

18:59terus performanya gimana,

19:01device-nya apa, device-nya apa ada ya?

19:03Ada.

19:05Kan harus tahu tablet,

19:07tablet,

19:09ada, ada, ada.

19:11Ada ya.

19:13Sama archive.org,

19:15kok nggak salah, tapi kayaknya nggak disebut

19:17di sini.

19:19Terus, dari,

19:21biasanya ke LCP deh,

19:23ke Sidebar DLCP.

19:25Bisa kelihatan, perjalanan

19:29di bulan April misalnya,

19:358,17%

19:37masih ada yang kurang bagus.

19:39Kurang bagus.

19:41Itu tuh desember ke januari,

19:43kayaknya mereka ganti

19:45apa, meng-improve sesuatu

19:47jadi naik, naik banget ya.

19:49Drastis ya.

19:51Berarti sukses, sukses, berarti

19:55betul-betul improvement-nya kan.

19:57Kalau dari Juli ke Agustus,

19:59malah jelek ya jadinya ya.

20:01Regression.

20:03September dibalikin lagi.

20:05Nah, di sini artinya apa,

20:09tapi

20:11bedanya sama, apa bedanya sama

20:13WebVital.js yang tadi misalnya

20:15dengan yang ini.

20:17Kalau data ini kan data public

20:19yang dikumpulkan oleh Google

20:21dan direpresentasikan

20:23dengan tools-tools tersebut.

20:25Jadi, delay datanya ada.

20:27Hanya bisa kita lihat data

20:29sebulan atau 28 hari terakhir.

20:31Sedangkan,

20:35kalau kita kumpulin sendiri,

20:37kita bisa lihat real-time

20:39yang terjadi.

20:41Tinggal sekuat apa server kita

20:43untuk memproses data sebanyak itu.

20:45Dan user yang tidak pakai Chrome juga bisa

20:49ke rekam kan.

20:51Mungkin ada yang pakai, mana tadi?

20:55Ada yang usernya pakai

20:57Opera Mini.

20:59Oh, pusing itu.

21:03Dia punya server sendiri,

21:05Opera Mini.

21:07Itu browser favoritnya Ivan.

21:09Opera Mini.

21:13Dia punya rendering,

21:15bahkan mereka punya markup

21:17language sendiri dong namanya OBML.

21:19Opera Browser Markup Language.

21:21Masih bisa itu?

21:27Masih, masih. Ya mungkin masih.

21:29Terakhir lihat orang pakai

21:31Opera Mini, sekitar

21:334 tahun lalu sih, terakhir harus

21:35mengakomodasi user yang pakai

21:37Opera Mini.

21:39Mereka masih ada Opera Mini nggak ya?

21:41Iya, masih. Cuma masih

21:43banyak dipakai atau enggak.

21:45Sama, maksudnya,

21:47cukup banyak user kita yang pakai atau enggak,

21:49nggak tahu. Terakhir harus

21:51mengakomodasi user

21:53Opera Mini 4 tahun yang lalu.

21:55Abis itu, gue sengaja tunjukkan browser stats.

21:57"Nih, makin lama, makin turun, user-nya

21:59udah nggak ada yang pakai. Udah ya, kita nggak

22:01lanjut akomodasi

22:03mereka."

22:05Ada Opera Mini, ada

22:07Opera Mobile, beda ya?

22:09Ada, beda.

22:11Beda ya?

22:13Opera Mobile itu seperti

22:15modern browser-nya.

22:17Modern browser

22:19sebenarnya.

22:21Nggak tahu kalau Opera Mobile itu normal

22:23sih. Kalau Opera Mini, yang dulu

22:25gimmick-nya adalah data saving. Data

22:27saving-nya karena mereka tuh kayak

22:29punya satu server sendiri.

22:31Jadi kayak dibuka dulu

22:33dari situ. Mereka bikin

22:35SSG sendiri, based on

22:37proxy server-nya mereka.

22:39Cuma itu, Wacoh, itu busing sih.

22:41Ya, gitu lah.

22:43Oke.

22:45Itu kan tadi

22:47browser stats untuk

22:49apa namanya?

22:51Dari kitanya

22:53sendiri untuk

22:55membatasi

22:59seed

23:01salah.

23:03Browser stats kan kita bisa lihat

23:05berapa banyak user yang menggunakan

23:07browser tertentu. Jadi

23:11berapa persentase browser yang menggunakan, berapa versi.

23:13Kalau nggak salah tools yang kita pakai, kalau dibuild

23:17Java Seed, lu pakai apa namanya ya?

23:19Browser stats, eh bukan browser stats.

23:23Browser apa namanya? Tau nggak?

23:25Yang buat polyfill.

23:27Enggak.

23:29Polyfill.

23:31No, no, no, kalau kita mau

23:33bundle

23:35dibuild tools-nya kita,

23:37kita pakai browser. Kita bisa

23:39pakai browser list atau apa gitu yang namanya.

23:41Bukan.

23:43Nah, ntar gue buka

23:45project ini.

23:47Pasti penasaran.

23:49Tools atau library?

23:53Preset ENV,

23:55bukan?

23:57Bukan.

23:59Kita bisa set

24:01preset-nya. Kita hanya support

24:03misalnya

24:05browser list.

24:07Browser list.

24:09Browser list kan tapi dari

24:11bubble. Maksudnya itu adalah

24:13opsi dari bubble kan?

24:15Yang bikin dia

24:19apa namanya?

24:21Polyfill-nya kan si bubble. Cuman

24:23browser list itu

24:25option-nya. Benar nggak?

24:27Kayaknya iya.

24:29Bukan.

24:31Kita kan

24:33browser list, terus kemudian

24:35kita decide

24:37tools kita

24:39hanya support

24:412 maja terakhir

24:43plus EA11

24:45misalnya. Jadi waktu dibundle

24:47Ini kan?

24:49Iya, browser list.

24:51Oh, integration.

24:53Iya, dia ada integrationnya.

24:55Eh, belum nisir.

24:57Oh, sorry. Ini ini.

24:59Integration.

25:01Ini. Nah.

25:03Integration.

25:05Iya, browser list. Nah.

25:07Ini dia.

25:09Ini maksud saya.

25:11Tau pakai tapi nggak tau namanya. Gila ya

25:13sekarang ya. Jaman sekarang karena udah semuanya

25:15sudah dibikinin.

25:17Nah, ini aslinya ya.

25:19Browser l.ist.

25:21Wah, susah ya

25:23kalau dibaca. Tapi ini

25:25shortcut kali ya. Browser

25:27l.ist.

25:29Nah, kenapa saya singgung ini? Ini kan

25:31kita sendiri yang mendesain. Oke, saya

25:33mau support browser

25:35yang

25:37yang terbaru

25:39saja. Yang terbaru saja.

25:41Yang versi sekian sampai sekian, gitu ya.

25:43Nah.

25:45Bagaimana dengan fitur-fitur

25:47yang selanjutnya.

25:49Kapan kita decide

25:51kalau

25:53fitur tertentu

25:55sudah bisa kita pakai?

25:57Kebayang nggak?

25:59Maksudnya. Misalnya

26:01ada fitur yang belum baseline.

26:03Contohnya.

26:05Tetapi kita mau pakai itu.

26:07Cuma pertanyaannya,

26:09bisa nggak sih kita pakai user kita

26:11sudah pada mampu nggak sih?

26:13User kita ya. Bukan user

26:15umum. Bukan semua user

26:17pada umumnya. Ya. Sedangkan kita

26:19nggak tahu. Datanya

26:21nggak ada yang ngasih tahu kita.

26:23Kalau di Google Analytics,

26:25nggak

26:27komprehensif. Nggak se-komprehensif itu

26:29melihat versi browser yang

26:31dia hanya bisa lihat

26:33versi browser. Nggak bisa lihat

26:35percapability.

26:37Apakah

26:39flag-nya dinyalain, atau enggak?

26:41Gitu ya. Tapi tepatnya

26:43misalnya kayak

26:45jaman dulu kayak apa ya?

26:47Performance Observer atau

26:49misalnya Intersection Observer

26:51atau apalagi

26:53Capability yang lain. View Transition.

26:55View Transition misalnya.

26:57Capability View Transition nggak ada

26:59di Google Analytics nggak ada kan.

27:01Kita nggak tahu. Sedangkan

27:03View Transition itu

27:05belum baseline. Contohnya.

27:07Dan View Transition sudah ada yang

27:09level 1, ada yang level 2 nih.

27:11Dan Dokumen Transition.

27:13Ada tools yang namanya

27:15RAM Vision. Itu

27:17yang bikin GDI jadi itu.

27:19RAM Vision namanya. Ada di...

27:21Apa? Namanya RAM Vision?

27:23Oh, yang ini ya.

27:25Ide... Ide...

27:27Ide Startup. Bukan. Ide Startup bagi kalian.

27:29Jika ini bikin

27:31beginian, bisa loh.

27:33Ini apa nih? Boleh

27:35dijelaskan?

27:37Jadi, sama

27:39kayak... kayak

27:41saya tahu tadi, ini Real User Monitoring.

27:43Oh, oke.

27:45Real User Monitoring.

27:47Ini kayaknya pernah kita bahas ya.

27:49Iya. Kapan gitu.

27:51Ini berbayar ya tools-nya ya.

27:53Jadi saya cuma mau ngasih,

27:55kalau tools ini ada, dan saya nggak

27:57menemukan yang sepadan

27:59yang bisa seperti ini. Sehingga

28:01kalau kalian mau bikin Ide Startup,

28:03tiru aja begini, kayaknya

28:05bisa jadi sebuah

28:07ide, dan bisa ditiru, gitu ya.

28:09Apa yang dilakukan

28:11tools ini?

28:13Ya, standarnya

28:15Core Web Vital.

28:17Dan itu banyak tools yang bisa

28:19menemukan. Cuma dia bisa ngasih sebuah

28:21Extend.

28:23Kita bisa ngamonitoring

28:25web capability tertentu yang

28:27kita ingin tambahkan.

28:29Misalnya, suatu saat

28:31ada decision,

28:33"Oke, saya mau menggunakan View Transition."

28:35Ya udah, tambahkan

28:37View Transition atau

28:39Documentation misalnya kayak

28:41Capability yang mana.

28:43Lalu, biarkan aja

28:45dulu datanya jalan. Nanti dia akan

28:47akan ngambil data tersebut,

28:49baru kita bisa lihat, "Oh, ternyata

28:5190% user kita

28:53sudah support."

28:55Oh, jadi kita bisa default.

28:57Yang nggak pakai itu mungkin

28:59Firefox, Safari,

29:01misalnya ya, atau

29:03Chrome yang 5 versi sebelumnya.

29:05Contohnya, 4 versi sebelumnya

29:07ternyata user kita itu

29:09banyak pengguna Chrome yang 2 versi sebelumnya

29:11dan 90%. Ya kita bisa

29:13decide sebagai business,

29:15"Ya udah, kita pakai View Transition."

29:17Tuh, 90% user kita

29:19sudah support.

29:21Seperti itu.

29:23Eh, perasaan dulu kita sempat

29:25ngomongin mau bikin ya?

29:27Tahunya udah ada ya?

29:29Indul banget

29:31waktu awal-awal. Awal-awal

29:33nge-brand web kayaknya 2 tahun yang lalu.

29:35Turun lagi, ada nggak sih

29:37ambition yang lain?

29:39Jadi sebetulnya selling pointnya dia adalah

29:41kayak ngejabarin, nge-breakdown

29:43by feature ya.

29:45Tapi sebenarnya sebetulnya

29:47library yang dipakai adalah

29:49Web Vitals sebetulnya.

29:51Dia bisa nge-tracking

29:53baseline ini.

29:55Misalnya, user kita

29:57kan ada baseline,

29:59user kita ternyata

30:01bisa lihat nge-tracking per

30:03per capability

30:05dan juga nge-tracking

30:07by baseline. Jadi bisa lihat,

30:09oh ternyata user kita itu sebenarnya

30:1180% sudah support

30:13baseline 2025.

30:15Sudah saatnya nih kita upgrade

30:17codebase kita ke baseline 2025,

30:19contohnya itu.

30:21Oh, atau gini,

30:23atau gini,

30:25misalkan kita punya fitur baru

30:27yang membutuhkan

30:29capabilities tertentu.

30:31Ya kita, itu aja

30:33kayak A/B testing. Jadi user yang udah

30:35support, ya kita kirimin.

30:37Tapi nggak bisa per user ya.

30:39Nggak, bukan. Maksudnya gimana ya?

30:43Bisa kan

30:45device usernya kan?

30:47Iya, misalkan kita

30:49ada fitur

30:51kita ada fitur

30:53view transition.

30:55Jadi kita mau rolling

30:57A/B testing lah,

30:59mau rolling nggak semua user,

31:01per user tertentu aja.

31:03Untuk melihat apa-apa efektif

31:05atau bedanya.

31:07Bukan dari tools ini.

31:09Itu A/B testing kita,

31:11tapi tools ini meneteksi user-nya

31:13device-nya support atau nggak.

31:15Kalau A/B testing kan kayak

31:19buta ya, nggak tahu ya.

31:21Jadi

31:23dari data ini bisa kita lihat

31:25aplikasi, yang pengguna

31:29aplikasi kita, customer

31:31kita, ternyata

31:33majority atau 80%

31:35sudah support baseline 2025

31:37sebenarnya.

31:39Tapi kita nggak yakin

31:41kita harus ada datanya dulu ya.

31:43Iya, tetapi code base

31:45kita sebenarnya masih stuck di

31:47baseline 2023

31:49atau 2024 contohnya ya.

31:51Bisa kita bilang tuh

31:53ke si

31:55stakeholder misalnya,

31:57atau stakeholder, kayaknya kita bisa deh

31:59upgrade ke baseline 2025.

32:01Datanya ada.

32:0380% sudah support gitu.

32:05Berarti sih...

32:09Gimana-gimana?

32:11Dia beneran

32:13JavaScript learning,

32:15ngedeteksi

32:17capability itu, kirimkan data ya.

32:19Pakai ini kan, pakai

32:21Web Vitals ini kan. Eh, mana dia tadi?

32:23Web Vitals, iya.

32:25Itu ada dua fitur

32:27terpisah kan, misalnya yang

32:29berurusan sama Web Vitals, data-data

32:31terkait Web Vitals, sama satu

32:33lagi, terkait baseline

32:35database.

32:37Custom code-nya mereka untuk

32:39ngedetek per capability.

32:41Sebenarnya ngeceknya nggak

32:45terlalu rumit kan, tinggal

32:47jalanin script aja, navigator dot

32:49something. Oh, ada apa nggak gitu kan?

32:51Satu-satu, iya.

32:53Iya, harus didefine satu-satu. Oh, ini

32:55untuk ngecek kamera, ini untuk ngecek

32:57apa namanya,

32:59view transition, ini untuk ngecek apa

33:01gitu ya, GPS, lain-lain ya.

33:03Betul.

33:05Dan itu, sudah

33:07sudah ada data set-nya.

33:09Udah ada data set-nya

33:11yang terkait

33:13baseline ya, ini di luar.

33:15Kalau Web Vitals kan sudah ada

33:17itu-nya, metrik-metriknya.

33:19Kalau yang berkara fitur tadi,

33:21itu github.com/

33:23webplatformdx/

33:25webfeatures.

33:27Oh, ini.

33:29Kayaknya plate-nya pakai itu deh.

33:31Jadi ini udah data set

33:39lengkap banget, apapun itu.

33:41Bisa jadi

33:43seperti ini.

33:45Iya, mungkin juga.

33:47Jadi nanti dia kayak ada table-nya, yang ini

33:49true/false, true/false, gitu ya.

33:51Jadi tinggal di... Iya, plate-nya sih.

33:53Coba aja buka folder features ke atas.

33:55Nah.

34:01Update-nya yesterday.

34:03Oh, ini update terus.

34:05Itu segala fitur

34:09accelerometer atau misalnya kayak HP

34:11yang bisa di-fill

34:13kiri-kanan.

34:15Atau apalah.

34:17Iya. Ada berapa ini?

34:21Oh, yang di-check ini.

34:23Oh.

34:25Mungkin ya, berarti itu tadi kan

34:27nge-check satu-persatu kan.

34:29Ada aja udah banyak banget.

34:31If, blah, if

34:35accelerometer in navigator.

34:37If, blah, blah, in navigator.

34:39Iya, dan seterusnya.

34:41Robot nggak bisa dong. Iya, buat apa?

34:45Kan bukan real user kalau robot.

34:47Nggak butuh juga robot

34:49nyalain kamera, kan?

34:51Atau capabilities yang lain.

34:53Dia nggak masuk. Nggak masuk

34:57ininya. Nggak masuk

34:59ke dalam user.

35:01Oke.

35:03Wah, menarik ya.

35:05RAM Vision.

35:07Ini

35:09harganya berapa?

35:11Itu tadi mahal.

35:13157 euro.

35:15Per bulan.

35:17Wow.

35:19Ada training-nya.

35:21Rupiah nggak.

35:25Coba rupiah. Nggak.

35:27Oh, ada.

35:29Ada.

35:31Nggak ada.

35:33Tiga juta per bulan.

35:37Tapi ini

35:41gede di data sini.

35:43Sakit nyimpen data orang banyak.

35:45Iya, nyimpen datanya, ya.

35:49Iya.

35:51Kita bisa nge-track data

35:53kompetitor. Anjir, banyak banget.

35:55Ternyata emang datanya, kan. Bukan data set dari

35:57user kita sendiri.

35:59Tapi dari kompetitor.

36:01Tapi krukstone, ya.

36:03Dia nggak bilang nge-track.

36:05Ya kan nggak bisa masukin, nggak bisa

36:07inject ke client-site JavaScript

36:09di website kompetitor.

36:11Ya juga ya.

36:13Cuma, ya cuma gambaran besar-nya

36:15aja buat, apa kira-kira?

36:17Kalau dia bisa inject ke orang lain,

36:19keren kali ya.

36:21Nggak bakal diiklani.

36:23Oke. Bahas seru ya.

36:27Nah, balik ke Web Vitals tadi.

36:29Kan yang versi 5

36:31release nih. Berarti itu kan

36:33versi-versi yang baru ya?

36:35Perubahannya yang paling major apa sih tadi?

36:37Belum sempat lihat banget.

36:39Itu ada change log-nya kan sebelumnya.

36:41FID dihapuskan

36:43for good from the face

36:45of the world.

36:47FID ilang.

36:51Kan sudah diganti INP.

36:53INP. Gantinya INP, ya.

36:55Nah, breaking-nya 3 itu ya.

36:57Browser support policy

36:59to baseline widely

37:01available.

37:03Nggak ngerti dah itu apa.

37:05Apa ya itu?

37:07Kalau widely available kan, itu kan

37:09yang blah-blah. Buat versi

37:11terakhir, blah-blah-blah.

37:13Oh.

37:15Baseline widely available.

37:17Oh, dari baseline.

37:19Terus?

37:21Ya, maksudnya Web Vitals

37:23library-nya sendiri

37:25apa?

37:27Support bisa jalan

37:29kalau di browser yang

37:31udah baseline widely available.

37:33Oh, ini ada hubungannya

37:35sama RAM-nya tadi ya?

37:37Real user monitor.

37:39Itu RAM Vision Company.

37:41RAM Archive ini

37:43real user monitoring archive.

37:45Data sama sama RAM.

37:47Oh, kirain si RAM

37:49ini bikin

37:51archive-nya nggak ya?

37:53Itu namanya penjualan data ya.

37:55Nggak bisa lah.

37:57Itu kan tadi dia

37:59layanan komersil.

38:01Masih ada Philip Walton loh

38:03yang nge-menting.

38:05Itu question Philip Walton.

38:07Tahun lalu.

38:09Ini siapa, Philip Walton?

38:11Google.

38:13Member of Google Chrome.

38:15Iya.

38:17Dia pernah ngasih talks banyak

38:19dulu, jaman dulu.

38:21Bukan yang

38:23pernah datang Indonesia ya.

38:25Mereka berdua makan

38:27di SGBID-nya dulu?

38:29Alex Russell.

38:31Oh, Alex Russell.

38:33Slightly late.

38:35Slightly late.

38:37Iya, semua ini.

38:39Iya,

38:41berarti emang beliau yang

38:43nge-menting.

38:45LGTM.

38:47Itu udah di-approved.

38:49Udah di-approved.

38:51Udah di-approved.

38:53Ya.

38:55Nah, sekalian nanya sih

38:57buat semua. Apa? Kan kayak ada perubahan.

38:59Ya, update-update kayak gini lah.

39:01Apa?

39:03Library Wi-Fi Plus-nya, ganti versi major.

39:05Terus apa?

39:07FID berubah jadi

39:09INP. Nah, kalian

39:11di tempat kerja kalian masing-masing,

39:13ada itu nggak sih? Workflow

39:15apa?

39:17Workflow secara berkala,

39:19kayak itulah yang

39:21terkaitnya,

39:23terkait performance.

39:25Tapi di luar, bukan sesuatu yang bug ya.

39:27Ini kan nggak breaking sebetulnya.

39:29Tracking-tracking performance

39:31gini, ya ini di luar kasus

39:33misalnya saking lambatnya user pada

39:35komplain nggak bisa buka halaman

39:37atau mungkin dapat warning dari

39:39apa? Google

39:41Search Panel, misalnya Google

39:43Analytics, atas semacamnya.

39:45Di luar yang kasus kayak gitu, sebenarnya

39:47kalian membiasakan, itu nggak sih? Kayak ada

39:49improve performance tracking workflow.

39:51Cucur gue belum sih.

39:53Nggak pernah diapapain.

39:55Ya cuma ada datanya,

39:57cuma ya selama nggak ada

39:59regression yang parah, kayak nggak pernah dilihat

40:01dan nggak pernah diapapain.

40:03Alternatif dari Lighthouse CI apa

40:05sekarang kalau Lighthouse

40:07CI-nya mau di-depakated?

40:09Ya itu tadi debugber.

40:11Cuma mahal. Banyak sih.

40:13Ada banyak.

40:15Kayak gitu-gitu.

40:17Banyak ya? Banyak.

40:19Contohnya

40:21apa itu namanya?

40:25Calibre. Calibre juga ada.

40:27Dulu toko yang

40:33injo bikin sendiri setau saya.

40:35Mereka banyak

40:37membuat study case mengenai itu.

40:39Tinggal cari di GitHub atau cari yang

40:45service-service-nya banyak kok yang

40:47monitoring Core Web Vitals.

40:49New Relic juga bikin.

40:51Kata kuncinya

40:53monitoring.

40:55Core Web Vitals.

40:57Buat CI.

41:03Buat CI.

41:05Maunya yang CI, jadi setiap

41:07request, otomatis

41:09gitu nggak ya? Nggak bisa ya?

41:11Nggak ada ya?

41:13Tapi bukannya masukin

41:15jalanin Web Vitals

41:17library gitu, bisa nggak sih?

41:19Bisa.

41:21Itu kan Lighthouse CI tadi kan

41:23untuk dashboard-nya.

41:25Tapi kalau

41:27Lighthouse CI

41:29bisa jalan.

41:31Ada GitHub Action-nya.

41:33Bukan depakated ya, berarti ya.

41:35Bisa jalan.

41:37Di Lighthouse

41:39GitHub Action

41:41ada?

41:43Iya, di GitHub Action. Maksudnya kan setiap

41:45ada penambahan

41:47fitur atau pull request

41:49atau apa kan, dia akan

41:51menjalankan CI ini.

41:53Dan dia bisa kasih tahu kan.

41:55Berarti ini nggak

41:57nggak

41:59depakated kan?

42:01Cuma dashboard-nya

42:03tadi kan.

42:05Jadi kalau teman-teman misalkan

42:07mau nge-track

42:09pada saat mengembangkan fitur

42:11tertentu, tiba-tiba performance

42:13dari Core Web Vitals-nya menurun.

42:15Nah, itu berarti kan kesalahannya di situ.

42:17Jadi bisa kita rollback, atau bisa kita

42:19investigasi lebih lanjut.

42:21Jadi nggak, apa yang nggak sembarang.

42:23"Oh, ini error apa? Ini

42:25salahnya dimana?"

42:27Betul. Yes.

42:29Tujuan-nya begitu. Tapi

42:31kenyataannya saat saya pakai berbeda, Mas.

42:33Jadi malah ganggu dan kelama.

42:35Ganggu?

42:37Oh, jalan-nya lambat gitu?

42:39Ini dipakai ubuntu ya?

42:41Ya, semuanya

42:43ubuntu.

42:45Kan ada yang lebih kecil.

42:47Kan ada yang lebih kecil.

42:49Ya, jadi boros.

42:51Jadi lama nggak sih?

42:53Kan di-charge by time ya?

42:55Oh, tahu!

42:57Rewrite keras, biar cepat.

42:59Ini kan pakai NPM kan?

43:01Tuh, pakai Jopacit kan?

43:03Nggak tahu.

43:05Yang penting rerite

43:07aja dulu keras.

43:09Nggak, pakai husky aja.

43:11Itunya jalan di lokal, biar

43:13nge-check-nya di lokal.

43:15Nggak bisa gitu push.

43:17Nggak bisa gitu push kalau belum mas.

43:19Benar, jadi memberatkan laptop sendiri ya?

43:21Ini Mas, saya nggak punya

43:23kedudukan.

43:25Kan LHCI Autorun itu kan

43:27ada konfignya.

43:29Dan page yang mau kita

43:31monitoring kan ada banyak.

43:33Dan device yang mau di-monitoring juga ada

43:35bisa bermacam-macam.

43:37Jadi semakin banyak

43:39konfigurasinya untuk

43:41jumlah device dan jumlah

43:43page, semakin lama

43:45scanning-nya.

43:47Scanning-nya ya.

43:49Ya kan semua halaman harus dicek

43:51satu persatu? Atau kita yang

43:53decide? Dan hanya bisa

43:55untuk aplikasi yang

43:57static, page itu.

43:59Kalau misalnya ada database,

44:01berarti database harus kita up juga.

44:03Dan harus di-import database-nya.

44:05Panjang jadinya ceritanya.

44:07Jadi kalau hanya

44:09sekedar hanya

44:11static page, static application,

44:13static page ya monggo,

44:15gampang cepat up-nya. Kalau nggak ya

44:17bootstrapping

44:19aplikasi kita lama kan juga.

44:21Install semua dependensi,

44:23sampai dia up,

44:25lokal host, baru lokal host-nya

44:27di dalam tetap action di-scan.

44:29Jadi

44:31berarti idealnya itu bisa

44:33dijalankan,

44:35idealnya bisa dijalankan di testing

44:37server kali ya?

44:39Atau staging ya?

44:41Saya lebih setuju

44:43pakai yang daripada

44:45di CI. Bukan CI, ini kita nggak omongin

44:47CI, kita omongin performa secara umum.

44:49Ya lebih baik di-testing

44:51saat sudah

44:53jalan di server, di staging,

44:55baru di-test, sebelum

44:57kita bisa. Atau pakai

44:59yang tadi Core Web Fighter

45:01Monitoring,

45:03di Bugbear, atau Calibre,

45:05ada New Relic,

45:07jadi bisa di-setting

45:09buat di staging, jadi bisa kita capture

45:11sebelum go live juga bisa kan?

45:13Iya, di Bugbear.

45:15Oh, oke, oke, oke.

45:17Cuma ini kelihatannya

45:19bisa ke, apa?

45:21Soalnya kadang kita pakai staging

45:23kan, kapabilitas

45:25server-nya sengaja yang

45:27low cost kan, jadi mungkin

45:29lebih lambat, terus kita pusing,

45:31karena hasilnya jelek, lambat,

45:33padahal kalau di production,

45:35kenceng.

45:37Enggak, biasanya

45:39biasanya environment

45:41staging itu

45:43menyerupai yang di server,

45:45yang di production nggak? Eh, tergantung

45:47sih, kalau yang di production kan udah

45:49distributed ya.

45:51Iya, udah distributed ya.

45:53Iya, iya, iya, iya, iya.

45:55Yang, ideanya kan

45:59begitu ya. Yang dilihat kan

46:01bukan, bukan ini

46:03ya kak, yang dilihat kan bukan

46:05ini lambat, yang produsen

46:07cepat, yang dilihat adalah

46:09kalau setelah push

46:11PR terakhir tiba-tiba dia nge-regress

46:13banyak. Oh iya, regressionnya.

46:15Itu yang di-

46:17nge-compress dari performance sebelumnya.

46:19Jadi kalau misalnya

46:21semua rata, ya sudah.

46:23Berarti ya aman-aman saja sebenarnya.

46:25Ya berarti kayak sebelumnya nggak ada regression.

46:27Nah ini tadi

46:31pertanyaan berbeda-beda.

46:33Bisa beda-beda

46:35gini?

46:37Jadi kayak ada leaderboard gitu ya?

46:39Compare kan?

46:41Itu kayak buat compare competitor

46:43gitu kan yang tadi di

46:45kayak di ram

46:47apa itu tadi kan? Kalo ini kan

46:49sistemnya kan ada board

46:51yang dia visit untuk nge-check

46:53itu kan? Jadi bukan

46:55ada script yang ditanamkan di sana.

46:57Oh jadi ini sebenarnya

46:59webnya milik kita

47:01gitu ya, yang bisa kita tanamkan script

47:03itu ya? Bukan. Ini

47:05bukan. Sistemnya ini

47:07cuma kayak ping, kayak monitoring

47:09kayak ping dom gitu. Ya kayak

47:11speed-speed test kan? Cuma ini

47:13tampilannya

47:15enak ada label-label kolom-kolomnya

47:17gitu. Terus kita bisa ngompar banyak

47:19kan? Jadi kasusnya misalnya kita punya

47:21tokos patu, kita masukin

47:23tokos-tokos patu lain

47:25kan? Competitor. Jadi kita

47:27harus lebih cepet jadi mereka

47:29biar user

47:31lebih suka ke kita.

47:33Setuju-setuju.

47:35Yang kepikirannya adalah gini, ini kan

47:37bisa dibikin kayak leaderboard ya

47:39leaderboard. Kan

47:41seperti yang kita tau bersama

47:43kalo di Indonesia itu biasanya kenapa

47:45banyak perusahaan-perusahaan

47:47lebih memilih

47:49bikin aplikasi

47:51Android ataupun IOS

47:53salah satu alasannya supaya bisa

47:55jadi top global gitu kan.

47:57Ada bintangnya

47:595, bintang 5

48:01gitu kan. Jadi yang

48:03webnya itu agak kurang

48:05dimaintain. Jadi mereka

48:07salah satunya ya. Menurut saya

48:09pribadi itu salah satunya itu. Karena ada

48:11ada kompetisi

48:13wah ini website kita apa

48:15aplikasi kita harus bagus, harus komennya banyak

48:17itu ada matrik

48:19jadi sebenarnya

48:21sebenarnya matrik

48:23gak penting sih, tapi banyak yang

48:25menganggapnya penting dan menjadi

48:27kurang ukur gitu.

48:29Buat marketing itu penting, buat kita

48:31mungkin gak penting.

48:33Betul. Nah kalo misalkan

48:35ada website, misalkan website seluruh

48:37Indonesia ada leaderboardnya kayak gini kan

48:39FCP-nya bagus. Itu kan

48:41jadi kan orang-orang berlomba-lomba untuk

48:43membaguskan website-nya gitu.

48:45Tapi kalo gitu caranya

48:47bukan dari performance sih

48:49dari jumlah visitor lah

48:51maksudnya kayak apa

48:53App Store, Play Store juga kan

48:55rankingnya selain

48:57misteri algoritm

48:59lebih ke jumlah download sama rating.

49:01Jadi ya maksudnya

49:03kalau kita mau memasarkan ini

49:05sebagai itu tadi

49:07matrik yang valid, gimana caranya

49:09mungkin orang marketing mikir bahwa

49:11matrik performance adalah

49:13matrik yang lebih superior dibanding

49:15jumlah penunjuk, rating dan lain-lain.

49:17Ya bisa dibikin kategori kan

49:19ada berdasarkan penunjuk, berdasarkan

49:21kategori misalkan yang tercepat

49:23Gantung data segregasi

49:25yang kita mau. Tapi ide-nya

49:27menarik tuh. Sebenarnya kalo ada temen-temen

49:29sini startup yang mau

49:31monitoring website government

49:33seluruh di Indonesia

49:35page speed-nya bagaimana

49:37Benar, benar.

49:39Jadi mereka berlomba-lomba untuk bagus ya

49:41Jelek semua

49:43Kalau jelek semua ga dikompetisinya gitu

49:45malah pada tunjuk-tunjukkan lah

49:47itu juga jelek lah, itu dari departemennya

49:49juga jelek

49:51Setidaknya yang tidak paling bawah lah gitu

49:53jadi menghindari bottom gitu

49:55pilih yang terbaik dari yang terjelek gitu

49:59Kok ngomong jelek

50:03padahal siapa tau ada yang

50:05website kemerdekan

50:07Selain page speed

50:09juga harus di deteksi

50:11aksesibilitinya misalnya

50:13Betul.

50:15Semuanya, semua aspek gitu

50:17maksudnya ideal web

50:19standart lah ideal web standart

50:21Ya maksudnya berarti

50:23kualitas kan itu dari kualitas

50:25sejangan kalo apa

50:27App Store dan lalala itu dari

50:29kualitas. Kualitas juga ya

50:33Kumpulkan bahan-bahan

50:35situs department X

50:37Department X

50:39Biasanya business case aja

50:41Jumlah

50:43misalnya

50:45score

50:47speednya sekian

50:49scoring asesibilitasnya

50:51sekian, masih bagus apa engga

50:53jumlah trendernya

50:55misalnya berapa dulu bikin

50:57website-nya, harganya berapa

51:01Boleh

51:03Itu bukan data public

51:05Itu data public, boleh itu

51:07Kalau menurutnya data public

51:09harusnya data publicnya

51:11untuk kita, duit pajak

51:13Berapa harga

51:15berapa uang

51:17yang diterima oleh

51:19yang ngerjain projeknya

51:21itu yang gak boleh

51:23Tapi cost

51:27buat bikin si website itu kan

51:29itu data public

51:31bikinnya sepuluh uang

51:33tapi

51:35itu patah simpira semua

51:37Cukup, itu udah rasanya umum ya

51:39Ya itulah sebenernya intinya

51:43kan

51:45banyak

51:47perusahaan terutama di Indonesia yang mengejar

51:49metric semu tadi gitu

51:51leaderboard, komennya banyak

51:53ratingnya tinggi

51:55gitu kan

51:57yang di lombakan adalah performance kan

51:59siapa tau

52:01ada yang terpantik, wah kayaknya kita harus performance-nya bagus

52:03lihat di atas nih

52:05di atas, apa, leaderboard-nya

52:07ngobrolin web gitu ya

52:09Leaderboard ngobrolin web

52:13power

52:15Itu harus

52:17berarti yang in charge harus

52:19yang kayak kita, yang idealis

52:21Ini kan idealis mode

52:23bahkan kealitas kayak performance

52:25aksesibility

52:27di luar sana, kelihatannya

52:29ya, tapi kayak coba komen

52:31di bawah, munculin deh

52:33bikin aja dulu

52:35Kalau menurut

52:37saya

52:39situs yang

52:41bagus itu adalah situs

52:43yang cepat, yang bisa di akses

52:45oleh kalayak ramai

52:47karena sistem kita

52:49kan keadilan sosial bagi seluruh

52:51rakyat Indonesia

52:53kalau misalnya

52:55situsnya hanya bisa di akses

52:57oleh yang internet, yang cepat kan

52:59nggak adil namanya

53:01tapi sebetulnya

53:03kalau di luar

53:05maksudnya di beberapa negara

53:07ada hukum, beneran ada hukum

53:09tentang, ya bukan performance sih

53:11kalau itu lebih ke aksesibility

53:13tapi bisa hukumnya

53:15performance juga

53:17jadi

53:19selain performance, kualitas

53:21konten, update-nya

53:23dan

53:25kontennya

53:27juga dinilai

53:29nggak boleh masukin

53:31konten yang kacau-kacau

53:33abal-abal, dan

53:35kualitas security apalagi

53:37dan kualitas

53:39aksesibility, jadi banyak

53:41yang luar negeri maksud

53:43saya di sini adalah US Government

53:45dan UK

53:47dan Euro

53:49banyak sih semua negara

53:51negeri, kelihatannya udah

53:53kayak gitu, dan emang

53:55itu udah hukum, udah masuk hukum

53:57jadi kayak, misalnya

53:59kalau kita bikin

54:01kita bikin fasilitas fisik

54:03kayak misalnya gedung, harus ada

54:05apalah, ramp untuk

54:07wheelchair, kursi roda

54:09atau, harus ada pintu

54:11ada label

54:13kayak lift, elevator, atau apa

54:15ada label braille-nya, biar gedung

54:17gedung pemerintah, layanan

54:19publik, harus bisa diakses

54:21sama semua warga negara kan

54:23termasuk yang difabilitas

54:25nah, apa, web

54:27aplikasi web atau aplikasi apapun

54:29nanti punya semua perasarana

54:31digital, juga kayak gitu

54:33harus bisa diakses semua, jadi emang

54:35kalau mau disambung-sambungin ke tadi

54:37keadilan sosial bagi seluruh rakyat

54:39Indonesia, beneran bisa sih itu

54:41in theory bisa

54:45oke

54:47sebelum kita terlalu jauh

54:49mengkritik, kita lanjut

54:51satu buah studi

54:53ini ngasih inspirasi

54:55kritik yang objektif

54:57kritik objektif tidak salah

54:59jadi, cuma saya mau ada

55:01satu yang keren, yang saya mau kasih

55:03ke temen-temen, itu yang soal Nux

55:05commerce, Mas Riza

55:07nah, jadi ya

55:09nah, ini

55:11saya nggak pakai Nux, dan nggak

55:13pakai Shopify, tapi ini adalah

55:15salah satu situs ya

55:17salah satu open source project

55:19yang membuat integrasi

55:21integrasi

55:23Nux dengan

55:25Shopify

55:27jadi headless ya, ini headless

55:29headless, Shopify, terus

55:31di front-end-nya pakai Nux, gitu ya

55:33cepat banget

55:35klik aja dah

55:37luar biasa

55:43udah di preload keliatannya ya

55:45makanya dipencet langsung

55:47instant ke loading

55:49coba-coba pakai

55:51pakai itu harus dilambatkan

55:53iya, sudah saya coba

55:55ke performance ini Mas

55:57ke

55:59ke performance tab

56:01kalau mau cek

56:03performance tab, turun

56:05dibagi sama yang

56:07next step yang

56:09kok gede banget ya

56:11bawa-bawa, itu trottling

56:13trottling

56:154x slow down

56:17ke bawah

56:19record and reload

56:21wah, seru nih

56:23kok udah 2 detik

56:27iya

56:29ini digerakkan nggak apa-apa kan

56:31digerakkan nggak apa-apa kan

56:33nggak apa-apa, lihat

56:351,67 sec

56:37dia punya

56:39trottling ya

56:41yang punya content full page

56:43iya

56:45saya mau bongkar

56:47ini kode

56:49mau belajar, saya nggak mau bikin

56:51ada github-nya

56:53udah nggak apa lagi coba

56:55orang GDI

56:57ini GDI yang bikin

56:59iya GDI

57:01GDI web performance yang lain

57:03yang lebih

57:05dewa dari saya

57:07saya nggak dewa

57:09ini dari Nux-nya

57:11dari Nux-nya

57:13yang emang udah banyak fitur-fitur yang memudahkan

57:15improvement performance

57:17atau dia bikin kayak

57:19orang developer-nya

57:21itu saya nggak tahu

57:23yang bikin banyak

57:25custom

57:27mantra-mantra khusus

57:29high performance server

57:31render e-commerce app

57:33built with Nux and Shopify

57:37jadi inget ini

57:39website yang

57:41di review sama Westboss

57:43di Syntax FM

57:45yang website jadul tapi kencang banget

57:47ada yang tahu nggak?

57:49klik BCA

57:51bukan

57:53klik BCA website jadul dan

57:55kencang banget lho

57:57iya tapi Westboss nggak tahu ada klik BCA

57:59tahu-nya

58:01bank central kanada dia

58:03BCC dia

58:05bank central kanada dia

58:07AXS

58:09BCA juga

58:11tapi bank central Amerika

58:13utara

58:15serius tuh

58:17itu masih pakai table lho

58:19tapi cepet

58:21masih pakai table dan cepet kan

58:23ini pertanyaannya apakah

58:25performanya di Shopify-nya

58:27apakah di Nux-nya

58:29kalau nggak harus bilang Nux-nya ya

58:31Shopify di sini kan cuma

58:33Shopify kan API

58:35atau SDK

58:37semacamnya buat nge-fetch

58:39nggak maksudnya

58:41ok, gue ubah ini

58:43pertanyaannya apakah

58:45by default Nux ini udah seperti ini atau harus di-tweak

58:47lagi?

58:49sama pertanyaan gue tadi itu

58:51apakah Nux

58:53menyediakan banyak fitur-fitur yang

58:55kayak udah tinggal apalah misalnya

58:57lazy load di config-nya

58:59lazy load titik 2 true, jadi kita tinggal

59:012 true aja di config-nya

59:03atau emang si developer-nya

59:05ini emang punya

59:07trik-trik khusus, misalnya banyak custom

59:09code, nulis banyak custom code

59:11buat nge-optimize

59:13yang bisa di pelajari

59:15buka github-nya

59:17bentar

59:19masih penasaran sama website-nya

59:21Westbos

59:23mana ya?

59:25ya nantilah, kalau ketemu

59:27ok, lanjut

59:29dengan central kanada

59:31lanjut, lanjut

59:37apa yang

59:39coba kita bahas lagi

59:41oh github-nya

59:43yang bikin jepet tuh

59:45apa?

59:47emang bisa kelihatan disini?

59:49ada artikalnya nggak?

59:51ada artikalnya nggak?

59:53cek

59:55pakai graph key

59:57pakai graph key

59:59image optimization

1:00:01itu kan apa?

1:00:03bisa bantu scripts juga

1:00:05itu hybrid rendering

1:00:07coba di

1:00:09diklik aja

1:00:11hybrid rendering, image optimization

1:00:13ini yang kayak versal punya ya?

1:00:15next ya

1:00:17apa ini hybrid rendering?

1:00:19oh ada pre-rendering ya

1:00:21nah itu kan fitur

1:00:23dari next ya?

1:00:25eh bukan

1:00:27nah iya

1:00:39fitur dari next

1:00:41itu kan memudahkan kan

1:00:43berarti dia bisa

1:00:45semua yang static bisa di-cache

1:00:47sampai lama banget

1:00:49berarti caching ya

1:00:53maksudnya ada

1:00:55kompleks caching layer

1:00:57itu kan ngebantu

1:00:59terus tadi optimize image

1:01:01kelihatannya apa? fitur dari next juga ya?

1:01:03iya

1:01:05masih penasaran

1:01:07soal itu yang si wasteboss

1:01:09iya, masih penasaran bang

1:01:11central

1:01:13kanada, nih nih nih nih

1:01:15ada nih, dapat dapat dapat

1:01:17namanya make mastercard

1:01:19itu kan mungkin dari infranya nggak sih

1:01:21kalau yang kayak gitu

1:01:23itu website jadul

1:01:25logiknya berarti nggak banyak

1:01:27client-side framework, semua server-side

1:01:29render kan

1:01:31eh ada suaranya lagi

1:01:35wey wey wey udah wey

1:01:37skip

1:01:39website-nya website jadul

1:01:41dia nggak pakai client-side framework kan

1:01:45semua server-lander

1:01:49ini mah di gedein di infranya kan

1:01:51berarti

1:01:53website-nya apa namanya

1:01:55make mastercard

1:01:57apa aneh banget namanya

1:01:59make mastercard

1:02:03nih, wey

1:02:05instant loh, instant

1:02:07ya langsung muncul

1:02:09HTML simple nggak pakai client-side framework

1:02:11nggak pakai

1:02:13apa yang kita cari

1:02:15mur

1:02:17apa itu

1:02:19cepet loh

1:02:21search-nya mah cepet

1:02:23iya

1:02:25makanya ini super

1:02:27cepat, makanya penasaran

1:02:29kayak dia, ini nggak pakai

1:02:31nggak pakai modern front-end

1:02:33framework loh

1:02:35iya, jadi asal server-nya kenceng

1:02:37infranya, makanya mungkin

1:02:39dia pakai apa itu yang

1:02:41tapi banyak error ya

1:02:45apa namanya lupa

1:02:47yang bisa di deploy

1:02:49ke macem-macem region

1:02:51maksudnya gimana

1:02:55macem-macem region

1:02:57cdn

1:02:59edge

1:03:01deploy-nya di edge kali

1:03:03jadi front-end-nya

1:03:07mungkin nggak tau

1:03:09front-end-nya jadul, tapi

1:03:11server-nya kapasitas-nya besar

1:03:13sama infranya

1:03:15apa, sedekat mungkin

1:03:17geographically

1:03:19secara geografis dengan user

1:03:21ya mungkin ini tebak-tebak buah manggis

1:03:23aja

1:03:25nggak ada ya, nggak ada ketahuan ini

1:03:27pakai framework apa ya

1:03:29jQuery, jangan-jangan

1:03:33kayaknya sih

1:03:35kayak jQuery

1:03:37pakai ISPX

1:03:39ISPX

1:03:41ISPX itu apa?

1:03:43ISPX

1:03:45ISP

1:03:47tuh

1:03:49ada tuh, dollar

1:03:51nggak tau nih

1:03:53jQuery bukan

1:03:55kalau ada dollar ya harusnya

1:03:59ya kan semua bisa

1:04:01dijadikan dollar

1:04:03jQuery ada tuh

1:04:05nah tuh ada

1:04:07sama, iya bener, jQuery

1:04:09betul sekali

1:04:11jQuery

1:04:13jQuery juga bisa, iya-iya emang bisa

1:04:15siapa bilang nggak bisa, justru itu

1:04:17cuman apakah kita bisa membuat

1:04:19website secepat ini dengan jQuery

1:04:21pasti bisa, cuman

1:04:23nggak banyak yang melakukan itu kan

1:04:25kalau sekarang kan kayak, begitu kita

1:04:27mau bikin aplikasi web, nggak usah bilang

1:04:29bikin aplikasi web, mau bikin website

1:04:31mau bikin landing page, udah langsung Next.js

1:04:33gitu

1:04:37jadi, gimana ya

1:04:39ini kan istilahnya tradisional ya

1:04:41tapi bisa

1:04:43jauh lebih cepat daripada yang modern

1:04:45gitu, jadi

1:04:47ya

1:04:49harus ditiru, coba throttle

1:04:51oke

1:04:53network

1:04:55slow

1:04:57disable cache, udah ini udah di throttle

1:04:59udah di throttle

1:05:01nggak, harus buka dev tool baru

1:05:03di reload, baru ke

1:05:05performance lagi kayak tadi ya

1:05:07iya boleh

1:05:09kecilin aja

1:05:11ini gede banget

1:05:13oke

1:05:17terus nggak responsif gitu

1:05:19iya nggak responsif ya

1:05:21berarti kita turunin ke bawah

1:05:23kan tradisional

1:05:25record in reload

1:05:27pindah ke kanan

1:05:29oh ke kanan

1:05:31dev tools-nya responsif, halamannya

1:05:33kagak

1:05:35kan modern versus

1:05:39tradisional, nah ini

1:05:41berasa agak lambat ya

1:05:43iya, ke throttle

1:05:45tapi begitu

1:05:47ya karena semua dari server

1:05:49begitu karena satu

1:05:51langsung muncul semua kan

1:05:53paling kiri ada tanda

1:05:55sebelah button record

1:05:57sebelah button record

1:05:59ada tanda pintu

1:06:01lcp-nya 12,3

1:06:03lcp-nya turun karena kan server render

1:06:05ya, cls-nya 0

1:06:07oh iya ini full server render ya berarti ya

1:06:09cls-nya 0

1:06:11jadi dia nungguin servernya ya

1:06:13kalau kita reload

1:06:15kedua kali, ngeru nggak sih?

1:06:17oh caching ya, ini

1:06:19ini disable caching ya

1:06:21iya

1:06:27iya begitulah, oke

1:06:29kembali ke topik

1:06:31apa? ada lagi yang mau dibahas? udah kan?

1:06:37ini yang kita bahas next-nya ya

1:06:39kira-kira

1:06:41apa yang membuat website ini cepat

1:06:43si Nux Commerce

1:06:45dia kasih tau

1:06:47ya mungkin hybrid renderingnya itu

1:06:49pre-fetch sama pre-render itu kali ya

1:06:51nah

1:06:53karena ngomong-ngomong soal

1:06:55pre-fetch dan pre-render, kita liat ini

1:06:57sedikit sebelum kita tutup, yuk

1:06:59speculative loading mpi

1:07:01udah pernah tau kan?

1:07:03sudah

1:07:05coba diulang lagi mungkin buat temen-temen yang

1:07:07belum tau

1:07:09saya share

1:07:11screen aja deh

1:07:13loh eka mana? eka-nya ilang

1:07:15oh dia belum bayar

1:07:17billing

1:07:19kaya

1:07:23warnet belum bayar billing

1:07:27gimana sih caranya?

1:07:29pindah ke tempat saya

1:07:31remove dulu

1:07:37present or invite

1:07:39ada present kan?

1:07:41yang kalian bawa

1:07:43present or invite, terus share

1:07:45saya udah sharing screen, tinggal bawa ke depan

1:07:47stop screen, udah

1:07:49nah ini speculative loading mpi

1:07:51gedein-gedein, zoom-zoom

1:07:55zoom-zoom

1:07:57nah

1:07:59ini adalah

1:08:01kalau tadi kan Nux

1:08:03hybrid

1:08:05rendering ya, nanti kita bisa

1:08:07bahas yang

1:08:09kaya tadi ada saya baca

1:08:11hybrid rendering

1:08:13yang mana

1:08:15ini, saya baca tadi pre-render

1:08:19terus

1:08:21SWR kalau nggak salah

1:08:23server

1:08:25SWR

1:08:27server web rendering

1:08:29ini ini ini

1:08:31add cache to header

1:08:33server response, disk cache

1:08:35di

1:08:37ya bacalah nanti

1:08:39server side rendering dan segala macam

1:08:41SWR itu kalau nggak salah

1:08:43dia kirimkan header supaya di-cache

1:08:45di CDN

1:08:47nah

1:08:49speculative loading

1:08:51ini kaya hint

1:08:53type hinting

1:08:55bentuknya json

1:08:57json ke

1:08:59ke browser

1:09:03untuk kita menyatakan

1:09:05si

1:09:07bukan yang ini, speculation rule

1:09:11ah speculative loading, speculation rule

1:09:13mpi, kita ngasih tau

1:09:15browser, page

1:09:17ini, kita mau

1:09:19di pre-render

1:09:21dan page yang ini kita mau di pre-fetch

1:09:23jadi, dan

1:09:27kita kasih

1:09:29kaya hinting seperti ini, hanya

1:09:31cukup menambahkan ini ke heading

1:09:33ke head, HTML

1:09:35nanti si browser yang

1:09:37yang ini, si browser yang

1:09:39decide, ya

1:09:41kita bisa kasih dia

1:09:43apa namanya

1:09:45kita bisa ngasih

1:09:49rule-nya ini

1:09:51bukan, kita mau bikin dia

1:09:55sangat

1:09:57agresif atau

1:09:59konservatif, itu juga bisa, jadi

1:10:01karena ada masalahnya begini, kalau kita

1:10:03terlalu agresif, kita seperti

1:10:05ngedi-dose server sendiri

1:10:07kalau misalnya kita bilang

1:10:09pre-render semua hal amat itu

1:10:11begitu misalnya page deload

1:10:13page load, nanti

1:10:15masa semua link

1:10:17yang ada di page itu

1:10:19di pre-render, kan nggak cocok juga

1:10:21kita bisa ngasih

1:10:23men-define rule-nya kita sendiri

1:10:27misalnya untuk button-button yang

1:10:29CTA, misalnya click to action

1:10:33button yang click to action

1:10:35kita bisa ngasih, oke

1:10:37page-page yang

1:10:39ada CTA-nya, kita

1:10:41bisa pre-fetch, atau bisa kita

1:10:43pre-render, perbedaan antara

1:10:45pre-fetch dengan pre-render adalah

1:10:47pre-fetch itu hanya ngambil HTML

1:10:49disimpan ke cache

1:10:51sedangkan pre-render

1:10:53adalah ngambil HTML

1:10:55disimpan di cache dan di-render

1:10:57di-jalanin, ya

1:10:59di-jalanin, sampai java-java itu

1:11:01di-render tuh

1:11:03lebih cepat pre-render sebenarnya

1:11:05tapi lebih resource consuming

1:11:07lebih intensif, lebih berat

1:11:09lebih intensif

1:11:11jadi kita bisa

1:11:13kita yang nge-define ini

1:11:15teman-teman bisa coba

1:11:19menggunakan speculation

1:11:21rule-API untuk membantu

1:11:23mempercepat

1:11:25serasa

1:11:27instant loading

1:11:29ya, serasa instant loading

1:11:31cuma nyolong start aja

1:11:33bedanya, kenapa

1:11:35kita menggunakan ini, tidak dengan

1:11:37framework-framework yang ada, bedanya

1:11:39ini disupport oleh natif di browser

1:11:41sedangkan di Next,

1:11:43di Nuxt, di

1:11:45yang lain, memang sudah

1:11:47ada seperti hal ini, yang tadi kita

1:11:49lihat di rendering mode ini, sebenarnya

1:11:51mirip seperti ini

1:11:53routing-nya, mirip

1:11:55ya, kita sudah dibantu

1:11:57sama Nuxt, bisa dibantu sama Next

1:11:59misalnya

1:12:01cuma yang hal di sini

1:12:03disupport oleh

1:12:05browser

1:12:07ini Chrome only cuman

1:12:09ini masih Chrome only ya

1:12:11maksudnya terserah user-agent-nya

1:12:13sebenarnya, dan sejauh ini

1:12:15baru Chrome yang ngejalanin dan

1:12:17itu juga user-agent-nya

1:12:19nggak mutlak

1:12:21pasti ngikutin

1:12:23rules yang kita define kan

1:12:25dia kan punya logic sendiri, misalnya apa

1:12:27kalau terlalu banyak halaman yang

1:12:29kita minta di render, dia bisa

1:12:31ambil 2 atau 3 halaman pertama

1:12:33dulu, atau apalah, kan browser

1:12:35user-agent-nya punya pertimbangan sendiri

1:12:37dan network speed-lah

1:12:39atau mungkin CPU-nya kentang

1:12:41jadi, misalnya processing single-thread aja

1:12:43sudah kumpulkan, masa

1:12:45mau buat re-render lagi, nah itu

1:12:47si find site-nya

1:12:49si browser-nya yang nentuin

1:12:51ngikutin rules dari kita atau nggak

1:12:53betul

1:12:55saya

1:13:01ada 1 hal lagi

1:13:03misalnya

1:13:05ini bisa digabung juga dengan

1:13:07document view transition

1:13:09jadi bisa

1:13:11bisa membuat situs kita

1:13:13serasa SPA

1:13:15kedepannya

1:13:17nah itu saya mau coba

1:13:19gali lebih dalam lagi bagaimana

1:13:21bisa menggabungkan

1:13:23speculation rule API dengan

1:13:25document view transition

1:13:27kayaknya menarik

1:13:29document view transition

1:13:31re-render berarti pakai resource dari

1:13:33client ya, client set

1:13:35resources ya

1:13:37pre-render, iya kan

1:13:39pre-render

1:13:41sudah device dan dirunning di itu

1:13:43kalau lagi hemat

1:13:47quota sebenarnya menghindari hal-hal

1:13:49seperti ini, user bisa disable nggak ya?

1:13:51bisa, ini kan

1:13:53dia cuma kayak

1:13:55speculation rule, bukan hal

1:13:57yang mutlu, dia akan menghormati

1:13:59apa yang sudah ada sebenarnya

1:14:01yang sudah misalnya kayak

1:14:03save mode

1:14:05ada save mode

1:14:07irit data mode

1:14:09ada nggak ya?

1:14:11kalau reduce motion

1:14:13kan ada

1:14:15semua hape, semua device

1:14:17energy saver on

1:14:19energy saver is on

1:14:21itu ngaruh ya?

1:14:23bukan quota saver

1:14:25Mas Rizal kemarin ada pakai

1:14:27save mode

1:14:29atau apa gitu, ada nggak sih yang kayak

1:14:31reduce motion

1:14:33reduce motion

1:14:37itu kan buat animasi

1:14:39kalau buat irit quota

1:14:41ada nggak ya? mode irit

1:14:43quota

1:14:45perlu digali lagi lebih dalam, misalkan

1:14:47kita pakai mobile, apakah berpengaruh

1:14:49dia pakai mobile

1:14:51dengan desktop, tentunya

1:14:53kalau mobile pasti asumsinya

1:14:55adalah kita menggunakan paket data

1:14:57sedangkan kalau di laptop

1:14:59kan bisa kita pakai

1:15:01bisa, tapi

1:15:03asumsinya

1:15:05terus apakah ada perbedaan antara

1:15:07pada saat diakses

1:15:09di mobile sama diakses di desktop

1:15:11terus juga kalau misalkan ada

1:15:13yang tadi settingan kayak

1:15:15energy saver

1:15:17atau kenapa?

1:15:19ya kalau battery saving

1:15:21biasanya ada

1:15:23kalau network

1:15:25setitinya, misalnya networknya lambat

1:15:27slow network atau nggak, browser juga udah

1:15:29punya cara untuk tau kan

1:15:31kalau user lagi

1:15:33mau irit quota

1:15:35is the spec full of

1:15:37user configuration, for example

1:15:39privacy doesn't happen when the user device

1:15:41is in battery saver

1:15:43battery saver or data saver

1:15:45berarti aman ya

1:15:47bisa di disable ya, maksudnya di disable

1:15:49dengan cara

1:15:51nge-set battery saver ya

1:15:53atau data saver ya

1:15:55maksudnya tergantung device

1:15:57OS dan device

1:15:59user

1:16:01ada informasi data saver atau nggak

1:16:03kalau emang ada, si browsernya bisa

1:16:05mengakses itu ya

1:16:07nah kalau Google Pixel

1:16:11ada nih

1:16:13iseng banget nyari, ada

1:16:15data saver

1:16:17ada, ada data saver kayaknya ada

1:16:19di setting ya, apa gimana?

1:16:21tergantung device ya

1:16:23iya tergantung device, cuma kalau ini

1:16:25ada contohnya, di Google Pixel

1:16:27ada emang ada tombolnya

1:16:29data saver mode, nah kalau itu aktif

1:16:31si browser bisa

1:16:33menghormati

1:16:35Mas Denang

1:16:37Mas Denang lihat, udah hanyu, udah hanyu

1:16:39udah hanyu guys

1:16:41tenang Mas Denang, ini masuk adfoku

1:16:45khusus request Ivan buat

1:16:47dimasukin ke adfoku

1:16:49topik malam ini

1:16:51itu kan jadi awkward kan

1:16:57tapi

1:16:59saya mau coba

1:17:01explore itu tadi

1:17:03spekulasi API

1:17:05dan document view transition

1:17:07bagaimana sih jadi supaya

1:17:09SPA, seperti SPA ya

1:17:11SPA, MPA rasa SPA

1:17:13multi-page application

1:17:15rasa single-page application

1:17:17semoga hal ini

1:17:19masuk ke topik

1:17:21IOX, jadi saya bisa bawain

1:17:23topik ini

1:17:25wah udah nicil duluan ya

1:17:27tapi kalau di framework

1:17:31di meta framework, sebetulnya

1:17:33udah diimplement sih itu, kayak kalau

1:17:35yang di Next.js

1:17:37terus di Swellkit

1:17:39itu kan punya

1:17:41tempat-tempat yang punya link

1:17:43apa, link komponen sendiri, itu

1:17:45kita hover, mouse over

1:17:47itu di prefetch

1:17:49nah maksud saya, indikasinya kalau user mouse over

1:17:51atau kalau di mobile

1:17:53user, apa, on click

1:17:55gini, itu kan sebetulnya

1:17:57belum jalan, sampai di

1:17:59user click lagi

1:18:01begitu itu, apa

1:18:03on mouse down ya

1:18:05eh, on, ya itulah, on touch

1:18:07atau apa, itu di prefetch, pokoknya

1:18:09sebenernya kalau di meta framework sih

1:18:11udah draft-in itu, kalau di gabung

1:18:13view transition emang udah

1:18:15terasa SPA banget

1:18:17di astro juga, itu udah

1:18:19ada yang bikin juga, jadi kalau di ranah

1:18:21meta framework, emang itu

1:18:23udah kayak domoe standar malah

1:18:25cuma kalau vanilla jarang sih

1:18:27bisa dicoba, bisa dicoba, dengan

1:18:33bantuan speculation rules

1:18:35mungkin bisa

1:18:37kesana

1:18:39seperti, kayak instant loading

1:18:41kan, sebenernya bukan SPA

1:18:43kan, jadi instant loading aja

1:18:45seolah-olah

1:18:47jadi kayak SPA, kalau di gabung sama

1:18:49view transition tadi yang Ivan bilang

1:18:51dari user perspektifnya itu

1:18:53rasa, rasanya

1:18:55feel-nya, feel SPA

1:18:57iya, kan salah satu

1:18:59keunggulannya SPA kan

1:19:01developer user experience-nya kan

1:19:03bagus ya, jadi kayak nggak perlu loading

1:19:05page

1:19:07smooth ya

1:19:09jadi

1:19:11apa namanya

1:19:13kita bisa berada di tengah-tengah, kita

1:19:15bisa punya aplikasi yang multi-page application

1:19:17tapi rasanya seperti punya

1:19:19aplikasi SPA

1:19:21oke, cukup untuk

1:19:25malam ini

1:19:27topik selanjutnya apa? Terima kasih banyak

1:19:29untuk komen-komen topik selanjutnya

1:19:31beneran google gitu, begitu masa enak-enak

1:19:33iya dong, itu adalah

1:19:35pertanda

1:19:37tidak, tidak, tidak

1:19:39kita mau bahas topik

1:19:41pembahasan buat minggu depan

1:19:43loh, kok nggak ada? Oh iya, belum di share lagi ya

1:19:45ulang share ya

1:19:47sebentar

1:19:49react server komponen apa?

1:19:51react server komponen mau?

1:19:53RCS mau? Boleh?

1:19:55voting aja

1:19:57RSC sama apa itu

1:19:59apa lagi?

1:20:01oke

1:20:03pembahasan buat minggu depan

1:20:05topik

1:20:07untuk minggu depan

1:20:09react

1:20:11server komponen

1:20:13terus apa lagi?

1:20:15kita berdasarkan apa nih?

1:20:17berdasarkan all

1:20:19database scaling nanti

1:20:21udah ngontek mas

1:20:23Donny, dia mau ngisi

1:20:25nanti sekitar bulan Juni katanya

1:20:27terus

1:20:31apa ya, bahas apa?

1:20:33semantik versioning

1:20:35licensing

1:20:37CICD

1:20:39udah ya? kita udah pernah bahas CICD

1:20:41belum?

1:20:43links

1:20:45oh

1:20:47tapi kalau links kita belum

1:20:49pernah ada yang ngulik sih

1:20:51mungkin itu masuk

1:20:53ke bedah framework ya

1:20:55mungkin Bayu bisa masukin

1:20:57ke discussion

1:20:59siapa tahu

1:21:01banyak yang

1:21:03tertarik untuk bahas

1:21:05kompetitornya react native ya

1:21:09kompetitornya react native

1:21:11itu dong testing

1:21:13dengan playwright kayaknya seru tuh

1:21:15playwright ya

1:21:17playwright

1:21:19salah tulisannya

1:21:21playwright

1:21:23oke, ada lagi?

1:21:25papa petir

1:21:27papa petir

1:21:29papa petir

1:21:31atau end-to-end testing

1:21:35bahas end-to-end testing

1:21:37end-to-end testing

1:21:39bukannya itu playwright ya?

1:21:41ya sekalian ya

1:21:43ya maksud saya, playwright itu kan

1:21:45salah satu contoh end-to-end testing

1:21:47ya udah, kita intro aja

1:21:49end-to-end testing

1:21:51dua aja nih

1:21:53dua aja ya pilihannya ya

1:21:55ada lagi nggak?

1:21:57original

1:21:59ah itu aja pengalaman horror

1:22:01itu mau dibahas ini ya

1:22:03tapi harus dikumpulkan dulu

1:22:05oh iya

1:22:07iya nanti dibikinin

1:22:11pdf css

1:22:13itu apa pdf css?

1:22:15css dpds

1:22:17CLI mau CLI design?

1:22:19boleh boleh

1:22:21CLI design ya

1:22:23udah tiga itu aja

1:22:25kaisa pdf css itu

1:22:27stress

1:22:29silahkan di vote

1:22:33temen-temen di youtube

1:22:35yang ada di link-in boleh ke youtube dulu

1:22:37untuk vote

1:22:39oh link-in nggak bisa nge-vote ya

1:22:41nggak bisa, nggak bisa comment

1:22:43nggak bisa comment, nggak bisa vote

1:22:45eh cuma jadi dapet ide tuh?

1:22:47bisa, penonton yang comment

1:22:49kita nggak bisa lempar comment gitu

1:22:51nggak, dan nggak bisa

1:22:53nge-click voting

1:22:55yang kayak gitu

1:22:57nggak ada fitur vote

1:22:59jadi dapet ide itu tadi pdf

1:23:01pdf itu kan sebenernya bisa

1:23:03pake css dan ternyata

1:23:05ke accessibility tadi

1:23:07WCAG itu ada standarnya juga

1:23:09buat pdf

1:23:11itu kalau yang misalnya apa

1:23:13instansi pemerintah

1:23:15atau apa di negara-negara yang

1:23:17punya aturan tentang accessibility

1:23:19bukan cuma

1:23:21aplikasi web atau natif doang

1:23:23yang harus ikut WCAG

1:23:25tapi semua pdf-nya juga

1:23:27oh iya iya iya

1:23:31kan ada ini juga loh

1:23:33di pdf itu

1:23:35bisa ada link juga loh

1:23:37kayak.. dia

1:23:39eh kalau misalkan nih

1:24:05kita punya

1:24:07kenapa?

1:24:09kalau misalkan

1:24:11misalkan kita punya

1:24:13halaman yang

1:24:15kita mau print atau mau

1:24:17jadikan pdf itu bisa minta

1:24:19bantuan LLM nggak sih?

1:24:21jadi ini adalah halaman HTML

1:24:23tolong jadikan pdf

1:24:25bisa nggak ya? nggak ada yang bisa

1:24:29generate dan empat

1:24:31generate image mau bisa

1:24:33generate video bisa pake film

1:24:35oh mungkin dia akan jadi image ya

1:24:37kan ada tuh

1:24:39apa? yang bisa

1:24:41apa? memanipulasi

1:24:43struk belanja kan ada kan?

1:24:45jadi mungkin jadi image ya

1:24:47dari apa?

1:24:49dari halaman HTML dia jadi image aja

1:24:51png terus ditaro pdf gitu kan bisa juga

1:24:53kan? cuma nggak aksesibel kan?

1:24:55nggak aksesibel

1:24:57cuma bisa kalau buat di print tadi

1:24:59use case nya buat di chat juga bisa-bisa aja

1:25:03pdf hanya support di CSS2?

1:25:05iya ya

1:25:07iya

1:25:09admin

1:25:11langsung di kick kalau gitu

1:25:17iya pdf itu hanya support CSS2.0

1:25:21jadi LLWM mau

1:25:23apa pun

1:25:25jadi pake CSS2.0

1:25:27kayak ini ya jadinya ya?

1:25:29CSS2.0 gue lupa nih la CSS

1:25:31pake email ya

1:25:33wah ini imbang nih

1:25:37RSC sama end to end

1:25:39testing 44%

1:25:41ekstra time kasih ekstra time

1:25:43ayo satu orang lagi

1:25:45ayo please

1:25:47HTML bisa print lewat browser

1:25:49jadi pdf oh iya bisa-bisa

1:25:51saya mau tunjukin

1:25:53ini saya boleh nggak?

1:25:55boleh

1:25:57mau ini apa namanya?

1:25:59mau show off

1:26:01show off

1:26:03mau menunjukin itu sleep gaji

1:26:05showcase

1:26:07oh nggak show off kok gitu ya

1:26:09itu kan NDA sih

1:26:11oh NDA

1:26:13buat bikin foto hiburan lah kalau gitu

1:26:15asik

1:26:17coba-coba test

1:26:19saya udah share screen

1:26:21ah? jadi udah?

1:26:23remove dulu udah

1:26:25terus tambahnya gimana?

1:26:27ini cool screennya Yvan

1:26:29ini udah

1:26:31jadi saya bikin ini

1:26:33contohnya

1:26:39oh ini project client

1:26:41iya

1:26:43jadi pake WordPress

1:26:45block editor

1:26:47dan ini kan

1:26:49kontennya

1:26:51jadi si user buat

1:26:53konten pake block editor

1:26:55jadinya HTML

1:26:57terus pdfnya jadi di create juga

1:26:59wow

1:27:01wow

1:27:03ini pake apa?

1:27:05iya beda

1:27:07pake tcpd

1:27:09oh

1:27:11yang keren tuh yang ini

1:27:13jadi kalau ke global market

1:27:15outlook

1:27:17jadi ada banyak template

1:27:19jangan salahkan saya kenapa begini

1:27:21mereka yang pd gambar

1:27:23jadi

1:27:25image yang mereka

1:27:27pakai disini akan

1:27:29dipakai sebagai cover ini

1:27:31terus yang

1:27:33konten yang ada disini

1:27:35dirubah jadi konten yang ada

1:27:37disini

1:27:39terus ada table of content

1:27:41keren banget

1:27:43bisa diklik ya

1:27:45iya

1:27:47iya iya

1:27:49di tengah-tengah

1:27:51contohnya

1:27:53ini kaya gini

1:27:55ya kan itu aja cuman

1:27:57upload satu image begini

1:27:59itu

1:28:01eh salah

1:28:03wow

1:28:05sebenernya datanya sama kiri kanan

1:28:07iya tapi layoutnya

1:28:09berbeda

1:28:11layoutnya berbeda

1:28:13sesuai layout pdf

1:28:15WordPress

1:28:17jadi

1:28:19keberhasilan saya

1:28:21membuat mereka

1:28:23save a lot of money

1:28:25karena dulunya mereka harus

1:28:27tulis pdfnya dulu

1:28:29eh sorry dokumennya dulu

1:28:31kirimkan ke agensi

1:28:33untuk dicantikin

1:28:35terus bolak-balik

1:28:37ya bolak-balik untuk

1:28:39vc segala macem

1:28:41setelah dokumen jadi

1:28:43jadi pdf baru pdf dirubah

1:28:45lagi jadi html

1:28:47jadi banyak langkahnya

1:28:49jadi mereka telat sedangkan

1:28:51kalau kaya daily navigator begini

1:28:53ya kalau market keburu

1:28:55keburu angelok dulu

1:28:57nilai sahamnya

1:28:59kalau daily navigator kan tiap hari nih

1:29:01masa harus bolak-balik begitu

1:29:03keburu berubah semua

1:29:05kita bikin terus begini mereka

1:29:07save banyak money

1:29:09ini project saya 2 tahun lalu

1:29:11yang kerennya lagi

1:29:15saya mau show off luar biasa

1:29:17support

1:29:21yang paling susah

1:29:23dari project ini adalah

1:29:25image uploader

1:29:29yang paling susah

1:29:31dari image uploader

1:29:33adalah

1:29:35multilingual

1:29:37simple fight Chinese sama traditional Chinese

1:29:39support

1:29:45ini berarti

1:29:47programmable ya

1:29:49bukan

1:29:51di edit pakai

1:29:53akrobat gitu bukan ya

1:29:55ini langsung di generate

1:29:57jadi mereka kalau misalnya update

1:29:59update konten di

1:30:01ka update juga pdfnya ya

1:30:03pdf nya akan di upload

1:30:05ulang otomatis

1:30:07ada ini lagi ada

1:30:09ada slugnya

1:30:11bahasanya

1:30:15dan ini font dari

1:30:17fontnya mereka

1:30:23dan ini susah

1:30:25plus mereka

1:30:27memotong-motong karena disimplify

1:30:29Chinese dan traditional Chinese tuh gak ada spasi

1:30:31formatting nya lain ya

1:30:33ya formattingnya susah

1:30:35ya suatu saat kita bahas inilah

1:30:37jadi kalau temen-temen

1:30:39di kantor nya butuh

1:30:41pencetakan laporan seperti yang

1:30:43keren tadi bisa kontak ngobrolin web ya

1:30:45kita menerima

1:30:47kita menerima jasa konsultasi

1:30:49konsultasi dan

1:30:51pembuatan laporan berbasis

1:30:53pdf

1:30:55save a lot of money

1:30:59oke ini

1:31:01sudah ada pemenang

1:31:03pemenang nya adalah react server komponen

1:31:05jadi minggu depan

1:31:07kita akan bahas tentang RSK

1:31:09atau react server komponen dan bagaimana dampaknya

1:31:11terhadap framework-framework yang lain

1:31:13oke untuk malam ini sekian

1:31:15dulu terima kasih banyak buat semuanya

1:31:17jangan lupa kalau ada yang

1:31:19mau diskusi atau mau

1:31:21sudah ada itu pakai apa itu buat

1:31:23yang pakai ini ya

1:31:25markie

1:31:27bisa

1:31:29sana.in/ngobrolinweb

1:31:31di luar

1:31:33live streaming kita bisa diskusi

1:31:35bisa saran

1:31:37topic juga

1:31:39udah cukup untuk malam ini

1:31:41boleh undang dan abramov

1:31:43boleh

1:31:45dipanggil

1:31:47mas undang dan mas

1:31:49abramov ya

1:31:51boleh undang

1:31:53dan abramov

1:31:55sedih

1:31:57dan nya tuh end maksudnya tapi

1:31:59gak masuk belum besok ke gue lagi

1:32:01boleh

1:32:05undang dan abramov

1:32:09boleh sih

1:32:11tapi

1:32:13dia nya gak mau

1:32:15kita nya boleh

1:32:17dia nya mau atau gak ya

1:32:19coba di

1:32:21bisa bisa

1:32:23di colek lah di social media

1:32:25dateng dong ke

1:32:27ngobrolinweb gitu

1:32:29mas dan

1:32:31sekian dulu untuk malam ini

1:32:35terima kasih banyak buat semuanya

1:32:37kita ketemu lagi minggu depan

1:32:39topiknya react server component ditunggu

1:32:41di selasa malam

1:32:43selamat malam

1:32:45selamat istirahat bye bye