Ngobrolin Interop 2023 - Ngobrolin WEB ep22

1:39Nah, cocok sekali malam hari ini juga kita akan bahas

1:42Karena saya dan Ivan juga nggak tahu

1:45Makanya kita ceritahu sama-sama

1:48Aku pun taunya kebetulan

1:50Jadi sebenarnya nemu topik ini seru nih ceritanya kenapa bisa nemu topik ini

1:54Gimana, gimana ceritanya

1:55Kan pas IO Extended tahun lalu

1:58Saya ingin membawain tentang CSS, feature CSS yang baru

2:01Terus becah-becah artikel CSS

2:04Ya dari situ nemu bahwa beberapa feature CSS yang baru itu hasil dari

2:09Projek interop ini

2:11Ya, akhirnya bukan tentang interop juga sih

2:14Karena emang lebih membahas ke CSS-nya

2:16Tapi dari situ jadi penasaran ngecek dan ternyata wow, seru juga

2:20Ya, ini ada hubungannya sama implementasi fitur-fitur baru di browser ya

2:25Di berbagai browser ya

2:27Wah, ini ada Dita, Dita

2:29Dita, aduh saya tuh ketagian sekali sama kopi ujung, Dita

2:39Kopi ujung pandang, luar biasa enak sekali

2:43Nunggu event di ujung pandang lagi ya Pak

2:47Nunggu event lagi masih lama, November ya

2:49IO Extended aja

2:51IO Extended, IO Extended

2:54Kalau nggak GDG, GDG VITAP bisa juga kok

2:57Oh udah bisa ya yang web ya

2:59Bisa, bisa

3:01Boleh, boleh, boleh

3:02Tapi kita datangnya bareng kan biar bisa live bareng

3:04Oh iya, ngobrolin web live di makasar ya

3:08Kopi, di kopi yuk

3:10Kopi ujung, tapi nggak ada wifinya di sana

3:14Lekamah, lekamah

3:18Di pinggir pantai gitu ya, enak ya

3:21Oke, nah, ini ngomongin tentang interop

3:26Sebenarnya sempet apa ya, mungkin ada sedikit apa ya

3:31Dibahas sedikit gitu, di beberapa bagian di browser

3:34Kalau nggak salah waktu kita bahas browser

3:36Waktu kita bahas web Almanac juga ada ya bagian itu

3:39Walaupun kita tidak fokus kesana kan

3:41Jadi kalau

3:43Banyaknya yang di bahas kalau dulu Almanac

3:45Nah iya, jadi ringkasannya mas sebenarnya bisa dilihat di sini semua

3:50Jadi sejarahnya itu, scroll ke bawah sedikit

3:54Nah sejarahnya itu intinya tahun 2019

3:57Para vendor, atas dulu sedikit

4:01Ah atas, 2019 mana?

4:03Atas atas, introduction

4:06Oh introduction, oke

4:08Jadi sebelum ada ini semua, ini paling pertama ini tahun 2019

4:13Ada survey, cuma survey-nya itu kayak mendalam banget sih

4:19Jadi lebih mirip, justru lebih mirip studi ilmnya

4:22Yang ada metode penelitian blablabla gitu

4:25Tentang kebutuhan developer

4:28Nah terus dari studi itu juga

4:31Selain identifai hasilnya

4:34Terus mereka ngecek juga kompatibilitas

4:39Berdasarkan masukan dari studi itu

4:42Mereka ngecek itu browser compatibility report

4:47Jadi sejarahnya dari situ tuh

4:49Nah abis itu, abis 2019

4:52Selanjutanya di 2001, 2021

4:56Oh makanya namanya kompat 2021 ya

4:59Awalnya namanya kompat, baru sekarang jadi interop gitu ya

5:02Tahun 2021 tuh kayak pilot projectnya yang pertama banget

5:06Namanya kompat 2021

5:09Itu tadi di almanak juga

5:11Ya udah ada perwakilan semua vendor

5:14Dan ini sebenernya lumayan historis sih

5:17Karena baru pertama kali kan untuk kasus web API

5:22Semua vendor bisa kerja sama bareng

5:27Kan kalau misalnya kalau Chromium juga kan sebenernya banyak rusakannya

5:32Bukan cuma Google

5:33Tapi kan itu nggak termasuk Firefox dan Mozilla dan Apple

5:37Karena beda engine ya

5:39Sampai Samsung segala ada ya

5:42Iya semua yang punya semua

5:45Bisa ketemu semua

5:47Nah dia selalu muncul deh kayaknya itu kayak

5:50Inclusive technology consulting

5:52Wah ini software house ini berarti

5:56Software house tapi kayak kelas kakak lah

5:59Aim jago, aim jago

6:02Itu di nas frances apa ya?

6:04Iya kayaknya

6:06Nah intinya punya stakeholder-nya kayak ini yang lingkupnya paling luas lah

6:12Nah abis itu, balik ke yang si web almanak tadi

6:16Balik ke artikel almanak tadi

6:18Pilot projectnya ya si kompat 2021 itu

6:22Berdasarkan developer needs assessment itu

6:27Mereka milih beberapa hal yang perlu difokusin

6:31Namanya focus area

6:32Nah ini serunya

6:34Bukan cuma perkara feature-nya ada atau nggak

6:38Jadi ternyata nggak sesimpel

6:40Misalnya Firefox sudah ada grid Chrom belum

6:44Atau apalah Safari belum

6:45Tapi kadang ada yang lebih naas lagi sih lebih nggak enak

6:48Jadi misalnya sama-sama udah support nih

6:51Sama-sama udah support feature tertentu

6:53Tapi behavior-nya tuh bisa lain-lain

6:57Kayak misalnya contohnya dulu pernah ngalamin sih yang aneh

7:03Jadi misalnya flex, ada flexbox nih

7:06Children-nya itu behavior-nya bisa lain-lain

7:10Kalau image kan selama ini image dirender dengan proporsional kan

7:14Walaupun kita nggak secara spesifik misalnya kasih aspect ratio atau width dan height

7:19Ya kalau kita ngerender image by default itu proporsional

7:24Nah dulu tuh sempat kalau image itu adalah child atau apa

7:29Anak isi dari flex container itu kayaknya di Safari deh

7:34Dia melar sendiri jadi ngisi parent-nya

7:38Sementara di browser lain nggak

7:40Nah itu kan ganggu banget ya

7:42Jadi itu nggak bisa diakalin pakai feature query

7:45Karena sebetulnya support, bukan masalah flexbox disupport atau nggak

7:49Tapi behavior-nya suka lain-lain

7:51Berbeda

7:52Nah ini project ini mereka itu para vendor itu mulai nyamain

7:58Jadi dengan cara ini seru juga sih

8:01Mereka tuh bikin ngerjain spek dan beneran ngulik banget

8:06Kalau begini behavior-nya harus gimana

8:08Kalau begitu behavior-nya harus gimana

8:10Berarti sekaligus QA-nya langsung dibuat ya

8:15Iya, ada testing-nya kan testing shoot-nya

8:19Test base, semua test base

8:21Jadi semua broser akan masuk ke test ini

8:27Terus dicek dia berapa yang fail, berapa yang test gitu ya

8:30Harus sama behavior-nya sesuai

8:33Jadi kadang, jadi di report-nya itu temen-temen bisa becah sendiri

8:38Kalau iseng dan kelebihannya

8:40Jadi kayak beberapa kasusnya adalah yang paling jelas kan

8:44Ada yang disupport, ada yang nggak

8:46Itu paling jelas feature-nya disupport atau nggak oleh browser

8:49Terus kita di behavior-nya, spesifikasi behavior-nya apakah salah

8:54Jadi kan sebetulnya semua di web API itu kan sering kita bahas ya

9:00Berdasarkan spesifikasi

9:02Jadi sebetulnya ini kan bukan milik Google atau milik Apple atau punya siapapun

9:07Tapi spesifikasi bersama yang diimplementasikan oleh masing-masing vendor

9:12Nah, jadi yang penting kan kalau spesifikasinya mungkin ternyata kurang tepat

9:17Misalnya jadi salah paham

9:19Salah paham atau diimplementasikan dengan berbeda oleh browser

9:23Nah, itu mereka ngerjain itu

9:26Jadi harusnya gimana, spesifikasinya dibenerin

9:29Atau kadang ada kasus spesifikasinya kurang jelas

9:32Nah, kurang jelas berarti kan di detail-in

9:35Nah, mereka ngerjain, yang dikerjain intinya seperti itu

9:39Oh, berarti Interop ini seperti program dari W3C atau konsorsium itu

9:50Untuk lebih jauh lagi ya, berarti nggak cuma tulis spesifikasi feature-nya

9:56Tetapi juga bersama-sama

9:59Bukan, bersama-sama untuk menentukan fokus area-nya

10:06Dan dari fokus area tersebut dikembangkan user case testing-nya bersama-sama

10:13Jadi behavior-nya bisa sama semua gitu antara browser ini

10:21Iya, tujuannya begitu bintinya

10:24Oh, jadi kalau sebelum ini kan browser itu bekerja sendiri-sendiri

10:30Ada yang implementasi grid, ada implementasi flexbox, ada implementasi spek rasio

10:36Beda-beda sendiri gitu kan

10:38Begitu kita mau coba tiga-tiganya, nggak jalan di ketiga browser ini

10:42Walaupun yang satu ada grid, yang satu ada flexbox, yang satu ada spek rasio

10:46Atau mungkin jalan, tapi itu beda-beda lain-lain

10:49Dengan adanya ini jadi lebih kompak gitu ya

10:52Oh, kita ngerjain ini dulu nih, bagian fokus area ini dulu kita beresin

10:56Sebelum kita ke fokus area yang lain

10:58Jadi, kalau pun ada teman-teman developer yang mau develop

11:02Misalkan menggunakan fitur terbarunya dari HTML atau CSS

11:08Itu setidaknya di browser-browser mainstream udah bisa jalan dengan

11:15Dengan tampilan yang kurang lebih sama gitu ya, mendekati sama lah gitu ya

11:22Nggak berbeda-beda behavior-nya gitu ya

11:26Nah, terus kalau keuntungan yang...

11:29Sebenarnya diuntungkan itu developer-developer kayak kita ini ya

11:33Dari hasilnya ini ya

11:35Jadi keuntungan praktikanya sih gini

11:39Misalnya kita nih lihat nih kalau di demo-demo atau di video kan

11:42Wow, great, wow, apalah gitu, fitur-fitur yang keren

11:46Cuma kalau dikerjakan sehari-hari buat nerapin

11:49Aduh, males lah, ntar malah nama-nama masalah kan

11:52Nanti malah kalau di browser A bisa, B nggak bisa

11:56Kalau kita nerapin di project yang di production

11:59Kita ragu-ragu kan, kita takut karena nggak ada confidence

12:03Dan kita mikir, "Ah, paling Mas Sintar 3-4 tahun lagi baru bisa"

12:07Nah, dengan project ini ngurangin kasus kayak gitu

12:11Kita bisa punya confidence yang lebih baik dalam

12:15Kita lebih percaya lah kita mengadopsi API yang lebih bagus

12:20Yang lebih baru, behavior-nya bisa sama

12:23Dan ini kan juga bagus ya, maksudnya jadi ngurangin akal-akalan pakai JavaScript

12:27Karena misalnya CSS udah ada feature yang memadai

12:31Jadi secara nggak langsung bagus buat performance juga

12:37Oke, pada 2021 ini 100% masih berkutip dengan HTML, spek dan CSS

12:47CSS semua malah ya

12:49Ini emang browser feature semua sih, jadi banyak kan CSS

12:53Tapi kalau mulai 2022 udah ada masuk elemen

12:56Elemen sama, kalau 2023 kayaknya udah masuk custom elemen juga

13:012022-2023, 2022 ada itu tuh, dialog elemen

13:09Ada native HTML elemen

13:12-2023? -2022

13:15-Oh, 2022, dimana? -Scroll

13:19-Dialog? -Dialog, iya

13:24Nah, di 2022 ini udah mulai ganti nama, jadi interrupt

13:29Karena emang fokus kayaknya, sebetulnya isinya mirip-mirip

13:33Maksudnya spirit-nya dan intinya kerjanya ngelanjutin yang compact itu

13:38Cuma kalau compatibility itu mungkin kelihatannya implikasinya kan semacam backwards compatibility gitu ya

13:46Kalau ini kelihatannya mau menetik beratkan interoperability

13:51Kayak saling bisa digunakan, bisa dioperasikan antara browser

13:58Yang keren tuh bisa melihat hasil test-nya nih, jadi dari hasil spek-nya

14:03Terus hasil test-nya, misalnya Safari itu baru support 90%, itu contohnya

14:11Terus yang terakhir di tahun...

14:16Kayak gini kan modelnya kan?

14:19Ini kan hasil test-nya grafik ini kan per versi itu ceritanya

14:29Kalau kita lihat dari grafik ini berarti per September 2022

14:37Dialog ini hasil test-nya si Firefox itu masih di 80% pas, belum 100%

14:44Yang sudah pas di terakhir itu si Chrome sama Edge tuh

14:49Kenapa Safari tiba-tiba ada turun terus naik lagi ya?

14:54Ngembak, berarti ada fitur yang lain dibikin ngembak

14:58Regression kali

15:00Regression, iya

15:02Di upper level juga manusia

15:09Nah, 2022 tuh fiturnya kayaknya lebih luas ya jadinya, terus lebih banyak jelas

15:14Jadi ini carry over gitu sih, jadi kelihatannya yang dikerjain di 2021

15:19Kalau belum selesai lanjut ke 2022, lanjut ke 2023

15:25Nah, 2022 ini area-nya apa oh, ini ada 15 area of focus ya?

15:30Nah, ini yang paling, 2022 itu mulai yang kelihatannya baru mulai yang niat lah, kayak 2021 itu kayak pilot semacam pilot project-nya gitu

15:41Nah, 2022 baru

15:43Wow, macam viewport ya

15:46Keren ini

15:48Biasanya kan kita pakai cuma itu aja, viewport height kan, 100% viewport height

15:53Dan ini kan dulunya nggak bisa nih, inget banget nih, dulu udah di request feature ini kan kayak udah di request 6 tahun, 7 tahun gitu

16:02Ya udah bertahun-tahun lah, pokoknya begitu, begitu Apple ngeluarin apa, fungsi kalau di scroll toolbar-nya ilang semua kan langsung request feature kayak gini

16:12Cuma dulu kan Conan nggak bisa lah, kenapa? Karena performance dan lain-lain

16:16Jadi orang biasanya akal-akalan pakai JavaScript, pakai event listener kan

16:20Padahal itu kan ya nambah-nambahin kerjaan main thread juga, karena dia harus ngupdate CSS-nya melalui JavaScript

16:33Nah, sekarang kita udah nggak harus akal-akalan nguntir kayak gitu lagi

16:38Udah disupport belum gitu ceritanya, itulah makanya kita liat hasil tesnya

16:43Justru itu, makanya kita ngikutin ini

16:45Iya, betul-betul

16:48Terus ini 2022 sih paling seru

16:53Mereka melihat state of CSS banyakan ya, karena memang ini hubungannya sama HTML dan CSS ya

16:59Kalau JavaScript kan soalnya beda lagi ya

17:01Itu kan punya juga Eklatscript

17:04Iya, punya mesin-mesin masing-masing juga kan sebenarnya, tapi mereka secara kompatibilitas mungkin tidak terlalu berbeda jauh

17:19Dibandingkan implementasi HTML/CSS di browser masing-masing mungkin ya

17:24Jadi mereka nggak butuh yang model kayak interrupt gini kali ya

17:27Mungkin butuh, tapi mereka punya sendiri kali ya

17:31Maksudnya, atau mungkin belum ada yang insect

17:35TC39 bukan ya?

17:37Itu kan TC39 kan urusan spek

17:41Oh ya, implementasi nggak ada ya

17:44Iya, berarti belum ada, interoperability belum ada

17:48Atau mungkin masalahnya nggak serumit yang CSS ini kan

17:52Kalau rendering UI ini kan bisa rumit banget kan

17:55Karena UI, jadi kelihatan kalau HTML, kayaknya JavaScript ada perbedaannya

18:01Kayaknya perbedaan misalkan, perbedaan floating point misalkan

18:04Ya, performance, floating point, dan lain-lain itu ada

18:08Di setiap browser itu ada, ada masalah sendiri-sendiri, cuman kayaknya nggak terlalu terlihat lah gitu ya

18:14Dan belum butuh juga mungkin ya

18:17Dan maksudnya developer kayaknya lebih butuh, apa skala kebutuhannya tuh kayaknya jauh lebih butuh ini hal-hal practical kayak gini kan

18:26Nah, ini ada pertanyaan nih, keren juga ada dialog, apakah dialog akan menggantikan model yang pakai div?

18:32Bisa jadi, bisa jadi

18:35Iya, nanti ke depannya kan tujuannya gitu, biar ada yang di support oleh native

18:40Terus satu-satu keuntungannya kan, dia tuh kayak udah support misalnya buat accessibility nih kan harus focusable ya

18:47Harus pas kita klik tab, ya harus bisa difokusin

18:52Kalau div kan by default, kegunanya bukan untuk itu

18:55Tapi kalau dialog, ya apa, udah otomatis ada feature itu, kita nggak usah nambahin sendiri

19:02Itu cari apa, videonya Adam Erjel ya, itu ada kok yang demo dialog, apa ya namanya, GUI challenge ya, nama seri videonya

19:12Oh iya

19:13Keren sih itu

19:14Oh keren, oke oke, ya menarik tuh, apa videonya

19:18Coba mana ya, GUI challenge dialog

19:21Nah ini, saya konteksnya agak kurang dapat, kenapa mereka nggak update DOM API juga biar codingnya semudah pakai JS Framework?

19:30Yang ini mengomentar yang bagian...

19:33Oh custom element apa ya maksudnya

19:36Custom element ya, udah ada kan custom element

19:40Maybe

19:42Oh, mungkin

19:44Kalau saya custom element, ada yang di interrupt 2023 juga deh

19:49Iya, ada ada

19:51Component

19:53Oh ini, building dialog component, ini videonya, bukan

20:01Ada artiklenya, ada videonya, nggak usah nyetel video sih, liat artiklenya aja

20:08Oh ini, ini modelnya ya, oh wow

20:12Keren sekali

20:15Nah lagi-lagi kita lihat gini kan sebetulnya biasanya, wah bagus, tapi ya tetap aja nggak pakai di kehidupan sehari-hari

20:24Tetap aja pakai apalah library eksternal yang nested div, di dalam div, di dalam div

20:31Betul

20:32Nah karena kita nggak yakin apakah semua browser bakal support

20:37Nah diharapkan sih dengan project interrupt ini, ya walaupun nggak sekarang, cuma maksudnya dalam waktu dekat, dalam tahun ini, di akhir tahun misalnya kita udah mulai bisa pakai

20:47Jadi lebih intinya, interrupt ini menyatukan daripada setiap browser itu sporadik dengan tujuan bisnisnya sendiri

21:00Akhirnya secara konsursi, ayo bersama-sama kita fokus tujuan bersama gitu ya

21:06Ya jadi udah perang browser lagi ya

21:11Ya mungkin perang-perang dikit, cuma minimal kalau yang untuk hal-hal yang kepentingan banyak orang, kepentingan developer lah, stakeholder lah, bahkan end user ya minimal bisa kompak dikit lah ya

21:24Ya lagi pula kan

21:26Kan bisa ada fitur lain

21:28Ya lagi pula tuh kalau orang-orang yang kerja di browser biasanya tuh pindahnya muter-muter aja, nggak jauh-jauh, karena yang bikin browser siapa sih, berapa banyak sih gitu

21:38Cuma tiba-tiba ada browser engine baru, terus dibanjak semua, kayaknya cuma nggak mungkin nih, kayak apa, ya mungkin aja

21:48Beberapa ada kan, ada yang di hire sama Brave, ada yang di hire sama Arc

21:54Tapi Brave kan Chromium juga

21:59Itu bukan engine baru sih

22:02Belum-belum, pasti ada sih

22:06Tergantung ini aja, penting kalau ada yang baru atau nggak

22:10Nah itu 2022, fokusnya kan ke-15 tadi ya

22:142023 atau nggak, '6', mana-mana

22:242022 dulu, casket layer ini apa, nggak tahu

22:28Oh casket layer ini, seru ini

22:31Jadi kita kan kalau dulu pakai SCSS nih, SAS atau SCSS, bisa nesting kan, nah ini tuh bisa semacam nesting, atau bukan nesting sih kalau ini

22:46Buat ngatur prioritas, jadi perkara mana yang menang, specificity, nah ini ya, paling susah ngomongnya

22:54Yang itu, important-important semuanya

22:57Jadi biar nggak harus important-important atau nggak harus pakai ID

23:01Ini kita bisa nentuin, prioritas berdasarkan pengelompokan

23:09Jadi kalau dulu, jaman dulu SAS itu kan ada misalnya base, kita mengimport kayak base layer

23:15Terus misalnya komponen atau modus

23:19Terus bisa dimming, biasanya yang terakhir yang harus menang, karena dia soal warna atau font

23:26Nah, ini didukung secara native, jadi kita bisa mengelompokan prioritas berdasarkan yang kita define sendiri

23:36Ada pangkatnya ya, masing-masing SAS property itu ya

23:40Tingkat kekuatan

23:42Tingkat kekuatan

23:44Ada color space yang biasa dipakai untuk model kayak calculate

23:50Terus ada color mix dan contrast

23:53Gabungkan macem-macem warna

23:56Terus yang ketiga kita bahas viewport tadi udah kita bahas, scrolling, scroll snap, scroll behavior

24:03Nah ini lumayan familiar juga ya

24:05Ngatur gimana cara kita scroll di web browser kan

24:11Subgrid, nah subgrid ini berarti

24:14Scroll snap itu serunya kita bisa bikin karusel, scroll snap kan

24:19Biasanya kan yang standar lah, misalnya kita mau memindahkan banner 1 ke banner 2

24:26Itu kan dulu harus dihitung pakai JavaScript ukuran bannernya berapa, harus loncat berapa pixel

24:32Nah, kalau ini udah otomatis dihandle oleh algoritma rendering CSS objek modelnya

24:39Wah, menarik

24:41Ada subgrid, subgrid ini berarti lanjutan dari grid ya

24:45Grid di dalam grid nih berarti

24:47Iya, jadi biasanya kan kalau grid cuma bisa buat ngatur si direct children-nya atau elemen yang pas di dalamnya

24:55Padahal kan kalau prakteknya ga mungkin, ya sulit kalau kita harus ngatur semua flat

25:01Jadi kayak cuma satu level ke bawah tuh suka agak sulit kan

25:05Kadang kita punya apa, penglompokan sendiri

25:09Jadi ini bisa buat ngatur elemen cucu atau grand children-nya

25:15Jadi isi di dalam child-elemen

25:19Okay, investigating effort

25:23Oh, 15-nya apa? Tadi baru segitu

25:26Atas itu

25:28Udah sampai subgrid, oh ini kali ya

25:32Typography, webcompat

25:35In addition to 15 focus area interrupt include investigation effort

25:42Mr. Success in tracking progress

25:46Jadi dia pakai weblock focus dashboard ya

25:50Ya webnya ini, jadi salah satu effortnya untuk key area-nya membangun web yjp.fy ini

25:58Itu dashboardnya tuh kalau kita pengen ngulik dan ngikutin, ngikutin perkembangannya

26:06Tapi ini baru 10 item loh, 5 lagi mungkin ga sempat dikerjain ya

26:10Itu bawa ya, jadi dia carry over

26:122021?

26:14Ya carry over

26:17Ya ada gitu ternyata, 2021 kan cuma 5 nih

26:20Terus kan belum 100% semua lanjut, ditambahin total jadi 15

26:28Ujung-ujungnya nambah terus, ga kelar-kelar

26:31Terus, 2023 banyak, 26 jadinya

26:34Mana 23, ini ya 2023, focus area-nya ada 26

26:4026

26:41Carry over lagi ya, tambah 11

26:44Tambah 11

26:47Border image, color space, container query

26:51Ini border image nih

26:54Border image sebut apa sih, belum pernah coba

26:57Buka aja coba

26:59Border, biar bisa load image

27:04Oh terus kayak gradient gitu ya

27:07Kalau gradient kan kita ini sendiri kan pilih warna

27:10Kalau ini ya mungkin bisa dari image

27:13Misalkan kita punya pattern gitu ya, pattern apa gitu

27:17Kayak fractal atau apa, dijadiin border gitu

27:21Kalau dulu kan border cuma bisa warna kan

27:23Bahkan kalau gradient pun itu sebenarnya diakalin kan

27:28Diakalin pakai background ya

27:30Iya, jadi sebenarnya dia background

27:32Terus abis itu ditaruh lagi div di tengahnya, dikosongin kan

27:35Jadi ada bolongan gitu kan

27:37Sebenarnya

27:38Sudu, apa sudu ya men

27:40Sudu selected

27:41Color space, ini color space yang tadi ya

27:43Container query masih

27:45Flexmoves juga masih

27:47Ada form, ada grid

27:49Has, ini juga lumayan keren ya

27:53Iya, gue suka pake ini

27:55Has

27:56Di CSS ya

27:57Selector buat mentargetkan parent ya

28:01Parent atau element sebelumnya

28:05Kita kan pengen tahu

28:07Gimana caranya supaya itu si parentnya punya style

28:13Kalau childrennya punya ini tuh, spesifik

28:16Paling sering itu kan

28:17Misalnya di dalam form ada yang error

28:20Berarti backgroundnya harus kayak merah

28:23Dikasihkan merah luarnya

28:25Menu yang ada garis bawahnya yang mana yang aktif

28:28Kayak gitulah

28:30Pernah dapat kasus dan pakai has menyenangkan

28:34Oh, ini damar lumayan advanced nih

28:36Paling nungguin scroll timeline

28:38Oh, biar bisa bikin timeline ya

28:40Yang di 2022 tadi ya

28:42Scroll timeline coba lihat

28:44Gimana sih scroll timeline

28:46Scroll link animation

28:48Gak ada

28:49Scroll behavior

28:50Ada

28:51Mana

28:52Scroll time, mungkin bagian dari

28:53Oh, gak ada? 2023 apa?

28:55Ada nih

28:56Gak tahu

28:59Practically use CSS

29:02Yaudah, Googling scroll timeline aja lah

29:05Googling scroll timeline

29:07Seru nih

29:08Scroll timeline

29:10Scroll link animation

29:13Oh, ini

29:14Oh, nice, disambungin sama CSS animation

29:18Oke

29:20Ini implementasinya buat apa nih?

29:22Damar, mungkin boleh info

29:25Mau dipakai buat apa sih?

29:27Penasaran bentuknya gimana?

29:28Ini ya?

29:29Bikin animasi ya?

29:30Coba

29:31Scroll vertical bar to see the animation

29:34Oh, jadi itu loh

29:36Biasanya kita kan harus pakai intersection observer

29:39Kayaknya ya, kalau dia on screen

29:41Kita trigger class untuk animate

29:44Ya kan, biar kalau masuk on screen

29:47Dia fade in lah

29:48Atau dia, nah, dia muter kalau on screen

29:52Nah, ini kelihatannya di handle dari CSS juga

29:55Oh, jadi kayak ini ya

29:57Kayak, apa, ada

29:59Kalau dulu kan misalkan landing page

30:01Kita scroll, dia ada animasi gitu ya

30:03Model gitu ya

30:04Masuk on screen, dia fade in

30:07Atau apalah, muter atau ngapain

30:09Nah, ini jadi gak harus bergantung JavaScript lagi

30:14Oh, morning CSS ya berarti ya

30:18Mantap

30:19Animasi-animasi sekarang CSS banyak yang udah bisa ya

30:23Canggi-canggi ya

30:24Itu yang di atas tuh

30:26Scroll yang di atas tuh

30:28Ya gak, itu yang scroll yang merah

30:30Makin di scroll ke bawah, makin damar

30:32Kalau dulu harus pakai JavaScript itu

30:36Oh, sekarang udah di CSS ya?

30:39Iya

30:40Diitung document height

30:44Terus dia punya scroll

30:46Scroll position

30:48Dikurangin

30:49Harus matematika lah

30:52Kalau ini

30:53Terus sekali ya

30:54CSS

30:55Oh, dulu kan pakai, ada JavaScript

30:58Laboratinya tuh dulu

31:00Lupa gue

31:01One second linear forward progress

31:03Gitu doang

31:04JavaScriptnya gak ada

31:06Iya, dulu pakai blablabla

31:09JS scroll timeline

31:11Iya

31:12Ya, polyfill lah tetap

31:14Polyfill ya

31:15Nggak, itu kan bukan polyfill

31:17Oh, polyfillnya kalau browsernya gak support ya

31:20Kalau mau

31:21Iya, kalau mau pakai polyfill tinggal diambil

31:23Atau sebelum ada, sebelum ada fitur ini

31:26Jadi harus pakai JS mau gak mau kan

31:28Iya

31:29Terus ini kan sebenarnya progressive enhancement ya

31:31Tergantung produknya juga

31:33Tapi sebetulnya gak ada animasi gitu juga gak apa-apa kan

31:36Gak, iya tidak mengurangi, tidak merusak

31:40Tidak mengurangi rasa hormat

31:43Tidak mengurangi rasa hormat

31:45Kalau you pakai browser lawas ya udah gak apa-apa

31:48Gak dapat, gak dapat feature UI lucu-lucu gitu

31:52Tapi kalau pakai browser baru ya dapat

31:55Dapat fancy UI

31:58Wih, CSS masking asik

32:02Gimana nih, coba

32:05How about method to apply image effect

32:07Apply image effect

32:08As you might see in a graphic application using CSS

32:12Support for various masking properties is patchy

32:16Making masking harder to use than it should be

32:19Udah ada tapi sulit, sulit dipakai

32:21Article about image masking

32:24Coba buka artitulnya deh

32:26Browser compatibility

32:31Webkit, mask image, url, mask image, url

32:35Oh image ke image ya

32:38Masking with an image

32:40Mana dia masking, oh itu

32:43Jadi sekarang avatar-nya bisa gak cuman bullet doang

32:46Bisa rounded, bisa bintang

32:50Kalau bullet mah border reduce 50% ya

32:54Oh jadi ini ada 2 image ya

32:56Image pertama itu yang ini

32:58Yang kedua itu yang gambar bintang

33:01Digabungin jadi masking gitu ya

33:04Oh ini kayak kalau graphic application, photoshop dan lain-lain

33:11Bisa ya itu pakai layer kan biasanya

33:13Betul

33:15Ini bisa pakai CSS

33:19Offscreen canvas

33:22Pointer and mouse event, web codecs

33:25Pointer and mouse event ini bagus juga ini, seru

33:28Jadi kalau jaman dulu kan touch screen tuh

33:31Belum terlalu umum ya

33:34Jadi kan pointer events

33:36Mau click dari mouse, mau click dari touch screen

33:40Itu masih dianggap yang fire

33:42Event yang jalan adalah pointer event

33:45Padahal kan sebetulnya kebutuhannya beda banget ya

33:48Misalnya contohnya kalau mouse

33:50Bisa di mouse over, munculin tooltip

33:52Misalnya bisa di hover

33:54Kalau touch kan enggak

33:56Nah itu tuh selama ini kan

33:58Workaround-nya pusing banget, hacky banget

34:00Buat ngakalin, buat cari tahu

34:03Apakah suatu pointer event itu dari mouse

34:07Dari device macam mouse

34:09Atau dari touch

34:11Nah ini keliatannya mau di improve

34:13Di bidang itu untuk membedakan

34:16Antara mouse sama touch

34:18Ada cara aja ya

34:21Ya kan dia yang bikin berapa suaranya

34:24Kayak bikin feature baru

34:26Berarti ya sudah langsung ke low level ya

34:30Bisa tahu dari cc

34:32Justru mereka kan dari cc++-nya atau apa

34:35Ada web codecs untuk video audio

34:40Sama ada web component

34:42Coba coba web codec-nya apa sih yang baru

34:44Oh belum tahu, oh ini cuma kayak fokus

34:47Untuk nambahin web codec yang baru ya berarti ya

34:49Dia pakai apa ya

34:52Pilihannya web codec-nya apa

34:54Kan ada yang baru kan api 1 gitu-gitu kan

34:57Stream dan apa kayak transformer gitu ya

35:00Yang kalau kita streaming video

35:02Bisa nge-stream

35:05Mentahannya lah intinya

35:07Kita lihat itu yang di www.wpt.fi-nya

35:12Apa aja ya

35:14Media streaming, media recording, media source

35:18Dan web RTC

35:20Bukan itu kan api-nya sudah ada

35:25Sekarang untuk codec-nya yang baru apa

35:30Belum, belum tahu

35:32Ini coba codec in action

35:36Tapi apa yang codec-nya

35:39Oke ada web component juga

35:42Yang sudah mulai tidak terdengar

35:45Walaupun sebenarnya

35:47Karena mau di improve

35:49Kita pernah bahas ini ya

35:51Kita pernah bahasa

35:52Ya shadow dong

35:54Oh ini sebenarnya nggak nambahin feature baru

35:58Tapi improve interoperability of

36:01This foundation

36:04Terus sudah ada itu tuh dashboard-nya tuh

36:11Iya ini sebabnya kenapa

36:15Salah satu sebabnya kenapa

36:17Fitur-fitur seperti ini

36:20Web component dan lain-lain ya

36:21Fitur-fitur web itu agak lama developnya

36:24Karena dia harus memikirkan semua browser

36:27Beda sama kalau kita bikin library

36:30Library bisa aja bilang

36:31Oh ini ya

36:32Hanya bisa berjalan di sini gitu

36:33Atau pakai polyfill gitu ya

36:35Pokoknya web component ini kayaknya

36:37Berkembangnya kok lambat banget gitu

36:38Apalagi

36:39Kalau temen-temen ada yang udah pakai

36:41Yang benar-benar vanilla web component itu kayak

36:44Boilerplate code-nya banyak kan

36:46Kita butuh library atau

36:48Facebook di atasnya lagi kayak

36:50API-nya kurang ramah

36:52Kayak stencil JS atau

36:55Ada skeen ada macem-macem ya

36:58Nah

36:59Lead juga yang paling ini ya

37:01Yang salah satu yang

37:02Keluarannya dari Google juga

37:04Iya jadi kayak

37:05Masih butuh ada layer abstraksi di atasnya

37:08Nggak bisa langsung vanilla

37:10Itu

37:11Itu sebabnya

37:13Ya ini

37:14Masalahnya

37:15Harus didukung di semua browser

37:17Cuma kan dia bikin bagus-bagus buat Chrome

37:20Tapi abis itu dibuka di Firefox atau di Safari

37:22Nggak bisa

37:23Nggak jalan

37:24Nggak jalan

37:25Jadi mereka

37:27Bikin apa low-level API-nya

37:29Ya temen-temen yang lain yang nggak sabaran

37:32Dalam tanda kutip

37:33Ya silahkan bikin framework di atas si web component ini

37:35Dashboard-nya

37:38Nah ini

37:39Dashboard 2023 ya

37:40Mari kita lihat

37:43WPT FYE

37:45WPT FYE

37:47Web Platform Test

37:49Kayak namanya si Eka

37:51Eka FYE

37:52Domain

37:54TLD

37:56Favorit

37:57Murah-murah ya

37:58Nah ini dashboard-nya bagus banget sih

38:00Seru banget

38:01Temen-temen bisa lihat di sini

38:04Kayak masing-masing fokus area-nya apa aja

38:06Dan angka-angka itu

38:08Yang ijo tuh 87

38:1076 87

38:11Itu adalah

38:12Prosentase test yang pasing

38:14Jadi ini sebetulnya

38:16In a way kayak test driven development juga

38:18Cuma

38:19Kalau yang kita pernah

38:21Kita sering bahas dulu kan

38:22Test driven development untuk aplikasi web

38:24Nah ini test driven development

38:26Buat

38:27API browser

38:28Atau API web

38:30Iya iya iya

38:31Jadi

38:32Tapi kalau lihat di sini

38:34Si Safari kayaknya

38:36Tidak tertinggal jauh ya

38:38Justru malah Firefox Nightly yang lebih

38:40Rendah ya

38:41Ya ini mungkin kan

38:42Overall ya keseluruhannya

38:43Coba cek yang stable deh

38:45Oh ya stable ketinggalan ya

38:47Enggak, masih lebih menang daripada Firefox

38:49Lisi satu

38:51Lisi satu

38:53Nah terus persenanya

38:55Persenanya dari mana aja kan bisa dilihat tuh

38:57Di sebelah kanan

38:59Dan ternyata ada

39:01Masing-masing kan ada karakternya sendiri

39:03Misalnya nih

39:04Firefox dari dulu banget tuh

39:06Kalau soal yang CSS dan layout-layoutan

39:08Itu kan yang paling maju

39:10Mereka grid dulu

39:12Chrome belum adopsi

39:14Udah ada grid

39:15Dan dulu DevTools-nya grid-nya yang

39:17Yang udah ada grid lines-nya bagus itu

39:19Ingat sih dulu Firefox DevTools duluan

39:21Baru belakangan

39:23Habis itu baru Chrome DevTools

39:25Ya karena memang berguna buat developer

39:27Chrome juga adopsi

39:28Enggak tahu

39:29Safari adop juga atau enggak

39:31Itu Firefox

39:33Terus sedangkan kalau si Safari kan

39:35Punyanya Apple ya

39:36Apple device-nya terkenal

39:38Feature warnanya

39:40Apalagi yang visual-nya kan kuat

39:42Jadi feature-feature yang berhubungan sama

39:44Warna itu biasanya

39:46Safari itu maju

39:48Bagus

39:49Kalau Chrome misalnya di capability

39:51Yang apa

39:53Feature-feature baru yang breakthrough

39:55Ya itu

39:59Masih ada tuh kayak off-screen canvas

40:02Safari kagak peduli masian

40:04Sama WebCodec

40:07Si Chrome

40:09Maju tak dentar

40:11Kalau yang

40:13Feature-feature di capability gitu

40:15Chrome kan emang

40:17Ya emang spesialisasinya disitu

40:19WebCodec tuh yang lain 1,3

40:21Iya

40:25Belum mau gitu

40:27Nah itu subgrid lah

40:29Subgrid

40:31Subgrid malah

40:3598% di Firefox

40:37Safari ya

40:3998%

40:41Tapi grid-nya sendiri

40:45Walaupun Firefox lebih dulu

40:47Tapi sekarang Safari

40:49Sudah mulai memimpin

40:51Beda 2%

40:53Tapi berarti grid udah lumayan aman ya

40:55Karena ini kan udah dari yang 2021

40:57Jadi kita udah bisa

41:01Confident lah pede pake grid

41:03Udah dari 60%

41:05Udah dari 60%

41:07Kayaknya form

41:09Itu form

41:11Forms-nya coba

41:13Ya klik aja coba

41:15Mungkin bagian apanya

41:17Gak ada

41:19Gak ada dijelasin

41:21Form-nya apa ya

41:23Ini tadi yang 2023

41:25Fokusnya ke forms

41:27Coba deh atas dikit

41:31Scroll atas dikit

41:33Projek dokumen

41:35Bukan bawah dikit

41:37Nah

41:39Dari forms

41:43Forms

41:45HTML elemen represent

41:47Dokumen section blablabla

41:49Coba liat test-nya apa

41:51Kalau elemen form-nya

41:53Kan udah ada nih

41:55Yang mau di test apanya

41:57Oh mungkin kesamaan ininya kali

41:59Behaviour

42:01Behaviour-nya misalkan

42:03Input type date misalkan

42:05Contohnya dog down aja

42:07Safari beda banget kan

42:09Beda sama android

42:11Combo box

42:13radio button

42:15Input

42:17CSS dong

42:19CSS-nya juga disamanya sama dia ya

42:21Ya tampilannya

42:23Diusahkan semirip mungkin

42:25Antar browser

42:27Atau bukan dibikin test-nya

42:29Harus pass

42:31Gitu

42:33Bentuknya kayak apa, gak tau sih

42:35Ini test-nya kayak gimana ya, ya penasaran

42:37Appearance button

42:39Ada gak sih ini, keliatan gak

42:41Oh gak ada

42:45So details

42:47Ada yang bisa diliat press-nya sih

42:49Oh atas atas, run in your browser

42:51On wpt.live

42:53Tuh atas, bawah dikit

42:55Ini

42:57Oh ini tujuan akhirnya seperti ini

43:01Bentuknya

43:03Ya mungkin ada

43:05Assertion-nya

43:07Kalau yang CSS sih ada assertion-nya

43:09Jadi kayak you should see

43:11Green box misalnya

43:13You should see red border

43:15Atau semacamnya

43:17Gak ada ini ya

43:19Gak keliatan

43:21Oh dulu

43:23Ya itu HTML biasa malah sih

43:25Iya makanya

43:27Yang menarik lagi dari

43:29Projek ini

43:31Semua test suit-nya itu ya

43:33Gak pakai library

43:35Atau framework apapun

43:37Karena tujuan jalan emang

43:39Ngecek behavior browser

43:41Gak ada

43:43Sebisa mungkin gak pakai

43:45Apa-apa sih

43:47Jadi bener-bener unik ya

43:49Ya kalau misalnya ini

43:51Udah passing kan kita mau bikin

43:53UI library atau framework

43:55Apapun di atasnya ya bebas

43:57Cuma kita udah confident di

43:59Level vanilla, level browser

44:01Nah ini secara keseluruhan ya

44:05Untuk interop

44:072022

44:09Berarti ini

44:112023 itu

44:132023 ya

44:15Ini live

44:17Ya live ya

44:19Live-nya

44:21Safari masih paling atas

44:23Untuk error-nya

44:25Ini error ya?

44:27Iya ini error

44:29Browser specific failure graph

44:31Semakin di bawah

44:33Semakin bagus

44:35Jadi yang paling bagus adalah Chrome kan

44:37Yang paling banyak adoptinya juga

44:39Kemudian Firefox dan

44:41Safari tentunya

44:43Tapi Safari udah cepet banget nih

44:45Begitu dari sini bong ke bawahnya

44:47Semakin mendekat

44:49Kayaknya ada satu bug

44:51Terus dia

44:53Tiba-tiba solve gitu ya

44:55Satu solve, tiba-tiba semua solve

44:57Sering terjadi

45:01Sering terjadi

45:03Iya

45:05Seru ya

45:07Ini detail ya, detail semua

45:09Satu per satu fiturnya

45:11Dibahas di sini ya

45:13Maksudnya ditampilin di sini ya webnya

45:15Testingnya

45:17Ini hanya testing report aja kan

45:19Kayaknya jumlah testingnya

45:23Jumlah testing yang pas

45:25Plus jumlah total testing

45:27Dapat beberapa persen gitu kan

45:29Akhirnya bentuknya jadi persenan

45:31Seperti ini

45:33Ini yang experimental, ini yang stable

45:37Stable

45:392023 masih panjang kan

45:43Ini 78 persen baru

45:45Bulan Februari akhir

45:47Besok Maret

45:4978 persen okelah

45:51Maksudnya baru segini nih kita

45:53Kalau ngitung sampai Desember ya

45:55Kita baru berada di sini

45:57Jadi di awal

45:59Masing-masing kayak dari

46:01Google, Mozilla

46:03Webkit, Apple

46:05Bikin artikel

46:07Mengenounce

46:09Ngumumin ini

46:11Kan mereka kasih update lagi

46:13Gimana perkembangannya

46:15Mana yang udah paling maju

46:17Mana yang belum

46:19Yang harus lanjutin tahun depan

46:21Eh tahun depan kalau nambah lagi

46:23Jadi kalau semuanya difokusin

46:25Nggak ada yang difokusin

46:27Itu kayak saya

46:29Importan semua

46:31Itu tuh viewport unit

46:33Sebetulnya udah selesai kan

46:35Bisa dipindahin, digeser ke Dan

46:37Lupa kali dia belum

46:39Yang tahun depan

46:41Berarti udah

46:43Tikatnya harus digeser

46:45Itu udah kelar 100 persen

46:47Semua

46:49Sudah kita bahas apa lagi nih

46:57Masih ada pembahasan

46:59Nah

47:01Ini contoh yang kayak tadi

47:03Tapi yang CSS itu buka deh

47:05Di private

47:07Linknya di chat

47:09Di chat private

47:11Oke sebentar

47:13Copy

47:17Paste

47:19Eh temen-temen yang di chat boleh ya

47:23Kalau ada yang mau ditanyakan ya

47:25Berkaitan dengan topik atau nggak silahkan

47:27Kalau ada yang mau bertanya

47:29Tapi belum tentu kita jawab nih

47:31Kalau bisa kita jawab ya

47:33Kalau nggak tau ya kita tanya balik

47:35Ini apa nih

47:37Itu

47:39Contoh tapi buat yang CSS

47:41Coba buka CSS

47:43Oke selektor

47:45Auto

47:47Oh untuk webkit

47:49Masih ada bugs ya

47:51Tapi Firefox kuning

47:5342 persen

47:55Karena

47:57Dari 6.9 tes baru

47:59Passing 2.9

48:01Ini seru sih

48:03Ada detail banget

48:05Ada beberapa test yang

48:07Subtest yang passing

48:09Yang bikin unit testingnya ini

48:11Astaga

48:13Niat banget

48:15Kerja di Google

48:19Mozilla dan Apple sih

48:21Cuma ini kan open source semua

48:23Sebenernya menariknya ini semua repunya public

48:25Jadi kalau kita pengen bikin pull request

48:27Theoretically ya

48:29Bahkan bisa belajar

48:31Bisa belajar

48:33Vanilla nya sendiri bisa tau

48:35Ini cara pakai gimana tinggal kunjungi aja

48:37Iya benar

48:39Nah tuh kan

48:41Tes

48:43Tesnya beneran ya HTML, CSS biasa

48:45Eh tapi paragrafnya nggak ditutup

48:47Ini

48:49Kenapa ditutup ya paragrafnya

48:51Bisa broser bisa auto

48:53Broser itu bisa auto

48:55Biar nggak rusak

48:57Broser itu

48:59Harus forgiving

49:01Salah-salah dikit

49:03Nggak boleh ngerusak semuanya

49:05Wah

49:07Iya kita bisa belajar testing juga dari sini

49:09Melihat-lihat ini tuh

49:11Bisa

49:13Inilah belajar apa

49:15Visual testingnya

49:17Terus

49:19Nah kalau yang automated testingnya sebenarnya dia

49:21Dia pakai python ada

49:23Cuma sebetulnya ya

49:25Automatednya itu cek di repunya aja

49:27Nah cuma

49:29Kalau kita mau pakai

49:31Pakai dari visual

49:33Ya tinggal dilihat aja yang gampang sih itu tadi

49:35Buka di

49:37Misalnya apa ya bentar

49:39Di WPT live tadi

49:41Misalnya

49:43Oh wait

49:45Gimana ya

49:49Ini ini

49:51Buka ini

49:53Di private get linknya

49:55Copy

49:57Paste

49:59Di sini

50:01Tadi misalnya

50:03CSS

50:05CSS buat

50:07Cek

50:09Nth child of class name bukan

50:11Iya benar

50:13Benar-benar

50:15Run in browser

50:17Iya run in your browser

50:19On WPT live

50:21Test-pass is there is a field

50:25Ininya apa

50:27Nah coba aja

50:29Lihat kodenya kayak gimana

50:31Oh testnya belum passing ini

50:33Kalau di browser kita ya

50:35Berarti di Chrome

50:37Iya ini brave

50:39Lagi pakai brave

50:41Belum passing 100 persen ya

50:43Iya belum karena

50:45Dia bakal passing kalau

50:47No rate

50:49Container

50:51Balik ke

50:55Dashboardnya tadi

50:57Ada link bug reportnya juga ada penjelasannya

50:59Mana

51:01Ini CR bug ini

51:03Iya

51:05Oh ini buat diskusi ya

51:09Jadi kenapa

51:11Kenapa error

51:13Terus ternyata ada selektor baru

51:15Ada sudut basis baru

51:17Ternyata speknya berubah

51:19Terus ini sampai bawah banget

51:21Sampai yang paling dari

51:25Diskusi awal 2014 sampai sekarang

51:27Paling bawah 2023

51:29Masih ada

51:31Ada detailnya

51:33Begit ya bikin browser

51:37Intent to ship

51:45Mana intent to ship

51:47Oh baru intent to ship ya

51:51Maksudnya untuk salah satu

51:57Bug yang ini

51:59Untuk satu gitu gitu

52:01Harusnya cuma

52:03Ijo gak boleh ada merah

52:05Nah ini kan berarti kita

52:07Ngetes secara manual secara visual

52:09Di browser

52:11Kayaknya kalau direpo nya

52:13Ya mungkin

52:15Harusnya gak render ya

52:17Punya browser yang ini gak mas

52:19Browser yang

52:21Chrome dev

52:23Gak punya

52:25Coba ada yang punya

52:27Kirimkan link nya dong

52:29Di private chat ada yang paling bawah

52:31Gua chrome dev soalnya

52:37Asik

52:39Lebih baru dev apa

52:41Lebih baru canary

52:43Canary experimental

52:45Canary paling mentah punya urutannya

52:47Canary dev

52:51Stable

52:53Gua tunjukin nih chrome dev gue nih

52:55Canary dev beta stable

52:57Tadaa! Ijo semua

53:03Mana?

53:05Mana? Belum share dong

53:07Oh belum ya? Oh salah

53:11Udah suspek sini

53:13Ya

53:15Ternyata ada masalah permission

53:17Masalah permission

53:19Tunggu tunggu

53:23Gua harus kasih permission

53:25Sudah?

53:27Sudah nih?

53:29Coba lagi ya

53:31Share screen

53:35Tadaa!

53:37Chrome has lost permission to capture your skin to fix

53:41Go to

53:43Apple

53:45Ya sudahlah

53:47Oke sambil menunggu

54:01Ini ada pertanyaan bagus nih

54:03Pendapatnya sama browser-browser baru kayak ARC

54:05SigmaOS

54:07Tapi engine nya Chromium

54:09Gatau mereka ikut maintain Chromium project juga atau engga?

54:11Kita sebenernya udah sempet bahas

54:15Sekilas ya

54:17Di episode keberapa ya

54:19Episode yang tentang browser lah

54:21Kita bahas tentang ARC tapi SigmaOS ini kita gak bahas ya

54:23Baru tau juga nih ada

54:25Ternyata

54:27Beberapa dari mereka

54:29Kalau gak salah mereka kontribusi

54:31Beberapa ya

54:33Tapi itu orang-orangnya masih orang-orang yang sama-sama

54:35Yang bikin Chromium dan lain-lain

54:37Kalau edge mungkin karena punya nya

54:39Microsoft kan ya

54:41Company yang besar jadi punya banyak

54:43Tenaga human resource

54:45Yang bisa dikerahkan

54:47Kalau yang

54:49Perusahaan kecil kali ya

54:51Tergantung

54:53Mungkin di awalnya mereka gak kontribusi banyak

54:55Tapi ketika mereka mungkin udah dapat

54:57Revenue dari

54:59Browser nya

55:01Gimana caranya

55:03Mungkin mereka akan kontribusi baik itu

55:05Kontribusi kode ataupun donasi

55:07Biasanya

55:09Dan karena nature nya

55:11Chromium itu kan emang

55:13Project open source

55:15Jadi emang dipersilakan

55:17Buat semua termasuk kita

55:19Kita secara individu kalau iseng pengen

55:21Bikin browser

55:23Bertesarkan Chromium ya boleh aja

55:25Tanpa harus kontribusi

55:27Cuma biasanya makin luas jangkauannya

55:29Dan banyak penggunanya kan makin punya

55:31Kepentingan yang lebih besar ya

55:33Jadi pasti bakal

55:35Terdorong buat kontribusi juga

55:37Ya betul

55:39Dan beberapa

55:43Beberapa orang

55:45Yang ngerjain Chrome browser

55:47Itu beberapa ada yang

55:49Direkrut juga ke

55:51Art ke mana gitu

55:53Karena memang dia

55:55Ya ekspert lah disitunya

55:57Di bidang per browseran

55:59Terutama Chrom ya

56:01Chromium dan Chrome

56:03Gua mau kasih sedikit

56:05Supaya tidak salah paham

56:07Developer untuk browser

56:09Beda loh dengan developer web

56:11Totally different

56:13Beda bahasa

56:17Beda bahasa

56:19Meskipun mereka bikin render nya

56:21Bukan berarti mereka juga

56:23Ahli HTML, CSS, JavaScript

56:25Bukan hati

56:27Bahkan banyak yang gak tahu

56:29Gak bisa

56:31Bikin web itu mereka gak bisa

56:33Mereka bisa rendering web tapi

56:35Untuk bikin webnya

56:37Gak bisa

56:39Bisa cuman tidak expert

56:41Ya terus

56:43Memang bukan tugasnya sih

56:45Kalau bisa gak bisa sih subjektif ya

56:47Cuma emang job desk nya

56:49Itu job desk yang sepenuhnya berbeda

56:51Jadi browser itu bahasanya

56:53C++ ya biasanya

56:55Bahasanya low-level

56:57Low-level yes

56:59Ada beberapa yang

57:03Mulai kan

57:05Pakai RAS, pakai apa

57:07Yang baru-baru ya

57:09Browser pakai RAS atau

57:11Maksudnya browser pakai RAS

57:13Engine nya pakai RAS

57:15Yang kemarin kita bahas, yang dari Firefox

57:17Dari Mozilla

57:19Servo engine nya

57:21Itu pakai RAS

57:23Gimana sudah

57:25Udah sampai mana dia?

57:27Mereka sempet

57:29Gonjang ganjingan karena si Mozilla nya juga

57:31Banyak lay off kan beberapa tahun yang lalu

57:33Tapi kayaknya udah mulai

57:35Mulai stabil

57:37Mulai, bukan stabil ya

57:39Mulai ada lagi pergerakan di open source nya

57:41Karena kan ini jadi

57:43Murni open source, kalau kemarin-kemarin kan

57:45Ada penggeraknya lah Mozilla kan

57:47Tapi sekarang kayaknya

57:49Murni open source jadi mungkin

57:51Dan mungkin karena di browser juga

57:55Kubu-kubuannya udah

57:57Sempit kan

57:59Mau pilih Chrome, Chromium base

58:01Si Firefox

58:05Dan wetkit gitu

58:07Atau safari

58:09Jadi mungkin

58:11Mereka nggak ngelanjutin atau gimana nggak ngerti lah

58:13Itu kan sebenarnya si servo nya sendiri

58:15Juga eksperimental kan

58:17Kayaknya udah startin

58:19Tapi itu penasaran nih

58:23Apakah dia dipakai di

58:25Chrome, eh di Chrome sorry

58:27Di Firefox sekarang atau?

58:29Iya Firefox

58:31Itu juga cukup penasaran sebentar

58:33Ini dia yang kita omongin

58:35Servo

58:37Parallel browser engine

58:39Independent modular

58:41Embedded web rendering engine

58:43Return in rough

58:45Terketingan ya, maksudnya bisa

58:47Kalau mau di-port

58:49Di-port atau di-olah lagi

58:51Ibaratnya kita mau bikin

58:53Browser baru pake servo

58:55Nah ini ada roadmapnya nih

58:57Kita lihat aja roadmapnya

58:59Q1, Q2, Q3, Q4

59:01Layout engine selection

59:03Oh berarti emang bener-bener bikin dari

59:05Scratch semuanya

59:07Belum jadi, masih ada layout engine selection

59:09Pilih-pilih sampai Q2

59:11Terus

59:13Project reactivation

59:15Projectnya sempat berhenti soalnya

59:17Terus ini

59:21Basic CSS 2 support

59:23Explore Android support

59:25Embedded web engine experiment

59:27Dan lain-lain

59:29Ini pakai RAS semua ya

59:31Murni RAS based

59:33Nah kalau buat webkit sama

59:37Chromium yang sekarang, yang di luar servo

59:39Berarti masih C++ semua kan ya

59:41Sebetulnya

59:43Ya sepertinya gitu

59:45Tapi ini udah bisa download

59:47Apa yang?

59:49Tapi gue coba install juga gak bisa dipake

59:51Maksudnya

59:53Belum bisa

59:55Itu engine-nya doang

59:57Engine-nya doang gak ada go-innya

59:59Gak ada apa kali ya bikin sendiri

1:00:01Ini ada servo.app?

1:00:03Iya, gue jalanin dia cuma

1:00:05Gak ada address barnya

1:00:07Jadi gak bisa di-typing

1:00:09Buka yang cuma

1:00:11Servo webnya doang

1:00:13Apa gue salah kali ya

1:00:15Masih ada error-error kayak gini kali

1:00:17Mungkin engine doang kali

1:00:19Coba aja dong

1:00:23Kalau mau pake

1:00:25Mesti bikin browser sendiri

1:00:27Iya, UI-nya gak ada kali ya

1:00:29Event OS

1:00:31Back-end doang, front-end-nya

1:00:33Belum ada

1:00:35Ada, UI-chipnya cuma buka servo.org

1:00:37Orgonya doang

1:00:39Gak bisa

1:00:41Ada

1:00:43Address bar

1:00:45CSS2 aja belum support

1:00:47Panjang nih jalanin ini

1:00:49CSS2 aja belum support ya

1:00:51Masih lama

1:00:53Iya, ini kan

1:00:55Projek, iseng

1:00:57Projek eksperimentalnya si Mozilla

1:00:59Udah gitu Mozilla juga bingung sama ininya

1:01:01Oh iya bener, di Windows juga gak muncul apa-apa nih

1:01:03Habis install

1:01:07Unresponsive

1:01:11Iya

1:01:13Berarti masih lama nih

1:01:15Masih panjang ya

1:01:17Panjang

1:01:19Issunya banyak tuh 3.400

1:01:21Di GitHub

1:01:23Iya, kalau mau bantu-bantu

1:01:25Silahkan buat yang senang

1:01:27Ruiz

1:01:29Raspberry

1:01:31Oke

1:01:35Bahas apa lagi kita?

1:01:37Udah habis pembahasan?

1:01:39Apa? Habis

1:01:41Kira-kira

1:01:43Oh bentar-bentar, ada lagi terakhir nih

1:01:45Terakhir si ada reponya

1:01:47Oh

1:01:49Terakhir

1:01:51Repo, oh ini ya

1:01:53Kalau pengen liat semua

1:01:55Kalau dari dashboard kan tadi

1:01:57Mungkin agak ribet

1:01:59Kalau langsung pengen liat kodenya

1:02:01Ya bisa dicek dari reponya aja

1:02:03Oh ini ya buat

1:02:05Ngetesnya ya

1:02:07Oh sama itu kan

1:02:09Yang kayak tadi

1:02:11Cuma ini tampilan dari reponya

1:02:13Sama

1:02:15Di about-nya kan

1:02:17Sebelah kanan tuh tadi ada

1:02:19Link ke website

1:02:21Webplatformtest.org

1:02:23Yang menjelaskan tentang

1:02:25Testnya sendiri

1:02:27Nah itu dokumentasi

1:02:29Jadi kalau yang tadi sebelumnya kan dokumentasi tentang

1:02:31Project Interop-nya

1:02:33Nah kalau ini tentang

1:02:35Testnya sendiri, test suite-nya

1:02:37Webplatformtestnya itu

1:02:39Testnya

1:02:41Cara kerjanya gimana

1:02:43Inter-test suite-nya gimana

1:02:45Formatnya, layoutnya

1:02:47Cara jalanin dan lain-lain

1:02:49Jadi kalau tertarik

1:02:51Ada test harnas

1:02:53Ada crash test, ada manual test

1:02:55Ada macem-macem ya

1:02:57Wow lengkap sekali

1:02:59Apa yang bikin ya

1:03:01Kok rajin sekali mereka ya

1:03:031545

1:03:05Contributor

1:03:07Tertinggi siapa nih

1:03:09Ditung dulu

1:03:11Oh gak kenal ya

1:03:13Magr

1:03:15MS-2gr

1:03:17Ini siapa

1:03:19Fulip

1:03:21Oh ini si Philip kan

1:03:25Yang dari Google kan

1:03:27Yang tadi ada videonya kan

1:03:29Video yang mana ya

1:03:31Oh iya iya

1:03:33Yang tadi video tentang dialog

1:03:35Oh bukan

1:03:37Oh bukan

1:03:39Oh bukan

1:03:41Yang disini bukan

1:03:43Yang dia tulisnya, ini kan

1:03:45Temennya Robert

1:03:47Tau-tau

1:03:49Temen dong

1:03:51Siapa tau musuhan diem-diem

1:03:55Tapi sambil sebul-sebulan

1:03:57Tulis artikel bareng

1:03:59Kalau dari profilnya sih

1:04:03Itu dia

1:04:05Dari 2014

1:04:07Berarti udah ada dari 2014

1:04:09WPT ini

1:04:11Cuma mungkin belum

1:04:13Ada interopnya kali ya

1:04:15Belum fokus ke usaha interop

1:04:17Interop

1:04:19Antar browser

1:04:21Terus disebelahnya itu ada auto Fulip

1:04:23Ini robot ini ya

1:04:25Akun out

1:04:29Auto Fulip

1:04:31Iya

1:04:33Dari 2008 nih berarti

1:04:35Bener gak kalo ngeliat ininya

1:04:37Mungkin dulu ini kali ya

1:04:39Apa namanya

1:04:41Komportability

1:04:43Mungkin dulu diawali

1:04:45Refonnya dibuat tapi belum ada yang

1:04:47Belum ngapa-ngapain

1:04:49Ya ambil user-user aja

1:04:51Habis itu nanti apa

1:04:53Ada yang join, ada yang join, lama-lama jadi gede kan

1:04:55Sampai compact itu

1:04:57sendiri awalnya dari MDN doang kan

1:04:59Habis itu baru

1:05:01Google Chrome

1:05:03Safari, Webkit dan lain-lain

1:05:05Ya kayaknya kalo yang MDN

1:05:07C2D itu udah

1:05:09Udah barengan ya

1:05:11Oh iya ini kan udah

1:05:13C2D juga nih

1:05:15Pak Filipini yang tadi

1:05:17Tiga orang ini berarti ya

1:05:21Yang surveynya ya

1:05:23Awalnya surveynya

1:05:25Timnya banyak

1:05:27Cuma ini kan kalo surveynya kan

1:05:29Analisisnya kan teknis banget

1:05:31Berarti yang harus dari Google

1:05:33Dan Mozilla

1:05:35Ada orang Indonesia gak ya

1:05:37Gak ada ya

1:05:39Satu hari semoga

1:05:41Eka

1:05:43Akan gak bisa

1:05:47Saya webdefu kan

1:05:49Roserdefu

1:05:51Itu siapa yang di Indonesia

1:05:53Yang di Jepang

1:05:55Rakinah

1:05:57Kita lihat namanya

1:05:59Sebelum disitu kita

1:06:01Kita undang dulu

1:06:03Nanti kalo udah disini susah

1:06:05Kita undang nanti Rakinah

1:06:07Bisa-bisa

1:06:09Seru-seru

1:06:11Oke, kalo

1:06:13Tidak ada pembahasan lagi

1:06:15Berarti, tapi kita sudah habis

1:06:17Malam hari ini

1:06:19Udah lewat sejam juga

1:06:21Ada yang seru dan agak mirip soal gini juga ya

1:06:23Soal kerja sama

1:06:25Untuk bikin

1:06:27Feature-feature dozer

1:06:29Atau web API

1:06:31Oke

1:06:33Penasaran gak?

1:06:35Penasaran ya, tungguin minggu depan ya

1:06:37Tapi sebelum topik berikutnya

1:06:39Ini ada beberapa pertanyaan dari Slido

1:06:41Yang bisa kita jawab juga mungkin

1:06:43Apakah ada minimal keamanan

1:06:45Atau website agar layak keproduksian?

1:06:47Misalkan CSRF

1:06:49Coarse dan lain-lain

1:06:51Nah itu udah di jawab sendiri

1:06:53Iya

1:06:55Ada, harus CRF

1:06:57Coarse

1:06:59Itu yang ada standard

1:07:01Standard security itu siapa sih

1:07:03Yang buat itu?

1:07:05Web

