Ngobrolin Google IO Lebih Dalam - Ngobrolin WEB ep34

1:38Ada yang cloud, ada yang Android, ada apa lagi ya Flutter?

1:40Ada nggak sih?

1:42Flutter ada, Firebase ada, Machine Learning.

1:46Ada nggak sih, Machine Learning?

1:48Ada ya?

1:50Ada.

1:52Machine Learning sempat ada, tapi udah pindah aja.

1:56Masa nya nggak di Indonesia lagi.

2:00Iya.

2:02Flutter juga pindah.

2:06Iya, Flutter.

2:08Cloud juga pindah negara.

2:10Ada yang pindah.

2:12Nyindir Mas Imre.

2:16Tapi nanti pulang lagi.

2:18Terus tiba-tiba nongol tadi komennya.

2:20Oh iya benar.

2:22Bukan, Mas Danang yang ngabis.

2:28Kalau kita nyengkut Mas Danang biasanya biar nonton.

2:30Iya.

2:32Siapa lagi ya?

2:34Kita sambil nunggu sambil cek sound juga.

2:38Takut terjadi hal-hal yang tidak dinginkan.

2:40Jadi kalau misalkan ada masalah dengan visual ataupun dengan audio,

2:44tolong kita di info.

2:46Ada disini sudah hadir Audi.

2:48Ada Mas Audi.

2:50Rajin banget tuh komennya gini pas 8.00.

2:54Ini dia pakai Kron.

2:58Tepat sekali jam 8.

3:00Tadi tadi telat ya.

3:02Telat mencet live-nya.

3:04Ada lagi tuh.

3:06Ada Rahul.

3:08Ada Abdul Malik.

3:10Halo-halo semuanya.

3:12Selamat malam.

3:14Jadi hari ini kita lanjut lagi.

3:16Kita kemarin sudah overview secara umum.

3:18Dari sebesar di Google I/O kita ngomongin apa.

3:20Yang adalah AI.

3:22AI, AI, dan AI.

3:24Iya, ada hari juga.

3:26Dari depo, mantap.

3:28Terus malam ini kita akan coba cari satu topik yang menarik.

3:36Dari bidang web khususnya.

3:38Kalau yang episode lalu kan yang general secara umum.

3:42Tidak, web juga sih.

3:44Ada web, ada cloud, ada AI.

3:48Oh iya, sebagiannya.

3:50Ada itu apa namanya? Tailwind.

3:52Iya, project Tailwind.

3:54Tailwind yang bukan CSS.

3:58Tailwind yang bukan CSS.

4:00Aduh, itu gimana ya kabarnya ya?

4:04Sayang banget.

4:06Tailwind, dia nggak trademark kali ya?

4:10Kan kita pahas minggu lalu.

4:12Jangan-jangan, mungkin yang di trademark Tailwind Labs

4:14atau apa Tailwind CSS.

4:16Nah Tailwindnya doang nggak dipatenin kali.

4:20Bisa jadi.

4:22Anyway, malam hari ini kita akan coba

4:24dari kita bertiga coba pick satu topik

4:26yang menurut kita menarik.

4:28Terus kita akan bahas.

4:30Teman-teman juga kalau ada topik-topik yang menurut teman-teman menarik

4:32boleh ya di komen juga.

4:34Siapa tahu kita bisa belajar bareng-bareng juga.

4:36Oke, kita mulai dari mana nih?

4:38Siapa duluan ayo.

4:40Punya siapa?

4:42Siapa duluan, betul.

4:44Punya siapa.

4:46Kalau gue juga bisa.

4:48Karena simple.

4:50Simple-simple gimana gitu.

4:52Simple tapi penting ini.

4:54Simple pasti semua web developer

4:56pasti pernah kena.

4:58Atau akan kena kebutuhan ini.

5:00Jadi gue share screen aja kali ya.

5:02Boleh.

5:04Karena kalau kita disuruh bikin dari awal kan malas ya.

5:06Jadi dari awal kan mendingan pakai yang udah ada aja.

5:08Apalagi bisa pakai biometrik gitu.

5:10Wah, itu

5:12apa namanya.

5:14Developer experience-nya meningkat sekali ya.

5:16Jadi top pertama ini

5:18tentang password

5:20authentication ya.

5:22Gue suka entire screen aja deh

5:24biar gampang hidupnya.

5:26Udah.

5:28Udah bisa liat kan ya.

5:30Masukin dulu.

5:32Belum.

5:34Masukin lagi.

5:36Lebih kecil kemarin apa sekarang?

5:38Kayaknya stream pertama juga

5:40sentiment sama Mas Riz.

5:42Lanjut lah.

5:44Oke.

5:46Sudah

5:48masuk kan ya?

5:50Oke, jadi

5:52minggu lalu sempat ya kita

5:54bahas mengenai apa itu

5:56web authentication API

5:58atau disingkatnya web

6:00autent. Oh ya, dan sebelumnya

6:02apa authentication kan dulu kita punya

6:04episode khusus ya. Jadi kalau pengen

6:06buat yang bingung kenapa banyak

6:08kita sering nyebut-nyebut kata

6:10authentication out itu apa?

6:12Nah, bisa revisit episode itu tuh.

6:14Ya, lanjut.

6:16Oke, jadi

6:18kebayang gak sih ya?

6:20Sekarang dunia

6:22sekarang itu apa-apa perlu password?

6:24Apa-apa perlu password kan? Jadi misalnya

6:26kita mau order pizza

6:28aja atau mau

6:30yang ada

6:32aplikasi webnya gitu ya.

6:34Jadi sebentar-sebentar kita disuruh bikin password.

6:36Jadi passwordnya kalau dibikin

6:38sama semua

6:40salah juga ya, karena

6:421-2-3-4

6:44kayak password saya

6:46gitu ya, event 1-2-3-4 gitu ya.

6:48Banyak di mana-mana gitu ya.

6:50Di WordPress lah, di

6:52PHD lah, di mana.

6:54Jadi bahkan

6:56kalau misalnya teman-teman cek

6:58have I been pound gitu ya.

7:00Have I been pound

7:02password gitu.

7:04Mungkin password teman-teman

7:06yang paling sering teman-teman

7:08pakai itu mungkin, saya coba ya

7:10event 1-2-3-4.

7:12Yes, sudah

7:14dipakai 5200 kali.

7:16Masihnya kebanyak gitu ya

7:18event 1-2-3-4.

7:20Nah,

7:22terus kalau misalnya kita

7:24pakai password yang

7:26berbeda-beda, kita generate berbeda-beda

7:28adalah yang bilang tipsnya

7:30pakai

7:32konsep, pakai konsep dulu

7:34pattern gitu, kalau misalnya website-nya apa

7:36passwordnya tinggal diubah dikit-dikit gitu.

7:38Nggak fair ya rasanya

7:42kalau mengingat semua, terus katanya

7:44kenapa nggak pakai password manager aja?

7:46Iya sih, password manager, tapi

7:48password manager kayak

7:50one password,

7:52last pass,

7:54apa tuh yang kalau BitGuardian

7:56yang open source ya.

7:58Bisa

8:00jadi ya, namun

8:02tetap aja kita harus extra effort

8:04setiap website punya password.

8:06Kebayang nggak sih

8:08kalau misalnya dunia tanpa password.

8:10Bisa nggak sih? Passwordless.

8:12Passwordless, kalau mau login ya

8:14login aja gitu, pakai biometris

8:16kan sekarang sudah bisa biometris.

8:18Akunku juga, akunmu,

8:20akunku juga.

8:22Jadi unik.

8:24Bahkan bisa jadi

8:26kita bikin passwordnya itu

8:28passwordless itu per device, tetapi

8:30bisa connect ke account kita yang sama.

8:32Bisa, gitu ya. Nanti bisa

8:34dihubungkan seperti itu contohnya.

8:36Mungkin

8:40bagi temen-temen yang masih kurang

8:42merasa secure

8:44kalau tanpa password, bisa jadi

8:46passwordless ini adalah second authentication.

8:48Misalnya

8:50banyakan ya, kayak

8:52di aplikasi mobile rata-rata ya,

8:54kalau aplikasi bank itu, kita

8:56diminta untuk, pertama

8:58kitanya

9:00login

9:02atau create account, pakai email dan

9:04username, endpoint kah,

9:06OTP kah, dan

9:08kemudian kita login

9:10dan set up password, tetapi

9:12login selanjutnya kita diminta, maukah

9:14aktifkan biometrik, ya kan?

9:16Hal yang sama sudah bisa kita

9:18lakukan di web.

9:20Juga sama seperti itu, jadi

9:22setelah accountnya dibuat, kita

9:24bisa aktifkan

9:26biometrik

9:28atau passwordless login itu

9:30untuk account kita.

9:32Jadi, si

9:34user kita untuk login

9:36selanjutnya, itu nggak perlu

9:38ingat-ingat passwordnya lagi, tinggal pakai biometriknya

9:40dia, antara face

9:42detection, retina

9:44detection, si fingerprint,

9:46kalau di Mac itu

9:48iOS dia ada fingerprint,

9:50kalau di Android dia bisa fingerprint di

9:52layar, kalau di

9:54iPhone, apa,

9:56not just iPhone, iOS lah ya,

9:58itu bisa pakai

10:00face, kalau punya

10:02jantangan, keren-keren bisa

10:04pakai, autentik bisa pakai jantangan,

10:06kalau punya YubiKey,

10:08juga bisa pakai YubiKey.

10:10Jadi, bermacam-macam, dan itu

10:12sudah bisa, ada layer yang

10:14bisa diaktifkan melalui web

10:16authentication API ini. Jadi

10:18web authentication API ini sudah bisa menstandarisasi

10:20semua authentication

10:22yang menggunakan

10:24either itu pakai

10:26hardware, atau

10:28OS-based.

10:30Nah,

10:32web authentication API ini

10:34dibuat

10:36sudah lama sebenarnya, dan sudah

10:38standar, dan sudah

10:40diadopsi, hampir semua.

10:42Saya sebelum asal

10:44ngomong, sudah semua

10:46browser kecuali Android

10:48yang WebView, ya.

10:50Sudah,

10:52jadi, sudah

10:54yang public key kredensial

10:56ini yang penting ya, jadi dia pakai

10:58response dan public key, ya.

11:00Sudah semua browser, support.

11:02Ya, tentunya.

11:04Apa, tanya, tanya

11:06karena lagi browser support nih,

11:08karena udah berbentuk standar nih ya,

11:10jadi kan, ini apa,

11:12bisa semacam future-proof

11:14kan, kedepannya misalnya,

11:16kan sekarang cuma device iOS nih,

11:18yang punya face recognition misalnya.

11:20Kalau besok Android, misalnya Samsung,

11:22atau siapa lah, Google Pixel,

11:24atau siapapun bikin face recognition,

11:26langsung bisa

11:28nyambung ke sini kan ya, jadi

11:30nggak perlu, apa, karena

11:32udah standar, nggak perlu

11:34bikin kode beda lagi, buat pakai

11:36face recognition khusus Android,

