Selamat datang di Chrome Dev Insider edisi kedua, tempat kami membagikan informasi terbaru tentang hal-hal baru dan menarik di komunitas serta di Chrome. Ini adalah episode baru dari kisah internal tentang pendekatan kami terhadap upaya kami, dan sekilas pandang pada beberapa pembaruan paling penting yang harus Anda perhatikan.
Saya Rachel Andrew, Content Lead untuk web.dev dan developer.chrome.com, sebagai bagian dari tim Developer Relations Chrome. Saya telah bekerja di web selama lebih dari dua puluh tahun, dengan fokus pada standar web terbuka dan CSS, serta merupakan anggota CSS Working Group.
Dua bulan lalu, kami mengakhiri Google I/O di mana kami membagikan beberapa info terbaru yang paling penting tentang cara kami mendukung developer dalam menjadikan web lebih cepat dan canggih sekaligus menjaga informasi pengguna tetap aman dan pribadi.
Salah satu hal yang menarik (dan kami senang komunitas memperhatikan) adalah banyaknya upaya yang dilakukan tim untuk mendukung lebih banyak fitur CSS dan UI di web. Dalam edisi Chrome Dev Insider ini, kami akan mengajak Anda ke balik layar tentang siapa yang ada di balik pekerjaan ini, bagaimana kami bekerja untuk mendukung developer CSS dan UI, serta apa yang ada di masa depan. Itulah mengapa saya sangat senang bisa menjadi tuan rumah edisi Insider ini.
Dalam berita
Dalam Chrome Dev Insider pertama, kami membagikan beberapa update pada inisiatif Compat 2021 dan Interop 2022 ketika vendor browser dan pelaku ekosistem telah bekerja sama untuk menghadirkan lebih banyak fitur ke web yang didukung di semua browser. Inisiatif ini terutama berfokus pada CSS karena inkompatibilitas browser merupakan salah satu tantangan terbesar bagi developer CSS.
Meskipun ini mungkin bukan berita baru bagi sebagian besar browser, kami senang melihat kemajuan yang telah kami capai di berbagai browser.
Pada awal bulan lalu, kita melihat Safari mengumumkan rilis bumper dengan Safari 16.0 Beta yang menyertakan fitur menarik seperti Container Kueri, subgrid, dan flexbox inspector. Rilis terbaru Firefox dan Chrome menyertakan sejumlah fitur dan perbaikan yang menarik—Saya membahas hal-hal penting di browser stabil dan beta setiap bulan dalam rangkaian postingan baru di platform web saya.
Informasi eksklusif: Mendukung developer CSS dan UI
Mengingat tahun 2022 akan menjadi tahun yang menyenangkan untuk fitur CSS, kami rasa ini adalah saat yang tepat untuk membawa Anda ke balik layar. Saya duduk bersama Una Kravets, DevRel untuk Web UI dan Devtools serta Nicole Sullivan, Product Manager untuk UI Web yang berfokus pada CSS dan HTML API, untuk membahas perjalanan Chrome dalam mendukung developer UI.
Mari kita mulai. Ceritakan lebih banyak tentang diri Anda?
Nicole: Saya adalah product manager untuk UI Web di Chrome. Saya berfokus secara khusus pada CSS dan API HTML baru serta pada developer dan desainer yang membangun UI. Ini adalah ruang yang menarik dengan beberapa API yang sangat penting keluar seperti Kueri Container, Cakupan, dan (semoga!) ritme vertikal.
Una: Saya memimpin tim UI Web dan DevTools DevRel. Kami berfokus untuk mendukung engineer UI di platform web dan memastikan mereka memiliki alat yang dibutuhkan untuk meraih kesuksesan. Ini mencakup API CSS dan komponen HTML beserta fitur DevTools untuk melihat masukan dan perubahan aktif.
Dukungan Chrome untuk developer UI meningkat pesat dalam beberapa tahun terakhir. Menurut Anda, mengapa perlu waktu lama untuk sampai ke sini? Apa saja tantangan terbesarnya?
Una: Kami perlu melakukan beberapa upaya untuk menunjukkan betapa pentingnya pekerjaan ini, dan mengapa hal itu harus menjadi prioritas. Kami memulai dengan survei DNA MN pada tahun 2019, yang mengidentifikasi UI sebagai beberapa poin masalah utama pada platform. Sejak saat itu, kami terus menggunakan data sebagai panduan melalui MDN dan survei kepuasan developer internal kami. Hasil dari semua ini adalah kami bisa mendapatkan dukungan kepemimpinan yang lebih mendalam dan dapat memprioritaskan pekerjaan engineering untuk beberapa fitur developer yang paling banyak diminta di ruang UI yang juga membentuk sebagian besar fokus untuk inisiatif seperti Compat 2021 dan Interop 2022.
Nicole: Selain mendapatkan dukungan kepemimpinan, kami juga harus menemukan cara yang tepat untuk memberikan API ini kepada para developer. Saat pertama kali bergabung dengan Chrome, saya mengacaukannya dalam sebuah project yang disebut Layered API (atau disingkat LAPI). LAPI bertujuan untuk memberikan pengalaman komponen siap pakai kepada developer. Saya masih berpikir bahwa hasil tembakan ini bagus, tetapi kami membuat banyak kesalahan. Pertama-tama, kita berfokus pada Notifikasi Toast dan Daftar Virtual. Toast hampir tidak mungkin bisa diakses dan daftar virtual adalah salah satu komponen yang paling sulit untuk dibuat dengan benar. Tujuan kami bagus tetapi tidak membantu developer, jadi kami menghentikan project tersebut. Sulit untuk mempelajari dengan cara yang sulit, tetapi setiap kesalahan memicu kebangkitan CSS dan HTML yang terjadi sekarang.
Mari kita bahas sedikit tentang LAPI. Apa yang terjadi di sana?
Nicole: Untuk LAPI, kami tahu bahwa web memerlukan pengalaman developer komponen siap pakai yang lebih dekat dengan proses membangun UI native. Dan sudah jelas bahwa menemukan kembali sesuatu yang sudah ada sedang menghambat para developer. Aku tidak bisa menghitung jumlah tab yang telah aku bangun selama karierku! Meskipun demikian, kami mencoba menyelesaikannya dengan mengirimkan JavaScript menggunakan browser yang sangat sulit. Tidak ada seorang pun yang meluncurkan JavaScript di browser sebelumnya, dan tidak jelas bagaimana cara interaksinya dengan kode C++ yang menggerakkan mesin rendering browser. Kami mendengarkan vendor browser lain (terima kasih, Mozilla!) dan mundur dari pendekatan tersebut, sehingga kami dapat menemukan sesuatu yang jauh lebih baik dengan Open UI. Dengan mengandalkan HTML dan CSS, kami akhirnya mendapatkan solusi yang fleksibel dan deklaratif. Karena bersifat deklaratif, kita bisa memasukkan aksesibilitas dengan cara yang tidak akan mudah dilakukan dengan JavaScript. Saya sangat bersemangat untuk ke mana hal ini terjadi. Kami sedang berupaya untuk mendukung selectmenu, popup, tooltip, nav, akordeon, tab, carousel, dan tombol yang merupakan pola desain UI yang sangat penting.
Jadi, kami telah belajar banyak. Dan saya mengetahui ada inisiatif lain di bidang ini, seperti CSS Houdini. Apa ceritanya?
Una: Yeah CSS Houdini adalah tempat lain yang kami pelajari dari komunitas. Ada banyak fitur Houdini yang berguna, tetapi banyak di antaranya yang levelnya terlalu rendah untuk mendapatkan adopsi dan dukungan yang lebih luas. Kami menyadari bahwa menerapkan API tingkat rendah tidak serta merta mengurangi hambatan bagi developer. Sebaliknya, berfokus pada solusi dan kebutuhan yang lebih tinggi telah membantu mendapatkan dukungan lintas browser dan pendaratan yang diperlukan untuk membawa perubahan pada ekosistem. Kami sedang memantau progres di https://ishoudinireadyyet.com/.
Berbicara tentang dukungan lintas browser, inisiatif seperti Interop 2022 dan Open UI tampaknya memberikan hasil positif yang signifikan bagi komunitas. Apa yang Anda dengar dari developer?
Una: Salah satu poin masalah utama yang kami dengar dari developer adalah "membuat desain berfungsi sama di seluruh browser". Kami menangani masalah ini dengan bekerja sama dengan vendor browser lain untuk memprioritaskan dan mendapatkan beberapa fitur developer yang paling banyak diminta. Selain itu, masukan yang kami dengar dari komunitas sangat positif. Selain itu, melalui upaya arsitektur ulang besar yang disebut RenderingNG, beberapa fitur ini dapat ditampilkan dengan lebih baik. Developer senang karena fitur yang lama dinantikan selama bertahun-tahun ini akhirnya dikerjakan dan mendarat di berbagai browser.
Nicole: Antusiasme di komunitas kita sudah sangat jelas. Anda dapat melihatnya di Twitter. :)
Bekerja sama dengan ekosistem terbukti sangat penting untuk kesuksesan kami dalam menjadikan developer hidup menjadi lebih mudah. Saya tahu bahwa tim Anda telah melakukan banyak pekerjaan di sana. Ingin memberikan beberapa detail?
Nicole: Pertama, saya selalu kagum dengan project yang dibuat para developer di web. Dari library terkecil hingga framework lengkap, developer membangun berbagai hal yang luar biasa. Ini adalah komunitas pengrajin yang fantastis. Dan Chrome melakukan banyak langkah agar lebih terhubung ke project ini.
Misalnya, beberapa tahun yang lalu kami mulai menggunakan Framework JavaScript seperti React dan Angular. Dan metaframework—misalnya Next, Nuxt, dan Gatsby. Tahun lalu, kami mulai melakukan hal yang sama dengan alat dan framework UI seperti Sass, Bootstrap, dan Material. Saya harap tahun depan, kita bisa berkolaborasi dengan GreenSock dan alat lain yang membuat hidup menjadi lebih mudah. Saya baru saja melihat Cassie Evans dari GreenSock berbicara di Smashing Conference dan membuat saya sangat bersemangat bekerja dengan orang-orang di bidang animasi.
Jadi, di mana kita melihat peluang terbesar untuk ekosistem UI Web?
Una: Dalam hal peluang besar, sepertinya kami baru mencoba sebagian kecil dari apa yang mungkin dilakukan untuk pengalaman web yang dapat disesuaikan. API baru seperti kueri container dan fitur media preferensi pengguna CSS mendefinisikan ulang cara developer melihat desain responsif. Saya juga sangat senang dengan pengalaman desain kolaboratif yang memungkinkan developer dan desainer dapat bekerja bersama dengan pengguna yang mengunjungi situs mereka.
Dan Nicole, apa rencana tim Anda selanjutnya?
Nicole: Tidak semua eksplorasi berubah menjadi sesuatu yang bisa dikirim, tetapi ada banyak hal yang sangat saya sukai saat ini:
Sebelumnya, kami menyinggung soal desain yang responsif dan berbasis komponen. Termasuk di dalamnya adalah alat untuk mendesain sistem warna sehingga desainer dapat merespons preferensi pengguna seperti mode gelap. Misalnya, ruang warna OKLCH menjaga kecerahan tetap konsisten di seluruh hue. Desainer dapat beralih dari memilih warna ke merancang hubungan antar warna, tanpa berakhir dengan palet yang tampak berlumpur!
Kami juga sedang mengerjakan beberapa API yang paling banyak diminta, seperti kueri container, lapisan jenjang, pemilih induk (:has), gaya cakupan, dan penyusunan bertingkat. Developer membutuhkannya agar mereka dapat membangun sistem desain fleksibel yang penuh dengan komponen yang dapat digunakan kembali.
Menggulir animasi yang ditautkan adalah area menyenangkan lainnya. Saya sangat suka demo Steve Gardner. Dia memiliki scroll yang mulus dan animasi pesawat keren yang dipicu saat men-scroll. Meskipun menyenangkan, tapi mungkin sulit untuk melakukannya dengan benar, terutama dengan mempertimbangkan aksesibilitas. Jadi, sekarang kita sedang menjalankan pengujian pengguna untuk aksesibilitas pada fitur ini.
Hal yang paling saya sukai adalah kontrol UI web bawaan. Developer terus membuat tab yang sama berulang kali, saya rasa browser bisa membantu. Di Open UI, kita akan mengerjakan komponen seperti selectmenu, pop-up, tooltip, tab, navigasi, akordeon, dan tombol. Kami sedang mengeksplorasi bagaimana rasanya memasukkan aksesibilitas ke dalam dasar-dasar browser ini sehingga web dapat diakses secara default dari waktu ke waktu. Developer kemudian dapat fokus pada masalah yang lebih kompleks dan berbeda, sedangkan dasar-dasar seperti tab bagaimana cara tab, dapat didukung oleh browser. Mungkin perlu postingan sendiri, jadi saya akan berhenti di sini sekarang.
Terakhir, kita akan terus melakukan investasi dalam interop antar-browser. Kami sangat senang bekerja dengan orang-orang di WebKit dan Gecko untuk memberikan konsistensi pada pengalaman developer. Kami mendengar masukan dari para developer bahwa mereka menginginkan hal ini!
Oh, dan jika Anda belum memeriksanya, Shared Element Transitions API dari tim mulus akan mengubah cara orang mendesain untuk web. Semua transisi kecil halus yang memungkinkan desainer untuk mengorientasikan desain mereka di ruang fisik tidak hanya memungkinkan, tetapi juga mudah. Jake Archibald memiliki demo yang bagus.
Kami mungkin, jika standar berjalan dengan baik, bahkan melihat ritme vertikal tahun ini! Kita dapat membangun di atas LayoutNG yang membuka begitu banyak fitur.
Terima kasih keduanya. Saya yakin seluruh komunitas, seperti kami, tidak sabar untuk melihat laju peningkatan dan fitur baru yang hadir di dunia UI Web. Masih banyak yang perlu dikuasai, jadi menurut Anda, di mana harus memulai perjalanannya?
Una: Sesi Yang baru untuk platform web di I/O membahas sorotan dari berbagai fitur yang hadir tahun ini. Adam Argyle juga menulis artikel bagus tentang semua pendaratan CSS baru dan yang akan datang. Secara berkelanjutan, saya akan berfokus pada rilis yang stabil untuk saat ini dan mengetahui pekerjaan lain yang akan memasuki pipeline. Seri Baru di platform web menarik untuk diikuti. Berlangganan newsletter web.dev juga akan menampilkan konten ini kotak masuk. Dan bagi developer yang ingin terlibat dan membantu semua ini, bergabung dengan UI Terbuka adalah salah satu cara terbaik Anda dapat mendukung pekerjaan ini.
Update penting mendatang
Kami mempertahankan tradisi kami untuk memberi Anda informasi tentang perubahan mendatang yang harus Anda ingat saat membangun pengalaman web.
Batasi usia maksimum untuk cookie hingga 400 hari
- Pembaruan: Jika cookie disetel dengan atribut
Expires/Max-Ageeksplisit, nilai sekarang akan dibatasi tidak lebih dari 400 hari ke depan. Sebelumnya, tidak ada batasan dan cookie dapat habis masa berlakunya hingga ribuan tahun ke depan. Tujuan dari pembatasan ini adalah untuk mencapai keseimbangan antara pola penggunaan umum dan menghormati privasi pengguna. Situs apa pun yang dikunjungi lebih sering daripada setiap 400 hari dapat memperbarui cookie untuk memastikan keberlanjutan layanan dan pengguna dapat yakin bahwa cookie tidak akan berlama-lama di browser mereka selama ribuan tahun tanpa digunakan. - Perkiraan linimasa: Pengiriman di Chrome 104 (Stabil pada 2 Agustus 2022).
- CTA Developer: Developer mungkin perlu memperbarui cookie secara proaktif lebih sering daripada sebelumnya saat pengguna mengunjungi situs mereka. Jika tidak, pengguna mungkin akan logout 400 hari setelah cookie pertama kali ditetapkan.
Semoga Anda senang membaca edisi Chrome Dev Insider ini. Kalau Anda melewatkannya, ini dia yang pertama. Kami berharap dapat menghadirkan lebih banyak peserta di kuartal berikutnya.
Sementara itu, beri tahu kami pendapat Anda tentang edisi Chrome Dev Insider ini dan apa yang dapat kami lakukan untuk membuatnya lebih baik.
Apa pendapat Anda tentang The Chrome Dev Insider edisi ini? Beri masukan.