1:07:07Vulnerability test

1:07:09Saya lupa

1:07:11Lama organisasinya

1:07:13Dia kan ada minimal

1:07:15Kayak

1:07:17Checklist-nya gitu ya

1:07:19Iya checklist-nya

1:07:21Ada, ntar kalau nemu

1:07:23Saya cekasi deh

1:07:25Coba tuh buka

1:07:27Web.dev/secure

1:07:29Kalau misalnya pengen liat

1:07:31Kisih-kisihnya

1:07:33Web.dev/secure

1:07:35Search screen dulu

1:07:41Ini adalah

1:07:43Checklist ya

1:07:45Dasar

1:07:49Dasar, oke

1:07:51Yang pasti kan

1:07:53Ada kayak

1:07:55Anchor

1:07:57Tag A itu biasanya kan nggak boleh

1:07:59Harus ada no referral, no itu kan

1:08:01Itu juga salah satu kan

1:08:03Itu buat SEO

1:08:05Oh itu buat SEO

1:08:07Bukan buat security ya?

1:08:09Ada, cuma udah

1:08:11No referral

1:08:13Udah di fix

1:08:15No archive

1:08:17No referral gitu

1:08:19Nggak tahu deh

1:08:21OWASP, nah thank you

1:08:23Mas warga CP, betul

1:08:25Kalau saya sampai lupa

1:08:27Yep

1:08:29Itu organisasinya

1:08:31OASP

1:08:33Kayaknya salah deh

1:08:35OWASP

1:08:37O-W-A-S-P

1:08:39Open source foundation

1:08:43Non-profit

1:08:45That works to improve the security of software

1:08:47Untuk security

1:08:49Atau nanti ada baca OWASP top 10

1:08:55Di projects

1:08:57Apa?

1:08:59OWASP projects

1:09:01Top 10

1:09:03Minimal jangan masuk top 10 inilah

1:09:05Kalau bangun website

1:09:07Nggak muluk-muluk ya

1:09:11Ini yang bener ya OWASP

1:09:15Cuma itu udah mewakili semua sih ya

1:09:17Kalau web kan

1:09:19Mungkin nggak butuh se rumit

1:09:23Yang misalnya jaringan

1:09:25Jaringan intranet di kantor

1:09:27Atau apalah

1:09:29Kalau aplikasi web ya udah cukup

1:09:31Mewakili kan tuh

1:09:33Yang paling minimal

1:09:35Paling minimal HTTPS ya

1:09:37Itu udah minimal banget

1:09:39Jangan sampai HTTPS aja

1:09:41Itu security yang paling minimal

1:09:43Jangan sampai kita masih pakai HTTPS

1:09:45Apa namanya?

1:09:47Bisa baca juga

1:09:49Ini saya lupa, itu di projects

1:09:51Ada di projects-nya di atas

1:09:53Projects, di menu projects

1:09:55Terus ada di web security

1:09:57Testing guide

1:09:59Terus masuk di stable

1:10:01Nah itu ada

1:10:03Testing untuk

1:10:05Beberapa security

1:10:07Ini semua testing guide-nya

1:10:09Tinggal dikutin aja ya

1:10:11Principle of testing

1:10:13Testing technique explained

1:10:15Contohnya apa? Penetration testing

1:10:17Web security testing framework

1:10:19Di bawah ada tadi

1:10:21Web security testing

1:10:23Ini mendalem ya sebenarnya

1:10:25Tapi

1:10:27Secara basicnya

1:10:29Dan secara implementasinya

1:10:31Jadi

1:10:33Minimal

1:10:35Kalau ada security

1:10:37Atau pen test di company

1:10:39Ya ikuti aja ini

1:10:41Tandapnya

1:10:43Untuk webnya

1:10:45Ya ini salah satunya nih

1:10:47Fingerprint ini

1:10:49Fingerprint ini kalau temen-temen

1:10:51Kayak pakai churl atau pakai

1:10:53Klik kanan inspect element

1:10:55Terus network gitu ya

1:10:57Contohnya misalkan server

1:10:59.2 express, nah itu jangan bangga ya

1:11:01Itu harus diumpetin

1:11:03Jangan sampai orang tahu

1:11:05Kalau server kita pakai express

1:11:07Atau apache

1:11:09Atau nginx

1:11:11Karena bisa itu ya

1:11:13Vulnerability ya

1:11:15Kalau tahu version-nya

1:11:17Terus ada

1:11:19Vulnerability-nya

1:11:21Ada hole-nya

1:11:23Dan ternyata server-nya punya

1:11:25Tapi nggak di-update gitu loh maksudnya

1:11:27Iya, makanya

1:11:29Yang kayak gini-gini itu jangan sampai ketauan ya

1:11:31Jangan diliatin

1:11:33Kalian pakai apa

1:11:35Kalau mau diliatin pakai apa itu

1:11:37DCV, di LinkedIn boleh

1:11:39Kalau di server jangan

1:11:41Kalau bisa mereka nggak tahu

1:11:45Kita pakai teknologinya apa

1:11:47Itu salah satunya ya

1:11:49Ini banyak sekali, kalau mau diikutin

1:11:51Harus ada tim sendiri ya

1:11:53Yang ngurusin ya

1:11:55Kalau yang minimal apa

1:11:57Ini stable-nya

1:11:59Minimal tadi kan, HTTPS

1:12:03Terus apa lagi

1:12:05Jangan lupa sanitize

1:12:07File permission

1:12:09Isinya apa sih kalau ada user diikut

1:12:11File permission

1:12:15File permission juga

1:12:17File permission

1:12:19Oke

1:12:21Oke

1:12:23Itu

1:12:25Untuk yang versi banyaknya ya

1:12:27Versi singkatnya tadi ya, itulah

1:12:29Yang kita sebutkan

1:12:31Kalau ada user input, harus di sanitize

1:12:33Dirapihin, terus cross-site

1:12:35Injection

1:12:37Terus itu kalau misalnya kita

1:12:39Kita melakukan

1:12:41Request atau apa yang ada

1:12:43Private credential, misalnya

1:12:45API key, ya jangan dari client side

1:12:47Tapi kita harus nge-hit ke server

1:12:49Suatu server endpoint apapun itu

1:12:51Disitu kita ngumpetin

1:12:53API key

1:12:55Biasanya umumnya di environment

1:12:57Variable, jadi jangan langsung

1:12:59Dipanggil dari browser

1:13:01Oke

1:13:03Jangan sampai nggak sengaja nge-push

1:13:05File env

1:13:07Ke GitHub

1:13:09Itu yang paling sering

1:13:11Kejadian itu

1:13:13File env

1:13:15Atau apa

1:13:17API keynya di copy paste

1:13:19Langsung ke hardcode ya

1:13:21Kode, itu juga banyak

1:13:23Tapi biasanya kalau itu kita push ke GitHub

1:13:25Atau

1:13:27GitHub server atau GitHub hosting

1:13:29Biasanya itu ketangkap

1:13:31Langsung dikasih tahu ya

1:13:33Nah, terakhir

1:13:37Ada dua ini bukan pertanyaan sih

1:13:39Lebih ke minta

1:13:41Bahas topik tentang web assembly

1:13:43Ada banyak nih yang minta

1:13:45Web assembly, penasaran ya

1:13:47Temen-temen ada tertarik ke web assembly

1:13:49Mau bikin apa sih

1:13:51Penasaran, soalnya kita dikerja sehari-hari

1:13:53Itu nggak nemu kan, ya kak, pernah nggak

1:13:55Atau Ivan

1:13:57Web assembly

1:13:59Belum sampai sana ya

1:14:01Tes terakhir pakai web assembly itu

1:14:03Buat itu, buat

1:14:05Import

1:14:07TensorFlow model

1:14:09Ke machine learning dan lain-lain ya

1:14:11Berarti ya

1:14:13Pernah produksi

1:14:15Blazor

1:14:17Blazor ini apa?

1:14:19Blazor

1:14:21Ini web framework untuk

1:14:25Web assembly bukan?

1:14:27C# ya

1:14:29Kita udah sempat bahas juga kayaknya ada di

1:14:35Rust

1:14:37Web framework, jadi kita tulisnya pakai Rust

1:14:39Kemudian dia akan convert atau compile

1:14:41Ke web assembly jadinya

1:14:43Jadi web

1:14:45Client, itu juga ada

1:14:47Namanya apa waktu itu, udah sempat dibahas juga

1:14:49Blazor ini mirip Silverlight

1:14:51Jaman dulu ya

1:14:53Nggak tahu, iya kali

1:14:55Betul, Ari

1:14:57Figma pakai web assembly

1:14:59Kita pernah bahas dulu, yang aplikasi

1:15:01Yang apa, aplikasi yang butuh

1:15:03Power besar, biasanya pakai

1:15:05Wasm kan, Figma, Adobe

1:15:07Photoshop, tapi sekarang

1:15:09Versi online juga udah hadapan

1:15:11Terus container

1:15:13Apa?

1:15:15Code sandbox yang di

1:15:17Container

1:15:19Stack bits atau GitHub code spaces

1:15:21Dan lain-lain, itu semua kan

1:15:23Udah wasm

1:15:25Betul, termasuk AutoCAD

1:15:27Juga katanya

1:15:29Yang versi web, tapi kita

1:15:31Termasuk CSGO

1:15:33CSGO?

1:15:35Eh sorry, CS yang lama, CS yang lama sudah ada ini

1:15:37Doom bukan?

1:15:39No, CS on web

1:15:41Udah ada ya, udah bisa ya

1:15:43Play, yang 1.6

1:15:45Play cs.com

1:15:47Play-cs.com

1:15:49Itu pakai web assembly kayaknya

1:15:53Play-cs.com

1:15:55Play-cs.com

1:15:57Ini ya

1:15:59Ini kan

1:16:01Case web assembly itu

1:16:03Lumayan unik ya

1:16:05Saya tahu ya, boleh silahkan di

1:16:07Koreksi ya, kalau

1:16:09Kayak project yang

1:16:11Baru

1:16:13Baru Figma ya, yang

1:16:15Istilahnya dia dari awal

1:16:17Ga ada istilahnya

1:16:19Legacy code, terus dia bikin

1:16:21Web assembly karena kebutuhan kan

1:16:23Karena memang

1:16:25Processing powernya butuh kan untuk

1:16:27Manipulasi image dan lain-lain kan

1:16:29Tapi kalau misalkan yang lain, kalau kita lihat

1:16:31Photoshop, Photoshop tadinya

1:16:33Desktop app, dia mau ke web

1:16:35Supaya ga rewrite

1:16:37Dia pakai web assembly ya kan

1:16:39Ini juga

1:16:41CS juga kan, ga perlu rewrite

1:16:43Bisa jalan di browser

1:16:45Tapi tetap butuh

1:16:47Adjustment sih

1:16:49Tapi core

1:16:51Core nya tetap sama

1:16:53Iya, dan