11:38smartwatch, dan lain-lain,

11:40keunggulannya standar itu ya.

11:42Iya. Jadi,

11:44dari aplikasi kita sendiri,

11:46kita hanya cukup pakai web authentication API,

11:48atau library yang

11:50encapsulasi ini,

11:52web auton ini,

11:54jadi bisa pakai,

11:56besok-besok ada UBI key yang jenis baru,

11:58ada Google Titan key,

12:00ada misalnya nanti Microsoft,

12:02whatever, ya.

12:04Tetap menggunakan

12:06authentication standar yang sama.

12:08Oke. Nah,

12:10cara kerjanya dulu deh, sebelum

12:12saya masuk ke metode-nya, karena simple banget.

12:14Cara kerjanya dulu gimana sih?

12:16Ini contohnya ya, ya bisa temen-temen

12:18buka di webauton.io,

12:20jadi, pertama kali,

12:22misalnya saya,

12:24saya sudah

12:26ada tadi, coba EAA,

12:28pakai touch ID, misalnya saya mau

12:30bikin user baru,

12:32ngobrolin web,

12:34saya register,

12:36saya register,

12:38saya ditanya mau pakai

12:40phone atau tablet, built-in sensor,

12:42atau USB security kayak gini.

12:44Saya,

12:46karena nggak pasang, pakai

12:48built-in sensor aja lah ya,

12:50sudah ada di ini,

12:52di laptop,

12:54saya continue,

12:56terus saya, sidik jari,

12:58saya di Mac.

13:00Dan, sudah

13:02selesai, saya sudah

13:04terregister sebagai account di sini.

13:06Nah, saya mau authenticate,

13:08saya tinggal klik, si

13:10browser-nya sudah tahu, oh, lo

13:12udah pernah login, pakai ngobrolin web,

13:14user ini, continue.

13:16Terus, saya

13:18tinggal sidik jari lagi,

13:20test, you are a login.

13:24Jadi, semudah itu,

13:26untuk bisa

13:28register. Nah,

13:30nanti credential-nya bentunya kayak gini, dan

13:32bisa, tentunya, time to live-nya

13:34berapa lama login, itu sudah terserah session

13:36temen-temen ya, intinya,

13:38dari si, dari si web

13:40authent ini, dia

13:42bisa create,

13:44challenge-nya, bahasanya, hashing

13:46challenge-nya itu, kirimkan ke server,

13:48nanti server simpan

13:50public key,

13:52yang sudah di generate,

13:54dan nanti,

13:56ada challenge yang dikirimkan,

13:58dan nanti event selanjutnya,

14:00jelaskan.

14:02Itu cara kerjanya. / Jadi, itu semacam public key ya,

14:04yang credential yang dilayakkan?

14:06Betul. / Private-nya yang

14:08di device yang kita pakai buat?

14:10Ini ID, public key-nya nggak kelihatan.

14:12Private key-nya apa lagi?

14:14Private key-nya udah di sini.

14:16Private key yang di device kan?

14:18Hasil hashing ini,

14:20dan waktu. Nah,

14:22keuntungan selanjutnya,

14:24ini, ada protection

14:26yang untuk phishing, ya,

14:28phishing website.

14:30Jadi, kalau misalnya, tentu,

14:32teman-teman tahu ya,

14:34bukan phishing, phishing.

14:36Phishing. / Phishing.

14:38Jadi,

14:40kenapa bisa jadi pencegah

14:42dari phishing? Karena, untuk bisa

14:44generate, yang tadi, yang proses register

14:46yang saya lakukan tadi, itu

14:48terregistrasi hanya antara

14:50saat generate

14:52public key-nya tadi,

14:54itu ada host-nya,

14:56dan

14:58user ID-nya,

15:00dan biometrik-nya, dan private key-nya.

15:02Bahasanya di hash, dan

15:04dikirimkan ke server.

15:06Oke?

15:08Jadi, kalau misalnya, ada sengaja

15:10yang bikin WebAuthn.EOX misalnya,

15:14terus dikirim ke teman-teman.

15:16Semuanya persis sama.

15:18Terus, teman-teman mencoba login dengan

15:20pakai WebAuthn yang sama,

15:22nggak akan terregister.

15:24Jadi, saat diauthenticate begini,

15:26si browser nggak akan detect ini,

15:28ada EAA dan ngobrolin web, nggak akan detect.

15:30Ngerti ya? / Karena per domain dia?

15:32Karena dia sudah terregister

15:34per domain, betul.

15:36Nggak bisa pindah ke domain lain.

15:38Jadi, kalau misalnya sengaja domain-nya dibuat

15:40mirip-mirip,

15:42nggak akan bisa, karena si browser

15:44tidak akan mendeteksi itu.

15:46Jadi, oh,

15:48saya mesennya teman-teman langsung,

15:50"Oh, kok nggak ada ya akun gue to speaks-nya?"

15:52Oh, ternyata bukan website yang sama.

15:54Itu

15:56keuntungannya

15:58menggunakan WebAuthn.

16:00Lalu,

16:02ini juga,

16:04tentunya karena kita,

16:06password-nya sendiri

16:08tidak ada disimpan di server.

16:10Yang disimpan cuma user ID dan public key.

16:12Untuk generate

16:14challenge-nya nanti.

16:16Jadi, nggak ada password, kan?

16:18Apa yang mau di brute force,

16:20nggak bisa di brute force, gitu.

16:22Kecuali HP kita dijam red.

16:24Eh nggak, tetap nggak bisa.

16:26Kan fingerprint-nya, jari kita

16:28nggak dijam red juga. / Yang bisa itu

16:30zaman dulu itu adalah

16:32si bapaknya tidur, si anaknya

16:34pakai handphone-nya, terus dipempelin

16:36jarinya. Kayak gitu tuh, biasanya.

16:38Bisanya, gitu.

16:40Itu pernah ceritanya seperti itu.

16:42Nah, untuk

16:44menggunakan WebAuthn ini, hanya ada

16:46kedua fungsinya.

16:48Pertama, create.

16:50Dan kedua, get.

16:52That's it. Jadi create itu

16:54akan mengirimkan nanti public key.

16:56Ininya

16:58jangan merasa

17:00terintimidasi

17:02dengan hashing-hashing ini.

17:04Jadi, hanya akan kirimkan

17:06nanti ada challenge ini random.

17:08Random number.

17:10Terus kemudian relay party

17:12ini ada nanti namanya.

17:14Inilah domain-nya nanti yang temen-temen

17:16gunakan. Jadi, ini yang tidak bisa direba.

17:18Terus kemudian

17:20ID ini adalah random.

17:22Jadi, generate aja random ID.

17:24Secara di lokal,

17:26di JavaScript lokal.

17:28Dan kasih tahu itu namanya siapa,

17:30display namanya siapa. Mungkin kalau

17:32nggak perlu bawa email ya. Nggak perlu hashing email,

17:34nggak perlu. ID ini benar-benar

17:36nggak ada berhubungan dengan

17:38user identification.

17:40Jadi, ID dari si

17:42maksudnya

17:44tidak ada hashing dari email,

17:46nggak ada hashing dari password, nggak ada.

17:48Jadi, benar-benar mau generate random juga boleh.

17:50Lalu,

17:52nanti akan kasih tahu jenis

17:54credential-nya bentuknya

17:56public key. Dan nanti ada

17:58kalau untuk algoritmanya, saya

18:00kurang begitu paham kenapa minus digit,

18:02tetapi ini ada list-nya

18:04bentuk algoritma apa yang mau digunakan.

18:06Karena ini harus sesuai dengan apa yang

18:08kita terapkan di server.

18:10Terus,

18:12setelah

18:14ini di-invoke,

18:16create begini, itu akan

18:18menginvoke ini sebenarnya.

18:20Menginvoke

18:22si ini.

18:24That's it. Dia akan menginvoke

18:26ini. Dan begitu saya

18:28masukin

18:30apa namanya,

18:32biometriknya, dia akan generate

18:34yang namanya

18:36hash itu

18:38dan public key, akan

18:40itu yang dikirimkan ke server.

18:42Bisa

18:44nanti

18:46si passwordless.id ini yang bisa

18:48menjelaskan lebih enak.

18:50Jadi, pertama si user,

18:52dia bilang saya mau register

18:54sama si server. Send me

18:56the public key, terus dia request biometrik.

18:58Nanti akan request

19:00yang create tadi,

19:02di-invoke oleh JavaScript,

19:04request biometrik,

19:06terus, dia akan dibuat

19:08key pairnya, private key

19:10sama public key, private keynya

19:12disimpan di browser, dan

19:14send public keynya,

19:16dan si server bilang kasih tahu

19:18sudah terregister.

19:20Seperti itu aja. Lalu,

19:22saat authentication,

19:24dia klik login,

19:26nanti si server,

19:28si server

19:30akan kirimkan challenge, bentuknya

19:32biasanya nonce. Nonce itu

19:34bahasa ini, apa ya, nonce itu.

19:36Nonce.

19:38Apa? Ada artinya apa?

19:42Terjemahannya apa?

19:44Yang cuma bisa dipakai satu kali,

19:46apa itu bahasanya?

19:48Dicari beneran.

19:52Nggak ada, salah.

19:56Rapis.

19:58Definisinya ekstrem.

20:00And once, kan?

20:02And once.

20:04And once, kayaknya ya.

20:08Jadi, cuma

20:10bisa dipakai satu kali,

20:12untuk dipakai,

20:14dan nonce itu yang dipakai untuk challenge,

20:16untuk create, untuk

20:18menginvoke yang namanya

20:20ini, get.

20:22Ini. Nanti akan di,

20:28karena tadi si

20:32RP tadi, relay party-nya

20:34sudah tahu, host-nya,

20:36terus kemudian degenerate ulang,

20:38si challenge-nya itu,

20:40kembali lagi,

20:42challenge-nya itu adalah random,

20:44nanti akan menginvoke yang namanya

20:46si

20:48webaltern

20:50screen tadi. Lalu,

20:52hasil,

20:54hasil challenge-nya itu,

20:58yang desain pakai private key,

21:00dikirim.

21:02Nanti di-verify

21:04signature, pakai public key yang

21:06sudah kita kirimkan tadi saat register.

21:08Ini.

21:10Kalau match,

21:12berarti, dia,

21:14bentar ya.

21:18Mau ikut live itu? Iya, mau ikut live dia.

21:20Bentar ya.

21:22Nah.

21:24Iya. Jadi, si,

21:26apa namanya?

21:28Si,

21:30setelah public key-nya di-verify,

21:32tentu, si user-nya

21:34tetap authenticate, dan,

21:36selanjutnya,

21:38proses selanjutnya, ya itu, session,

21:40terus kemudian,

21:42redirect,

21:44itu sudah sama seperti tanpa password.

21:46Ya, seperti pakai password, maksudnya.

21:48Seperti pakai password. Ya.

21:50Ada informasi yang disimpan di database nggak, atau di back-end?

21:52Ada. Itu kan tadi yang

21:54ada user ID. User ID, ya.

21:56User ID yang di-generate tadi,

21:58ini kan ada user ID, ya.

22:00Yang unik, ya? Yang unik, ya. Betul.

22:02Jadi, user ID itu yang benar-benar unik,

22:04panjang, ya. Ini,

22:06area 8,

22:08bahkan, nggak berbentuk, ya.

22:10Jadi, nggak berbentuk. Jadi, user ID ini,

22:12kayak UUID gitu ya, modelnya, ya.

22:14Iya, betul. UUID.

22:16Nah, ini disimpan juga di,

22:18sama, dia ada di

22:20si browser juga.

22:22Nah.

22:24Setelah,

22:26apa namanya?

22:28Setelah,

22:30jadi lupakan.

22:32Oke.

22:34Login, play direct, session,

22:36seperti biasa.

22:38Sudah bukan ranahnya WebAuthn lagi.

22:40Nah.

22:42Untuk guide-guide-nya,

22:44ada banyak, ya.

22:46Misalnya, WebAuthn.Guy juga, teman-teman.

22:48Itu tadi yang saya ceritakan,

22:50garis besarnya. Tentunya, masih ada

22:52advanced settings-nya.

22:54Seperti user verification.

22:56Saya juga bahkan, nggak,

22:58nggak paham semuanya. Ini,

23:00bisa dieksplore satu-satu.

23:02Dan,

23:04untuk

23:06menyesuaikan dengan

23:08apa yang ada di server side.

23:10Tentu, butuh ada juga server side.

23:12Nah, untuk mempermudah,

23:14saya, dari si WebAuthn.io-nya sendiri,

23:18itu,

23:20ada beberapa library

23:22yang sudah siap digunakan.

23:24Contohnya, dari

23:26Python, Go, TypeScript,

23:28Ruby, Java, segala macem, sudah ada.

23:30Sayangnya, PHP belum ada, saya nggak tahu.

23:32Jadi,

23:34yang paling saya,

23:36mudah saya mengerti,

23:38saat menggunakannya itu, adalah si

23:40Passwordless.id.

23:42Nah.

23:44Yang ini.

23:46Sama tadi, kalau misalnya kita ke demo-nya tadi,

23:48kalau saya register,

23:50AAA,

23:52Use Roaming Authenticator,

23:54seperti,

23:56phone, USB key, ada jadi

23:58Roaming Authenticator, atau

24:00OSR Authenticator.

24:02Jadi, saya sudah ada AAA, continue,

24:04saya create,

24:06register, ini credential ID

24:08saya, ini public key-nya,

24:10algorithm untuk generate-nya ini.

24:12Si,

24:14nah.

24:16Jadi, kalau saya Authenticator,

24:18saya pakai

24:20yang AAA tadi,

24:22tadaa!

24:24Signature saya ini.

24:26Jadi, si

24:28demo, apa, si library ini

24:30sudah memudah,

24:32sudah nge-wrapping si WebAuthent API

24:34dengan

24:36membuatnya lebih mudah lagi.

24:38API-nya enak ya,

24:40kayak user friendly,

24:42tinggal plug and play.

24:44Dan punya server-side-nya juga.

24:46Kan, tadi kan,

24:48kalau si WebID kan tidak punya server-side-nya,

24:50hanya client-side-nya saja.

24:52Ini bisa denote ya, dijalani denote server,

24:54atau semacamnya.

24:56Jadi, ini klien-nya,

24:58sama,

25:00si challenge-nya ini sama dengan WebAuthent.

25:02Jadi, cuma kayak wrapper saja ya,

25:04membungkus saja, yang dikirimkan

25:06itu ini, ada ID, public key,

25:08dan algorithm, dan

25:10verify untuk server-side-nya, dia sudah siapin.

25:12Jadi,

25:14kalau mau

25:16apa namanya,

25:18kalau mau pakai,

25:20saya lagi dalam,

25:22lagi coba kulik-kulik ini,

25:24saya berarti tinggal pakai.

25:26Selanjutnya, untuk

25:28memudahkan

25:30teman-teman untuk lebih,

25:32ini lagi, ada dari

25:34Google Code Lab, silahkan.

25:36Nanti tolong di-share aja ini.

25:38Bisa untuk setup

25:40satu-satu, untuk

25:42benar-benar, go through one by one,

25:44bagaimana setup WebAuthent

25:46sendiri, pakai WebAuthent.

25:48Sebenarnya, nanti, nanti kalau sudah pakai

25:50apa tadi, passwordless.id kan,

25:52udah nggak perlu, kita nggak perlu manual

25:54bikin ini, tapi ya, seperti biasa

25:56kita rekomendasiin, selalu

25:58harus tahu cara kerjanya, abis itu

26:00ya mau pakai library tambahan ya,

26:02bebas.

26:04Tapi ini client-side-only ya?

26:06Iya, ini client-side-only

26:08untuk sampai dia, ya

26:10sampai dia generate, karena dia

26:12pakai, dia pakai ini,

26:14di, sudah

26:16ada di, dia

26:18sudah siapin live-side-nya, jadi tinggal

26:20kita pakai yang pakai punya kita

26:22gitu. Silahkan

26:24coba, dan

26:26kasih tahu bagaimana hasilnya.

26:28Sebelum menggunakan

26:30library lain, pakailah dulu.

26:32Aslinya, basic-nya.

26:34Kalau sudah mengerti, barulah

26:36pakai library. Vanilla.

26:38Vanilla.

26:40Ini ada pertanyaan dari Robi nih,

26:42apakah teknik ini sudah umum

26:44digunakan seperti JWT?

26:46Seperti apa? JWT.

26:48JWT kan

26:50format ya sebetulnya.

26:52Iya, JWT itu kan format

26:54format untuk

26:56mengirimkan data aja kan sebenarnya.

26:58Kalau flow-nya,

27:00mungkin yang dimaksud flow

27:02semacam oout gitu kali ya, yang

27:04dimana kita menerima,

27:06kita terima akses token

27:08dalam format itu encoding-nya

27:10JWT.

27:12Nggak sih, dia nggak ada hubungan

27:14sama JWT,

27:16atau format seperti ini.

27:18Kalau untuk

27:20karena completely different thing ya,

27:22karena JWT ini kan

27:24mengirimkan data dan

27:26dia tetap ada

27:28yang namanya sign key ya,

27:30yang di sign, ini kan sign flag-nya ya.

27:32Ini mengencode

27:34data apapun, tapi dengan

27:36standar encoding yang sudah

27:38disepakati, ada varian

27:40algorithmanya, terus ada key

27:42itu,

27:44waktunya dan key-nya kan,

27:46untuk dicocokin sama

27:48yang menerima mengkonsumsi.

27:50Kalau menurut

27:52saya, JWT itu untuk

27:54sending encrypted

27:56data

27:58ke server

28:00dan memastikan data itu

28:02valid

28:04dari si pengirim yang

28:06sah, ya udah pasti

28:08valid lah ya, si pengirim yang

28:10sah gitu ya, karena sudah

28:12di sign. Pengirim dan penerima

28:14dari pihak yang expected, karena

28:16apa, sama-sama

28:18tahu, ngecek, diverify

28:20dengan key yang sama.

28:22Public dan private key, jadi private key

28:24nggak pernah, jadi bisa diverified

28:26pakai private key yang ada di server.

28:28Sedangkan kalau WebAutoN, apakah

28:30itu dengan

28:32saya merasa

28:34mirip serupa tapi tak sama ya?

28:38Kalau WebAutoN

28:40semacam antara service dengan device

28:42si user ya, apa

28:44koneksinya lebih ke itu kan,

28:46antara silayanan

28:48dengan device

28:50fisik yang diakses oleh user.

28:52Bukan, karena dia bukan untuk

28:56authentication data, dia

28:58hanya untuk authenticate

29:00user.

29:02Dia tidak mengautenticate data

29:04yang bukan data user.

29:06Apa isi lah maksudnya ya.

29:08Hanya untuk

29:10authenticate login itu, login dan

29:12identifikasi aja.

29:14Untuk keamanan

29:16selanjutnya untuk misalnya

29:18kita buat sebuah web application

29:20loginnya pakai WebAutoN

29:22WebAutoN

29:24tentunya

29:26selanjutnya, temen-temen

29:28kalau misalnya aplikasinya mau kirim

29:30data ke server, tetap harus pakai

29:32kalau memilihnya pakai JWT

29:34formatnya, tetap harus pakai JWT.

29:36Gak ada hubungannya.

29:38Dan

29:40banyak ya, Okta kayak

29:42Outzero itu sudah support WebAutoN.

29:44Sudah pakai.

29:46Tapi belum umum kan,

29:48karena memang masih baru juga kan.

29:50Belum banyak yang pakai juga.

29:52Ya, semoga habis

29:54nonton ngobrolin web jadi

29:56umum di Indonesia.

29:58Karena semua pada nyoba.

30:00Ya, ini

30:02butuh banget. Apalagi

30:04kalau misalkan temen-temen bikin aplikasi

30:06baru, service baru,

30:08bikin produk baru, terus butuh login.

30:10Login yang paling gampang

30:12apa sih sekarang? Kayaknya

30:14kirim ini ya, kode

30:16ada 4 angka lah, atau

30:18pakai magic link.

30:20Ya, jadi

30:22harus buka email, terus

30:24diklik, abis itu kita baru masuk.

30:26Kalau misalkan kita buka di desktop, kita harus buka

30:28emailnya di desktop. Kalau di mobile

30:30kita harus buka email. Mahal lagi, maksudnya

30:32makin banyak. Mungkin kalau untuk pertama

30:34pas create pertama, ok lah,

30:36itu nggak apa-apa. Tapi kalau setiap kali

30:38login, kirim SMS,

30:40tagehannya

30:42lumayan.

30:44Atau sebelum

30:46era itu, mungkin ada

30:48yang tadi oout, pakai

30:50login with Github,

30:52login with Facebook, login with

30:54Google, gitu kan. Cuman

30:56itu datanya ada di masing-masing provider

30:58kan, gitu. Kita nggak pegang datanya.

31:00Nah, kalau yang ini

31:02lebih menyederhanakan

31:04karena, ya

31:06apa, di device kita sudah cukup

31:08canggih, sudah ada alatnya, untuk

31:10mengidentifikasi bahwa kita benar-benar

31:12user itu. Betul user

31:14yang enak sih.

31:16Ya, mungkin di combine ya, bisa

31:18tergantung kebutuhannya. Mungkin

31:20oout buat create account,

31:22terus habis itu bisa di combine web

31:24outen pas login selanjutnya, kan.

31:26Pas login, ya. Betul.

31:28Kalau misalkan produknya

31:30di web nih kan,

31:32di web udah pakai web outen,

31:34terus produknya berkembang,

31:36ada aplikasi mobile, itu

31:38gimana tuh?

31:40Di native ada kan ya?

31:44Di native kan sudah ada untuk

31:46outen authentication ini sudah ada.

31:48Kayak yang saya katakan tadi,

31:52misalnya bisa juga kita buat

31:54registration-nya itu

31:56per device juga bisa, dan satu account.

32:00Itu juga bisa.

32:02Jadi, tinggal kita maininnya

32:04di data, ibaratnya

32:06relation antara user dan

32:08outen ID nya tadi, kan bisa banyak.

32:12Jadi, mau itu

32:14danti dari device yang Android,

32:16ya sama, bisa

32:18pakai outennya si

32:20jalur authenticationnya si Android

32:22dan standardnya itu,

32:24kalau di web,

32:26juga punya standardnya itu, sama.

32:28Jadi, tetap masukin satu account-nya sama.

32:30Itu kan tinggal sisi server ya.

32:32Tidak

32:34tergantung sama web outen

32:36rpi.

32:38Jadi, scope-nya hanya

32:40sampai generate public key dan ID,

32:42waktu register, dia tinggal

32:44katakan, ini public key-nya

32:46saya, ini ID-nya saya. That's it.

32:48Simpanlah.

32:50Oke.

32:54Untuk topik

32:56web outen,

32:58sudah cukup dulu.

33:00Nanti kita bisa lanjut lagi diskusi, kalau

33:02teman-teman punya pertanyaan, boleh

33:04silakan langsung di kolom chat ya.

33:06Berikutnya, kita akan bahas tentang

33:08topik kedua, yaitu

33:10WebAssembly.

33:12WebAssembly ini kan,

33:14kemarin kita sudah sempat bahas juga sedikit.

33:16Yang menarik

33:18adalah mereka menyebut bahwa, ini

33:20WebAssembly versi berikutnya adalah versi 2.

33:22Karena sebelumnya itu

33:24sebutannya versi 1 ya. Kita juga nggak tahu nih.

33:26Yang kita bahas minggu lalu ya.

33:28Iya, hampir sama kayak

33:30CSS3,

33:32HTML5 itu kayaknya batasannya

33:34seberapa sih, gitu. Kita kayak nggak,

33:36agak ngeblur kan. Beda sama versi.

33:38Tom 90-an kali itu.

33:40Siapa yang pernah bikin,

33:42pernah nulis CSS2, coba.

33:44Ada yang pernah HTML3, HTML3?

33:46Kan bingung kan. HTML3 itu

33:48seberapa? HTML4 sih, kayak lupa-lupa

33:50ingat. Itu jamannya Flash, kayaknya.

33:52Masih.

33:54Jadi,

33:56ada beberapa hal yang baru, makanya

33:58mereka menyebut ini versi yang

34:00major version lah, gitu ya.

34:02Kira-kira. Kan,

34:04di WebAssembly ini agak-agak

34:06tenggelam ya. Sempat nge-hype,

34:08terus tiba-tiba hilang. Ini kabarnya

34:10kok hilang, gitu.

34:12Kayak nggak ada

34:14kelanjutannya. Padahal,

34:16adopsinya yang

34:18nggak bisa dibilang banyak. Adopsinya major.

34:20Major sih sebenarnya.

34:22Nggak banyak, tapi

34:24signifikan. Kayak misalnya, apalah Sigma,

34:26gitu. Teknologi yang dipake banyak orang, terus

34:28Adobe Cloud kan hampir semua

34:30pakai Wasm ya, kalau nggak salah.

34:32Terus, apa lagi ya? Nggak tahu pokoknya, apa,

34:34itu breakthrough banget dalam

34:36CS. Counter-Strike.

34:38Counter-Strike yang ramai. Oh, ya ampun.

34:40Counter-Strike

34:42ada webnya, gitu.

34:44Ada yang bukan yang CS2 ya. Webwrapper.

34:46Yang lama.

34:48Counter-Strike yang bukan yang pertama. Kayak, itu kan breakthrough

34:50dalam hal teknologi web ya, tapi

34:52dari, ya, otomatis dari kuantitas

34:54nggak bisa terlalu banyak lah.

34:56Seberapa banyak orang yang punya

34:58produk sekompleks

35:00itu? Ya, jadi

35:02salah satu yang breakthrough juga, misalkan

35:04contohnya tadi ya, Photoshop.

35:06Tiba-tiba dia ada yang cloud.

35:08Coba bayangin kalau teman-teman berada di perusahaan

35:10itu harus bersaing dengan Sigma

35:12yang akhirnya dibeli juga sih sama

35:14Adobe kan. Tapi katakanlah

35:16dia nggak beli, gitu. Dia nggak beli.

35:18Dia mau bikin yang online seperti Sigma.

35:20Harus rewrite. Harus tulis

35:22ulang dengan JavaScript.

35:24Kan susahnya setengah mati.

35:26Auto-cat juga sama.

35:28Ada codebase yang sudah cukup besar.

35:30Yang legacy, yang udah nggak bisa diapa-apain.

35:32Terus ini kita mau ke web, tapi

35:34nggak bisa, gitu.

35:36Web assembly-nya adalah salah satu jawabannya.

35:38Jadi, salah satu contoh suksesnya ya.

35:40Itu auto-cat.

35:42Mereka sekarang udah bisa di web.

35:44Photoshop juga sudah bisa di web.

35:46Google Earth, kalau dulu

35:48hanya ada desktop, sekarang sudah bisa diakses

35:50di browser juga.

35:52Jadi itu

35:54breakthrough-nya lumayan, tapi

35:56kabarnya memang tidak se-

35:58wah, framework atau library

36:00yang lagi

36:02hype, gitu ya. Jadi

36:04highlight-nya apa? Highlight-nya adalah

36:06kalau versi satu

36:08yang dulu, kenapa yang dulu itu

36:10kayaknya perkembangannya gitu-gitu aja?

36:12Ternyata, setelah saya

36:14nonton videonya, saya baru tahu ternyata

36:16versi satu itu, mereka

36:18belum terlalu

36:20mendukung bahasa-bahasa

36:22yang garbage collected.

36:24Yang ada garbage collected-nya.

36:26Makanya, bahasa yang

36:28harus digunakan adalah bahasa yang

36:30tidak menggunakan garbage collected.

36:32Intinya C, C++,

36:34RAS, bahkan goleng aja itu

36:36ada garbage collected-nya.

36:38Di versi kedua ini,

36:40mereka sudah mendukung namanya

36:42web assembly GC.

36:44Nah, gara-gara ada

36:46si

36:48garbage collector,

36:50fitur garbage collector

36:52ini. Jadi, ada membuka

36:54peluang bahasa-bahasa lain

36:56juga berkembang sama halnya

36:58seperti RAS, C++, dan lain-lain

37:00di ranah web assembly.

37:02Ini ada contoh beberapa

37:04library yang

37:06jadi highlight-nya. Jadi, ada

37:08SQLite yang sudah bisa dibawa ke ranah web assembly.

37:10Baru tahu, SQLite atau pakai

37:12web assembly ya? Web assembly-based?

37:14Enggak. Sebelumnya kan dia

37:16back-end kan. Ya,

37:18executable biasalah pakai C atau C++.

37:20Nah, ini ada port-nya.

37:22Dan itu

37:24apa namanya?

37:26Official. Jadi, di website

37:28SQLite itu mendukung web assembly.

37:30Jadi, kita bisa punya

37:32apa? Yang kayak waktu itu kita sempat

37:34ngomong kan? Di browser kita ada

37:36SQLite. Ada

37:38WordPress juga. Benar.

37:40WordPress dibuat Wasm dan jalannya

37:42pakai SQLite instead of

37:44MySQL.

37:46Jadi, nggak perlu back-end.

37:48Kita di klien aja

37:50udah bisa

37:52database yang

37:54istilahnya

37:56fiturnya udah cukup mumpuni

37:58dibandingkan

38:00database RDBMS

38:02lain. SQLite, walaupun

38:04kecil, tapi udah cukup mumpuni. Kemudian

38:06ada FFmpeg. FFmpeg ini

38:08adalah

38:10ini tools

38:12yang sangat powerful yang

38:14hanya jalan di CLI.

38:16Linux ya, terutama ya.

38:18Jadi, ini adalah CLI tools.

38:20Kalau misalkan kita mau convert

38:22dari

38:24apa? Dari format apapun ke format

38:26apapun, dia bisa. Bahkan katanya

38:28saya belum nyoba sih, kabarnya

38:30dia bahkan bisa mendeteksi

38:32kalau misalkan kita mau edit video nih.

38:34Ada video yang ada

38:36silent-nya. Itu bisa di

38:38potongan.

38:40Karena dia mengakses

38:42low-level itu banget ya.

38:44Mengakses dari low-level yang beneran stream

38:46kalau misalnya

38:48audio-video itu kan

38:50ada format pieces-nya sendiri.

38:52Ada stream-nya. Nah, dia beneran

38:54bisa mengakses semua stream itu.

38:56FFmpeg ini

38:58kayak, tau gak sih,

39:00tools yang serba bisa

39:02untuk video. Betul.

39:04Video, audio, dan

39:06gambar juga. Karena saya

39:08pernah terbantu sekali.

39:10Tau gak saya yang pernah buat

39:12coin detection untuk

39:14pakai AI, machine learning.

39:16Jadi, untuk

39:18mengumpulkan data

39:20coin itu,

39:22saya kan gak bisa foto satu-satu, capek

39:24banget ya, fotoin satu-satu.

39:26Jadi, saya rekam pakai video

39:28dari berbagai macam

39:30angle, terus saya rekam juga

39:32dari background-nya

39:34beda, gitu ya. Nanti pakai

39:36FFmpeg ini saya bisa minta

39:38di-slicing gitu, jadi

39:40jadi...

39:42ya, eksport saya minta

39:44per frame, dan

39:46misalnya saya minta per

39:4810 frame, skip per 10

39:50atau 20 frame, dan dia

39:52eksport jadi JPEG.

39:54Nah, dari itu

39:56saya tinggal kategorize dan

39:58training machine learning saya.

40:00Terbantu.

40:02Terbantu. Jadi, FFmpeg ini

40:04hanya berjalan di backend. Jadi, kalau

40:06dulu kita bikin client-nya

40:08mungkin upload, misalkan kita mau

40:10bikin aplikasi untuk convert dari

40:12MP4 ke GIF, misalkan, atau

40:14ke AFIF, misalkan.

40:16Kayaknya streaming pakai ini juga ya?

40:18Ya, kayaknya. Streaming juga bisa. FFmpeg juga bisa

40:20live streaming.

40:22Ya, saya pakai

40:24Plex, ya. Jadi,

40:26di server-nya, kalau misalnya

40:28ukuran video-nya

40:304K, tetapi device

40:32saya mau nontonnya 1080,

40:34dia...

40:36untuk convert.

40:38On the fly.

40:40Kalau proses yang seperti itu,

40:42biasanya ada client-server

40:44sistemnya. Jadi, di client, mungkin kita bikin

40:46upload file, misalkan file MP4

40:48ke AFIF, gitu kan.

40:50MP4-nya kita upload, kemudian data

40:52MP4-nya itu dikirim ke server.

40:54Di server, diproses, di konversi,

40:56jadi AFIF, atau jadi GIF,

40:58atau jadi apa, habis itu,

41:00hasilnya, output-nya akan dikembalikan

41:02ke client. Itu

41:04proses yang dulu dilakukan dengan

41:06FFmpeg yang ada di back-end.

41:08Dengan ada nyawa

41:10WebAssembly, FFmpeg-nya ada di browser.

41:12Jadi, nggak perlu ke server lagi.

41:14Langsung aja di...

41:16di konversi di...

41:18di saat itu juga, gitu. Jadi, itu

41:20luar biasa

41:22cepat dan efisien,

41:24nggak perlu perjalanan

41:26ke server atau ke mana, gitu.

41:28Jadi, teman-teman bisa gunakan, ya.

41:30Kalau teman-teman nggak ngerti, ini FFmpeg

41:32nggak perlu compile dari

41:34misalkan C atau C++.

41:36Tinggal pakai.

41:38Tinggal di-load dengan menggunakan

41:40JavaScript. Bisa menggunakan FFmpeg.

41:42Wasm ini.

41:44Jadi, bisa langsung convert video

41:46tanpa mengirimkan ke server, ya.

41:48Atau slicing

41:50sampling.

41:52Kan, kemarin itu ada heboh

41:54yang Prime Video, kan.

41:56AWS Prime Video yang katanya

41:58dia dari serverless

42:00terus pindah ke monolitik gara-gara

42:02apa? Gara-gara

42:04tagihan bengkak itu, karena FFmpegnya jalan

42:06di serverless dia taro. Server.

42:08Itu nggak boleh.

42:10Harusnya. Karena processnya panjang.

42:12Jadi, dagihannya pasti

42:14gede, gitu. Jadi,

42:16dengan adanya ini, ya udah di client aja.

42:18Nggak perlu pakai server. Kok AWS Prime Video

42:20tetap perlu bayar bill ke AWS, ya?

42:22Itu kan sama-sama.

42:24Satu group. Eh, nggak tahu ya

42:26belakang gimana.

42:28Itu urusan mereka lah.

42:30Berikutnya, TensorFlow.js.

42:32Tadi Ivan juga udah sempat bahas, ya.

42:34TensorFlow.js ini

42:36sebelumnya berjalan di...

42:38Ya...

42:40Jalannya di mana ya?

42:42Itu dulu pakai apa sih?

42:44Ya, di browser. Pakai apa? Pakai thread.

42:46Pakai browser, thread.

42:48Ya, antara Node.js atau di browser, ya.

42:50Salah satu, ya. Nah,

42:52sekarang udah bisa di

42:54WebAssembly aja. Jadi, bisa

42:56mengakses GPU, apalagi udah ada

42:58WebGPU kan.

43:00Itu akan jadi lebih keren lagi.

43:02OpenCV juga mirip, ya.

43:04Ini tadinya hanya bisa di backend.

43:06Harusnya sekarang hampir sama seperti

43:08FFmpeg, sudah bisa

43:10di frontend juga.

43:12OpenCV ini adalah

43:14salah satu library Python untuk

43:16mendeteksi

43:18sesuatu di video, ya.

43:20Nombor objek, gitu ya.

43:22Nah, yang

43:24menurut saya menarik juga ini adalah

43:26Cocos. Cocos ini adalah game engine

43:28yang...

43:30Ya, game library lah.

43:32Kalau kita mau buat game, kalau kita bikin dari awal kan

43:34itu susah ya. Jadi, ada framework-nya

43:36gitu ya. Ini sekarang sudah bisa

43:38dipublish ke web

43:40melalui Wasm.

43:42Tinggal nunggu Unity bikin Wasm.

43:44Ya, Unity juga udah ada. Demo-demonya udah ada.

43:46Unity, terus apa?

43:48Yang satu lagi yang itu

43:50yang...

43:52Musuhnya? Unreal?

43:54Unreal juga sudah mulai.

43:56Sudah mulai.

43:58Jadi, kita bikin game,

44:00bisa di deploy, bisa dipublish

44:02ke mobile mungkin

44:04atau ke desktop, dan juga bisa

44:06ke web. Jadi, hanya berbekal

44:08web browser, dia bisa

44:10langsung dijalankan.

44:12Ya, tentunya...

44:14Ini tuh ada hubungannya sama itu ya, yang kemarin kita

44:16bahas web GPU.

44:18Ada juga?

44:20Terus bisa mengakses.

44:22Itu kan yang kita bahas kemarin,

44:24frame rate segala macem,

44:26nggak kena limit yang standard

44:28rendering dom dari browser thread.

44:30Cuma, berarti bisa kayak gambarnya

44:32animasinya lebih

44:34canggih lagi.

44:36Dia bisa mengakses hal-hal yang low-level.

44:38Jadi, lebih powerful.

44:40Ini

44:42beberapa

44:44library yang menarik.

44:46Nah, yang tadi saya sebutkan

44:48"Gairbase Collector".

44:50Ini proposalnya.

44:52Jadi, sekarang

44:54web assembly ini sudah mencapai

44:56versi MVP, ke level MVP.

44:58Untuk "Gairbase Collector"

45:02language.

45:04Kalau dulu

45:06bisa, tapi

45:08tidak optimal. Sekarang

45:10sudah lebih optimal. Jadi,

45:12bahasa-bahasa yang baru, yang

45:14"Gairbase Collector" itu

45:16muncul. Contohnya, Swift. Sekarang

45:18sudah bisa web assembly.

45:20Oh, Swift bisa jalan di browser.

45:22Baru tahu. Yes.

45:24Sudah ada website-nya juga. Tools-nya

45:26juga sudah lengkap. Jadi, teman-teman yang

45:28punya kemampuan untuk bahasa

45:30pembahaman Swift, sekarang bisa

45:32di compile

45:34ke web assembly. Salah satu

45:36contohnya adalah tools yang

45:38namanya "Good Notes". Ini awalnya

45:40hanya tersedia di IOS.

45:42Sekarang

45:44sudah bisa di Windows, dan juga

45:46sudah akan ada

45:48di web juga. Ini

45:50aplikasi klasik ini dari iPhone, iPad

45:52awal. Ini "Good Notes" sudah ada. Gila.

45:54Sudah belasan tahun. Pakai apa?

45:56Pakai pensil gitu ya.

45:58Pertama kali punya

46:00iPad yang... iPad pertama yang

46:02ada kameranya. iPad 2.

46:04Ada "Good Notes".

46:06Apa? Sampai beli "Good Notes".

46:08Hmm, "Good Notes". Ya.

46:10Ini mereka...

46:12Jadi, mereka mau develop yang Windows, akhirnya mereka

46:14memutuskan untuk pakai yang versi web saja.

46:16Jadi, bisa lebih...

46:18bisa tercapailah semua tujuan

46:20mereka, baik di IOS, Android, ataupun

46:22di desktop

46:24atau di mana, semuanya bisa...

46:26selama ada browser, aman.

46:28Jadi, ini cukup promising ya.

46:30Itu baru

46:32di sisi Swift ya.

46:34Ada dua lagi.

46:36Yang pertama, Dart

46:38juga bisa. Sekarang

46:40mulai bisa ke WebAssembly

46:42dan juga satu lagi, Kotlin.

46:44Nah.

46:46Jadi, bahasa-bahasa yang dynamic

46:48dan garbage collected sudah mulai masuk

46:50dan sudah mulai didukung secara penuh.

46:52PHP.

46:54PHP. PHP bisa.

46:56Sudah bisa kan? Sebenarnya dari versi satu

46:58sudah. Cuman garbage collectornya yang

47:00belum kan. Ada itu PHP

47:02Wasm? Ada, ada, ada. Benar.

47:04Kotlin. Nah, yang Kotlin

47:06saya tunjukin ini deh.

47:08Infonya.

47:10Nah, kalau sebelumnya kan

47:16Kotlin itu

47:18punya yang namanya KMM ya.

47:20Kotlin Multi Platform

47:22M-nya apa?

47:24Modular. Modul.

47:26KMP kali.

47:28Ya, pokoknya Multi Platform

47:30yang bisa ke IOS kan.

47:32Sempat dibahas juga waktu kita

47:34ngobrol sama timnya GDI

47:36Android kan sama SIDIC dan

47:38teman-teman. Jadi,

47:40sekarang ini dibawa lagi

47:42lebih lanjut ke ranah web.

47:44Jadi, Kotlin sekarang sudah bisa

47:46menggunakan

47:48kita bisa menggunakan bahasa

47:50pembangunan Kotlin untuk

47:52dikompilasi ke WebAssembly

47:54dan bisa dieksekusi di web.

47:56Bahkan. Apa kabar?

47:58Flutter dengan begini ceritanya.

48:00Itu, Dart lagi

48:02dibangun, lagi dibangun.

48:04Jadi, kita bisa menggunakan UI

48:06tools yang sama, yaitu

48:08Jetpack Compose yang bisa digunakan di Android.

48:10Oh, bisa pakai Jetpack Compose ya?

48:12Jadi seru ya.

48:14Jadi, mungkin codebase-nya bisa

48:16bisa di-share lebih banyak lagi.

48:18Bukan hanya dari

48:20back-end, tapi dari UI-nya juga.

48:22Jadi, bisa seamless.

48:24Ujung-ujungnya

48:26angle-nya bisa seamless

48:28antara web atau native itu bisa

48:30nggak kelihatan lagi kali ya.

48:32Kayaknya besok-besok perlu featuring

48:34timnya Sidik dan

48:36temen-temen dia.

48:38Kayaknya mesti kita ngobrol lagi nih.

48:40Perkembangan terbaru.

48:42Benar.

48:44Kita bisa ngangkat

48:46topik ini ya.

48:48Ada contohnya demo-nya di videonya,

48:50nanti temen-temen coba liat aja

48:52di videonya, itu ada yang

48:54dari JetBrains

48:56mendemokan dengan

48:58codebase-nya hampir 100%.

49:00Ya, nggak sampai 100%. Mungkin

49:0290 sekian persen sama

49:04dia bisa deploy ke

49:06browser yang tadinya

49:08Android App.

49:10Itu kata Mas Fordita, M-nya mobile.

49:12Kodlin Multiplatform Mobile.

49:14Maaf ya,

49:16maklum kita bukan Android.

49:18Jadi, kita nggak tahu.

49:20M-nya maaf.

49:22Kodlin Multiplatform.

49:24Maaf, kita belum tahu. Kita baru tahu.

49:26Iya,

49:28kalau Jetpack

49:30udah bisa dipakai di iOS, bisa.

49:32Yang pakai KMM tadi, kalau nggak salah.

49:34Benar nggak?

49:36Di koreksi kalau salahnya.

49:38Nah, sekarang udah bisa di web lagi.

49:40Jadi, semakin

49:42seru.

49:44Kalau temen-temen yang tadinya

49:46"Wah, pengen bikin web", tapi

49:48bahasnya terbatas. Biasanya Java,

49:50biasanya Kotlin. Sekarang mungkin sudah

49:52bisa lah dengan menggunakan.

49:54Tapi Java, Kotlin juga bisa

49:56bikin web.

49:58Back-end,

50:00front-end-nya nggak bisa tetap.

50:02Tetap harusnya fast-read.

50:04Oke, topik

50:06Wasm,

50:08sampai di situ. Berikutnya yang

50:10tidak kalah seru.

50:12Baseline. Apa ini Baseline?

50:14Baseline. Nah, ini nih.

50:16Ini hal yang di-announce

50:18pas I/O kemarin.

50:20Nah, ini kalau menurut aku sih

50:22ngelanjutin trend

50:24atau kecenderungan menarik.

50:26Di dua tahun I/O,

50:28dua tahun terakhir.

50:30Jadi, dua sampai tiga tahun terakhir.

50:32Kayak tahun lalu.

50:34Tahun lalu dan tahun sebelumnya

50:36itu kan yang di-announce, yang major itu

50:38Interop. Jadi,

50:40ini hal-hal yang sebetulnya.

50:42Kita pernah punya episode

50:44tentang Interop juga. Jadi, kalau temen-temen

50:46yang belum tahu, belum

50:48hamiliar, ya cari sendiri.

50:50Nah, ini hal-hal yang bukan

50:52web API-nya sendiri. Jadi,

50:54kalau tadi yang kita bahas tuh, ada Wasm,

50:56ada web auto, itu kan

50:58web API. Makin lama,

51:00makin canggih. Oke lah.

51:02Cuma, apa,

51:04gimana biar

51:06mudah diadopsi untuk semua. Karena

51:08browser kan, walaupun I/O itu

51:10hajatannya Google,

51:12browser kan bukan cuma Google Chrome

51:14doang. Realistis lah kita sebagai developer

51:16kan, pengen

51:18situs kita bisa diakses

51:20orang sebanyak mungkin,

51:22termasuk yang pakai browser lain.

51:24Nah, ini kecenderungan menarik bahwa

51:262-3 tahun terakhir nih I/O

51:28banyak nge-present

51:30proyek-proyek yang merupakan

51:32kerjasama multi-fender, multi-stakeholder.

51:34Nah, kalau dulu sebelumnya kan

51:36Interop, jadi intinya

51:38kayak pada

51:40men-survey developer,

51:42apa sih, feature atau

51:44API apa aja sih yang kalian

51:46bermasalah, pengen

51:48di-streamline dan pengen

51:50di-fix untuk semua browser.

51:52Nah, Interop tuh isinya proyek itu semua.

51:54Kalau baseline, yang baru

51:56di-announce ini, itu

51:58mempermudah developer

52:00untuk mengadopsi

52:02web API yang

52:04kita sering mikir,

52:06ini web API baru atau nggak ya?

52:08Supportnya udah bagus atau

52:10belum ya? Nah kan, nggak semua

52:12developer seseluruh itu

52:14harus membuka kena-use dulu,

52:16nge-check, nge-scrolling semua

52:18browser-nya udah support atau

52:20belum. Kalau misalnya

52:22masih terlalu baru juga kan nggak semua

52:24user kita rajin nge-update versi browser

52:26kan? Nah, si baseline ini

52:28intinya

52:30merupakan

52:32kayak penanda, feature

52:34yang sudah diadopsi di

52:36dua versi browser terakhir.

52:38Kalau nggak salah, dua versi major.

52:40Certifikasi.

52:42Major ya, kalau nggak salah.

52:44Dua versi major terakhir.

52:46Oh nggak, minor, minor.

52:48Minor version dari

52:50eh, major

52:52sorry, major.

52:54Misalnya kalau Chrome ya

52:56112

52:58sama

53:00112-113 misalnya.

53:02Jadi, ini dengan

53:04mudah, kita bisa lihat nih

53:06di MDN misalnya, udah ada

53:08logo baseline. Nah, kita

53:10kan nggak harus nge-scroll. Biasanya kan

53:12sampai bawah tuh, harus nge-scroll sampai

53:14browser compatibility, kita

53:16cek satu-satu udah support

53:18sejakapan, dan yang terbaru

53:20sekarang browser-nya apa, udah nggak perlu

53:22gitu lagi. Jadi, kalau misalnya kita

53:24lihat tanda ini, itu udah

53:26support semua major browser di

53:28dua versi terbaru.

53:30Nah, ini

53:32mempermudah banget buat kita

53:34nge-adopsi

53:36web API baru sih.

53:38Kayak kalau contoh yang umum,

53:40itu coba scroll ke paling bawah.

53:42Ini bahasanya

53:44WebDX, developer

53:46experience. Developer experience.

53:48So, baseline features you can use today.

53:50Coba deh. Ini kan?

53:52Bukan. Paling bawah. Nah,

53:54iya, iya. Nah,

53:56scroll ke bawah dikit.

53:58Scroll ke bawah. Nah,

54:04nah, ini dialog element. Coba deh

54:06kalau misalnya kita tanya ke, kita

54:08yang paling random web developer

54:10kalian udah pakai element dialog

54:12atau belum? Pasti sebagian besar

54:14kemungkinan

54:16entah baru tahu, atau udah tahu.

54:18Cuma, ya maksudnya kan, kayak,

54:20Mas siapa itu? Adam Erjeles.

54:22Kan udah pernah bikin UI challenge

54:24pakai dialog element ini, dan

54:26hasilnya ren, bagus, dan kita nggak usah

54:28install third-party library. Keunggulannya

54:30banyak lah, udah jelas. Aksesibilitas

54:32juga jauh lebih bagus, karena kita

54:34nggak harus, karena itu built-in ya, udah

54:36dikasih dari browser, kita nggak

54:38harus mikir fokus-fokus

54:40atau apa lah, karena itu udah jadi

54:42feature browser. Tapi kan kita

54:44mungkin in real life, kalau mau

54:46pakai itu, alah, jangan-jangan

54:48Safari belum support.

54:50Suusun lah. Suusunnya pasti

54:52sama iOS, sama Apple.

54:54Nah, cuma, iya, itu

54:56contoh aja, tapi... Nggak ada yang suusun sama

54:58Opera Mini gitu?

55:00Kalau Opera Mini mah, nggak bisa

55:02buka apa-apa, udah.

55:04Itu biar user-nya yang introspeksi

55:06sendiri sih, kalau masih

55:08pakai opera Mini.

55:10Nah, ini dengan

55:12waistline ini, kita bisa, oh,

55:14kita bisa sadar, oh, ternyata support-nya udah

55:16oke juga ya. Kita bisa

55:18ya, lumayan pede buat pakai

55:20tanpa terlalu banyak effort.

55:22Terus, kayak misalnya ke bawah lagi dikit,

55:24di CSS juga ada contohnya.

55:26Yang aku pun baru tahu beneran

55:28ini, gara-gara ini, ke bawah.

55:30Transform.

55:32Iya.

55:34Kalau viewport unit sih sebetulnya

55:36udah di-announce justru di I/O

55:38tahun lalu. Cuma, ya itu

55:40lagi-lagi kan kita belum tahu

55:42support-nya udah bagus atau belum.

55:44Yang CSS atas dikit?

55:46Hah? Di atas?

55:48Ini? Fokus?

55:50Mana ya? Transform ada nggak sih?

55:52Tadi transform di bawah.

55:54Ini ini, individual CSS

55:56transform property, bukan?

55:58Nah, itu ini. Oh, iya.

56:02Individual CSS transform.

56:04Jadi, kalau

56:06selama ini kan kita transform dulu.

56:08Apa? Property-nya transform

56:10titik 2, translate,

56:12rotate, segala macem kan, harus

56:14digabung dalam satu property ya.

56:16Nah, ternyata

56:18sekarang itu bisa dipisah.

56:20Bisa translate sendiri,

56:22rotate sendiri, scale sendiri.

56:24Dan ini berguna banget contohnya misalnya

56:26animasi ya.

56:28Apa? Before dan after.

56:30Kita kan cuma pengen ngeganti

56:32translate-nya doang, misalnya. Cuma

56:34mau naikin, misalnya mau apa?

56:36Transition.

56:38Terus, misalnya kita pakai CSS

56:40in.js juga lebih gampang lagi

56:42ngeganti value masing-masing.

56:44Nah, dengan

56:46baseline ini, kita jadi tahu bahwa

56:48oh, ternyata support-nya udah lumayan juga.

56:50Jadi udah cukup aman.

56:52Ya, itu contoh-contohnya.

56:54Baseline ini liatnya di MDN

56:56aja atau kita bisa access

56:58API-nya, atau gimana,

57:00atau bisa di-connect ke IntelliSense,

57:02atau gimana, gitu nggak sih?

57:04Nah, ini kan masih baru nih. Jadi, emang

57:06baseline ini kan project

57:08kayak community, ada community-nya

57:10sendiri. Apa tadi namanya?

57:12WebDX community, atau apa-apanya?

57:14Under W3.

57:16Jadi, ini apa?

57:18Biasalah kayak working group

57:20di bawah W3.

57:22Itu kan ada pihak Google,

57:24Apple, dan lain-lain. Jadi,

57:26kalau yang

57:28konkretnya di web.dev,

57:30misalnya bakal ada

57:32artikel tentang API,

57:34web API tertentu. Jadi, bakal

57:36ada logo baseline-nya. Terus,

57:38di MDN juga

57:40akan ada atau udah ada? Gak tahu.

57:42Coba deh cari aja artikel MDN grid.

57:44Contohnya di MDN.

57:46Tapi, si baseline ini

57:48merupakan bagian dari

57:50project lain yang lebih besar.

57:52Oh, udah ada? Nah,

57:54itu. Dia jadi kayak embed ya.

57:56Jadi, yang penulisnya

57:58gak perlu update manual nih.

58:00Kalau udah support,

58:02masuk-masuk lagi,

58:04terus update ini kayaknya jadi

58:06report juga ya, bisa outdated juga.

58:08Kalau ini kan jadi embed.

58:10Kalau itu aman sih.

58:12Dan,

58:14katanya sih bakal

58:16dibuat widget-nya. Jadi, kayak

58:18nanti ke depannya bakal ada,

58:20di talk-nya ada tuh, di video yang

58:22kita cari aja dari 50-an

58:24video IO kemarin.

58:26Videonya Mbak Mariko,

58:28kalau gak salah. Itu yang mengubah baseline.

58:30Ke depannya bakal ada

58:32widget, literally widget

58:34kalau kita pengen

58:36menunjukkan atau

58:38menggunakan ini.

58:40Kita mau ngecek misalnya

58:42suatu feature udah di support atau belum,

58:44bakal ada widget-nya.

58:46Gokil sih ini, kalau misalnya

58:48nanti bisa connect ke

58:50NPM

58:52atau extension

58:54kayak IntelliSense gitu ya.

58:56Kayak, dulu kan kita

58:58suka pakai browser list.

59:00Jadi, kalau browser list itu

59:02kan untuk mesin ya.

59:04Nah, kalau ini untuk developer.

59:06Jadi, menarik sih. Dan itu

59:08emang ideally, ke depannya, gimana

59:10caranya mungkin bisa di-connect ya.

59:12Kalau browser list itu kan lebih ke

59:14bundler, ke library.

59:16Misalnya kita menspesifikasikan

59:18browser yang masih hidup.

59:20Bukan Opera Mini, maaf ya

59:22Opera Mini.

59:24Ini bisa juga

59:26di-connectin kayak ke

59:28stylelin atau

59:30islin. Suatu saat nanti bisa

59:32di-connectin atau IntelliSense.

59:34Bisa ketahuan

59:36kalau kita lagi typing, oke,

59:38ternyata

59:40API yang kita pakai

59:42gak sesuai sama browser config-nya kita.

59:44Bisa juga, kan?

59:46Misalnya mungkin

59:48kayak tadi tuh

59:50ada JavaScript kan buat

59:52deep copy. Dulu kita harus

59:54men-stringify, kita copy

59:56string-nya, kita parse balik.

59:58Nah, sekarang udah gak perlu itu.

1:00:00Karena tadi udah ada structured clone

1:00:02kan, ada di artikel yang tadi.

1:00:04Nah, jadi kalau kita

1:00:06kita ngetik

1:00:08stringify terus parse, mungkin bisa

1:00:10jadi ada, apa tuh, garis merahnya,

1:00:12squiggly line, islin. Kalau kita hover

1:00:14misalnya, kamu bisa pakai

1:00:16structured clone. Kedepannya mungkin gitu,

1:00:18walaupun sekarang belum ada.

1:00:20Nah,

1:00:22itu kalau senang beneran, lho.

1:00:24Lihat tuh komen.

1:00:26Halo.

1:00:28Nah, coba buka.

1:00:34Ada gak tempat buat fitur baru, katanya.

1:00:36Kata Dama ada.

1:00:38Kalau fitur baru,

1:00:40fitur baru mah itu.

1:00:42Bukan kesini.

1:00:44Masih-masih gak ada itu ya.

1:00:46CSS ya, berarti. CSS

1:00:48Working Group lah, itunya.

1:00:50Bikin issue ya, kalau gak salah.

1:00:52Kalau kita mau vote fitur baru.

1:00:54Cuma kan, kalau ini

1:00:56untuk men-certificasi fitur

1:00:58yang udah ada, mana yang udah

1:01:00di-support secara luas.

1:01:02Ini bentuknya widget kayak di

1:01:04Lighthouse gitu? Enggak ya kayaknya.

1:01:06Lighthouse kan dia cuma kayak score doang, kan?

1:01:08Kalau ini sih kayaknya

1:01:10di developer client ya.

1:01:12Kalau Lighthouse kan

1:01:14udah dari perspektif user lah, ibaratnya.

1:01:16Dari perspektif website

1:01:18yang udah jadi apapun itu kodenya.

1:01:20Kalau ini mungkin ya

1:01:22untuk developer lebih ke

1:01:24proses development-nya.

1:01:26Coba buka feature set deh.

1:01:28Linggang feature set.

1:01:30Nah, ya itu.

1:01:32Jadi si baseline ini

1:01:34sebetulnya adalah bagian

1:01:36dari project yang lebih besar.

1:01:38Yaitu feature set ini.

1:01:40Jadi, ya itu

1:01:42penjelasannya. Baca sendiri.

1:01:44Intinya sih,

1:01:46dulu kan, ya dulu tuh maksudnya

1:01:48mungkin 10 tahun terakhir lah ya.

1:01:50Banyak feature web API

1:01:52yang misalnya di-support di Chrome,

1:01:54Chromium, di-support di

1:01:56Musila,

1:01:58Firefox,

1:02:00di-support di WebKit.

1:02:02Tapi mungkin behavior-nya suka

1:02:04agak lain-lain.

1:02:06Atau mungkin ada subset-nya.

1:02:08Misalnya ada tambahan

1:02:10misalnya grid.

1:02:12Ada subgrid yang cuma ada di Firefox.

1:02:14Nah, terus apa?

1:02:16Makanya ada project interop

1:02:18untuk men-streamline-kan itu semua.

1:02:20Nah, kedepannya ini

1:02:22kayak mau lebih dirapihin aja.

1:02:24Lebih dibuat, lebih ter-organized.

1:02:26Jadi, ada kesepakatan

1:02:28bahwa feature ini, suatu

1:02:30feature tertentu yang di-support

1:02:32itu apa saja. Nah, coba

1:02:34buka repo-nya deh tadi.

1:02:36Wah, ini ada npm-nya ya berarti ya.

1:02:38Kita bisa pakai di sisi

1:02:40coding-nya ya. Jadi kita bisa import.

1:02:42Terus kita lihat statusnya di situ ya.

1:02:44Kita bisa check

1:02:46datanya.

1:02:48Wow, menarik sekali.

1:02:50Ada contohnya

1:02:52di repo-nya tuh.

1:02:54Atas.

1:02:56Atas.

1:02:58Atas lagi.

1:03:00Atas lagi.

1:03:02Atas file-nya.

1:03:04Feature,

1:03:06kayaknya feature group definitions ya.

1:03:08Nah, coba tuh.

1:03:10Nah, tuh, misalnya

1:03:12si sgrid tadi gak?

1:03:14Sgrid deh.

1:03:16Nah, itu juga misalnya

1:03:18BigInt. Tadi kan

1:03:20ada JavaScript, ada property-property-nya.

1:03:22Nah, itu grid, coba.

1:03:24Jadi, ini format-nya YAML.

1:03:26Jadi, karena ini di RANA

1:03:28standard dan spesifikasi,

1:03:30ini belum masuk ke teknis.

1:03:32Implementasi teknisnya sih

1:03:34terserah masing-masing browser.

1:03:36Cuma ini sekedar

1:03:38dokumentasi kesepakatan

1:03:40teknologi CSS Grid

1:03:42itu

1:03:44property-property-nya

1:03:46property atau feature-nya apa aja

1:03:48sudah dia nge-paceline atau bukan.

1:03:50Nah, itu ada detail-nya.

1:03:52Jadi, ini kayaknya

1:03:56untuk si

1:03:58developer-nya si browser juga sih.

1:04:00Jadi, kayak, oke, kita udah

1:04:02punya standard.

1:04:04Dan ini adalah sertifikat.

1:04:06Jadi, kalau kita udah lulus tes, akan dapat

1:04:08sertifikat itu.

1:04:10Sama ada

1:04:12kesepakatan aja sih

1:04:14kalau kita pengen bikin feature ini.

1:04:16Maksudnya, para vendor browser

1:04:18mengimplementasikan feature ini,

1:04:20ekspektasinya tuh seperti ini.

1:04:22Kayak gitu.

1:04:24Terus spek-nya tuh kan, nih, kalau misalnya JavaScript,

1:04:26spek-nya ya dari website

1:04:28PC39 kan tuh.

1:04:30Terus ada field can I use.

1:04:32Jadi, apa, mungkin ini kan

1:04:34buat CIC di pipeline-nya mereka ya

1:04:36buat auto

1:04:38update can I use.

1:04:40Nah, terus feature-nya apa aja.

1:04:42Tadi kan CSS, ada formatnya CSS

1:04:44.properties.blabla.

1:04:46Ini JavaScript, build-ins,

1:04:48operator, statement.

1:04:50Jadi, ini memudahkan

1:04:52programatik apa ya, apapun lah

1:04:54nanti kita mau bikin tools atau

1:04:56apapun, tinggal konsum ini

1:04:58aja. Bisa jadi, kalau

1:05:00ini sih kebayangnya kayak linter ya.

1:05:02Jadi, mungkin ada

1:05:04team lead yang implementasi

1:05:06ini, dia membatasi kalau

1:05:08harus sesuai

1:05:10dengan baseline. Kalau ada

1:05:12library yang digunakan tapi tidak

1:05:14atau ada feature yang

1:05:16digunakan tapi belum

1:05:18masih di bawah baseline, maka

1:05:20linter-nya akan kasih

1:05:22dong jangan pakai ini.

1:05:24Atau ya warning lah, gimana

1:05:26caranya cari polyfill

1:05:28ya kan, tetap.

1:05:30Kalau di web

1:05:32developer lane, ya cari polyfill

1:05:34atau tips buat progressive enhancement

1:05:36misalnya kita harus apalah if

1:05:38navigator.

1:05:40Minimal if lah,

1:05:42kondisional, kalau misalnya nggak support, jangan

1:05:44dijalaniin.

1:05:46Ada fallback-nya seperti PWA

1:05:48dan lain-lain ya. Jadi, kalau misalkan

1:05:50dia didukung, ya jalanin.

1:05:52Kalau nggak didukung, ya cari solusi

1:05:54alternatifnya.

1:05:56Nah, kalau ini kayak border image kan,

1:05:58border buat, apa sih, kayak

1:06:00gradient sama background image apa ya?

1:06:02Ya, biar ada gradasi ya.

1:06:04Border-nya.

1:06:06Bisa dilihat sendiri.

1:06:12Nggak bisa abis ya.

1:06:14Banyak ya.

1:06:20Nah, cuma baseline ini,

1:06:22browser list yang tadi kita bahaskan.

1:06:24Kalau yang

1:06:26pernah pakai Create React App pasti

1:06:28pertama kali lihat ini deh.

1:06:30Di package JSON-nya kan pasti ada

1:06:32ini. Sama kalau misalnya

1:06:34npm install, browser list-nya

1:06:36outdated, minta update.

1:06:38Iya.

1:06:40Jadi, di

1:06:42browser list ini dikasih tahu, saya pingin

1:06:44mendukung IE

1:06:46edge ke atas.

1:06:48IE yang selain edge

1:06:50nggak mau gitu.

1:06:52Jadi, bisa kayak gitu ya.

1:06:54Atau node versi 16

1:06:56atau yang lebih baru.

1:06:58Ternyata last two

1:07:00versions itu hal yang

1:07:02udah cukup umum karena default-nya

1:07:04browser list pun itu

1:07:06last two versions.

1:07:08Di sini temen-temen ada yang tahu

1:07:12versi browser-nya, versi berapa

1:07:14sekarang? Kayaknya udah nggak up.

1:07:16Nggak ngikutin versi berapa.

1:07:18Satu, satu, tiga.

1:07:20Cuma sekarang kan browser rata-rata

1:07:24minimal kalau browser yang

1:07:26di laptop ya, kalau dia

1:07:28nggak up-to-date kan muncul itu sendiri

1:07:30muncul button-nya buat

1:07:32update. Bahkan

1:07:34dia update sendiri, dan begitu kita

1:07:36misalnya sat down,

1:07:38biasanya sudah selesai, itu udah

1:07:40automatis update.

1:07:42Kalau gue matiin sih, gue matiin auto-update.

1:07:44Cuma jadi muncul itu

1:07:46tombol buat update.

1:07:48Ada notifikasinya ya.

1:07:50Karena kan by default,

1:07:54otomatis kan.

1:07:56Jadi kita nggak perlu update-update,

1:07:58update-update gitu,

1:08:00dia udah otomatis meng-update dirinya

1:08:02sendiri. Kecuali kalau ada

1:08:04error sesuatu terjadi

1:08:06yang aneh-aneh ya, mungkin error.

1:08:08Cuma kalau HP

1:08:10nggak sih, nggak

1:08:12auto-update kan, nggak ada.

1:08:14Android, Android.

1:08:16Android bisa dinyalain

1:08:18otomatis juga. Bisa sih dinyalain.

1:08:20Cuma males.

1:08:22Tiba-tiba, kok

1:08:24panas handphone ya, ternyata lagi download ya.

1:08:26Download update maksudnya.

1:08:28Oke.

1:08:32Ada lagi? Yang menarik-menarik?

1:08:34Hmm, gitu dulu.

1:08:36Sudah ya? Udah.

1:08:40Ada lagi kan?

1:08:42DevTools tips.

1:08:44Oh iya.

1:08:46Oh itu cadangan sih, tapi boleh sih.

1:08:48Nah, ini singkat aja sih.

1:08:50Sebenarnya ini video

1:08:52sesuai judulnya sih.

1:08:54Ini kayak macem-macem

1:08:56random tips and tricks untuk menggunakan

1:08:58DevTools. Dan

1:09:00ada hal-hal yang sebetulnya

1:09:02udah lama ada. Cuma

1:09:04nggak tahu, mungkin aku yang kurang

1:09:06update atau jarang

1:09:08lihat update-nya.

1:09:10Biasanya update-nya mbak Jaslin tuh ya,

1:09:12kalau DevTools kan. Jarang ngikutin.

1:09:14Jadi, ternyata

1:09:16ada beberapa feature yang di DevTools

1:09:18yang berguna. Cuma

1:09:20apa, mungkin belum banyak yang tahu.

1:09:22Misalnya, kan

1:09:24di DevTools ada tab source tuh.

1:09:26Kita bisa lihat source code-nya.

1:09:28Tapi biasanya kan, ya

1:09:30bukan biasanya source code yang dimaksudkan

1:09:32pasti yang udah di, apa?

1:09:34Udah dibandling kan tuh, udah webpack, blablabla.

1:09:36Udah di minify, dan lain-lain gitu ya.

1:09:38Nah, ternyata

1:09:40DevTools Chrome itu

1:09:42tuh, ada feature

1:09:44author view, yang dimaksud

1:09:46author view itu, code

1:09:48component source yang kita tulis.

1:09:50Ini kalau di dev environment ya.

1:09:52Jadi, lebih gampang kita lihat

1:09:54per component-nya, beneran code

1:09:56component yang kita tulis.

1:09:58Itu kalau ada mapping-nya kali ya?

1:10:00Ada mapping-nya. Iya, ada. Ada mapping-nya.

1:10:02Itu kan baca source map sebetulnya.

1:10:04Jadi, cuma secara view

1:10:06helpful aja, otomatis udah dikelompokin.

1:10:08Kita bisa, nah, itu tuh

1:10:10kayak di layarnya, tinggal

1:10:12tinggal toggle

1:10:14author view aja.

1:10:16Kita bisa lihat, kita bisa

1:10:18ngebaca kode component-component kita.

1:10:20Terus yang kedua, hal

1:10:22menarik kedua, itu ada

1:10:24ignore list untuk third party

1:10:26scripts. Kan suka ada

1:10:28analytics atau lainnya lah.

1:10:30Nah, itu, nah, terus kan

1:10:32banyak dan kita harus scrolling lama

1:10:34tuh biasanya buat ngeliat source.

1:10:36Itu ternyata bisa di auto ignore.

1:10:38Dan setelah dilihat artikelnya,

1:10:40itu udah dari tahun lalu ada.

1:10:42Jadi, agustus

1:10:442022.

1:10:46Ini ya? Iya.

1:10:48Tuh, mbak Jislin.

1:10:50Nah, intinya ya,

1:10:54kalau misalnya, mungkin temen-temen

1:10:56jarang liat update yang

1:10:58update dev tools, bisa nonton video

1:11:00itu karena ada beberapa ringkasan tools

1:11:02yang cukup berguna.

1:11:04Tau nggak ada

1:11:06dev tools yang untuk

1:11:08overlay core web vital?

1:11:12Overlay?

1:11:14Ya, core web vital. Nggak tahu.

1:11:16Kayak pernah lihat deh.

1:11:18Coba buka,

1:11:22saya buka dev tool.

1:11:28Masuk ke more tools.

1:11:30More tools, ya, more tools.

1:11:34Rendering.

1:11:36Yep.

1:11:40Scroll ke bawah, scroll, ya, scroll.

1:11:42Tuh, centang core web vital.

1:11:46Wow.

1:11:50Kebanyakan feature.

1:11:52Dev tools tuh kebanyakan feature.

1:11:56Kita malah, kita malah jadinya up to date.

1:11:58Jangan ditutup.

1:12:00Oh iya, jangan ditutup ya.

1:12:02Nah, itu berguna sekali

1:12:06kalau saya pakai itu

1:12:08nggak tahu LCP

1:12:10sama, sama

1:12:12apa tuh, layout shift.

1:12:14Jadi, scroll, scroll, scroll.

1:12:16Oh, kalau kita refresh,

1:12:18dia akan update ya.

1:12:20Wow, canggih ya.

1:12:26Sebenarnya buat topik ini di depan, tapi ya.

1:12:28Oh, iya kan kisi-kisi.

1:12:30Ya, bisa, bisa.

1:12:32Ini juga belum kita bahas kan

1:12:36dev tools ini kan.

1:12:38Belum.

1:12:40Kadang, deket-deket lagi bahas yang lain

1:12:42sambil buka dev tools.

1:12:44Cuma belum pernah yang spesifik.

1:12:46Iya, belum pernah spesifik.

1:12:48Oke.

1:12:50Ada lagi?

1:12:52Oh iya, saya mau nunjukin ini nih, bentar.

1:12:54saya mau nunjukin yang WSMB tadi.

1:12:56WSMB tadi,

1:12:58baru ketemu.

1:13:00Nah, ini

1:13:02udah kelihatan kan? Nah, ini adalah

1:13:04contoh

1:13:06aplikasi Android

1:13:08yang dengan codebase hampir sama.

1:13:10Dia bisa bikin yang versi webnya.

1:13:12Ini dari Jetbrain orang. Nah, ini.

1:13:16Tapi dia pakai canvas ini

1:13:18disini, jadi canvas bentuknya.

1:13:20Kelihatan kan kodenya ya?

1:13:22Oh iya, jadi canvas?

1:13:24Iya.

1:13:26Pertanyaan saya adalah

1:13:28aksesibility itu kan canvas?

1:13:30Iya.

1:13:32Kalau frame rate dan lain-lain

1:13:34bagus ya, di atas 100 kan?

1:13:36Aksesibilitynya gimana ya?

1:13:38Aksesibilitynya gimana? Itu pertanyaan

1:13:40juga sih. Karena dia

1:13:42compilenya jadi canvas.

1:13:44Kayaknya Flutter web

1:13:46juga kayak gitu, kayaknya ya?

1:13:48Enggak, Flutter kan jadi dom.

1:13:50Flutter jadi dom ya?

1:13:52Bukan canvas ya?

1:13:54Kelihatanya jadi dom deh,

1:13:56pernah lihat demo gitu.

1:13:58Oh iya, berarti saya yang salah.

1:14:00Oke.

1:14:02Oh ini tadi ya? Sudah habis ya?

1:14:06Tapi kita habis. Terakhir ini ya?

1:14:08Oke.

1:14:10Oke, kalau gitu.

1:14:12Ada komen, kalau minifight,

1:14:14jadi susah bacanya.

1:14:16Kalau minifight jadi susah bacanya.

1:14:18Kalau ada source map,

1:14:20bisa kembali.

1:14:22Jadi kayak di expand lagi.

1:14:24Di Chrome DevTools-nya

1:14:26kelihatannya yang

1:14:28versi belum minifight.

1:14:30Di sini ada nggak?

1:14:32Bahkan bisa didibug.

1:14:34Nanti kita harus belajar, kita harus

1:14:36nanti kita harus demo itu.

1:14:38Kepan-kepan deh episode.

1:14:40How to debug ya.

1:14:42Jangan pakai basalok aja.

1:14:44Termasuk kalau lagi

1:14:46development environment, misalnya kita

1:14:48masih lagi localhost di development,

1:14:50ya itu tadi, pakai kan

1:14:52bisa pakai break points,

1:14:54terus bisa ngeliat source yang

1:14:56source yang tadi author

1:14:58yang kode per komponen

1:15:00yang kita tulis.

1:15:02Betul.

1:15:04Kan console lock nggak cuma lock doang loh.

1:15:06Console tuh nggak cuma lock doang.

1:15:08Console error, console

1:15:10info, console

1:15:12warn.

1:15:16Banyak lah.

1:15:18Tenang aja. Kita bahas satu-satu.

1:15:20Oke.

1:15:22Oke, kalau gitu,

1:15:24kalau sudah, ada lagi mungkin

1:15:26yang mau disampaikan.

1:15:28Kalau nggak ada, mungkin kita tutup.

1:15:30Oh iya, buat yang mau usul topik,

1:15:32kan kita tuh, kita kalau lagi gini

1:15:34suka dapet ide topik random ya.

1:15:36Nah, mungkin teman-teman ada

1:15:38ide topik lainnya

1:15:40yang tiba-tiba kepikiran bisa dikirim

1:15:42ke situ.

1:15:44Ke bit.ly/ngobrolin web.

1:15:46Kita kadang-kadang juga

1:15:48suka keceplosan gitu kan

1:15:50ide apa, tapi habis itu kita lupa.

1:15:52Jadi harus tonton dulu videonya.

1:15:54Oh iya, kita mau bahas ini.

1:15:56Jadi bisa

1:15:58di apa, ya

1:16:00kita butuh bantuannya juga teman-teman

1:16:02tertariknya ke, lagi tertarik ke

1:16:04topik apa, siapa tahu kita juga punya

1:16:06ketarikan yang sama, jadi kita bisa bahas dan

1:16:08kita bisa belajar bareng-bareng.

1:16:10Atau bisa saran bintang tamu siapa?

1:16:12Bintang tamu?

1:16:14Bintang tamu sekalian dikasih kontak persennya ya.

1:16:16Mengajukan diri sendiri juga boleh?

1:16:18Oh iya, tentu boleh.

1:16:20Jadi

1:16:22biar makin seru, biar makin rame

1:16:24acaranya juga bisa bermanfaat buat

1:16:26teman-teman semua untuk update-update

1:16:28seputar dunia teknologi web.

1:16:30Sekian dulu untuk malam

1:16:32hari ini, terima kasih banyak

1:16:34buat semuanya yang sudah mendampingi

1:16:36dari awal sampai akhir.

1:16:38Kita ketemu lagi

1:16:40pada minggu depan hari Selasa jam

1:16:428.00 malam. Sampai jumpa

1:16:44bye-bye

1:16:46sebentar ini

1:16:48closingnya belum?