Ngobrolin Safari
Ringkasan Episode
Bantu KoreksiEpisode ini membahas tentang sejarah dan perkembangan browser, khususnya WebKit dan Safari. Diskusi dimulai dengan fenomena browser war yang semakin mengerucut ke sedikit engine saja - Chromium, Gecko (Firefox), dan WebKit. Tim narasumber menjelaskan sejarah panjang WebKit yang berasal dari KHTML dan KJS milik KDE, kemudian diforking oleh Apple menjadi Safari dan open source sebagai WebKit. Google kemudian menggunakan WebKit sebelum akhirnya membuat Blink engine sendiri. Episode ini juga membahas bagaimana Apple dulu memonopoli browser di iOS dengan memaksa semua browser menggunakan engine WebKit, namun kini aturan tersebut mulai longgar di Eropa. Topik utama adalah Safari 18 yang menunjukkan peningkatan signifikan dengan banyak fitur CSS baru seperti View Transitions API, Style Query, animasi display, dan Content Visibility. Terungkap juga bahwa Jen Simmons, mantan Mozilla Firefox developer, kini bergabung dengan Apple yang menjelaskan mengapa Safari mulai mengejar ketertinggalan CSS-nya.
Poin-poin Utama
- •Browser landscape semakin mengerucut ke tiga engine utama: Chromium (Chrome, Edge, Opera), Gecko (Firefox), dan WebKit (Safari), meskipun ada browser alternatif berbasis WebKit seperti Orion dan Sigma OS
- •WebKit memiliki sejarah panjang dari KHTML dan KJS milik KDE, diforking oleh Apple tahun 2000-an menjadi Safari, lalu open source sebagai WebKit dengan komponen WebCore dan JavaScriptCore
- •Google Chrome awalnya menggunakan WebKit sebelum membuat fork sendiri bernama Blink pada 2013, sementara JavaScriptCore kembali digunakan oleh runtime JavaScript modern seperti Bun
- •Apple dulu memonopoli browser di iOS dengan memaksa semua browser menggunakan engine WebKit melalui SDK restrictions, namun aturan ini mulai dilonggarkan di Eropa
- •Safari 18 menunjukkan peningkatan signifikan dengan dukungan View Transitions API, Style Query, animasi display, Flexbox alignment fixes, Content Visibility, dan URL.parse API
- •Jen Simmons, mantan developer Firefox yang terkenal dengan kontribusi CSS-nya, kini bergabung dengan Apple sebagai Safari dan WebKit evangelist, menjelaskan transformasi Safari
- •Browser alternatif berbasis WebKit seperti Orion dan Sigma OS mulai bermunculan, menawarkan fitur unik seperti ad blocker bawaan, workspace management, dan dukungan ekstensi Firefox maupun Chrome
Hai hai hai, selamat malam, halo-haloo semuanya, gimana kabarnya?
Mudah-mudahan dalam keadaan sehat-sehat ya. - Ya, paska... - Koleserol naik ya? - Koleserol naik, paska lebaran. - Paska badai. - Oh badai, iya. - Hah? - Winter, winter, winter. - Oh. - Winter. Satu company doang sih ya. Yang paling gede ketauan, main paling gede. - Yang di-announce kan. - Kupup ekstrim.
- Masih banyak. - Yang lain nggak di-announce ya. - Silence, silence layoff. Dan sih ada loh temen-temen saya. Beberapa yang di luar negeri di Indonesia mulai deg-degan, karena company-nya mulai melakukan silence layoff.
- Efficiency sekarang namanya. - Sehingga satu tim ilang aja gitu, satu tim. - Oh iya, satu tim ilang lah ekstrim ya. - Iya. - Ya, mudah-mudahan segera berlalu semuanya, mudah-mudahan dapat, apa, dapat terjeki yang lebih baik lagi setelahnya. - Yang terjeki, dapat jadinya yang lebih oke. - Iya. - Mulai mengasah ilmu yang lebih dalam lewat ngobrolin weh. - Iya. - Tetap ya disambungin.
- Iya. Karena ini ya, apa namanya, ya satu-satunya hal yang bisa kita kontrol adalah upskilling kan. Kita nggak bisa mengendalikan apa namanya. - Ekonomik juga. - Jalan perusahaan, ekonomi global, jalannya perusahaan gimana, bisa aja yang ngambil keputusan, mungkin agak keliru yang menyebabkan dampaknya banyak, tapi kan kita nggak punya otoritas kesana. Yang bisa kita lakukan adalah kita memperbaiki diri aja, introspeksi itu.
- Jadi beberapa yang saya dengar ya, mereka, misalnya invest di satu bisnis unit, ya kan, company ini, membentuk tim. Ternyata bisnis unitnya mungkin tidak jalan. - Tidak jalan.
- Tidak jalan atau sudah tidak sesuai dengan presentasi di awal. Prediksi di awal. - Iya. - Sedangkan kalau mau dipertahankan, tim yang lain sudah full. Maksudnya tim lain tidak menerima tambahan resource, ya kan?
Atau yang mau lebih apes lagi kan kayak yang major kemarin, maksudnya akuisisi, maksudnya ada merger di luar, mereka punya tim sendiri. Nah itu kan beneran bahkan nggak terkait sama achievement tim itu sendiri.
Mau timnya matrixnya gimana kalau dianggap, "Oh yaudah, kalau bagian ini pakai dari perusahaan yang merger itu, itu murni apes sih."
- Iya sih. Kalau merger memang mungkin agak sedikit tidak terhindarkan, ya. Karena itu merger itu adalah sebuah proses yang chaos. Karena kan standarnya beda ya, masing-masing perusahaan yang tadinya sendiri-sendiri.
Punya standar gaji sendiri, punya standar penilaian sendiri, punya semuanya sendiri, tiba-tiba gabung satu yang juga punya sendiri. Begitu mau digabungin nggak cocok ini. Jadi ambil jalan tengah.
Yang mana yang mau diturunin atau yang ini yang dinaikin. Jadi pasti ada kesenjangan, ada macam-macam. Dan ujung-ujungnya antara bedel desa, kabur satu-satu atau ya ada besar-besaran gitu. Cuman mudah-mudahan kompensasinya ini lah ya, bagus dan oke lah ya, lumayan bagus.
Masih minimal sesuai peraturan. - Sesuai peraturan, iya. Jadi malam hari ini kita akan ngobrolin kebun binatang.
- Taman safari. - Iya. Taman safari.
- Tau nggak sih, masa autocomplete nih setiap ngetik safari, selalu autocomplete di HP, Google keyboard, nggak tahu kenapa, padahal jarang ngomongin politik juga, safari politik dong.
- Uy safari politik. - Kalian kena kayak gitu nggak sih?
- Nggak. Jarang dulu safari juga sih.
- Saya nggak ada autocomplete, nggak akinkan autocomplete. Saya nggak mau dikendalikan sama autocomplete.
- Ya nggak, itu kan convenient aja. Gimana-gimana jadi apa? - Jadi salah satu benang merah yang bisa ditarik adalah antara kebun binatang sama browser ini ya.
- Ini kan browser semakin lama, semakin ini ya, semakin mengerucutkan. Kalau dulu banyak gitu kan. Ada Opera punya engine sendiri, terus ada Internet Explorer punya engine sendiri,
ada Firefox, ada safari, ada KDE Linux dan lain-lain, genome browser, masing-masing punya sendiri. Eh nggak ya, ada yang pakai sama-sama juga.
Dan sekarang mengerucut. Opera, Edge, Chrome, Chromium, itu udah bisa dibilang satu keluarga. Ya walaupun mungkin ada indikasi Edge bakal pisah gitu ya. Maksudnya mungkin mereka fork sendiri.
Mereka bikin sendiri, bikin lanjutannya gitu. - Bentar, ini ilustrasi web browser, kita serunya buka ini. Dulu pernah buka sih, cuma ini legendaris banget.
Kita lanjut lagi, kita buka lagi ya, review lagi ya. - Karena wow banget. - Jamannya KDE ya. - Jamannya KDE? Ini? Zoom. - Iya, klik aja, terus klik lagi biar zoom in dari '90.
Di tahun berapa kita mau... Midas, WWW, Arena, Omni Web, Sleep Note, We Sleep Note. - Safari itu dari mana sih? - Opera. - Kek moyangnya Safari.
Kek moyangnya Safari itu adalah KHTML dari KDE punya project. - Scroll ke bawah sedikit, yang di RC Rijau. Nah, ke bawah lagi sedikit.
Ini Conqueror, iya dari Conqueror, bener. - Berarti itu KHTML. Berarti sendiri ya, masih Conqueror nggak cabang dari mana-mana, build sendiri gitu?
- Nggak, dia bikin engine sendiri namanya KHTML dan KJS. Javascript engine ini namanya KJS. Jadi mereka bikin sendiri dari Conqueror tahun berapa nih? Tahun 2000-an ya.
Terus abis itu baru difork sama Safari, dan akhirnya WebKit menjadi sebuah engine yang open. - Itu ada KZHKC. - KZHKC. - Kayak ngemerge yang atas sama yang bawah? Kayaknya.
- Discontinued web browser for Unix-like operating system that uses GTK. Pakai Gekko. - Dibucer. - Dan juga GTK plus WebKit.
Lihat transkrip lengkap (712 segmen lagi)
- Ya kan WebKit sama Gekko. Berarti kan dia pakai WebKit dan makanya itu diarsir. - Oh jadi ada ini ya, ada persentukan disini.
- Iya. - Dan ada yang pindah agama juga tuh, kayak VLOG contohnya. VLOG yang biru tuh. VLOG sebelumnya pakai Gekko. VLOG itu di atas KZHC itu di atas EviVani contohnya. EviVani kan Gekko.
- Oh tiba-tiba masuk hijau. - Tiba-tiba masuk hijau bisa berhenti. - Ya extra yang baru-baru ini, yang agak baru. Yang pindah warna.
- Kalau kita lihat disini Mozilla dari mana? Mozilla dari Netscape kan. Netscape terus dia berhenti kan disini kan. Sebelum Netscape berhenti dia bikin engine sendiri. Netscape-nya masih lanjut sampai di tahun sekitar 2007-2008.
Nah Mozilla-nya sendiri ini dia bikin awalnya namanya Phoenix. Kemudian jadi Firebird. Kemudian jadi Firefox. - Kenapa lo hewan semua ya? Kita ganti hewan.
- Tapi temanya masih sama ya. Api ya. - Nah terapi-api. - Ya jadi kita fokusnya kesini ya. Jadi dari Conqueror dengan base-nya KHTML dan KJS itu akhirnya proses ininya disini ya.
Dia langsung Safari ya. Bukan Webkit dulu ya. Bukan masuk ke Webkit dulu ya. Langsung Safari ya. Forking ya. Jadi Conqueror itu, KHTML dan KJS-nya diforking oleh Safari, oleh Apple, kemudian dijadikan Safari.
Dan Webkit-nya juga jadi project sendiri. Walaupun sepertinya kalau yang saya baca under Apple juga. Walaupun dia open source ya. Safari-nya tidak open source, tapi Webkit-nya open source.
- Ujung-ujungnya jadi Bling juga kan. - Ujung-ujungnya. Habis itu nggak lama si Webkit-nya itu difork oleh Google untuk bikin Google Chrome. Akhirnya jadi Bling namanya.
Ya dari Bling itu engine-nya kemudian jadi Chromium-based. Di sini ada kelihatan nggak ya? - Itu dibawah tuh. - Hop-hop-hop. - Ini ya Bling-based. - Diatas sedikit. Turun-turun. Dia warna coklat.
Chrome. Ini ya. Ini ya Chrome-nya. Ada banyak juga ya. Ada Midori, ada Iris, ada Aurora, ada Steel, ada Opera. Opera juga Bling-based. - Opera Mini ya. - Oh dibawah. - Opera Mobile.
Bawah kan beda. Presto. Iya. Kalau Opera Mini di sini dari Opera ini ya. Opera Mobile. Kalau ini Gecko. Gecko Webkit. Nah. Jadi supaya apa ya supaya tidak semakin mengerucut lagi gitu ya.
Mudah-mudahan sih karena ada plus minusnya ya pasti ya. Kalau browser semuanya sama itu enak sebenarnya ya. Di satu sisi enak tapi di sisi yang lain ya kayak nggak ada saingan ya.
Dan apa ya? Nature of the Web bukan kayak gitu kan. Justru emang ya bisa dibilang keunikannya lah. - Keunggulan. - Keunggulan. - Kalau keunggulan ya keunggulan, kekurangan ya itu perspektif.
Nah disinilah yang salah satu. Ini OS. Di Mac OS juga bisa di setting ada accessibility. Eh ke pencet.
Nah di bagian sinilah ada kontribusi dari narasumber kita Mas Arya Hidayat ya. Jadi beliau ikutan kontribusi kesini dan akhirnya masuk ke Webkit jadinya.
Jadi salah satu kontributor awal Webkit juga. Makanya kan Mas Arya itu sempat bikin yang buat testing tuh sebelum apa petir? - Phantom JS. - Phantom JS ya.
Pesinya kan dari sini. Dari ke HTML. Awalnya banget. - Terus safari sampai terus tapi safari nggak ada pindah-pindah agama ya? - Nggak ada. Karena Webkitnya sendiri emang milik Apple. - Oh iya? - Nggak kayak opera kan. - Nggak kayak opera. Ngikut ya.
- Jadi sebenarnya Webkit sendiri itu... - Nggak sanggup ngelajuntiin karena ini kali ya. - Iya betul. Jadi kita sempat... - Maintain layer engine itu berat kali ya.
Iya. Jadi kita sempat ngobrol sedikit sama Eka di belakang tadi sebelum mulai. Firefox ini agak mulai tertinggal dari si safari dan Webkit. Karena banyak alasan. - Safarid learn from. - Mereka nggak punya produk. Kalo Google ada yang dijual, ada produknya.
Hardware-nya pun ada. Android kan. Phone, tablet dan lain-lain. Safari tentunya ada. iOS, Macbook. Edge juga ada. Bahkan hardware-nya ada. Firefox juga. Mozilla nggak ada. Dulu sempat mau bikin phone. Inget nggak Mozilla phone?
- Sempet tapi gagal. - Belom. - Gagal. Kayaknya semua proyek dia belum ada yang berhasil gitu ya. - Nggak. Masalahnya kan ini di dunia kapitalis ya. Maksud saya realistik kalau nggak ada backing korporat, korporat yang beneran apa di industri teknologi entah kayak Microsoft, entah sebagai apa, Apple, Google.
Kan kalau kayak Firefox, Opera itu kan spirit-nya yang open source, foundation, non-profit. Ya secara konsep bagus. Cuma kayaknya kalau survival yang sampai lama bertahun-tahun kayaknya ya.
Ada satu produk-produknya Mozilla yang mendunia itu ya, MDN. - Iya. Tapi kan produk non-profit kan. Paling iklan dari iklan doang. Iklan Adsense. Itu juga nggak ada.
- Ada sih yang kayak VPN, MDN Plus, Thunderbird. - Iya VPN ada. - Thunderbird masih hidup ya? Thunderbird ya? - Oh masih ya? - Masih. Thunderbird itu dari jaman dulu ko. Keren tuh. Pocket punya Mozilla dong.
Pocket punya Mozilla. Tapi ada, ya maksudnya mereka ada produk-produk tapi istilahnya nggak ada yang... - Ya produk perintilan kayak gitu buat survive jangka waktu yang... - Betul. Perintilan. - Karena dia non-profit organization sih ya.
- Betul. Ya itu. Maksudnya itu bukan karena bagus jelek, cuma emang konsekuensinya kalau emang spirit-nya begitu, scope-nya nggak bisa seluas yang industri korporat kan, for profit. - Betul. - Ya risiko.
- Apa ya, perkembangannya nggak bisa dibandingkan dengan browser-browser yang lain gitu. Makanya dia kalau ketinggalan ya wajar aja karena memang resource-nya kan nggak sebesar yang lain gitu kan.
- Atau ya itu lagi-lagi risikonya... - Include Firefox. - Oh ya. Include Firefox. Risikonya ya lay-off kan kayak tim apa? Tim Rush ya waktu itu ada lay-off juga.
- Sebenarnya mereka lumayan visioner dan inovatif juga kan. Rush mereka bikin. Walaupun itu nggak, tidak menghasilkan uang secara langsung gitu kan.
- Sama lah kayak Google juga bikin Go kan atau bikin framework yang lain gitu. Si Firefox Mozilla juga sempat bikin beberapa bikin framework dan lain-lain kan.
- Tapi nggak ada apa ya nggak ada lahan buat jualannya mereka gitu karena memang non-profit juga gitu. Jadi ya salah satu apa? - Mozilla juga punya community space di Jakarta ya udah tutup.
- Udah tutup, udah tutup. Dulu sempat itu kan ada community space, ada apa dong? - Saya sempat ngadain event di sisi itu. - Ada yang ini juga kan kayak GDE juga kan mereka punya model kayak GDE juga kan yang buat speaker.
- Ada dulu tapi sekarang ini udah nggak. - Masih ada sih website-nya. - Anyway ternyata si webkit ini juga lumayan banyak dipakai. Ada PlayStation pake PS3 ya. Sekarang udah PS5.
- Design, ada yang pake nggak nih? Samsung ya? - Apa sih itu? - Smart TV. Kindle ebook reader juga. Nintendo console pake. 3DS internet browser juga pake. Blackberry browser juga ternyata pakenya webkit.
- Jadi intinya adalah si webkit ini menggunakan JavaScript core sebagai engine JavaScriptnya yang akhirnya digunakan oleh Boon yang terbaru ya salah satu inovasi terbarunya.
Kalau yang lain pada pake V8 yang punya Chrome, Boon menggunakan JavaScript core. Sama-sama C++ API ya. Jadi kalau temen-temen mau bikin browser harus bisa C++ ya.
- Siapa tahu ada yang bisa pake RUS sekarang? Ya kalau C++ kan karena dulu kayaknya opsinya cuma itu kali ya. Nggak tahu ada bahasa lain nggak sih.
- Firefox kan mau bikin servo, tapi kan nggak jadi-jadi. Mereka mau bikin pake RUS itu servo. Tapi ya belum kesampaian.
- Sempat Firefox tuh melakukan ini kan ya. Sempat Firefox tuh melakukan rombak engine-nya besar-besaran yang terakhir itu ya sempat dia bilang jadi lebih cepat.
- Ya itu kalau nggak aneh ya. - Betul Mozilla bikin RUS ya. Salah satu yang bikin RUS. Bukan salah satu, emang penggagas ya yang bikin.
- Dia yang bikin. - Nah ini kan tadi kita udah sempat bahas webkit itu asalnya dari KDE, dari environment KDE.
Salah satu desktop environmentnya Linux. Kemudian ada kontributor dari Apple, Google, Nokia dan lain-lain.
Sampai akhirnya si webkit ini difork oleh Google awalnya namanya web core. Web core itu dari webkit ya? Oh dari webkit. Yang difork itu web corenya.
- Satu bagian kayak diambil komponennya dia bikin sendiri. - Kemudian jadi Blink.
- Ya namanya Blink. - Berarti layout engine-nya doang.
- Iya kan Blink itu kan layout engine ya? - Iya.
- Eh V8 baru JavaScript engine-nya ya V8? - Iya bener. JavaScript core punya si webkit. Apa ya? Safari masuknya.
Safari iya. Dan kemudian di 2005 Safari developer yang namanya Pak Dev Hyatt ini, Hyatt.
Dia melakukan open source terhadap webkit yang tadinya namanya web core dan JavaScript core jadi webkit.
Terus mulai 2005 berarti ya. Dan kabarnya si webkit ini adalah under Apple. Bener nggak?
- Iya tadi ada diatas di patent namanya. Nama webkit. - Iya namanya dipatenkan oleh Apple.
Jadi kodenya open source. Cuma nama webkit di patent atau trademark apa-apa ya? Nah tentu-tentu S/O 7 Maret 2013.
Trademark. Apa ya implikasinya? Orang nggak boleh bikin komunitas webkit gitu.
Webkit is open source and available under BSD2.
- Tapi nggak semua. - Nggak semua. Web core. Beberapa komponen doang yang di open source.
Webkit is open source and available under BSD2. With the exception of web core dan JavaScript component yang under GNU.
Ya GPL.
- Tetapi... - Nama webkitnya sendiri itu merek dagang Apple.
Webkit itu nama dagangnya. Jadi nggak bisa pakai kata webkit.
Jadi bukan perkara commit sih. Orang nggak boleh jualan pake email-email webkit.
Iya. Kalau mau pakai webkit di forking, nggak boleh lagi menamakan EKA webkit. - EKA kit? Nggak forking web core sama JavaScript core-nya.
Maksudnya bikin engine baru. EKA kit ya boleh-boleh aja. - Boleh aja. Tetapi harus mencantumkan web core sama JavaScript core di license-nya.
Sesuai GNU lah. Pokoknya aturan GNU.
Muhammad Istiqlal. Kalau nggak salah, Epiphani, genome web juga based on webkit. Ya betul.
Jadi memang dia dibesarkan oleh Linux sebenarnya.
Baru kemudian diadopsi sama Mac, sama Apple dan juga Microsoft ikutan. Eh, Microsoft. Sorry, Google awalnya ya, Google.
Tadi kita sampai di... gimana? Open source. Feature development. Webkit 2. 2010 itu webkit versi 2.
Terus... webkit is used rendering engine Safari. Oh iya. Ini ya, biru. Kemudian digunakan oleh Chrome.
Dulu dipake oleh Chrome. Sebelum Chrome tadi yang kita bahasnya bikin baru, bikin sendiri.
- Ya. - Berarti dulu sempat, berarti... Wait, Android itu sempat pakai webkit ya?
Google Chrome on Android. Itu before version backpad.
Iya. Iya. Iya berarti. Benar.
Ya, jadi salah satu yang membuat orang-orang agak gimana gitu ya sama si Safari.
Mereka kayak melakukan apa yang dilakukan oleh Microsoft pada saat mereka lagi jaya-jaya dulu.
Yang dulu ya, bukan yang sekarang ya. Jadi mereka memaksa device untuk di include si Internet Explorer
kalau dulu ya di Windows gitu kan. Safari juga melakukan itu. Mereka include... bahkan lebih parah ya.
Maksudnya dalam hal ini ya orang awam ya. Kalau Apple... Mac OS, Mac OS udah pasti ada Safari kan.
Yang kedua yang lebih parah adalah iOS. iOS itu tidak bisa ada browser selain...
Enginnya webkit. Webkit.
Dulu kayaknya grid template columns atau grid gap atau apapunnya kan dulu ada yang harus grid gap buat CSS, ada yang udah bisa pakai gap. Nah intinya cuma ngetes di Safari, Chrome, tapi dari laptop.
Intinya nggak ngetes langsung di iOS phone. Nah ternyata intinya layout-nya di iPhone, di Chrome berantakan semua. Kenapa?
Karena ya itu sebetulnya semua browser yang ada di iPhone itu intinya webkit kayak Safari, cuma dikasih casing, Chrome dikasih casing, Firefox.
Maksudnya casing adalah service eksternalnya. Tampilannya mirip. Bukan tampilan, bukan cuma tampilan, tapi ya service eksternal.
Kayak kan Chrome, Firefox ada profile ya. Sekarang kita bisa ngelog profile, itu ada fitur kayak bookmarks, ada password manager.
Soalnya yang service-service yang nggak berhubungan langsung sama engine layout dan JavaScript-nya. Nah cuma kalau misalnya si perterasi semua engine-nya rendering lah, JavaScript processing, itu sebetulnya Safari doang.
Jadi kayak semua Safari, kayak Apple memaksa buat semua browser kalau mau pasang di App Store, ya harus pakai Safari, cuma dikasih branding, dikasih logo browser masing-masing dan layanan eksternal.
Iya, karena mereka megang dulu, setahun-tahun dulu. Kalau sekarang kan nggak, sudah boleh.
Oh udah boleh. Di Eropa doang?
Yang di Eropa.
Di Eropa.
Karena Eropa itu kayak semua hukumnya ketat banget ya. Mereka lobbying, bikin aturannya tuh ketatnya minta ampun.
Udah kalah nih ceritanya, jadi iPhone yang di Eropa sudah buat iOS yang di Eropa, base-nya sudah bisa install JavaScript engine, browser engine lain.
Oh udah normal ya busy tier-nya, jadi maksudnya Chrome ya, pakai engine-nya Chrome.
Tapi implementasinya belum tahu ya, cuma udah ada aturannya di Eropa.
Iya, jadi salah satu kenapa mereka bisa melakukan itu, ya karena mereka yang megang kendali di SDK, SDK-nya iPhone, iOS.
Jadi SDK-nya atau API-nya buat browser itu dikunci, jadi hanya bisa menggunakan library webkit yang disediakan oleh developer kit-nya, software developer kit-nya.
Jadi kalau kita mau bikin software yang bisa browsing internet, ya itu kita harus pakai library-nya mereka.
Opsinya cuma itu, itu bukan opsi ya, itu dipaksa namanya.
Iya pilihannya, jadi nggak dapat permission untuk bikin browser, untuk misalkan untuk buka www.google.com atau apa apple.com gitu dengan menggunakan engine lain nggak bisa.
Termasuk juga kalau kita pakai apa namanya, kalau di aplikasi itu yang kita bisa buka browser di dalam aplikasi.
Webview.
Webview, itu webview-nya kan pasti mau nggak mau kan safari atau webkit base juga kan jadinya kan.
Karena yang dibuka hanya itu, mereka bisa melakukan itu, mereka berani melakukan itu.
Tapi nggak dibelesin sama Google, Google kan bikin pixel, maksudnya kalau Google mau rese kan sebenarnya bisa dibelesin.
Beda value.
Satu itu, kedua kan mereka mengejar ketertinggalan, karena mereka harus kalau App Store udah banyak apps-nya, si Android ya harus lebih banyak lagi gitu, harus lebih lengkap.
Mereka membuka sebesar-besarnya.
Sebenarnya kenapa malam ini kita ngomongin tentang webkit selain atau webkit atau safari, selain karena.
Safari.
Ya karena apa tadi, supaya menghindari orang pada hanya menggunakan satu jenis atau satu keluarga browser, ini jadi semakin banyak kan.
Dan yang menariknya adalah si safari ini akhir-akhir ini menunjukan peningkatan yang luar biasa besar terutama kalau di Interop.
Ya Interop kan gambaran, ya gambaran besar lah, fitur-fitur apa yang developer mau, yang dirasa penting buat developer, dan gimana browser, tuh Ivan hilang, gimana browser kerjasama buat implement fitur itu.
Iya.
Iya.
Betul.
Beda sendiri.
Sekarang ke safari.
Waktu itu sempat beberapa tahun kayak gitu.
Itu jamannya yang setau gua itu PWA sama CSS Grid.
Oh iya PWA.
PWA, CSS Grid sama, apa satu lagi ya gua lupa. Eh udah, udah lupa. Itu adalah satu fitur yang si safari itu nggak support.
Dan PWA kan baru-baru ini kan dia support, maksudnya di ini ya, di mobile ya, kalau di desktopnya mungkin sudah lama.
Tapi di mobile-nya kan PWA belum bisa, belum bisa add to homescreen kan.
Bisa, tapi harus dipencet menu-nya.
Iya.
Tapi ada menu-nya sih ada add to homescreen.
Nggak bisa otomatis.
Jadi 2 tahun apa 3 tahun lalu deh, jaman itu kayak safari itu banyak ketinggalan dengan update-update-nya.
Dan dia punya dunia-nya sendiri gitu, di saat apa namanya, dunia per browser-an mendukung PWA, CSS Advancement, dia tiba-tiba munculin yang namanya color.
Oh dia bikin fitur warna sendiri karena butuh, karena perlu buat keperluan si Apple jualan iPhone sih.
Iya, color. Yang mana kok jalannya beda sendiri gitu sama konsorsiun?
Kebutuhan developer juga. Yang grid itu nyebelin sih, pokoknya sempat ingat akhirnya support grid, tapi nggak support gap, itu freak banget.
Cuma menarik sih, IE dulu waktu dia memonopoly, terus progress-nya jadi melambat. Nah safari juga kan sempat monopoly lah minimal di user iPhone kan.
Kan baru kali ini kan ada browser dan hardware itu beneran kayak sepaket yang bikin satu pihak.
Dan dia apa, market share-nya besar banget. Itu development-nya juga, progress-nya juga jadi lambat kan. Itu kayaknya fenomena unik, menarik.
Dan kalau perkara Apple ini safari, ngaruhnya ke release cycle juga kan. Dia kan cuma bisa update kalau Mac OS atau iOS update kan, nggak bisa ketinggalan.
Nggak bisa ya? Bisa kali? - Nggak bisa, kalau misalnya mau update. - Eh, minor pun harus update dari USB.
- Minor harus update iOS. - Apa, iOS-nya juga minor update kan, ada versioning-nya juga.
- Sempat ada security update misalnya. Jadi dia harus increase version dari iOS-nya juga untuk supaya update si safari. Betul. - Nah itu agak ribet juga sih ya.
Sama dengan Mac OS. Mac OS bisa safari di Mac OS, nggak bisa berdiri sendiri. Dia lengket sama operating system. Jadi ini kan ya, mau update browser harus restart.
- Iya, harus nunggu dulu ya. - Maksudnya nggak bisa se-agel ya, browser yang lain kan jadinya. - Betul, kalau browser yang lain tinggal update aja. - Chrome tinggal reload aja dia.
Malah nggak sadar, tiba-tiba cuma suruh restart. Nggak usah matiin laptop. - Karena kan dia tidak ada kaitannya sama hardware. Mungkin kalau si safarinya harus...
Ada kayak kompilasi lah atau apa gitu yang membuat dia lebih optimize jalan di Mac OS kan. Kalau Chrome kan multi platform, jadi ya semuanya bisa jalan.
- Safari bisa jalan di Windows? - Windows bisa. Aku pernah ke Warnet yang ada safarinya. Wow, dulu banget.
- Di Interop yang safari, eksperimentalnya bagus loh. Coba aja di-click. - Bagus, bagus, bagus. Ini juga udah mulai ini kan.
Nah itu semua stigma tadi. Kelihatannya sekitar 2 tahun terakhir ini udah mulai difix sih. Kayaknya mereka juga sadar.
Ya mungkin mereka ngeliat apa, dimanapun ada value-nya kan. Kan nggak mungkin mereka ngejar ketertinggalan cuma karena iseng atau cuma demi idealisme atau apa. Nggak mungkin kan. Mereka kan jualan. Jadi ya mungkin sadar juga kalau ditinggal semua developer.
Ya tetap bakal ada business impact yang kurang bagus. Nah buktinya ya itu.
Kalau kita ingat, mungkin temen-temen nggak ngalamin ya. Saya juga nggak ngalamin sih, cuma saya ngikutin gitu ya.
Sebenarnya cikal bakalnya PWA, add to homescreen itu dimulai dari si Apple sebenarnya, si safari.
Safari itu adalah browser pertama di mobile yang bisa add to homescreen. Jadi seperti aplikasi. Jadi web kita itu seperti aplikasi.
Dan dia sempet kayaknya membuka beberapa API yang bisa dieksekusi. API ini ya, API SDK yang si Apple-nya ya, misalkan buka kamera yang kayak sekarang tuh, buka kamera, bisa GPS dan lain-lain itu dulu dia sempet mau kesana arahnya.
Ya mau kesana. Cuman akhirnya berbelok gara-gara si Apple meluncurkan App Store.
Oh mereka mikir lebih run kalau selalu dipagerin.
Ya, kalau mereka buka semua orang bisa bikin aplikasi lewat web, nggak bisa dimonetize kan, agak susah dimonetize.
Tapi kalau misalkan mereka bikin App Store, mereka bisa ini, orang harus bayar lisensi setiap tahun, terus mungkin developernya juga bisa menghasilkan uang karena dia bisa bayar gitu kan, maksudnya berbayar, aplikasinya berbayar dan lain-lain.
Akhirnya mereka lebih memilih jalur itu. Baru sekarang-sekarang ini mereka coba buka lagi.
Dan yang menariknya selain karena mulai mengajar karta tinggalan, kan beberapa waktu yang lalu ada WWDC ya, conference-nya Apple yang announce beberapa hal yang paling di-highlight memang AI ya, Apple Intelligence.
Lagi-lagi semua conference sekarang AI-AI. - Jadi mereka akhirnya koalisi dengan OpenAI.
- OpenAI, kan waktu itu sempetnya ada gosip-gosip mau sama Google atau mau sama OpenAI yang notabene Microsoft, karena mereka nggak punya sendiri.
Akhirnya mereka, padahal mereka udah duluan bikin Siri kan ya, sedangkan OpenAI kan baru-baru ini mereka bikin yang seperti itu tapi lebih canggih gitu kan.
Nah Siri-nya sendiri sekarang udah diintegrasikan dengan OpenAI. - Siri kayaknya asisten yang paling susah dimengerti.
- Susah dimengerti. Nah di luar itu mereka juga announce beberapa hal untuk Safari 18. Sekarang masih beta ya? - Masih beta.
- Masih beta ya. Jadi mereka announce ini si Safari 18 apa aja update-nya mereka announce. Ini kita lihat sama-sama ya.
- Nah ini kalau menurut gue sih Safari 18 nih geg-ge banget, oke banget, mantep kalau buat web developer ya.
- Hmm. - Progress-nya masaya signifikan di bidang UI banyak banget.
- Banyak ya. - Nah tuh lihat ya kayak few transition akhirnya bisa semua kecuali Firefox.
- Firefox. - Kebalikan.
- Ya ya. - Ketinggalan.
- Biasanya ada rodanya itu roda pedati kadang naik kadang turun. - Biasanya ada orang Firefox yang di hire sama Safari.
- Nah itu dibajak mungkin. - Dibajak. Terus yang kedua ada style query.
- Nah ini agak aneh. Masaya syntax-nya agak unik. Cuma ya berguna sih useful. Nah bagusnya di artikel ini zoom in deh.
- Hmm zoom in? - Zoom in. Masaya biar ya nggak zoom in halamannya aja.
- Nah ini kan artikel di personal website-nya orang yang emang web dev dan front-end ya masaya lebih cenderung ke front-end.
- Dia ngasih rekomendasi di bawahnya. Udah safe to use atau belum. Kayak misalnya tadi few transition.
- Oh yang kayak tadi ya ini ya. - Udah safe to use. Karena ya udah tuh kalau misalnya Firefox belum support.
- Not showing fancy transition ya udah nggak apa-apa. Future detection aja kan. Pakai aja.
- Nah terus kalau style query setia bilang kayak kalau opini-nya dia menurut dia sebetulnya.
- Next to have lah ya. - Oh belum terlalu. Dia bilang I don't think so.
- Karena future detection kan itu pakai rules baru tuh. Container aja. Masih kurang bagus feature detection-nya.
- Jadi nggak terlalu dia rekomendasikan dulu. - Oke menarik. Ini tetap ya.
Ini karena fokusnya kan ke Safari kan. Jadi yang Firefox ya kelihatan tertinggal. Karena yang di halenya kan Safari.
- Ya cuma emang Firefox-nya juga belum adopsi kan. Maksudnya sepanjang release icon-nya mereka, mereka mutusin belum dulu.
- Betul. Tapi kalau misalkan kita lihat, kalau misalkan ini ada update Safari. Mungkin akan ada yang Safari sudah update tapi.
- Oh ya ada aja. - Yang Firefox sudah update tapi Safari belum update kan.
- Ini karena highlight-nya kan highlight Safari. Yang kebetulan Firefox tidak.
- Iya. Sedangkan yang lain udah anehnya gitu ya. - Icon paling kanan itu apa sih? Icon paling kanan itu apa ya? - Ini Android WebView kali.
- Kalo yang sebelahnya Samsung browser ya? - Samsung browser. Ini kayaknya browser-nya Android yang bukan Chrome.
- WebView. WebView. Current color. Current color apa? - Bukan. Current color di relative syntax.
- Kayak misalnya kita bahas waktu itu misalnya warna apalah biru tapi dikurangin sedikit lightness-nya, dikurangin 50% blablabla.
- Nah kalau dulu current color kan gak bisa. Harus absolute kan. Nah kalau sekarang udah bisa.
- Oke. Ini udah hampir bisa nih. Firefox udah hampir bisa. - Nah udah semua.
- Ini udah dari versi 16 loh. Berarti udah bisa sekarang ya? - Iya. Kalau urusan perwarnaan mereka rajin.
- Cepet ya? Tapi kenapa belum safe? - Nah itu penjelasannya.
- Feature detect. Maksudnya kayak device support atau enggak. Kalo JavaScript enak ya. Cuma if navigator.method yang mau dipakai itu apa?
- Css bukan programming language kan ya? Gak bisa pake. - Nah programming language atau bukan tuh supports. Nah itu kan if. Anggap aja kondisional itu.
- Entar lagi. Tunggu aja versi CSS5. Entar bisa programming language.
- Bisa bikin, bisa manggil RSAPI CSS5 aja. - Bisa patch. Mau ngapain?
- Nah limiting display ini apa? - Display kan kalau dulu dari display block ke display none. Gak bisa di-transition kan.
- Nah sekarang udah bisa dong. Kalo dulu kan gak bisa ya. Kalo kalian kan kayak opacity-nya diituin dulu.
Opacity atau transform, transform, translate, digeser, baru diilangi. Nah sekarang gak usah.
Versi 18 nanti bakal bisa ya. Kok ada dua? Ini apa? Browser support behavior, allow discrete sama starting style. Ini udah bisa.
Are they safe to use? Yes. Similar to JSV transition if you are okay with some user not seeing it.
- Kalo gak support ya udah. - Save flexbox alignment.
- Nah ini gue baru tau loh. Asli baru tau banget. - Did you know that flexbox layout can lead to data loss?
- Maksudnya? - Ya jadi kalau container-nya gak terampilan.
- Kepotong kalau container-nya gak cukup besar, kirain bakal scrape, bukannya bakal stretch ya. Ternyata itu kepotong.
Overflow-nya ke hidden kali ya, gak tau. Nah itu nanti kalo isengpain liat, cek link post-nya aja.
- Kok ada interactive demo-nya tuh? - Ini udah semua, bahkan semua Firefox-nya sudah.
There's another post on this blog, did some interactive demo.
- Baru tau lah. - Baru tau gue blog ini.
- Iya bagus ya, bagus lengkap layout-nya, enak dilihat. - Nge-blog-nya.
Iya ya. Mana contohnya? Oh ini. CSS is awesome.
- Dikecilin coba. - Oh iya bener.
Jadi gak ter-stretch.
- Kalau contohnya, ada contoh yang dia apa tadi? - Yang dibetulin, ya nanti harusnya dibawah ya.
- Kalau save, ini. Save nih ada save. - Kalo save ya gimana?
- Coba kecilin, oh gitu. - Tetap hilang tapi ada ini.
- Ininya bisa scroll ke samping. - Ada scroll, kalo ini tadi gak ada scroll ya.
- Eh ada juga, bedanya apa? - Oh karena udah dibetulin nih browser-nya.
- Gak tau, eh gak tau sih. - Hah?
- Oh atau behavior-nya ya, dia motong di tengah. - Oh motongnya di ujung.
- Bisa gak kelihatan. - Kalo ini, motongnya di tengah.
- Nih, motongnya di tengah nih, tuh. - Oh.
Jadi kayak ini gak apa-an nih, gak kebaca kan.
- Kalo ini kan. - Kalo speksinya panjang, bisa gak kelihatan.
Kalo ini behavior-standar ya, kayak window kita resize pun,
- kepotongnya dari pinggir-pinggir kan. - Kayak gini, iya.
- Kalo kita live-to-write. - Iya iya iya.
- Oke, menarik. - Iya gitu, lanjut.
- Save to use. - URL parse, ini JavaScript ya.
- URL parse, eh dia baru bisa gitu, URL parse? - Wah, bukan sekarang ada URL parse.
- Looks different. - Oh emang, emang dulu tuh.
- Udah lama ini. - Udah ada kan, udah lama.
- Udah berbeda, url.parse itu baru, kalo new url tuh.
- New url, iya. - Oh iya iya iya.
Tapi dia bakal ngepro, kalo dia bukan valid url, dia bakal throw error.
- Jadi harus try-catch. - Itu kolyen dulu, sekarang engga.
- Oh, sekarang engga ya? - Sekarang engga, gak pake throw lagi.
Coba liat MDN-nya deh, mungkin kita juga baru tau URL parse ada.
Oh, coba.
Tuh, kompat data tuh JSON, throw JSON.
- Itu kayaknya ada icon MDN. - Gak bisa diklik.
Oh, gak bisa. Nah, coba klik.
Oh, static method.
Ya, URL parse.
Wait, if not possible, null is return.
- Jadi dia gak try-catch. - Gak try-catch ya.
- Gak throw error lagi. - Gak throw error ya, gak throw error.
- Oke. - Jadi dual aja ya.
- Today I learn. - Today I learn.
Tapi gak bisa di Samsung, gak bisa di Samsung browser ya.
Aneh-aneh aja sih.
Ada polyfill-nya jam sendiri.
Gini-gininya enak sih, polyfillable banget.
- Yes, polyfill. - Nah, ini bukan semua fitur sih.
Ini highlight personalnya dia.
Hal-hal yang menarik dari Safari.
Nah, tapi sebenernya kan tadi kita bahas tuh
Firefox tuh banyak yang terkesan ketinggalan di artikel ini
karena artikelnya emang fokus di fitur baru Safari.
Tapi gak juga, kalau kita lihat introp kan
emang yang skornya paling rendah Firefox.
Jadi ya, walaupun gak se-extreme di artikel ini,
ya, apa, notion anggapan bahwa Firefox mulai keteteran
ya itu udah tersupport dengan matrix data.
Dan yang menariknya semakin, apa ya, ke sekarang-sekarang ini
banyak, mulai banyak developer orang-orang
yang memanfaatkan WebKit sebagai base teknologi-nya.
Contohnya Boon menggunakan JavaScript Core.
Yang kabarnya.
- Biar tidak monopolize juga. - Biar tidak monopolize juga.
Ini salah satu yang menariknya adalah dia
sudah TypeScript langsung gak perlu pakai compiler
atau gak perlu pakai transpiler.
Jadi bisa langsung, gak perlu install TSC dan lain-lain.
Terus juga ada beberapa browser yang cukup modern juga.
Ada Orion yang saya pernah coba.
Dan sekarang udah gak dipakai lagi.
- Orion browser. - Kenapa?
Kenapa ya?
Jadi, bukan, apa ya, ad blockernya.
Mereka kan ada ad blocker langsung bawaan kan.
Ad blockernya itu lumayan agresif.
Jadi kayak YouTube gitu, ditolak sama YouTube gak bisa play jadinya.
Gak bisa nampilin video.
Cuma kurang meyakinkan sih.
Maksudnya, Googling Orion browser, website transmit-nya,
meta datanya gak diisi.
Jadi tulisannya, "No information is available for this page."
Itu berit banget sih bikin browser,
tapi website-nya meta datanya gak diisi.
Orion browser ini di-backing oleh Kagi.
Kagi ini adalah search engine.
Headlocker? Oh, search engine.
Ya, search engine.
- Mungkin itu cara mereka cari... - Data dari mana?
Gak tahu. Zero telemetry, artinya gak di tracking.
Terus web extension-nya bisa pakai yang punya Mozilla dan punya Chrome.
- Oh, itu keren sih. - Bisa dua-duanya.
Itu menariknya sebenarnya.
Nah, dia itu, Orion itu 100% free,
"Not advertising", tapi ada Orion Plus.
Itu yang berbayar, jadi freemium, ya, istilahnya.
Ini yang versi bayarnya.
- Nah, ada satu lagi yang saya temukan. - Base apa? Webkit?
- Base-nya Webkit. - Oh, ya.
Ya, kita lagi ngomongin Webkit.
Ada satu lagi yang lebih modern namanya...
Namanya sebentar, lupa.
Sigma ya? Sigma OS.
Sigma OS ini mirip sekali seperti art.
- Tapi base-nya Webkit. - Tapi based on Webkit.
- Oh, iya. - Iya.
Ini mirip sekali itu, lihat.
Ini yang di sebelah kiri, terus ada workspace, ya, ada workspace.
Terus tabs as tasks.
Jadi, tab itu sebagai task manager lah.
Kalau misalnya, wah, ini ada kerjaan, ya, dia buka tab, gitu kan.
Ada split-screen juga, sama, ya.
Register, saya nggak tahu kalau di art itu ada apa nggak.
Kayaknya nggak ada, ya, ini kayaknya dia fitur sendiri, ya.
Terus ada AI-nya juga.
- Sekarang sudah harus ada AI semua. - Semua produk ada AI.
Yang salah satu yang menarik adalah dia ada versi, ya, ada sih.
Yang lain juga ada, ya, versi simplifying-nya, atau yang...
- Kalau dipencet... - Reading mode, ya.
- Kalau di Safari itu namanya Reading mode. - Kita Reading mode.
- Jadi itu... - Kayak toolbar-tulbarnya hilang semua.
Iya.
Terus ad-free browsing, ad-blocker-nya juga langsung include di dalam.
Jadi nggak perlu install extension.
Terus focus mode, focus mode dia tadi, ya. Yang mesti gitu nggak ada tampilannya.
Sama satu lagi yang kayak si tadi Orion, dia bisa install kedua extension.
- Baik dari Firefox ataupun dari... - Oh, nice, ya.
Bagus sih kalau itu jadi trend segala extension bisa dipakai.
Karena dia based-nya WebKit dari Safari, ya, dapat native kencangnya dari itu kan, dari OS-nya kan.
- Dari OS-nya. - Kalau dari...
- Peski juga jalan. - DevTool-nya bagus.
DevTool-nya DevTool Safari. Kurang sih, ya.
- Salah satu perangannya, ya. - Itu nggak enak banget.
- Salah satu perangannya itu, ya. - Tapi pakai buat browsing lah.
- Jangan buat development. - Iya.
- Iya, kalau buat dev tetap Chrome-ium. - Chrome-ium.
Kalau buat browsing, kayaknya lebih cocok, ya.
Udah gitu kan, ya, performance lah ya. Safe battery, space suspension, standar.
Fill the first AI browser engine, ya. Itu udah biasa lah.
- Tapi ini... - Kalau ini gimana? Oh, bayar.
- Nggak ada engine. - Freemium juga, freemium juga.
Ada yang kalau mau pakai query lebih banyak, bayar.
Terus interactive summary, bayar. Terus apa lagi? Advance.
- Oh, kalau pakai FT4, bayar. - Oh, intinya AI. Itu fitur AI.
- Oh, yang dia jual itu cuma ini ya, apa? AI-nya ya berarti ya. - Iya, banyak compute.
Mana lagi? Ada lagi nggak? Nggak ada ya? Udah.
Kayaknya untuk saat ini masih apa ya, menyerupai mirip-mirip seperti art.
Jadi belum ada sesuatu yang spesial yang berbeda dengan art browser.
Spesialnya AI-nya itu. Kalau buat teaser ya.
- Tapi art juga udah ada kan? - Art ada.
- Art Brave udah ada. - Ada AI Max.
- Brave juga udah ada. - Ada AI Max.
- Max, ya. - Tapi nggak gue aktif kan.
- Udah pakai art sekarang? Nggak pakai opera lagi? - Sudah. Sudah, pasti art.
- Kapan pakai opera? - Oh, Ivan kan fanboy-nya opera?
- Iya, used to. Sekarang udah pindah ke art. - Used to. Sekarang udah ke art, ya.
- Iya. Satu-satunya hal yang... - Mungkin nanti kalau udah coba...
- Kalau Sigma OS ya bisa bagus, deck tool-nya mungkin gue bisa pindah. - Stigma, Cok.
Cuman ya lagi nyari sesuatu yang deck tool-nya bagus.
Satu-satunya yang dia jual adalah yang berbeda dengan art ya menurut saya ya.
Yaitu webkit. Kalau art pakai Chromium, dia pakai webkit. That's it.
Yang lainnya mirip-mirip. Masih belum ada perbedaan yang terlalu signifikan.
Yang kayak killer feature-nya lah. Belum ada killer feature-nya. Masih bisa kita dapatkan.
Bahkan ini deck tool-nya kurang bagus. Mendingan art lebih bagus.
- Nah itu webkit keunggulanya ya nebeng optimization-nya. - Iya.
- Webkit yang kayak battery session blablabla tadi. - Yang ini. Betul.
Ya, yang ini nih. Nah, ini dia. Performance-nya yang dibanggakan sama dia.
Selama bisa pakai Apple Keychain kan bisa passkey-nya juga langsung kan.
- Gak harus lewat HP atau device lain. - That's it.
- Jadi ada... - Merasa sigma male, sigma female harus pakai itu ya.
Jadi ya lumayan ini ya. Istilahnya jadi agak bervariasi gitu.
Ada udah mulai banyak tools-tools yang menggunakan webkit gitu.
- Kalau dulu kan kayak terfokusnya kesatu hal gitu kan. - Monopoly. Chromium.
Iya, Monopoly aja. Sekarang udah mulai muncul kayak Boon. Terus juga ada sigma, ada Orion.
Mudah-mudahan nanti bakal ada lagi yang lain yang berbasis webkit gitu ya.
Cuman ya itu, webkit itu kekurangannya devtools-nya kurang sama integrasi ke yang lain.
Dan emang gak digerap sama sekali.
Gak ada yang kan dari blognya Safari atau apa ya gak pernah ada yang bahas devtools-nya.
- Ngerang ya. - Kayaknya bukan prioritas.
Iya, mereka lebih ke end user bukan buat developer kali ya.
- Safari. - Iya.
Maksudnya Safari. Kan webkit Safari kan kayaknya tightly coupled ya.
Kayaknya ya. Kayaknya.
Saya lagi, pernah kok pakai devtools-nya sih Safari.
- Ya, gak se... - Tidak jelek, tapi ya...
- Gak jelek, tapi gak senyap. - Oh, kalau buat kerja jelek gak enak sih.
- Oh iya iya. - Ya, karena emang gak dioptimise.
Maksudnya jalan. Kalau pengen ngecek network request, ya ada network tap.
- Bisa, bisa. - Kalau pengen ngecek, ngecek apa?
Style, elemen, panel elemen, ada, ada, cuma gak enak dipakainya.
Udah lupa, cara buka yang gimana ya?
Option command I, ya klik kanan aja.
- Ada. - Hah?
- Buka dari setting, kalau gak salah ya. - Ada, harus di-enable dulu developer tools-nya.
- Oh iya. - Habis itu baru bisa di-inspect.
Habis itu ya bisa pakai shortcut yang standar.
Nah, coba sambil buka yang webkit blog itu.
- Webkit blog yang tadi, mirip sama yang tadi. - Yang newsrom wdk, lebih lengkap.
- Kayaknya sama deh, lebih lengkap ya. - Iya.
Kalau tadi kan itu pilihannya dia aja kan, yang highlight.
Nah, ini yang update dari Safari Beta kemarin, salah satunya adalah WebXR.
- Karna mereka punya apple console. - Ada jualan hardware.
Jualan hardware, jadi Safari udah bisa jalanin web AR, VR, dan lain-lain.
- Oh iya? - Kemudian CSS-nya tadi, view transition udah kita bahas.
Style query juga udah, ini udah bisa ya tuh. Oh, gak bisa.
Ini apa nih? Current color. Terus animating display juga tadi udah.
- Kan bukan Safari. - Backdrop filter. Ini Chrome. Chromium.
Oh iya, khusus Safari. Chromium masa gak bisa?
I don't know.
Backdrop filter, ini juga menarik nih. Bisa begini ya sekarang CSS ya.
Contrast. Sevia.
Mantap.
Soal warna emang oke ya.
Tapi Safari 18 ini ya.
- Iya, belum. - Belum support.
Save in Flexbox yang tadi, nah ini kan.
Scroll ke atas dikit deh, ada yang menarik sih. Shaping interaction regions.
Karna ini implikasinya buat accessibility juga, scroll ke atas.
Ya, mungkin bisa dianggap responsiveness, bisa untuk accessibility, atas lagi dikit.
Nah, itu atas sampai ketemu judulnya. Shaping interaction regions. Coba zoom ini dikit.
Nah, intinya tab targets, kalau kita pake, kita kan kebiasa bentuk player itu tadinya cuma laptop atau desktop.
Habis itu kita hover, ada mouse-nya, ada pointer-nya, bisa di mouse over dan lain-lain.
Terus habis itu HP, not screen, gak bisa di mouse over, cuma ya bisa di tab.
Nah, sekarang Apple Vision Pro, 2 tab targets-nya.
Anytime a user looks at interactive element, it's highlighted to let them know that it can be tab.
Atau yang gak tau itu bentuknya gimana. Kalo kan kita cuma bilang sebagai designer atau developer,
bisa mendesain bagaimana tampilannya. Apakah ada sudut elemennya atau gimana. Nah, itu.
Tuh, ada videonya tuh. Optimized for the special.
Ini maksudnya special web itu apa ya?
Ya itu, web UI kalau pake kacamata mahal.
Oh, Vision Pro.
Kalau klik ya.
Tampilannya gimana kalau pake?
Gak dilihat ini.
Oh, jadi ada region-nya ya. Jadi kayak button gitu ya.
Terus apakah jadi bisa di styling pake CSS atau gimana? Nah, gak tau-tahu.
Kayak estetikanya Apple lah, ada rounded corner, ada gradient.
Iya, iya, iya, iya.
This don't even have to be visible in your dome.
Coba kodenya. Ada kodenya gak ya?
Oh, gitu. Jadi kalo lagi buka, ada highlight.
So, kita tau posisi matanya dimana gitu ya.
Atau posisi cursor-nya yang lebih pentingnya ya.
Jadi ngeklikkan gerakin tangan ya kalau gak salah.
Iya, ada kliknya juga kalau gak.
Gimana sih? Bisa klik?
Bisa di styling atau cara mengwarnainnya?
Ya, nanti liat sendiri.
Gak tau loh. Itu di bawah ada keterangan gak?
Ya, gak ada. Gak ada. Cuman suruh nonton video kita.
Menit keberapa, menit keberapa, menit keberapa.
Ini ada inspect yang dibug.
Mereka lagi bangun ekosistem SPA ini kali ya.
Ekosistemnya si Vision Pro AR.
Oke, kita lanjut lagi ya. Ini tadi udah.
Ini tadi juga udah. Content visibility.
Content visibility control whether or not an element render its content in fashion that is full to making performance.
Oh, ini udah lama ya di Chrome ya, tapi webkit baru Safari 18 ya.
Kalau belum perlu di render, harus di render dulu.
Gak akan di render dulu untuk performance ya.
Kalau Firefox udah support, kemarin Safari akhirnya support juga.
Dan ini, dia kembali ke fitrahnya nih, add to doc.
Dulu add to homescreen ya.
Tapi ini make OS ya.
Jadi kalau misalkan kita buka Safari, kita suka webnya, kita sering buka gitu ya.
Kita bisa add to doc, jadi dia seperti aplikasi.
Jadi ada icon-nya.
Ya, ada manifest file, ya PWA lah ya, standard PWA, software dan teknologi yang lain.
Sampai akhirnya kita bisa customize icon-nya, bisa clean up URL-nya.
Kalau sebelumnya kan add to homescreen.
Eh, add to doc.
Ini add to doc.
Kalau sekarang sudah bisa add to doc.
Kalau dulu sebelum jamannya PWA, itu ada aplikasi sendiri, tersendiri.
Jadi kita mau bikin web app supaya ada aplikasinya atau bisa pakai spotlight.
Spotlight bisa muncul, itu ada aplikasi sendiri, terparti yang bikin.
Sekarang udah include sendiri ya.
To improvement to web apps on Mac.
Oh bisa, bisa.
Bisa buka di aplikasinya, jadi Chrome.
Oh pakai scope kayak ini ya, kayak Android ya.
Eh, PWA Chrome Android juga bisa kok.
Iya, iya.
Jadi nama istilahnya adalah scope ya.
Kalau di Android itu kok nggak salah titik 2 kan, ada blablabla titik 2 slash slash kan.
Iya, scope dimanifest saja son, web app manifest.
Emang itu kan udah standar ya, browser apapun.
Bisa pakai extension.
Extension support, safari extension, spatial media, ini yang berhubungan sama...
Oh ini yang tadi ya.
Terus request fullscreen.
Nah ini juga nih yang sedikit membedakan visi antara Chrome dan juga safari support untuk media.
Karena kalau di Apple itu pakai HEIJ.
Kalau di Chrome itu mereka lebih pro, Aviv.
Iya, jadi ini tarik ulur nih berdua nih.
Setelah lagi ketemunya JPEG XL.
JPEG XL.
Oh iya.
Ini apa ATML? Writing Suggestion Sama Dengan True.
Apa ini? Coba kita baca.
Inland Predictive Text on iOS.
Ini siap-siap buat AI.
Oh siap-siap buat AI.
Sekarang nggak bisa karena saya nggak di safari juga.
Nggak di macOS.
Dengan kualitas ini belum ada bener-bener deh. Emang emang udah jalan apa?
Writing Suggestion ini gimana sih? Coba.
Coba buka, coba buka.
Ini di chat.
Di chat umum.
Coba testing.
Switch Control.
Oh nggak bisa juga. Switch ini kayaknya khusus iOS ya?
Ini bukannya bukan di macOS, bukan di iOS, nggak bisa.
Checkboxnya Switch gitu.
Kayak tombolnya laki-laki gitu ya.
Berarti pakai Custom Element mungkin ya.
Custom Elementnya biasa sendiri.
Now when a user taps a Switch Control on iPhone, a single tap is failed.
Just like how toggling a Switch fill in setting app on iOS.
Oh we are consistent sama iOS.
Ya, native iOS-nya kan udah lama support kan yang Switch ini kan.
Sedangkan di browser mereka belum ada, akhirnya mereka bikin.
Date sekarang udah support juga.
Date time.
Ya date time.
Ya, usually element have label need but sometimes there's no text label.
Oh override.
Kalau perlu override.
Pakai braille label sama braille.
Oh ini buat accessibility ya.
Ya, tapi kalau accessibility, kadang kan ada orang yang low-vision atau tuna-netra,
tapi pakai yang voice-over sama inputnya juga biasa, text biasa.
Tapi ada yang pakai alat khusus, alat khusus tuh kayak nggak tau lah bentuknya gimana.
Jadi braille, buat connector, buat curve braille gitu.
Nah itu khusus.
Nggak bisa writing suggestion.
Safari 18, emang udah Safari 18?
Oh belum, ya tunggu 18, 18 beta.
Watch video without distractions in viewer for Safari beta Mac OS.
Selama ini juga bisa full screen.
Bukan, kayak picture in picture ya.
Picture itu kan kalau kita scroll down atau kita pindah window alo ini nggak, cuma disitu.
Ini yang lainnya digelapin gitu ya, ditutup ya.
Jadi modal.
Kalau vision OS kita nggak bisa komen lah ya.
WebRTC, support for WebRTC HFC.
Ya ini media juga ya.
Tadi HEC, ini HFC.
HFC, ya HFC.
Pasky, 2 years ago WebRTC 2.2 announced support for Pasky. A groundbreaking industry standard way to login to website and app services.
- Mereka udah ini ya web? - Yang ini tambah mediasen kondisional itu loh.
- Apa ya? - Jadi tambah ini.
Bisa diautomatis ngecek kalau misalnya sudah ada credentialnya dibuat.
- Dibuat, dia bisa langsung... - Gak perlu nanya lagi.
Mau pake, nggak dia tanya, dia nggak perlu nanya gitu.
Jadi bisa ngecek kalau di paskingnya sudah pernah buat, belum credential, jadi tinggal pake.
Jadi kalau belum buat, jangan ditanya gitu loh.
Kalau sekarang implementasinya selalu munculin, pake nggak pake, ada nggak ada, munculin.
Mau pake Pasky nggak, tapi ternyata nggak ada gitu.
- Oh, sial. - Soalnya sekarang juga sehari-hari kayaknya Safari, GitHub atau login apapun yang support Pasky udah lancar-lancar aja.
Ini berarti kalau kasusnya kalau emang belum bikin ya?
- Iya. - Unicode kerap terus.
- Oh, sekarang bisa bikin gini ya? - Iya.
Web API tadi URL parse ya, ini buat JavaScript ya.
Terus apa lagi nih? Canvas.
- Will read frequently, WebGL. - WebGL.
- Nggak ngerti ya. - Oke.
- Nggak ngerti. - Ini bikin low-level aplikasi low-level.
- Weka WebView. - Weka WebView.
Weka WebView itu kayak versi lebih oke-nya dari WebView di iOS.
Kalau mau pake WebView, pakenya Weka WebView.
- Equal Pay. - Lebih oke-nya maksudnya apa?
- Lebih apa ya? - Lebih baru, lebih optimize.
Kalau dulu kan NS WebView ya kalau nggak salah ya. NS itu kan next step.
Ingat nggak Steve Jobs kan begitu dipecat sama Apple, dia bikin perusahaan namanya NEXT untuk bikin komputer kan.
Terus mereka bikin OS, bikin programming lain juga namanya Objective-C.
Makanya kalau teman-teman belajar Objective-C itu struktur data atau tipe datanya itu pake NS.
Next step, next NS something, NS something, termasuk juga WebView.
Dulu ada yang namanya NS WebView, itu Objective-C punya.
Jadi sekarang yang lebih modernnya Weka WebView.
CSS. Itu masih ada ke HTML. Masih ada ke HTML. Masih bawaannya.
- Deprecated. - Iya, deprecated.
Tapi ternyata masih ada sampai sekarang gitu. Baru deprecated-nya sekarang kan.
Cuma someone-somewhere pasti ada yang komplain, "Wah website saya rusak."
Gara-gara media print. - image GPC 2000 udah di support ya?
- Dihapus. - Removed support.
- Safari was the only browser to even provide support. - Nggak ada yang bernafas.
- JPEG 2000 kan, jadi yang balik lagi kan JPEG Excel kan? - Excel itu bukan fasus.
Itu dengan browser lain nggak ada yang adopsi.
- Project gagal. - Project gagal.
Storage, support AppCache. Safari 4. Oh buat caching ya.
WebKit Deprecated AppCache. 2001 remove support.
Third party user Weka WebView. Now we are removing those exception.
This change to WebKit will only affect the rare web content loaded in older third party apps
that have JavaScript code which relies on accessing AppCache related.
WebCache-nya sudah nggak bisa. Web API, keyboard event, key location, alt graph key,
bug fix, ya bug fix ya, baca sendiri ya teman-teman ya.
Weka WebView dipakai di Ionic buat ini ya, hybrid, buat develop aplikasi hybrid ya.
- Saya pernah baca satu podcast mengenai WebKit ini sih dari orang iPol-nya.
Itu yang blog yang tadi itu mulai rutin mereka publish dari bus semenjak 2 atau 3 tahun terakhir
saat mereka mulai mengejar ketinggalan ini. - Sejak mulai ngejar.
- Gua tapi nama cewe itu dia lip-nya di Safari. - Di Syntax FM ya?
Dengar juga sih kalau di Syntax FM. - Dia yang dulu dari Firefox nggak sih?
Lupa namanya. - Nah berarti terjawab kan bener kan?
- Ya betul, emang dibajak Apple. - Jadi salah satu programnya dia itu adalah
mulai mempublikasikan update-nya mereka, dan blog itulah salah satunya.
Berarti itu best practice ya? Kayak bikin apa ya? Kayak accountability ya?
Tanda kutip sih, maksudnya accountability itu public gitu.
Kayak ini kita bikin ini, jadi kayak kultur yang bikin kemajuan.
- Kultur yang mungkin di Firefox dirasa cukup berhasil dengan MDN-nya salah satunya kan ya.
Jadi mereka mau adopsi itu untuk di Mozilla, di Safari atau WebKit.
- Apa? Namu itu Syntax, maksudnya judul episode-nya seru deh.
Maksanya judulnya gini webkit, tapi kita pasti langsung ngerti maksudnya.
Buka tuh di private chat. - Yes, yes, yes. Bentar.
- Safari is the new Chrome, judulnya.
- Jadi kan stigma-nya Safari adalah IE baru. Nah, ini Safari adalah Chrome baru.
Safari is the new Chrome. - Jen Simmons.
- Emang dia mantan ini ya? - Iya, dulu dia dari Firefox.
Apple Evangelist Safari and WebKit, member of CSS Working Group.
- Ada di mastodon-nya.
- Ini gimana bacanya sih ini menu-nya? - Ini.
- Miring begini.
- Make video. - Nah, itu-nya masih belum di-update dong.
- Zoom in, coba zoom in. - Masih Mozilla dia.
- Oh, itu benar dia. - Belum di-update aja.
- Oh, dia ada YouTube juga. Isinya apa? - Podcast.
- Berarti harus bisa kita undang nih dia nih. Loh.
- Oh, iya designer ya dia. Jadi banyakan CSS yang dia main.
- Iya, emang specialist layout. - Specialistnya, iya, iya.
- Jen Simmons. Eh, Jen Simmons apa Jen Simmons?
- Simmons. - Simmons kayaknya.
- Berarti benar ya. Emang kalau kita ngomongin Firefox itu salah satu yang outstanding ya.
Beberapa tahun yang lalu itu memang CSS-nya ya.
- Iya, oke. - Flex.
- Dan dokumentasinya selama bapak siapa itu yang kita pernah ketemu di Jogja?
- Naiman, Robert Naiman. - Robert, Robert Naiman.
Bapak itu yang update-update MDN itu biasanya.
- Iya. - Desk tools-nya juga.
Jadi dulu sebelum, bahkan sebelum Chrome kan sekarang udah ada kalau grid atau flex,
ada itunya ya, kita bisa toggle gridline-nya di layar. Itu yang adopsi fitur itu dulu Firefox.
- Firefox, iya. Makanya tadi kan curiga, ini fitur CSS-nya banyak update nih.
Jangan-jangan ada terjadi transfer pemain. Ternyata benar kan.
Lead-nya malah udah ke Safari. Jadi jelas lah ya.
- Ya pemain minta-nya udah dibeli. Apple. - Iya, dibeli.
Jadi kiblatnya agak berubah.
Oke, ada lagi yang perlu kita bahas.
Kalau pertanyaannya Valeri, ini kita jawab nanti ya di sesi khusus belajar Phoenix Elixir ya.
Jangan di sini ya. Kayak nggak nyambung banget.
- Iya, mau dong. Mau dong bikin episode itu Phoenix Elixir.
- Oh mau? - Karena gua nggak ngerti sama sekali.
- Oh kita undang siapa ya? Kita harus ada undang ininya lah.
- Iya, yang ada nggak komunitasnya atau apa lah. Atau yang bikin.
- Siap, siap. Nanti dicek. - Apa lah sering dicek.
- Mas Fahmi. - Siapa?
- Mas Fahmi. - Mas Fahmi Risa.
- Siapa tuh? - Siapa tuh?
- Kalau saya kan itu sebagai pengurusan zombie aja. Belum ada production.
Evangelist nggak dibayar. Evangelist yang belum menguntungkan. Belum monetisasi.
Sepertinya sudah ya. Cukup ya untuk malam ini kali ya.
Cukup lah ya kita ngomong-ngomongin safari. Mungkin next time-nya kita bisa ngomongin...
- Roast of Life? - Roast of Life kita udah ngomong belum?
- Udah ngomongin tadi. - Udah ya? Iya tadi sih. Cuman kan belum...
- Belum detail. - Atau kita mau itu apa? Nostalgia.
- Bahas... - Life from Mozilla Space.
- DevTool, DevTool. Kita belum pernah bahas DevTool yang ini.
- Oh iya. - Pernah nggak sih? Pernah? Belum.
- Kapan? Belum kayaknya. - Coba aja.
- Update-update DevTool terakhir kan mungkin? - Ada. Cuman sekilas-sekilas gitu.
- Iya. - Eh ada ya, DevTool?
- Ada episode 38. - Udah lama banget.
- Berarti harus refresh. - Udah ngobrolin update, DevTools.
- Ngomongin lagi. Episode 38? - Bahas Ionic.
- Kita ngomongin apa? Ionic? - Itu kata Mas Bahyu.
- Oh iya. - Bahas Ionic.
- Bahas Bahyu. Memang dia fanboynya Ionic. Apa yang mau kita bahas dari Ionic?
- Bahyu jadi ini kali ya? - Ionic Stencil.
- Jadi Narasumber boleh ya? - Iya.
- Iya dong. Biar ada yang bisa ditanya. - Mas Imre. Mas Imre nanti kita coba ya.
- Bahas Cloud kita. - Kapan? Bahas apa yang Imre?
- Bahas Cloud. Infrastructure. - Bahas ini, bahas Lanken.
- Tapi Ionic Stencil itu kayaknya belum dibahas ya.
- Stencil itu berarti web component framework bukan?
- Library kan. - Library ya.
- Oh banyak yang mau Cloud. - Bukan framework sih.
- Kita mau bahas Cloud apa lagi? Gimana cara deploy web gitu ya?
- Pake scaling web. - Gimana cara hindari bil nge-dap?
- Itu juga penting dong. - Oh iya. Apa namanya?
The economics of Cloud. - Coba Firebase ada yang seru.
- Frugal. - Firebase.
- Firebase Genkit, Apple Sting, dan itu kan masih nyambung sama web ya.
Soalnya Apple Sting. - Oke. Baiklah kalau begitu.
Untuk malam hari ini kita udahan dulu ngomongin safarinya.
Mudah-mudahan minggu depan kita bahas hal-hal yang lain.
Jangan lupa masih ditunggu di kesana.in/ngobrolinweb.
Itu GitHub discussion. Jadi teman-teman bisa post apa aja di sana.
Termasuk juga saran kritik atau saran resumber. Boleh.
Nanti kita pantengin ya. Untuk malam ini sekian dulu.
Terima kasih banyak. Bahas DevTool. Oh, bahas DevTool lagi kita.
- Udah. Episode ke-8. - Ya cari aja di playlist ya.
Sekian dulu. Terima kasih banyak. Selamat malam. Selamat istirahat.
- Sampai jumpa minggu depan. - Bye bye.
- Bye bye. - 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
2 Agu 2023
Ngobrolin Privacy Sandbox
Privacy Sandbox dibahas bukan sebagai wacana melainkan sesuatu yang harus disiapkan dari sekarang, karena dampaknya bisa...
19 Apr 2023
Ngobrolin CMS
Content management system dibahas sebagai kelanjutan alami dari episode-episode sebelumnya soal cara halaman dirender. C...
22 Apr 2026
Scam dan Penipuan
Episode ini membahas scam dan penipuan digital yang makin marak, dengan penekanan bahwa celah utamanya hampir selalu soc...
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 .