1:16:55Apa ya, dan sejauh ini

1:16:57Web assembly itu tidak bisa memanipulasi Dom

1:16:59Jadi dia butuh

1:17:01Site JavaScript juga

1:17:03Termasuk juga Figma

1:17:05Figma itu kan pakai react kan

1:17:07Tapi engine nya baru web assembly

1:17:09Gitu

1:17:11Ya, begitulah kira-kira

1:17:13Jadi

1:17:15Kasusnya itu

1:17:17Kasusnya itu cukup unik

1:17:19Ya, kalau misalkan teman-teman punya

1:17:21Project atau punya aplikasi

1:17:23Yang butuh konversi dari

1:17:25Desktop app

1:17:27Ke web

1:17:29Nah, mungkin akan butuh web

1:17:31Web assembly

1:17:33Kalau ga mau rewrite

1:17:35Kalau misalkan aplikasi apa ya

1:17:37Jalan di DOS misalkan

1:17:39Aplikasi POS jalan di DOS gitu

1:17:41Mau di rewrite

1:17:43Daripada di rewrite

1:17:45Ke web gitu ya, kayaknya lebih gampang

1:17:47Di rewrite daripada bikin web assembly ya

1:17:49Ga tau sih

1:17:51Seberapa ini soalnya belum pernah coba juga kan

1:17:53Untuk

1:17:55Proses kompilasinya, ada errornya atau engga

1:17:57Dan lain-lain gitu kan, kita ga tau ya

1:17:59Tapi harusnya engga sih

1:18:01Karena kayak apa

1:18:03Projek-projek besar seperti Photoshop

1:18:05Ataupun AutoCAD

1:18:07Aja bisa gitu

1:18:09Tapi mereka juga yang nguliknya

1:18:11Rame sih ya

1:18:13Kalau satu orang yang ga tau

1:18:15Kemarin yang

1:18:17Ingat ga itu yang oh

1:18:19Squoze, Squoze app itu kan pakai web assembly

1:18:21Squoze app, oh iya bener, Squoze app

1:18:23Squoze app itu buat

1:18:25Konverti ya

1:18:27Imagenya

1:18:29Intinya

1:18:31Tools-tools GNU

1:18:33Yang dulu ditulis pakai

1:18:35Si ++

1:18:37Intinya sudah executable

1:18:39Di convert jadi web assembly

1:18:41Squoze app, iya

1:18:43Ini dia

1:18:45Ini, kita bisa apa ya

1:18:47Bisa membandingkan juga

1:18:49Antara satu image dengan image yang

1:18:51Asli, seberapa kompresinya

1:18:53Kita bisa itu

1:18:55Ini juga backendnya pakai

1:18:57Web assembly itu

1:18:59Coba buka DevTool, terus nanti klik

1:19:01Salah satu image

1:19:03Buka dulu DevTool, Network

1:19:05Ke Network

1:19:07Image, ga ada, kosong

1:19:09Refresh ya

1:19:11Klik image yang di bawah

1:19:13Yang itu, karena dia kan

1:19:15Dia kan lazy load

1:19:17Dia hanya pakai saat

1:19:19Klik salah satu image

1:19:21Gak, baru kelihatan

1:19:23Web assembly-nya yang didownload

1:19:25Oh, ngerti

1:19:27Keren ya

1:19:29Ulang ya, ulang

1:19:31Refresh dulu, eh buka, buka

1:19:33Buka, buka DevTool

1:19:35Dia kan cepet banget kan

1:19:37Cepet banget kan, web assembly-nya

1:19:39Belum manggil web assembly-nya

1:19:41Belum jalan ya

1:19:43Klik image itu

1:19:45Nah

1:19:47Baru tuh, ada

1:19:49Wasm tuh

1:19:51Terusan wasm, liat tuh

1:19:53Ada banyak wasm, masif

1:19:55Tipe wasm

1:19:57Tipe wasm

1:19:59Type

1:20:01Tipe wasm, semua type wasm

1:20:03Nah, baru didownload tuh

1:20:05Semua wasm-wasm yang dibutuhkan

1:20:07Tuh, wasm ya

1:20:09Dia download-nya tuh

1:20:11Image-nya 3 mega, secepat itu

1:20:133 mega lho

1:20:15Kalau kita

1:20:17Download sendiri pake biasa

1:20:19Compress udah jadi 360 kb

1:20:21Dan compress-nya kan pake

1:20:23Most JPEG

1:20:25Tunggu, most JPEG itu kan

1:20:27JPEG-i?

1:20:29No, executable kan

1:20:31Oh ya

1:20:33Executable yang

1:20:35Yang jalan di

1:20:37Itu ya, di backend ya

1:20:39Di server ya

1:20:41Ini jalan di browser

1:20:43Pake wasm

1:20:45Wasm-nya

1:20:47Di situ bisa diliat, di DevTools

1:20:49Bisa difilter malah ya

1:20:51Bisa diambil lagi kalau mau

1:20:53Kita bikin squish lagi

1:20:55Squish kawai

1:20:57Squish kawai ori

1:20:59Tuh, mas Ivan

1:21:03Sudah ada yang convert web assembly ya?

1:21:05Ada itu yang

1:21:07Yang kemarin web assembly

1:21:09WordPress on

1:21:11Browser

1:21:15Saya lupa namanya

1:21:17Beberapa waktu lalu kan kita

1:21:19Waktu itu pernah buka deh

1:21:21Udah pernah ya

1:21:23Udah bahas

1:21:25Katanya aplikasi JS pun

1:21:27Bisa di compile ke web assembly, bisa

1:21:29Tapi buat apa ya, saya penasaran juga

1:21:31TypeScript bisa, Javascript bisa

1:21:33Bukan aplikasi ya

1:21:35Bahasanya, Javascriptnya

1:21:37Kalau kayak React

1:21:39Itu di compile kayaknya nggak bisa

1:21:41Eh, nggak tau ya

1:21:43Javascriptnya

1:21:45Ada di

1:21:47Play For Check

1:21:49WordPress, Wasm Lab

1:21:51Ini, dia bisa jalanin

1:21:55Browser

1:21:57Ampp lagi ya, tinggal jalanin di browser

1:21:59Tapi kan kalau di refresh datanya ilang

1:22:01Iya

1:22:03Ya misalnya buat testing lah, buat test

1:22:05Buat coba misalkan

1:22:07Buat demo, buat tutorial

1:22:09Demo buat client bisa

1:22:11Buat plugin

1:22:13Kalau nyoba-nyoba di server kan bahaya

1:22:15Dan ini

1:22:17Dan ini

1:22:19Dia pakai Wasm

1:22:21Database nya pakai SQLite

1:22:23Jadi

1:22:25Jalannya di browser semua

1:22:27Reload, ilang

1:22:29Jangan kan Wasm

1:22:39Windows XP aja bisa

1:22:41Jalan di

1:22:43Ini

1:22:45Wasm, ini

1:22:47Windows XP nih

1:22:49Tuh

1:22:51Ada yang mengalami

1:22:53Windows XP, ada dong

1:22:55Oh, ngalamin

1:22:57XP, ngalamin

1:22:59Ini beneran Windows XP

1:23:01Atau, atau cuman

1:23:03Cuman animasi doang

1:23:05Beneran, beneran, ini beneran

1:23:07Tuh, mouse nya ilang

1:23:09Gak bisa di klik kanan

1:23:11Gak bisa inspect element

1:23:13Gak bisa di klik kanan

1:23:15Ini gambar langit sama kebun

1:23:17Serius nih, tapi gak kebuka ya

1:23:27Belum kebuka ya, lama ya

1:23:29Lama lah

1:23:35Gimana?

1:23:37Kapan-kapan?

1:23:39Siapa ya?

1:23:41Bahasa Wasm ya

1:23:43Ada yang cocok gak ya

1:23:45Sekali itu

1:23:47Secara nge-compile apa gitu

1:23:49Soalnya kita cuman

1:23:51Cuman nyoba-nyoba doang

1:23:53Cuman hello world doang sih

1:23:55Gara-gara baca artikel

1:23:57Cuma yang udah pakai beneran

1:23:59Di kerjaan

1:24:01Terus use case nya gimana, keunggulannya gimana

1:24:03Serius ini bisa

1:24:05Wow

1:24:07Wow

1:24:09Weeeeee

1:24:11Gila

1:24:15Ini di browser

1:24:17Oh no

1:24:19Wow, bisa main soliter gak?

1:24:21Gak ada

1:24:23Gak ada game

1:24:25Main sweeper sama soliter

1:24:27Gak ada

1:24:29Dia hapus sekali, dia ada buang-buangin

1:24:31Dia buang-buangin

1:24:33Antara dibuang-buangin atau

1:24:35Copyright

1:24:37Oh iya

1:24:39Pain

1:24:41Oh, keren ya

1:24:43Oh iya bisa weee

1:24:45Bisa di save gak?

1:24:47Save nya kemana ini?

1:24:49Di container lah ya

1:24:51Jadi kita gak bisa ngambil ya, file nya tetep ya

1:24:53Ya sudahlah

1:24:55Tapi ya, unable

1:24:57Gak full

1:24:59Funksionalitasnya

1:25:01Gak full ya

1:25:03Ya kan dia gak punya story

1:25:05Tetep aja amazing

1:25:07Iya

1:25:09Windows loh, maksudnya OS

1:25:11OS di jalan di atas

1:25:13Browser

1:25:15Sebenernya bikinnya pakai bahasa apa sih?

1:25:17C

1:25:19C++

1:25:27Ya udah

1:25:29Oke, kalau gitu

1:25:31Kita sudah melantur kemana-mana

1:25:33Mungkin next time kita bahas wasm

1:25:35Menarik juga, cuman masalahnya kita bertiga tuh

1:25:37Gak punya pengalaman praktikal ya

1:25:39Untuk menggunakan wasm

1:25:41Terutama di professional

1:25:43Kalau ada naran sumber boleh

1:25:45Silahkan

1:25:47Ditulis di komen atau di slido

1:25:49Silahkan, nanti kita coba

1:25:51Undang mereka

1:25:53Karena kalau kita doang, hello world doang

1:25:55Gak ini ya kurang seru gitu ya

1:25:57Ya kurang valuable

1:25:59Kurang

1:26:01Nanti teman-teman juga gak dapat manfaatnya nih

1:26:03Cuman begini doang gitu

1:26:05Oke, kalau gitu untuk malam ini kita udahan dulu

1:26:07Terima kasih banyak buat semuanya

1:26:09Buat yang sudah comment-comment

1:26:11Dan buat yang sudah

1:26:13Menghadiri live kita malam ini

1:26:15Kita ketemu lagi

1:26:17Minggu depan

1:26:19Dengan pembahasan yang masih berkaitan dengan

1:26:21Introp

1:26:23Ya kita tunggu saja

1:26:25Minggu depan, sampai ketemu lagi

1:26:27Selamat malam, bye bye