Ngobrolin Interop 2023
Ringkasan Episode
Bantu KoreksiInterop dipilih sebagai topik justru karena belum banyak yang tahu, padahal hasilnya langsung terasa: sejumlah fitur CSS baru yang menarik ternyata lahir dari proyek ini. Ceritanya dimulai dari sebuah survei mendalam pada 2019 tentang kebutuhan developer, yang lalu menjadi proyek percontohan bernama Compat 2021 — momen historis karena baru pertama kali Google, Mozilla, dan Apple duduk bersama untuk urusan web API, bukan hanya sesama keluarga Chromium. Namanya berganti jadi Interop mulai 2022 untuk menekankan interoperability alih-alih backwards compatibility, dan fokusnya terus bertambah: 5 area di 2021, 15 di 2022, dan 26 di 2023 karena yang belum tuntas ikut dibawa ke tahun berikutnya. Yang dikerjakan ternyata bukan sekadar menambah fitur. Kasus yang lebih menjengkelkan justru ketika sebuah fitur sudah didukung Chrome, Firefox, dan Safari tapi perilakunya berbeda-beda — situasi yang tidak bisa diakali dengan feature query, karena dukungannya memang ada. Maka yang dikerjakan adalah menyepakati perilaku itu sampai detail, memperjelas spesifikasi yang rancu, dan menuangkannya jadi web-platform-tests. Persentase kelulusan tiap browser bisa dipantau terbuka di dashboard wpt.fyi — pada dasarnya test-driven development, tapi untuk API browser. Manfaat praktisnya adalah rasa percaya diri. Selama ini fitur keren sering hanya jadi tontonan karena kita ragu memakainya di produksi, lalu memilih akal-akalan dengan JavaScript. Contohnya berderet dari daftar fokus 2023: satuan viewport yang menyesuaikan bilah alat, scroll snap dan scroll behavior untuk karusel tanpa menghitung piksel, subgrid untuk menata elemen cucu, container queries, color space dengan color-mix dan contrast, elemen dialog, custom element, serta selektor :has() untuk menata induk berdasarkan isinya. WebAssembly juga masuk daftar, dengan Figma, Adobe Photoshop, CodeSandbox dan GitHub Codespaces sebagai contoh yang sudah memakainya. Terlihat pula karakter masing-masing browser di dashboard itu — ada yang unggul di tata letak, ada yang di warna, ada yang di kemampuan baru.
Poin-poin Utama
- •Interop bermula dari survei mendalam kebutuhan developer pada 2019, lalu jadi Compat 2021 yang untuk pertama kalinya mempertemukan Google, Mozilla, dan Apple dalam urusan web API — bukan hanya sesama keluarga Chromium
- •Namanya berganti jadi Interop mulai 2022 untuk menekankan interoperability, dan fokusnya bertambah dari 5 area di 2021 jadi 15 di 2022 dan 26 di 2023 karena yang belum tuntas ikut dibawa
- •Masalah yang lebih menjengkelkan bukan fitur yang belum didukung, melainkan yang sudah didukung Chrome, Firefox, dan Safari tapi perilakunya berbeda — itu tidak bisa diakali dengan feature query
- •Hasilnya dituangkan jadi web-platform-tests dengan persentase kelulusan tiap browser terbuka di dashboard wpt.fyi — pada dasarnya test-driven development untuk API browser
- •Manfaat praktisnya adalah rasa percaya diri memakai fitur baru di produksi, alih-alih terus mengakalinya dengan JavaScript yang justru membebani main thread
- •Contoh dari daftar fokus 2023: satuan viewport yang menyesuaikan bilah alat, scroll snap untuk karusel tanpa menghitung piksel, subgrid, container queries, color-mix, elemen dialog, dan selektor :has()
- •WebAssembly juga masuk daftar Interop, dengan Figma, Adobe Photoshop, CodeSandbox dan GitHub Codespaces sebagai contoh yang sudah memakainya
[telepon]
Halo-halo selamat malam semuanya
Selamat malam
Selamat hari Selasa
Hari Selasa biasanya ngapain?
Ngobrolin weh
Ini berarti agak ini ya
internetnya koneksinya agak-agak ngaco nih ya
jadi nggak sincron ya
Udah nggak ada working space lagi nih hari ini
Oke
Nah, sudah ada yang absen nih
Andi, Andi weh, Andi, apa kabar?
Apa kabar?
Kita ketemu lagi ya, masih bersama kita bertiga
Belum ada perubahan, kalau kemarin kita berempat
Sekarang kita kembali bertiga lagi
Format, apa? Format standar
Format default
Trio web
Trio web GDI
Masih bersama saya Riza, Ivan dan juga Eka malam hari ini
Kita akan bahas tentang salah satu topik yang hanya diketahui oleh Eka
Agak kurang mainstream ya ini
Topik yang menarik tapi belum terlalu mainstream tapi berguna
Tapi berguna ya
Ya, kita akan bahas tentang interop 2023
Ya walaupun kita nanti akan bahas interop tahun-tahun sebelumnya
Dan ya, kalau temen-temen belum tahu interop itu apa
Kenapa ada interop dan bagaimana nanti di 2023
Lihat transkrip lengkap (1994 segmen lagi)
Nah, cocok sekali malam hari ini juga kita akan bahas
Karena saya dan Ivan juga nggak tahu
Makanya kita ceritahu sama-sama
Aku pun taunya kebetulan
Jadi sebenarnya nemu topik ini seru nih ceritanya kenapa bisa nemu topik ini
Gimana, gimana ceritanya
Kan pas IO Extended tahun lalu
Saya ingin membawain tentang CSS, feature CSS yang baru
Terus becah-becah artikel CSS
Ya dari situ nemu bahwa beberapa feature CSS yang baru itu hasil dari
Projek interop ini
Ya, akhirnya bukan tentang interop juga sih
Karena emang lebih membahas ke CSS-nya
Tapi dari situ jadi penasaran ngecek dan ternyata wow, seru juga
Ya, ini ada hubungannya sama implementasi fitur-fitur baru di browser ya
Di berbagai browser ya
Wah, ini ada Dita, Dita
Dita, aduh saya tuh ketagian sekali sama kopi ujung, Dita
Kopi ujung pandang, luar biasa enak sekali
Nunggu event di ujung pandang lagi ya Pak
Nunggu event lagi masih lama, November ya
IO Extended aja
IO Extended, IO Extended
Kalau nggak GDG, GDG VITAP bisa juga kok
Oh udah bisa ya yang web ya
Bisa, bisa
Boleh, boleh, boleh
Tapi kita datangnya bareng kan biar bisa live bareng
Oh iya, ngobrolin web live di makasar ya
Kopi, di kopi yuk
Kopi ujung, tapi nggak ada wifinya di sana
Lekamah, lekamah
Di pinggir pantai gitu ya, enak ya
Oke, nah, ini ngomongin tentang interop
Sebenarnya sempet apa ya, mungkin ada sedikit apa ya
Dibahas sedikit gitu, di beberapa bagian di browser
Kalau nggak salah waktu kita bahas browser
Waktu kita bahas web Almanac juga ada ya bagian itu
Walaupun kita tidak fokus kesana kan
Jadi kalau
Banyaknya yang di bahas kalau dulu Almanac
Nah iya, jadi ringkasannya mas sebenarnya bisa dilihat di sini semua
Jadi sejarahnya itu, scroll ke bawah sedikit
Nah sejarahnya itu intinya tahun 2019
Para vendor, atas dulu sedikit
Ah atas, 2019 mana?
Atas atas, introduction
Oh introduction, oke
Jadi sebelum ada ini semua, ini paling pertama ini tahun 2019
Ada survey, cuma survey-nya itu kayak mendalam banget sih
Jadi lebih mirip, justru lebih mirip studi ilmnya
Yang ada metode penelitian blablabla gitu
Tentang kebutuhan developer
Nah terus dari studi itu juga
Selain identifai hasilnya
Terus mereka ngecek juga kompatibilitas
Berdasarkan masukan dari studi itu
Mereka ngecek itu browser compatibility report
Jadi sejarahnya dari situ tuh
Nah abis itu, abis 2019
Selanjutanya di 2001, 2021
Oh makanya namanya kompat 2021 ya
Awalnya namanya kompat, baru sekarang jadi interop gitu ya
Tahun 2021 tuh kayak pilot projectnya yang pertama banget
Namanya kompat 2021
Itu tadi di almanak juga
Ya udah ada perwakilan semua vendor
Dan ini sebenernya lumayan historis sih
Karena baru pertama kali kan untuk kasus web API
Semua vendor bisa kerja sama bareng
Kan kalau misalnya kalau Chromium juga kan sebenernya banyak rusakannya
Bukan cuma Google
Tapi kan itu nggak termasuk Firefox dan Mozilla dan Apple
Karena beda engine ya
Sampai Samsung segala ada ya
Iya semua yang punya semua
Bisa ketemu semua
Nah dia selalu muncul deh kayaknya itu kayak
Inclusive technology consulting
Wah ini software house ini berarti
Software house tapi kayak kelas kakak lah
Aim jago, aim jago
Itu di nas frances apa ya?
Iya kayaknya
Nah intinya punya stakeholder-nya kayak ini yang lingkupnya paling luas lah
Nah abis itu, balik ke yang si web almanak tadi
Balik ke artikel almanak tadi
Pilot projectnya ya si kompat 2021 itu
Berdasarkan developer needs assessment itu
Mereka milih beberapa hal yang perlu difokusin
Namanya focus area
Nah ini serunya
Bukan cuma perkara feature-nya ada atau nggak
Jadi ternyata nggak sesimpel
Misalnya Firefox sudah ada grid Chrom belum
Atau apalah Safari belum
Tapi kadang ada yang lebih naas lagi sih lebih nggak enak
Jadi misalnya sama-sama udah support nih
Sama-sama udah support feature tertentu
Tapi behavior-nya tuh bisa lain-lain
Kayak misalnya contohnya dulu pernah ngalamin sih yang aneh
Jadi misalnya flex, ada flexbox nih
Children-nya itu behavior-nya bisa lain-lain
Kalau image kan selama ini image dirender dengan proporsional kan
Walaupun kita nggak secara spesifik misalnya kasih aspect ratio atau width dan height
Ya kalau kita ngerender image by default itu proporsional
Nah dulu tuh sempat kalau image itu adalah child atau apa
Anak isi dari flex container itu kayaknya di Safari deh
Dia melar sendiri jadi ngisi parent-nya
Sementara di browser lain nggak
Nah itu kan ganggu banget ya
Jadi itu nggak bisa diakalin pakai feature query
Karena sebetulnya support, bukan masalah flexbox disupport atau nggak
Tapi behavior-nya suka lain-lain
Berbeda
Nah ini project ini mereka itu para vendor itu mulai nyamain
Jadi dengan cara ini seru juga sih
Mereka tuh bikin ngerjain spek dan beneran ngulik banget
Kalau begini behavior-nya harus gimana
Kalau begitu behavior-nya harus gimana
Berarti sekaligus QA-nya langsung dibuat ya
Iya, ada testing-nya kan testing shoot-nya
Test base, semua test base
Jadi semua broser akan masuk ke test ini
Terus dicek dia berapa yang fail, berapa yang test gitu ya
Harus sama behavior-nya sesuai
Jadi kadang, jadi di report-nya itu temen-temen bisa becah sendiri
Kalau iseng dan kelebihannya
Jadi kayak beberapa kasusnya adalah yang paling jelas kan
Ada yang disupport, ada yang nggak
Itu paling jelas feature-nya disupport atau nggak oleh browser
Terus kita di behavior-nya, spesifikasi behavior-nya apakah salah
Jadi kan sebetulnya semua di web API itu kan sering kita bahas ya
Berdasarkan spesifikasi
Jadi sebetulnya ini kan bukan milik Google atau milik Apple atau punya siapapun
Tapi spesifikasi bersama yang diimplementasikan oleh masing-masing vendor
Nah, jadi yang penting kan kalau spesifikasinya mungkin ternyata kurang tepat
Misalnya jadi salah paham
Salah paham atau diimplementasikan dengan berbeda oleh browser
Nah, itu mereka ngerjain itu
Jadi harusnya gimana, spesifikasinya dibenerin
Atau kadang ada kasus spesifikasinya kurang jelas
Nah, kurang jelas berarti kan di detail-in
Nah, mereka ngerjain, yang dikerjain intinya seperti itu
Oh, berarti Interop ini seperti program dari W3C atau konsorsium itu
Untuk lebih jauh lagi ya, berarti nggak cuma tulis spesifikasi feature-nya
Tetapi juga bersama-sama
Bukan, bersama-sama untuk menentukan fokus area-nya
Dan dari fokus area tersebut dikembangkan user case testing-nya bersama-sama
Jadi behavior-nya bisa sama semua gitu antara browser ini
Iya, tujuannya begitu bintinya
Oh, jadi kalau sebelum ini kan browser itu bekerja sendiri-sendiri
Ada yang implementasi grid, ada implementasi flexbox, ada implementasi spek rasio
Beda-beda sendiri gitu kan
Begitu kita mau coba tiga-tiganya, nggak jalan di ketiga browser ini
Walaupun yang satu ada grid, yang satu ada flexbox, yang satu ada spek rasio
Atau mungkin jalan, tapi itu beda-beda lain-lain
Dengan adanya ini jadi lebih kompak gitu ya
Oh, kita ngerjain ini dulu nih, bagian fokus area ini dulu kita beresin
Sebelum kita ke fokus area yang lain
Jadi, kalau pun ada teman-teman developer yang mau develop
Misalkan menggunakan fitur terbarunya dari HTML atau CSS
Itu setidaknya di browser-browser mainstream udah bisa jalan dengan
Dengan tampilan yang kurang lebih sama gitu ya, mendekati sama lah gitu ya
Nggak berbeda-beda behavior-nya gitu ya
Nah, terus kalau keuntungan yang...
Sebenarnya diuntungkan itu developer-developer kayak kita ini ya
Dari hasilnya ini ya
Jadi keuntungan praktikanya sih gini
Misalnya kita nih lihat nih kalau di demo-demo atau di video kan
Wow, great, wow, apalah gitu, fitur-fitur yang keren
Cuma kalau dikerjakan sehari-hari buat nerapin
Aduh, males lah, ntar malah nama-nama masalah kan
Nanti malah kalau di browser A bisa, B nggak bisa
Kalau kita nerapin di project yang di production
Kita ragu-ragu kan, kita takut karena nggak ada confidence
Dan kita mikir, "Ah, paling Mas Sintar 3-4 tahun lagi baru bisa"
Nah, dengan project ini ngurangin kasus kayak gitu
Kita bisa punya confidence yang lebih baik dalam
Kita lebih percaya lah kita mengadopsi API yang lebih bagus
Yang lebih baru, behavior-nya bisa sama
Dan ini kan juga bagus ya, maksudnya jadi ngurangin akal-akalan pakai JavaScript
Karena misalnya CSS udah ada feature yang memadai
Jadi secara nggak langsung bagus buat performance juga
Oke, pada 2021 ini 100% masih berkutip dengan HTML, spek dan CSS
CSS semua malah ya
Ini emang browser feature semua sih, jadi banyak kan CSS
Tapi kalau mulai 2022 udah ada masuk elemen
Elemen sama, kalau 2023 kayaknya udah masuk custom elemen juga
2022-2023, 2022 ada itu tuh, dialog elemen
Ada native HTML elemen
-2023? -2022
-Oh, 2022, dimana? -Scroll
-Dialog? -Dialog, iya
Nah, di 2022 ini udah mulai ganti nama, jadi interrupt
Karena emang fokus kayaknya, sebetulnya isinya mirip-mirip
Maksudnya spirit-nya dan intinya kerjanya ngelanjutin yang compact itu
Cuma kalau compatibility itu mungkin kelihatannya implikasinya kan semacam backwards compatibility gitu ya
Kalau ini kelihatannya mau menetik beratkan interoperability
Kayak saling bisa digunakan, bisa dioperasikan antara browser
Yang keren tuh bisa melihat hasil test-nya nih, jadi dari hasil spek-nya
Terus hasil test-nya, misalnya Safari itu baru support 90%, itu contohnya
Terus yang terakhir di tahun...
Kayak gini kan modelnya kan?
Ini kan hasil test-nya grafik ini kan per versi itu ceritanya
Kalau kita lihat dari grafik ini berarti per September 2022
Dialog ini hasil test-nya si Firefox itu masih di 80% pas, belum 100%
Yang sudah pas di terakhir itu si Chrome sama Edge tuh
Kenapa Safari tiba-tiba ada turun terus naik lagi ya?
Ngembak, berarti ada fitur yang lain dibikin ngembak
Regression kali
Regression, iya
Di upper level juga manusia
Nah, 2022 tuh fiturnya kayaknya lebih luas ya jadinya, terus lebih banyak jelas
Jadi ini carry over gitu sih, jadi kelihatannya yang dikerjain di 2021
Kalau belum selesai lanjut ke 2022, lanjut ke 2023
Nah, 2022 ini area-nya apa oh, ini ada 15 area of focus ya?
Nah, ini yang paling, 2022 itu mulai yang kelihatannya baru mulai yang niat lah, kayak 2021 itu kayak pilot semacam pilot project-nya gitu
Nah, 2022 baru
Wow, macam viewport ya
Keren ini
Biasanya kan kita pakai cuma itu aja, viewport height kan, 100% viewport height
Dan 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
Ya udah bertahun-tahun lah, pokoknya begitu, begitu Apple ngeluarin apa, fungsi kalau di scroll toolbar-nya ilang semua kan langsung request feature kayak gini
Cuma dulu kan Conan nggak bisa lah, kenapa? Karena performance dan lain-lain
Jadi orang biasanya akal-akalan pakai JavaScript, pakai event listener kan
Padahal itu kan ya nambah-nambahin kerjaan main thread juga, karena dia harus ngupdate CSS-nya melalui JavaScript
Nah, sekarang kita udah nggak harus akal-akalan nguntir kayak gitu lagi
Udah disupport belum gitu ceritanya, itulah makanya kita liat hasil tesnya
Justru itu, makanya kita ngikutin ini
Iya, betul-betul
Terus ini 2022 sih paling seru
Mereka melihat state of CSS banyakan ya, karena memang ini hubungannya sama HTML dan CSS ya
Kalau JavaScript kan soalnya beda lagi ya
Itu kan punya juga Eklatscript
Iya, punya mesin-mesin masing-masing juga kan sebenarnya, tapi mereka secara kompatibilitas mungkin tidak terlalu berbeda jauh
Dibandingkan implementasi HTML/CSS di browser masing-masing mungkin ya
Jadi mereka nggak butuh yang model kayak interrupt gini kali ya
Mungkin butuh, tapi mereka punya sendiri kali ya
Maksudnya, atau mungkin belum ada yang insect
TC39 bukan ya?
Itu kan TC39 kan urusan spek
Oh ya, implementasi nggak ada ya
Iya, berarti belum ada, interoperability belum ada
Atau mungkin masalahnya nggak serumit yang CSS ini kan
Kalau rendering UI ini kan bisa rumit banget kan
Karena UI, jadi kelihatan kalau HTML, kayaknya JavaScript ada perbedaannya
Kayaknya perbedaan misalkan, perbedaan floating point misalkan
Ya, performance, floating point, dan lain-lain itu ada
Di setiap browser itu ada, ada masalah sendiri-sendiri, cuman kayaknya nggak terlalu terlihat lah gitu ya
Dan belum butuh juga mungkin ya
Dan maksudnya developer kayaknya lebih butuh, apa skala kebutuhannya tuh kayaknya jauh lebih butuh ini hal-hal practical kayak gini kan
Nah, ini ada pertanyaan nih, keren juga ada dialog, apakah dialog akan menggantikan model yang pakai div?
Bisa jadi, bisa jadi
Iya, nanti ke depannya kan tujuannya gitu, biar ada yang di support oleh native
Terus satu-satu keuntungannya kan, dia tuh kayak udah support misalnya buat accessibility nih kan harus focusable ya
Harus pas kita klik tab, ya harus bisa difokusin
Kalau div kan by default, kegunanya bukan untuk itu
Tapi kalau dialog, ya apa, udah otomatis ada feature itu, kita nggak usah nambahin sendiri
Itu cari apa, videonya Adam Erjel ya, itu ada kok yang demo dialog, apa ya namanya, GUI challenge ya, nama seri videonya
Oh iya
Keren sih itu
Oh keren, oke oke, ya menarik tuh, apa videonya
Coba mana ya, GUI challenge dialog
Nah ini, saya konteksnya agak kurang dapat, kenapa mereka nggak update DOM API juga biar codingnya semudah pakai JS Framework?
Yang ini mengomentar yang bagian...
Oh custom element apa ya maksudnya
Custom element ya, udah ada kan custom element
Maybe
Oh, mungkin
Kalau saya custom element, ada yang di interrupt 2023 juga deh
Iya, ada ada
Component
Oh ini, building dialog component, ini videonya, bukan
Ada artiklenya, ada videonya, nggak usah nyetel video sih, liat artiklenya aja
Oh ini, ini modelnya ya, oh wow
Keren sekali
Nah lagi-lagi kita lihat gini kan sebetulnya biasanya, wah bagus, tapi ya tetap aja nggak pakai di kehidupan sehari-hari
Tetap aja pakai apalah library eksternal yang nested div, di dalam div, di dalam div
Betul
Nah karena kita nggak yakin apakah semua browser bakal support
Nah 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
Jadi lebih intinya, interrupt ini menyatukan daripada setiap browser itu sporadik dengan tujuan bisnisnya sendiri
Akhirnya secara konsursi, ayo bersama-sama kita fokus tujuan bersama gitu ya
Ya jadi udah perang browser lagi ya
Ya 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
Ya lagi pula kan
Kan bisa ada fitur lain
Ya 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
Cuma tiba-tiba ada browser engine baru, terus dibanjak semua, kayaknya cuma nggak mungkin nih, kayak apa, ya mungkin aja
Beberapa ada kan, ada yang di hire sama Brave, ada yang di hire sama Arc
Tapi Brave kan Chromium juga
Itu bukan engine baru sih
Belum-belum, pasti ada sih
Tergantung ini aja, penting kalau ada yang baru atau nggak
Nah itu 2022, fokusnya kan ke-15 tadi ya
2023 atau nggak, '6', mana-mana
2022 dulu, casket layer ini apa, nggak tahu
Oh casket layer ini, seru ini
Jadi 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
Buat ngatur prioritas, jadi perkara mana yang menang, specificity, nah ini ya, paling susah ngomongnya
Yang itu, important-important semuanya
Jadi biar nggak harus important-important atau nggak harus pakai ID
Ini kita bisa nentuin, prioritas berdasarkan pengelompokan
Jadi kalau dulu, jaman dulu SAS itu kan ada misalnya base, kita mengimport kayak base layer
Terus misalnya komponen atau modus
Terus bisa dimming, biasanya yang terakhir yang harus menang, karena dia soal warna atau font
Nah, ini didukung secara native, jadi kita bisa mengelompokan prioritas berdasarkan yang kita define sendiri
Ada pangkatnya ya, masing-masing SAS property itu ya
Tingkat kekuatan
Tingkat kekuatan
Ada color space yang biasa dipakai untuk model kayak calculate
Terus ada color mix dan contrast
Gabungkan macem-macem warna
Terus yang ketiga kita bahas viewport tadi udah kita bahas, scrolling, scroll snap, scroll behavior
Nah ini lumayan familiar juga ya
Ngatur gimana cara kita scroll di web browser kan
Subgrid, nah subgrid ini berarti
Scroll snap itu serunya kita bisa bikin karusel, scroll snap kan
Biasanya kan yang standar lah, misalnya kita mau memindahkan banner 1 ke banner 2
Itu kan dulu harus dihitung pakai JavaScript ukuran bannernya berapa, harus loncat berapa pixel
Nah, kalau ini udah otomatis dihandle oleh algoritma rendering CSS objek modelnya
Wah, menarik
Ada subgrid, subgrid ini berarti lanjutan dari grid ya
Grid di dalam grid nih berarti
Iya, jadi biasanya kan kalau grid cuma bisa buat ngatur si direct children-nya atau elemen yang pas di dalamnya
Padahal kan kalau prakteknya ga mungkin, ya sulit kalau kita harus ngatur semua flat
Jadi kayak cuma satu level ke bawah tuh suka agak sulit kan
Kadang kita punya apa, penglompokan sendiri
Jadi ini bisa buat ngatur elemen cucu atau grand children-nya
Jadi isi di dalam child-elemen
Okay, investigating effort
Oh, 15-nya apa? Tadi baru segitu
Atas itu
Udah sampai subgrid, oh ini kali ya
Typography, webcompat
In addition to 15 focus area interrupt include investigation effort
Mr. Success in tracking progress
Jadi dia pakai weblock focus dashboard ya
Ya webnya ini, jadi salah satu effortnya untuk key area-nya membangun web yjp.fy ini
Itu dashboardnya tuh kalau kita pengen ngulik dan ngikutin, ngikutin perkembangannya
Tapi ini baru 10 item loh, 5 lagi mungkin ga sempat dikerjain ya
Itu bawa ya, jadi dia carry over
2021?
Ya carry over
Ya ada gitu ternyata, 2021 kan cuma 5 nih
Terus kan belum 100% semua lanjut, ditambahin total jadi 15
Ujung-ujungnya nambah terus, ga kelar-kelar
Terus, 2023 banyak, 26 jadinya
Mana 23, ini ya 2023, focus area-nya ada 26
26
Carry over lagi ya, tambah 11
Tambah 11
Border image, color space, container query
Ini border image nih
Border image sebut apa sih, belum pernah coba
Buka aja coba
Border, biar bisa load image
Oh terus kayak gradient gitu ya
Kalau gradient kan kita ini sendiri kan pilih warna
Kalau ini ya mungkin bisa dari image
Misalkan kita punya pattern gitu ya, pattern apa gitu
Kayak fractal atau apa, dijadiin border gitu
Kalau dulu kan border cuma bisa warna kan
Bahkan kalau gradient pun itu sebenarnya diakalin kan
Diakalin pakai background ya
Iya, jadi sebenarnya dia background
Terus abis itu ditaruh lagi div di tengahnya, dikosongin kan
Jadi ada bolongan gitu kan
Sebenarnya
Sudu, apa sudu ya men
Sudu selected
Color space, ini color space yang tadi ya
Container query masih
Flexmoves juga masih
Ada form, ada grid
Has, ini juga lumayan keren ya
Iya, gue suka pake ini
Has
Di CSS ya
Selector buat mentargetkan parent ya
Parent atau element sebelumnya
Kita kan pengen tahu
Gimana caranya supaya itu si parentnya punya style
Kalau childrennya punya ini tuh, spesifik
Paling sering itu kan
Misalnya di dalam form ada yang error
Berarti backgroundnya harus kayak merah
Dikasihkan merah luarnya
Menu yang ada garis bawahnya yang mana yang aktif
Kayak gitulah
Pernah dapat kasus dan pakai has menyenangkan
Oh, ini damar lumayan advanced nih
Paling nungguin scroll timeline
Oh, biar bisa bikin timeline ya
Yang di 2022 tadi ya
Scroll timeline coba lihat
Gimana sih scroll timeline
Scroll link animation
Gak ada
Scroll behavior
Ada
Mana
Scroll time, mungkin bagian dari
Oh, gak ada? 2023 apa?
Ada nih
Gak tahu
Practically use CSS
Yaudah, Googling scroll timeline aja lah
Googling scroll timeline
Seru nih
Scroll timeline
Scroll link animation
Oh, ini
Oh, nice, disambungin sama CSS animation
Oke
Ini implementasinya buat apa nih?
Damar, mungkin boleh info
Mau dipakai buat apa sih?
Penasaran bentuknya gimana?
Ini ya?
Bikin animasi ya?
Coba
Scroll vertical bar to see the animation
Oh, jadi itu loh
Biasanya kita kan harus pakai intersection observer
Kayaknya ya, kalau dia on screen
Kita trigger class untuk animate
Ya kan, biar kalau masuk on screen
Dia fade in lah
Atau dia, nah, dia muter kalau on screen
Nah, ini kelihatannya di handle dari CSS juga
Oh, jadi kayak ini ya
Kayak, apa, ada
Kalau dulu kan misalkan landing page
Kita scroll, dia ada animasi gitu ya
Model gitu ya
Masuk on screen, dia fade in
Atau apalah, muter atau ngapain
Nah, ini jadi gak harus bergantung JavaScript lagi
Oh, morning CSS ya berarti ya
Mantap
Animasi-animasi sekarang CSS banyak yang udah bisa ya
Canggi-canggi ya
Itu yang di atas tuh
Scroll yang di atas tuh
Ya gak, itu yang scroll yang merah
Makin di scroll ke bawah, makin damar
Kalau dulu harus pakai JavaScript itu
Oh, sekarang udah di CSS ya?
Iya
Diitung document height
Terus dia punya scroll
Scroll position
Dikurangin
Harus matematika lah
Kalau ini
Terus sekali ya
CSS
Oh, dulu kan pakai, ada JavaScript
Laboratinya tuh dulu
Lupa gue
One second linear forward progress
Gitu doang
JavaScriptnya gak ada
Iya, dulu pakai blablabla
JS scroll timeline
Iya
Ya, polyfill lah tetap
Polyfill ya
Nggak, itu kan bukan polyfill
Oh, polyfillnya kalau browsernya gak support ya
Kalau mau
Iya, kalau mau pakai polyfill tinggal diambil
Atau sebelum ada, sebelum ada fitur ini
Jadi harus pakai JS mau gak mau kan
Iya
Terus ini kan sebenarnya progressive enhancement ya
Tergantung produknya juga
Tapi sebetulnya gak ada animasi gitu juga gak apa-apa kan
Gak, iya tidak mengurangi, tidak merusak
Tidak mengurangi rasa hormat
Tidak mengurangi rasa hormat
Kalau you pakai browser lawas ya udah gak apa-apa
Gak dapat, gak dapat feature UI lucu-lucu gitu
Tapi kalau pakai browser baru ya dapat
Dapat fancy UI
Wih, CSS masking asik
Gimana nih, coba
How about method to apply image effect
Apply image effect
As you might see in a graphic application using CSS
Support for various masking properties is patchy
Making masking harder to use than it should be
Udah ada tapi sulit, sulit dipakai
Article about image masking
Coba buka artitulnya deh
Browser compatibility
Webkit, mask image, url, mask image, url
Oh image ke image ya
Masking with an image
Mana dia masking, oh itu
Jadi sekarang avatar-nya bisa gak cuman bullet doang
Bisa rounded, bisa bintang
Kalau bullet mah border reduce 50% ya
Oh jadi ini ada 2 image ya
Image pertama itu yang ini
Yang kedua itu yang gambar bintang
Digabungin jadi masking gitu ya
Oh ini kayak kalau graphic application, photoshop dan lain-lain
Bisa ya itu pakai layer kan biasanya
Betul
Ini bisa pakai CSS
Offscreen canvas
Pointer and mouse event, web codecs
Pointer and mouse event ini bagus juga ini, seru
Jadi kalau jaman dulu kan touch screen tuh
Belum terlalu umum ya
Jadi kan pointer events
Mau click dari mouse, mau click dari touch screen
Itu masih dianggap yang fire
Event yang jalan adalah pointer event
Padahal kan sebetulnya kebutuhannya beda banget ya
Misalnya contohnya kalau mouse
Bisa di mouse over, munculin tooltip
Misalnya bisa di hover
Kalau touch kan enggak
Nah itu tuh selama ini kan
Workaround-nya pusing banget, hacky banget
Buat ngakalin, buat cari tahu
Apakah suatu pointer event itu dari mouse
Dari device macam mouse
Atau dari touch
Nah ini keliatannya mau di improve
Di bidang itu untuk membedakan
Antara mouse sama touch
Ada cara aja ya
Ya kan dia yang bikin berapa suaranya
Kayak bikin feature baru
Berarti ya sudah langsung ke low level ya
Bisa tahu dari cc
Justru mereka kan dari cc++-nya atau apa
Ada web codecs untuk video audio
Sama ada web component
Coba coba web codec-nya apa sih yang baru
Oh belum tahu, oh ini cuma kayak fokus
Untuk nambahin web codec yang baru ya berarti ya
Dia pakai apa ya
Pilihannya web codec-nya apa
Kan ada yang baru kan api 1 gitu-gitu kan
Stream dan apa kayak transformer gitu ya
Yang kalau kita streaming video
Bisa nge-stream
Mentahannya lah intinya
Kita lihat itu yang di www.wpt.fi-nya
Apa aja ya
Media streaming, media recording, media source
Dan web RTC
Bukan itu kan api-nya sudah ada
Sekarang untuk codec-nya yang baru apa
Belum, belum tahu
Ini coba codec in action
Tapi apa yang codec-nya
Oke ada web component juga
Yang sudah mulai tidak terdengar
Walaupun sebenarnya
Karena mau di improve
Kita pernah bahas ini ya
Kita pernah bahasa
Ya shadow dong
Oh ini sebenarnya nggak nambahin feature baru
Tapi improve interoperability of
This foundation
Terus sudah ada itu tuh dashboard-nya tuh
Iya ini sebabnya kenapa
Salah satu sebabnya kenapa
Fitur-fitur seperti ini
Web component dan lain-lain ya
Fitur-fitur web itu agak lama developnya
Karena dia harus memikirkan semua browser
Beda sama kalau kita bikin library
Library bisa aja bilang
Oh ini ya
Hanya bisa berjalan di sini gitu
Atau pakai polyfill gitu ya
Pokoknya web component ini kayaknya
Berkembangnya kok lambat banget gitu
Apalagi
Kalau temen-temen ada yang udah pakai
Yang benar-benar vanilla web component itu kayak
Boilerplate code-nya banyak kan
Kita butuh library atau
Facebook di atasnya lagi kayak
API-nya kurang ramah
Kayak stencil JS atau
Ada skeen ada macem-macem ya
Nah
Lead juga yang paling ini ya
Yang salah satu yang
Keluarannya dari Google juga
Iya jadi kayak
Masih butuh ada layer abstraksi di atasnya
Nggak bisa langsung vanilla
Itu
Itu sebabnya
Ya ini
Masalahnya
Harus didukung di semua browser
Cuma kan dia bikin bagus-bagus buat Chrome
Tapi abis itu dibuka di Firefox atau di Safari
Nggak bisa
Nggak jalan
Nggak jalan
Jadi mereka
Bikin apa low-level API-nya
Ya temen-temen yang lain yang nggak sabaran
Dalam tanda kutip
Ya silahkan bikin framework di atas si web component ini
Dashboard-nya
Nah ini
Dashboard 2023 ya
Mari kita lihat
WPT FYE
WPT FYE
Web Platform Test
Kayak namanya si Eka
Eka FYE
Domain
TLD
Favorit
Murah-murah ya
Nah ini dashboard-nya bagus banget sih
Seru banget
Temen-temen bisa lihat di sini
Kayak masing-masing fokus area-nya apa aja
Dan angka-angka itu
Yang ijo tuh 87
76 87
Itu adalah
Prosentase test yang pasing
Jadi ini sebetulnya
In a way kayak test driven development juga
Cuma
Kalau yang kita pernah
Kita sering bahas dulu kan
Test driven development untuk aplikasi web
Nah ini test driven development
Buat
API browser
Atau API web
Iya iya iya
Jadi
Tapi kalau lihat di sini
Si Safari kayaknya
Tidak tertinggal jauh ya
Justru malah Firefox Nightly yang lebih
Rendah ya
Ya ini mungkin kan
Overall ya keseluruhannya
Coba cek yang stable deh
Oh ya stable ketinggalan ya
Enggak, masih lebih menang daripada Firefox
Lisi satu
Lisi satu
Nah terus persenanya
Persenanya dari mana aja kan bisa dilihat tuh
Di sebelah kanan
Dan ternyata ada
Masing-masing kan ada karakternya sendiri
Misalnya nih
Firefox dari dulu banget tuh
Kalau soal yang CSS dan layout-layoutan
Itu kan yang paling maju
Mereka grid dulu
Chrome belum adopsi
Udah ada grid
Dan dulu DevTools-nya grid-nya yang
Yang udah ada grid lines-nya bagus itu
Ingat sih dulu Firefox DevTools duluan
Baru belakangan
Habis itu baru Chrome DevTools
Ya karena memang berguna buat developer
Chrome juga adopsi
Enggak tahu
Safari adop juga atau enggak
Itu Firefox
Terus sedangkan kalau si Safari kan
Punyanya Apple ya
Apple device-nya terkenal
Feature warnanya
Apalagi yang visual-nya kan kuat
Jadi feature-feature yang berhubungan sama
Warna itu biasanya
Safari itu maju
Bagus
Kalau Chrome misalnya di capability
Yang apa
Feature-feature baru yang breakthrough
Ya itu
Masih ada tuh kayak off-screen canvas
Safari kagak peduli masian
Sama WebCodec
Si Chrome
Maju tak dentar
Kalau yang
Feature-feature di capability gitu
Chrome kan emang
Ya emang spesialisasinya disitu
WebCodec tuh yang lain 1,3
Iya
Belum mau gitu
Nah itu subgrid lah
Subgrid
Subgrid malah
98% di Firefox
Safari ya
98%
Tapi grid-nya sendiri
Walaupun Firefox lebih dulu
Tapi sekarang Safari
Sudah mulai memimpin
Beda 2%
Tapi berarti grid udah lumayan aman ya
Karena ini kan udah dari yang 2021
Jadi kita udah bisa
Confident lah pede pake grid
Udah dari 60%
Udah dari 60%
Kayaknya form
Itu form
Forms-nya coba
Ya klik aja coba
Mungkin bagian apanya
Gak ada
Gak ada dijelasin
Form-nya apa ya
Ini tadi yang 2023
Fokusnya ke forms
Coba deh atas dikit
Scroll atas dikit
Projek dokumen
Bukan bawah dikit
Nah
Dari forms
Forms
HTML elemen represent
Dokumen section blablabla
Coba liat test-nya apa
Kalau elemen form-nya
Kan udah ada nih
Yang mau di test apanya
Oh mungkin kesamaan ininya kali
Behaviour
Behaviour-nya misalkan
Input type date misalkan
Contohnya dog down aja
Safari beda banget kan
Beda sama android
Combo box
radio button
Input
CSS dong
CSS-nya juga disamanya sama dia ya
Ya tampilannya
Diusahkan semirip mungkin
Antar browser
Atau bukan dibikin test-nya
Harus pass
Gitu
Bentuknya kayak apa, gak tau sih
Ini test-nya kayak gimana ya, ya penasaran
Appearance button
Ada gak sih ini, keliatan gak
Oh gak ada
So details
Ada yang bisa diliat press-nya sih
Oh atas atas, run in your browser
On wpt.live
Tuh atas, bawah dikit
Ini
Oh ini tujuan akhirnya seperti ini
Bentuknya
Ya mungkin ada
Assertion-nya
Kalau yang CSS sih ada assertion-nya
Jadi kayak you should see
Green box misalnya
You should see red border
Atau semacamnya
Gak ada ini ya
Gak keliatan
Oh dulu
Ya itu HTML biasa malah sih
Iya makanya
Yang menarik lagi dari
Projek ini
Semua test suit-nya itu ya
Gak pakai library
Atau framework apapun
Karena tujuan jalan emang
Ngecek behavior browser
Gak ada
Sebisa mungkin gak pakai
Apa-apa sih
Jadi bener-bener unik ya
Ya kalau misalnya ini
Udah passing kan kita mau bikin
UI library atau framework
Apapun di atasnya ya bebas
Cuma kita udah confident di
Level vanilla, level browser
Nah ini secara keseluruhan ya
Untuk interop
2022
Berarti ini
2023 itu
2023 ya
Ini live
Ya live ya
Live-nya
Safari masih paling atas
Untuk error-nya
Ini error ya?
Iya ini error
Browser specific failure graph
Semakin di bawah
Semakin bagus
Jadi yang paling bagus adalah Chrome kan
Yang paling banyak adoptinya juga
Kemudian Firefox dan
Safari tentunya
Tapi Safari udah cepet banget nih
Begitu dari sini bong ke bawahnya
Semakin mendekat
Kayaknya ada satu bug
Terus dia
Tiba-tiba solve gitu ya
Satu solve, tiba-tiba semua solve
Sering terjadi
Sering terjadi
Iya
Seru ya
Ini detail ya, detail semua
Satu per satu fiturnya
Dibahas di sini ya
Maksudnya ditampilin di sini ya webnya
Testingnya
Ini hanya testing report aja kan
Kayaknya jumlah testingnya
Jumlah testing yang pas
Plus jumlah total testing
Dapat beberapa persen gitu kan
Akhirnya bentuknya jadi persenan
Seperti ini
Ini yang experimental, ini yang stable
Stable
2023 masih panjang kan
Ini 78 persen baru
Bulan Februari akhir
Besok Maret
78 persen okelah
Maksudnya baru segini nih kita
Kalau ngitung sampai Desember ya
Kita baru berada di sini
Jadi di awal
Masing-masing kayak dari
Google, Mozilla
Webkit, Apple
Bikin artikel
Mengenounce
Ngumumin ini
Kan mereka kasih update lagi
Gimana perkembangannya
Mana yang udah paling maju
Mana yang belum
Yang harus lanjutin tahun depan
Eh tahun depan kalau nambah lagi
Jadi kalau semuanya difokusin
Nggak ada yang difokusin
Itu kayak saya
Importan semua
Itu tuh viewport unit
Sebetulnya udah selesai kan
Bisa dipindahin, digeser ke Dan
Lupa kali dia belum
Yang tahun depan
Berarti udah
Tikatnya harus digeser
Itu udah kelar 100 persen
Semua
Sudah kita bahas apa lagi nih
Masih ada pembahasan
Nah
Ini contoh yang kayak tadi
Tapi yang CSS itu buka deh
Di private
Linknya di chat
Di chat private
Oke sebentar
Copy
Paste
Eh temen-temen yang di chat boleh ya
Kalau ada yang mau ditanyakan ya
Berkaitan dengan topik atau nggak silahkan
Kalau ada yang mau bertanya
Tapi belum tentu kita jawab nih
Kalau bisa kita jawab ya
Kalau nggak tau ya kita tanya balik
Ini apa nih
Itu
Contoh tapi buat yang CSS
Coba buka CSS
Oke selektor
Auto
Oh untuk webkit
Masih ada bugs ya
Tapi Firefox kuning
42 persen
Karena
Dari 6.9 tes baru
Passing 2.9
Ini seru sih
Ada detail banget
Ada beberapa test yang
Subtest yang passing
Yang bikin unit testingnya ini
Astaga
Niat banget
Kerja di Google
Mozilla dan Apple sih
Cuma ini kan open source semua
Sebenernya menariknya ini semua repunya public
Jadi kalau kita pengen bikin pull request
Theoretically ya
Bahkan bisa belajar
Bisa belajar
Vanilla nya sendiri bisa tau
Ini cara pakai gimana tinggal kunjungi aja
Iya benar
Nah tuh kan
Tes
Tesnya beneran ya HTML, CSS biasa
Eh tapi paragrafnya nggak ditutup
Ini
Kenapa ditutup ya paragrafnya
Bisa broser bisa auto
Broser itu bisa auto
Biar nggak rusak
Broser itu
Harus forgiving
Salah-salah dikit
Nggak boleh ngerusak semuanya
Wah
Iya kita bisa belajar testing juga dari sini
Melihat-lihat ini tuh
Bisa
Inilah belajar apa
Visual testingnya
Terus
Nah kalau yang automated testingnya sebenarnya dia
Dia pakai python ada
Cuma sebetulnya ya
Automatednya itu cek di repunya aja
Nah cuma
Kalau kita mau pakai
Pakai dari visual
Ya tinggal dilihat aja yang gampang sih itu tadi
Buka di
Misalnya apa ya bentar
Di WPT live tadi
Misalnya
Oh wait
Gimana ya
Ini ini
Buka ini
Di private get linknya
Copy
Paste
Di sini
Tadi misalnya
CSS
CSS buat
Cek
Nth child of class name bukan
Iya benar
Benar-benar
Run in browser
Iya run in your browser
On WPT live
Test-pass is there is a field
Ininya apa
Nah coba aja
Lihat kodenya kayak gimana
Oh testnya belum passing ini
Kalau di browser kita ya
Berarti di Chrome
Iya ini brave
Lagi pakai brave
Belum passing 100 persen ya
Iya belum karena
Dia bakal passing kalau
No rate
Container
Balik ke
Dashboardnya tadi
Ada link bug reportnya juga ada penjelasannya
Mana
Ini CR bug ini
Iya
Oh ini buat diskusi ya
Jadi kenapa
Kenapa error
Terus ternyata ada selektor baru
Ada sudut basis baru
Ternyata speknya berubah
Terus ini sampai bawah banget
Sampai yang paling dari
Diskusi awal 2014 sampai sekarang
Paling bawah 2023
Masih ada
Ada detailnya
Begit ya bikin browser
Intent to ship
Mana intent to ship
Oh baru intent to ship ya
Maksudnya untuk salah satu
Bug yang ini
Untuk satu gitu gitu
Harusnya cuma
Ijo gak boleh ada merah
Nah ini kan berarti kita
Ngetes secara manual secara visual
Di browser
Kayaknya kalau direpo nya
Ya mungkin
Harusnya gak render ya
Punya browser yang ini gak mas
Browser yang
Chrome dev
Gak punya
Coba ada yang punya
Kirimkan link nya dong
Di private chat ada yang paling bawah
Gua chrome dev soalnya
Asik
Lebih baru dev apa
Lebih baru canary
Canary experimental
Canary paling mentah punya urutannya
Canary dev
Stable
Gua tunjukin nih chrome dev gue nih
Canary dev beta stable
Tadaa! Ijo semua
Mana?
Mana? Belum share dong
Oh belum ya? Oh salah
Udah suspek sini
Ya
Ternyata ada masalah permission
Masalah permission
Tunggu tunggu
Gua harus kasih permission
Sudah?
Sudah nih?
Coba lagi ya
Share screen
Tadaa!
Chrome has lost permission to capture your skin to fix
Go to
Apple
Ya sudahlah
Oke sambil menunggu
Ini ada pertanyaan bagus nih
Pendapatnya sama browser-browser baru kayak ARC
SigmaOS
Tapi engine nya Chromium
Gatau mereka ikut maintain Chromium project juga atau engga?
Kita sebenernya udah sempet bahas
Sekilas ya
Di episode keberapa ya
Episode yang tentang browser lah
Kita bahas tentang ARC tapi SigmaOS ini kita gak bahas ya
Baru tau juga nih ada
Ternyata
Beberapa dari mereka
Kalau gak salah mereka kontribusi
Beberapa ya
Tapi itu orang-orangnya masih orang-orang yang sama-sama
Yang bikin Chromium dan lain-lain
Kalau edge mungkin karena punya nya
Microsoft kan ya
Company yang besar jadi punya banyak
Tenaga human resource
Yang bisa dikerahkan
Kalau yang
Perusahaan kecil kali ya
Tergantung
Mungkin di awalnya mereka gak kontribusi banyak
Tapi ketika mereka mungkin udah dapat
Revenue dari
Browser nya
Gimana caranya
Mungkin mereka akan kontribusi baik itu
Kontribusi kode ataupun donasi
Biasanya
Dan karena nature nya
Chromium itu kan emang
Project open source
Jadi emang dipersilakan
Buat semua termasuk kita
Kita secara individu kalau iseng pengen
Bikin browser
Bertesarkan Chromium ya boleh aja
Tanpa harus kontribusi
Cuma biasanya makin luas jangkauannya
Dan banyak penggunanya kan makin punya
Kepentingan yang lebih besar ya
Jadi pasti bakal
Terdorong buat kontribusi juga
Ya betul
Dan beberapa
Beberapa orang
Yang ngerjain Chrome browser
Itu beberapa ada yang
Direkrut juga ke
Art ke mana gitu
Karena memang dia
Ya ekspert lah disitunya
Di bidang per browseran
Terutama Chrom ya
Chromium dan Chrome
Gua mau kasih sedikit
Supaya tidak salah paham
Developer untuk browser
Beda loh dengan developer web
Totally different
Beda bahasa
Beda bahasa
Meskipun mereka bikin render nya
Bukan berarti mereka juga
Ahli HTML, CSS, JavaScript
Bukan hati
Bahkan banyak yang gak tahu
Gak bisa
Bikin web itu mereka gak bisa
Mereka bisa rendering web tapi
Untuk bikin webnya
Gak bisa
Bisa cuman tidak expert
Ya terus
Memang bukan tugasnya sih
Kalau bisa gak bisa sih subjektif ya
Cuma emang job desk nya
Itu job desk yang sepenuhnya berbeda
Jadi browser itu bahasanya
C++ ya biasanya
Bahasanya low-level
Low-level yes
Ada beberapa yang
Mulai kan
Pakai RAS, pakai apa
Yang baru-baru ya
Browser pakai RAS atau
Maksudnya browser pakai RAS
Engine nya pakai RAS
Yang kemarin kita bahas, yang dari Firefox
Dari Mozilla
Servo engine nya
Itu pakai RAS
Gimana sudah
Udah sampai mana dia?
Mereka sempet
Gonjang ganjingan karena si Mozilla nya juga
Banyak lay off kan beberapa tahun yang lalu
Tapi kayaknya udah mulai
Mulai stabil
Mulai, bukan stabil ya
Mulai ada lagi pergerakan di open source nya
Karena kan ini jadi
Murni open source, kalau kemarin-kemarin kan
Ada penggeraknya lah Mozilla kan
Tapi sekarang kayaknya
Murni open source jadi mungkin
Dan mungkin karena di browser juga
Kubu-kubuannya udah
Sempit kan
Mau pilih Chrome, Chromium base
Si Firefox
Dan wetkit gitu
Atau safari
Jadi mungkin
Mereka nggak ngelanjutin atau gimana nggak ngerti lah
Itu kan sebenarnya si servo nya sendiri
Juga eksperimental kan
Kayaknya udah startin
Tapi itu penasaran nih
Apakah dia dipakai di
Chrome, eh di Chrome sorry
Di Firefox sekarang atau?
Iya Firefox
Itu juga cukup penasaran sebentar
Ini dia yang kita omongin
Servo
Parallel browser engine
Independent modular
Embedded web rendering engine
Return in rough
Terketingan ya, maksudnya bisa
Kalau mau di-port
Di-port atau di-olah lagi
Ibaratnya kita mau bikin
Browser baru pake servo
Nah ini ada roadmapnya nih
Kita lihat aja roadmapnya
Q1, Q2, Q3, Q4
Layout engine selection
Oh berarti emang bener-bener bikin dari
Scratch semuanya
Belum jadi, masih ada layout engine selection
Pilih-pilih sampai Q2
Terus
Project reactivation
Projectnya sempat berhenti soalnya
Terus ini
Basic CSS 2 support
Explore Android support
Embedded web engine experiment
Dan lain-lain
Ini pakai RAS semua ya
Murni RAS based
Nah kalau buat webkit sama
Chromium yang sekarang, yang di luar servo
Berarti masih C++ semua kan ya
Sebetulnya
Ya sepertinya gitu
Tapi ini udah bisa download
Apa yang?
Tapi gue coba install juga gak bisa dipake
Maksudnya
Belum bisa
Itu engine-nya doang
Engine-nya doang gak ada go-innya
Gak ada apa kali ya bikin sendiri
Ini ada servo.app?
Iya, gue jalanin dia cuma
Gak ada address barnya
Jadi gak bisa di-typing
Buka yang cuma
Servo webnya doang
Apa gue salah kali ya
Masih ada error-error kayak gini kali
Mungkin engine doang kali
Coba aja dong
Kalau mau pake
Mesti bikin browser sendiri
Iya, UI-nya gak ada kali ya
Event OS
Back-end doang, front-end-nya
Belum ada
Ada, UI-chipnya cuma buka servo.org
Orgonya doang
Gak bisa
Ada
Address bar
CSS2 aja belum support
Panjang nih jalanin ini
CSS2 aja belum support ya
Masih lama
Iya, ini kan
Projek, iseng
Projek eksperimentalnya si Mozilla
Udah gitu Mozilla juga bingung sama ininya
Oh iya bener, di Windows juga gak muncul apa-apa nih
Habis install
Unresponsive
Iya
Berarti masih lama nih
Masih panjang ya
Panjang
Issunya banyak tuh 3.400
Di GitHub
Iya, kalau mau bantu-bantu
Silahkan buat yang senang
Ruiz
Raspberry
Oke
Bahas apa lagi kita?
Udah habis pembahasan?
Apa? Habis
Kira-kira
Oh bentar-bentar, ada lagi terakhir nih
Terakhir si ada reponya
Oh
Terakhir
Repo, oh ini ya
Kalau pengen liat semua
Kalau dari dashboard kan tadi
Mungkin agak ribet
Kalau langsung pengen liat kodenya
Ya bisa dicek dari reponya aja
Oh ini ya buat
Ngetesnya ya
Oh sama itu kan
Yang kayak tadi
Cuma ini tampilan dari reponya
Sama
Di about-nya kan
Sebelah kanan tuh tadi ada
Link ke website
Webplatformtest.org
Yang menjelaskan tentang
Testnya sendiri
Nah itu dokumentasi
Jadi kalau yang tadi sebelumnya kan dokumentasi tentang
Project Interop-nya
Nah kalau ini tentang
Testnya sendiri, test suite-nya
Webplatformtestnya itu
Testnya
Cara kerjanya gimana
Inter-test suite-nya gimana
Formatnya, layoutnya
Cara jalanin dan lain-lain
Jadi kalau tertarik
Ada test harnas
Ada crash test, ada manual test
Ada macem-macem ya
Wow lengkap sekali
Apa yang bikin ya
Kok rajin sekali mereka ya
1545
Contributor
Tertinggi siapa nih
Ditung dulu
Oh gak kenal ya
Magr
MS-2gr
Ini siapa
Fulip
Oh ini si Philip kan
Yang dari Google kan
Yang tadi ada videonya kan
Video yang mana ya
Oh iya iya
Yang tadi video tentang dialog
Oh bukan
Oh bukan
Oh bukan
Yang disini bukan
Yang dia tulisnya, ini kan
Temennya Robert
Tau-tau
Temen dong
Siapa tau musuhan diem-diem
Tapi sambil sebul-sebulan
Tulis artikel bareng
Kalau dari profilnya sih
Itu dia
Dari 2014
Berarti udah ada dari 2014
WPT ini
Cuma mungkin belum
Ada interopnya kali ya
Belum fokus ke usaha interop
Interop
Antar browser
Terus disebelahnya itu ada auto Fulip
Ini robot ini ya
Akun out
Auto Fulip
Iya
Dari 2008 nih berarti
Bener gak kalo ngeliat ininya
Mungkin dulu ini kali ya
Apa namanya
Komportability
Mungkin dulu diawali
Refonnya dibuat tapi belum ada yang
Belum ngapa-ngapain
Ya ambil user-user aja
Habis itu nanti apa
Ada yang join, ada yang join, lama-lama jadi gede kan
Sampai compact itu
sendiri awalnya dari MDN doang kan
Habis itu baru
Google Chrome
Safari, Webkit dan lain-lain
Ya kayaknya kalo yang MDN
C2D itu udah
Udah barengan ya
Oh iya ini kan udah
C2D juga nih
Pak Filipini yang tadi
Tiga orang ini berarti ya
Yang surveynya ya
Awalnya surveynya
Timnya banyak
Cuma ini kan kalo surveynya kan
Analisisnya kan teknis banget
Berarti yang harus dari Google
Dan Mozilla
Ada orang Indonesia gak ya
Gak ada ya
Satu hari semoga
Eka
Akan gak bisa
Saya webdefu kan
Roserdefu
Itu siapa yang di Indonesia
Yang di Jepang
Rakinah
Kita lihat namanya
Sebelum disitu kita
Kita undang dulu
Nanti kalo udah disini susah
Kita undang nanti Rakinah
Bisa-bisa
Seru-seru
Oke, kalo
Tidak ada pembahasan lagi
Berarti, tapi kita sudah habis
Malam hari ini
Udah lewat sejam juga
Ada yang seru dan agak mirip soal gini juga ya
Soal kerja sama
Untuk bikin
Feature-feature dozer
Atau web API
Oke
Penasaran gak?
Penasaran ya, tungguin minggu depan ya
Tapi sebelum topik berikutnya
Ini ada beberapa pertanyaan dari Slido
Yang bisa kita jawab juga mungkin
Apakah ada minimal keamanan
Atau website agar layak keproduksian?
Misalkan CSRF
Coarse dan lain-lain
Nah itu udah di jawab sendiri
Iya
Ada, harus CRF
Coarse
Itu yang ada standard
Standard security itu siapa sih
Yang buat itu?
Web
Vulnerability test
Saya lupa
Lama organisasinya
Dia kan ada minimal
Kayak
Checklist-nya gitu ya
Iya checklist-nya
Ada, ntar kalau nemu
Saya cekasi deh
Coba tuh buka
Web.dev/secure
Kalau misalnya pengen liat
Kisih-kisihnya
Web.dev/secure
Search screen dulu
Ini adalah
Checklist ya
Dasar
Dasar, oke
Yang pasti kan
Ada kayak
Anchor
Tag A itu biasanya kan nggak boleh
Harus ada no referral, no itu kan
Itu juga salah satu kan
Itu buat SEO
Oh itu buat SEO
Bukan buat security ya?
Ada, cuma udah
No referral
Udah di fix
No archive
No referral gitu
Nggak tahu deh
OWASP, nah thank you
Mas warga CP, betul
Kalau saya sampai lupa
Yep
Itu organisasinya
OASP
Kayaknya salah deh
OWASP
O-W-A-S-P
Open source foundation
Non-profit
That works to improve the security of software
Untuk security
Atau nanti ada baca OWASP top 10
Di projects
Apa?
OWASP projects
Top 10
Minimal jangan masuk top 10 inilah
Kalau bangun website
Nggak muluk-muluk ya
Ini yang bener ya OWASP
Cuma itu udah mewakili semua sih ya
Kalau web kan
Mungkin nggak butuh se rumit
Yang misalnya jaringan
Jaringan intranet di kantor
Atau apalah
Kalau aplikasi web ya udah cukup
Mewakili kan tuh
Yang paling minimal
Paling minimal HTTPS ya
Itu udah minimal banget
Jangan sampai HTTPS aja
Itu security yang paling minimal
Jangan sampai kita masih pakai HTTPS
Apa namanya?
Bisa baca juga
Ini saya lupa, itu di projects
Ada di projects-nya di atas
Projects, di menu projects
Terus ada di web security
Testing guide
Terus masuk di stable
Nah itu ada
Testing untuk
Beberapa security
Ini semua testing guide-nya
Tinggal dikutin aja ya
Principle of testing
Testing technique explained
Contohnya apa? Penetration testing
Web security testing framework
Di bawah ada tadi
Web security testing
Ini mendalem ya sebenarnya
Tapi
Secara basicnya
Dan secara implementasinya
Jadi
Minimal
Kalau ada security
Atau pen test di company
Ya ikuti aja ini
Tandapnya
Untuk webnya
Ya ini salah satunya nih
Fingerprint ini
Fingerprint ini kalau temen-temen
Kayak pakai churl atau pakai
Klik kanan inspect element
Terus network gitu ya
Contohnya misalkan server
.2 express, nah itu jangan bangga ya
Itu harus diumpetin
Jangan sampai orang tahu
Kalau server kita pakai express
Atau apache
Atau nginx
Karena bisa itu ya
Vulnerability ya
Kalau tahu version-nya
Terus ada
Vulnerability-nya
Ada hole-nya
Dan ternyata server-nya punya
Tapi nggak di-update gitu loh maksudnya
Iya, makanya
Yang kayak gini-gini itu jangan sampai ketauan ya
Jangan diliatin
Kalian pakai apa
Kalau mau diliatin pakai apa itu
DCV, di LinkedIn boleh
Kalau di server jangan
Kalau bisa mereka nggak tahu
Kita pakai teknologinya apa
Itu salah satunya ya
Ini banyak sekali, kalau mau diikutin
Harus ada tim sendiri ya
Yang ngurusin ya
Kalau yang minimal apa
Ini stable-nya
Minimal tadi kan, HTTPS
Terus apa lagi
Jangan lupa sanitize
File permission
Isinya apa sih kalau ada user diikut
File permission
File permission juga
File permission
Oke
Oke
Itu
Untuk yang versi banyaknya ya
Versi singkatnya tadi ya, itulah
Yang kita sebutkan
Kalau ada user input, harus di sanitize
Dirapihin, terus cross-site
Injection
Terus itu kalau misalnya kita
Kita melakukan
Request atau apa yang ada
Private credential, misalnya
API key, ya jangan dari client side
Tapi kita harus nge-hit ke server
Suatu server endpoint apapun itu
Disitu kita ngumpetin
API key
Biasanya umumnya di environment
Variable, jadi jangan langsung
Dipanggil dari browser
Oke
Jangan sampai nggak sengaja nge-push
File env
Ke GitHub
Itu yang paling sering
Kejadian itu
File env
Atau apa
API keynya di copy paste
Langsung ke hardcode ya
Kode, itu juga banyak
Tapi biasanya kalau itu kita push ke GitHub
Atau
GitHub server atau GitHub hosting
Biasanya itu ketangkap
Langsung dikasih tahu ya
Nah, terakhir
Ada dua ini bukan pertanyaan sih
Lebih ke minta
Bahas topik tentang web assembly
Ada banyak nih yang minta
Web assembly, penasaran ya
Temen-temen ada tertarik ke web assembly
Mau bikin apa sih
Penasaran, soalnya kita dikerja sehari-hari
Itu nggak nemu kan, ya kak, pernah nggak
Atau Ivan
Web assembly
Belum sampai sana ya
Tes terakhir pakai web assembly itu
Buat itu, buat
Import
TensorFlow model
Ke machine learning dan lain-lain ya
Berarti ya
Pernah produksi
Blazor
Blazor ini apa?
Blazor
Ini web framework untuk
Web assembly bukan?
C# ya
Kita udah sempat bahas juga kayaknya ada di
Rust
Web framework, jadi kita tulisnya pakai Rust
Kemudian dia akan convert atau compile
Ke web assembly jadinya
Jadi web
Client, itu juga ada
Namanya apa waktu itu, udah sempat dibahas juga
Blazor ini mirip Silverlight
Jaman dulu ya
Nggak tahu, iya kali
Betul, Ari
Figma pakai web assembly
Kita pernah bahas dulu, yang aplikasi
Yang apa, aplikasi yang butuh
Power besar, biasanya pakai
Wasm kan, Figma, Adobe
Photoshop, tapi sekarang
Versi online juga udah hadapan
Terus container
Apa?
Code sandbox yang di
Container
Stack bits atau GitHub code spaces
Dan lain-lain, itu semua kan
Udah wasm
Betul, termasuk AutoCAD
Juga katanya
Yang versi web, tapi kita
Termasuk CSGO
CSGO?
Eh sorry, CS yang lama, CS yang lama sudah ada ini
Doom bukan?
No, CS on web
Udah ada ya, udah bisa ya
Play, yang 1.6
Play cs.com
Play-cs.com
Itu pakai web assembly kayaknya
Play-cs.com
Play-cs.com
Ini ya
Ini kan
Case web assembly itu
Lumayan unik ya
Saya tahu ya, boleh silahkan di
Koreksi ya, kalau
Kayak project yang
Baru
Baru Figma ya, yang
Istilahnya dia dari awal
Ga ada istilahnya
Legacy code, terus dia bikin
Web assembly karena kebutuhan kan
Karena memang
Processing powernya butuh kan untuk
Manipulasi image dan lain-lain kan
Tapi kalau misalkan yang lain, kalau kita lihat
Photoshop, Photoshop tadinya
Desktop app, dia mau ke web
Supaya ga rewrite
Dia pakai web assembly ya kan
Ini juga
CS juga kan, ga perlu rewrite
Bisa jalan di browser
Tapi tetap butuh
Adjustment sih
Tapi core
Core nya tetap sama
Iya, dan
Apa ya, dan sejauh ini
Web assembly itu tidak bisa memanipulasi Dom
Jadi dia butuh
Site JavaScript juga
Termasuk juga Figma
Figma itu kan pakai react kan
Tapi engine nya baru web assembly
Gitu
Ya, begitulah kira-kira
Jadi
Kasusnya itu
Kasusnya itu cukup unik
Ya, kalau misalkan teman-teman punya
Project atau punya aplikasi
Yang butuh konversi dari
Desktop app
Ke web
Nah, mungkin akan butuh web
Web assembly
Kalau ga mau rewrite
Kalau misalkan aplikasi apa ya
Jalan di DOS misalkan
Aplikasi POS jalan di DOS gitu
Mau di rewrite
Daripada di rewrite
Ke web gitu ya, kayaknya lebih gampang
Di rewrite daripada bikin web assembly ya
Ga tau sih
Seberapa ini soalnya belum pernah coba juga kan
Untuk
Proses kompilasinya, ada errornya atau engga
Dan lain-lain gitu kan, kita ga tau ya
Tapi harusnya engga sih
Karena kayak apa
Projek-projek besar seperti Photoshop
Ataupun AutoCAD
Aja bisa gitu
Tapi mereka juga yang nguliknya
Rame sih ya
Kalau satu orang yang ga tau
Kemarin yang
Ingat ga itu yang oh
Squoze, Squoze app itu kan pakai web assembly
Squoze app, oh iya bener, Squoze app
Squoze app itu buat
Konverti ya
Imagenya
Intinya
Tools-tools GNU
Yang dulu ditulis pakai
Si ++
Intinya sudah executable
Di convert jadi web assembly
Squoze app, iya
Ini dia
Ini, kita bisa apa ya
Bisa membandingkan juga
Antara satu image dengan image yang
Asli, seberapa kompresinya
Kita bisa itu
Ini juga backendnya pakai
Web assembly itu
Coba buka DevTool, terus nanti klik
Salah satu image
Buka dulu DevTool, Network
Ke Network
Image, ga ada, kosong
Refresh ya
Klik image yang di bawah
Yang itu, karena dia kan
Dia kan lazy load
Dia hanya pakai saat
Klik salah satu image
Gak, baru kelihatan
Web assembly-nya yang didownload
Oh, ngerti
Keren ya
Ulang ya, ulang
Refresh dulu, eh buka, buka
Buka, buka DevTool
Dia kan cepet banget kan
Cepet banget kan, web assembly-nya
Belum manggil web assembly-nya
Belum jalan ya
Klik image itu
Nah
Baru tuh, ada
Wasm tuh
Terusan wasm, liat tuh
Ada banyak wasm, masif
Tipe wasm
Tipe wasm
Type
Tipe wasm, semua type wasm
Nah, baru didownload tuh
Semua wasm-wasm yang dibutuhkan
Tuh, wasm ya
Dia download-nya tuh
Image-nya 3 mega, secepat itu
3 mega lho
Kalau kita
Download sendiri pake biasa
Compress udah jadi 360 kb
Dan compress-nya kan pake
Most JPEG
Tunggu, most JPEG itu kan
JPEG-i?
No, executable kan
Oh ya
Executable yang
Yang jalan di
Itu ya, di backend ya
Di server ya
Ini jalan di browser
Pake wasm
Wasm-nya
Di situ bisa diliat, di DevTools
Bisa difilter malah ya
Bisa diambil lagi kalau mau
Kita bikin squish lagi
Squish kawai
Squish kawai ori
Tuh, mas Ivan
Sudah ada yang convert web assembly ya?
Ada itu yang
Yang kemarin web assembly
WordPress on
Browser
Saya lupa namanya
Beberapa waktu lalu kan kita
Waktu itu pernah buka deh
Udah pernah ya
Udah bahas
Katanya aplikasi JS pun
Bisa di compile ke web assembly, bisa
Tapi buat apa ya, saya penasaran juga
TypeScript bisa, Javascript bisa
Bukan aplikasi ya
Bahasanya, Javascriptnya
Kalau kayak React
Itu di compile kayaknya nggak bisa
Eh, nggak tau ya
Javascriptnya
Ada di
Play For Check
WordPress, Wasm Lab
Ini, dia bisa jalanin
Browser
Ampp lagi ya, tinggal jalanin di browser
Tapi kan kalau di refresh datanya ilang
Iya
Ya misalnya buat testing lah, buat test
Buat coba misalkan
Buat demo, buat tutorial
Demo buat client bisa
Buat plugin
Kalau nyoba-nyoba di server kan bahaya
Dan ini
Dan ini
Dia pakai Wasm
Database nya pakai SQLite
Jadi
Jalannya di browser semua
Reload, ilang
Jangan kan Wasm
Windows XP aja bisa
Jalan di
Ini
Wasm, ini
Windows XP nih
Tuh
Ada yang mengalami
Windows XP, ada dong
Oh, ngalamin
XP, ngalamin
Ini beneran Windows XP
Atau, atau cuman
Cuman animasi doang
Beneran, beneran, ini beneran
Tuh, mouse nya ilang
Gak bisa di klik kanan
Gak bisa inspect element
Gak bisa di klik kanan
Ini gambar langit sama kebun
Serius nih, tapi gak kebuka ya
Belum kebuka ya, lama ya
Lama lah
Gimana?
Kapan-kapan?
Siapa ya?
Bahasa Wasm ya
Ada yang cocok gak ya
Sekali itu
Secara nge-compile apa gitu
Soalnya kita cuman
Cuman nyoba-nyoba doang
Cuman hello world doang sih
Gara-gara baca artikel
Cuma yang udah pakai beneran
Di kerjaan
Terus use case nya gimana, keunggulannya gimana
Serius ini bisa
Wow
Wow
Weeeeee
Gila
Ini di browser
Oh no
Wow, bisa main soliter gak?
Gak ada
Gak ada game
Main sweeper sama soliter
Gak ada
Dia hapus sekali, dia ada buang-buangin
Dia buang-buangin
Antara dibuang-buangin atau
Copyright
Oh iya
Pain
Oh, keren ya
Oh iya bisa weee
Bisa di save gak?
Save nya kemana ini?
Di container lah ya
Jadi kita gak bisa ngambil ya, file nya tetep ya
Ya sudahlah
Tapi ya, unable
Gak full
Funksionalitasnya
Gak full ya
Ya kan dia gak punya story
Tetep aja amazing
Iya
Windows loh, maksudnya OS
OS di jalan di atas
Browser
Sebenernya bikinnya pakai bahasa apa sih?
C
C++
Ya udah
Oke, kalau gitu
Kita sudah melantur kemana-mana
Mungkin next time kita bahas wasm
Menarik juga, cuman masalahnya kita bertiga tuh
Gak punya pengalaman praktikal ya
Untuk menggunakan wasm
Terutama di professional
Kalau ada naran sumber boleh
Silahkan
Ditulis di komen atau di slido
Silahkan, nanti kita coba
Undang mereka
Karena kalau kita doang, hello world doang
Gak ini ya kurang seru gitu ya
Ya kurang valuable
Kurang
Nanti teman-teman juga gak dapat manfaatnya nih
Cuman begini doang gitu
Oke, kalau gitu untuk malam ini kita udahan dulu
Terima kasih banyak buat semuanya
Buat yang sudah comment-comment
Dan buat yang sudah
Menghadiri live kita malam ini
Kita ketemu lagi
Minggu depan
Dengan pembahasan yang masih berkaitan dengan
Introp
Ya kita tunggu saja
Minggu depan, sampai ketemu lagi
Selamat malam, bye bye
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
23 Jul 2025
Bedah Buku Problem Solving 101
Episode ini membahas buku "Problem Solving 101" karya Ken Watanabe, mantan konsultan McKinsey yang menulis buku ini seba...
13 Apr 2023
Ngobrolin Format Warna
Topik malam itu terdengar sepele tapi tak terhindarkan: menentukan warna di CSS. Sesedikit apa pun kita berurusan dengan...
7 Des 2022
Ngobrolin Font
Font dipilih sebagai topik justru karena jarang dibahas orang, padahal separuh isi web adalah teks. Ia bisa membuat hala...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .