Selamat datang di Chrome Dev Insider edisi kedua tempat kami berbagi info terkini tentang hal baru dan menarik di komunitas dan di sini di Chrome. Ini adalah episode baru dari kisah eksklusif tentang cara kami menangani pekerjaan kami, dan sekilas melihat beberapa pembaruan terpenting yang harus Anda perhatikan.
Saya Rachel Andrew, Content Lead untuk web.dev dan developer.chrome.com, sebagai bagian dari tim Chrome Developer Relations. Saya telah bekerja di web selama lebih dari dua puluh tahun, dengan fokus pada standar web terbuka dan CSS, serta merupakan anggota Kelompok Kerja CSS.
Dua bulan lalu, kami mengakhiri Google I/O yang di dalamnya kami membagikan beberapa pembaruan terpenting tentang bagaimana kami mendukung developer dalam membuat web lebih cepat dan lebih canggih sambil menjaga keamanan dan kerahasiaan informasi pengguna.
Salah satu hal yang menarik (dan kami senang komunitas memperhatikan) adalah banyak upaya yang dilakukan tim untuk mendukung lebih banyak fitur CSS dan UI di web. Dalam Chrome Dev Insider edisi ini, kami akan membahas kisah di balik layar terkait siapa yang ada di balik upaya ini, bagaimana kami berupaya mendukung developer CSS dan UI, serta apa yang akan terjadi di masa mendatang. Itulah sebabnya saya senang menjadi pembawa acara edisi Insider ini.
Dalam berita
Dalam Chrome Dev Insider pertama, kami membagikan beberapa info terbaru tentang inisiatif Compat 2021 dan Interop 2022 tempat vendor browser dan pemain ekosistem telah bekerja sama untuk menghadirkan lebih banyak fitur ke web yang didukung di semua browser. Inisiatif ini memiliki fokus yang kuat pada CSS karena inkompatibilitas browser adalah salah satu tantangan terbesar bagi developer CSS.
Meskipun ini mungkin bukan berita yang menarik, menarik melihat kemajuan yang telah kami capai di berbagai browser.
Awal bulan lalu, kami melihat Safari mengumumkan rilis bumper dengan Safari 16.0 Beta yang mencakup fitur menarik seperti Kueri Container, subgrid, dan flexbox inspector. Rilis terbaru Firefox dan Chrome menyertakan sejumlah fitur dan perbaikan menarik—Saya membahas hal-hal penting tentang browser stabil dan beta setiap bulan dalam rangkaian pos saya yang baru di platform web.
Informasi eksklusif: Mendukung developer CSS dan UI
Tahun 2022 akan menjadi tahun yang menggembirakan bagi fitur CSS, menurut kami ini saat yang tepat untuk mengajak Anda melihat kisah di balik layar. Saya berdiskusi dengan Una Kravets, pemimpin DevRel untuk UI Web dan Devtools, serta Nicole Sullivan, Product Manager untuk UI Web kami yang berfokus pada CSS dan HTML API, untuk membahas perjalanan Chrome dalam mendukung developer UI.
Mari kita mulai dengan Anda berdua. Ceritakan lebih banyak tentang diri Anda.
Nicole: Saya adalah product manager untuk UI Web di Chrome. Saya berfokus secara khusus pada API CSS dan HTML baru serta pada pengembang dan desainer yang membangun UI. Ini adalah ruang yang menarik dengan beberapa API yang sangat penting baru muncul seperti Kueri Container, Cakupan, dan (semoga!) ritme vertikal.
Una: Saya memimpin tim DevRel Web dan DevTools. Kami berfokus untuk mendukung engineer UI di platform web dan memastikan mereka memiliki alat yang diperlukan untuk meraih kesuksesan. Ini termasuk CSS API dan komponen HTML beserta fitur DevTools untuk melihat perubahan dan masukan yang aktif.
Dukungan Chrome untuk developer UI telah meningkat pesat dalam beberapa tahun terakhir. Menurut Anda, mengapa butuh waktu lama untuk sampai ke sini? Apa 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 MDN pada tahun 2019, yang mengidentifikasi UI sebagai beberapa titik masalah teratas di platform. Sejak saat itu, kami terus menggunakan data sebagai panduan melalui MDN dan survei kepuasan developer internal kami sendiri. Hasil dari semua ini adalah kami dapat memperoleh dukungan kepemimpinan yang lebih mendalam dan dapat memprioritaskan pekerjaan teknis terkait beberapa fitur developer yang paling banyak diminta di ruang UI yang juga menjadi sebagian besar fokus untuk inisiatif seperti Compat 2021 dan Interop 2022.
Nicole: Selain mendapatkan dukungan pimpinan, kami juga harus menemukan cara yang tepat untuk menyampaikan API ini kepada developer. Ketika pertama kali bergabung dengan Chrome, saya mengacaukan ini dalam project bernama Layered API (atau disingkat LAPI). LAPI bertujuan untuk memberikan pengalaman komponen drop-in kepada developer. Menurut saya, ini adalah hasil yang bagus, tetapi kami juga melakukan banyak kesalahan. Kami berfokus terlebih dahulu pada Notifikasi Toast dan Daftar Virtual. Toast hampir tidak mungkin untuk diakses dan daftar virtual adalah salah satu komponen tersulit untuk dilakukan dengan benar. Niat kami bagus, tetapi tidak membantu developer, jadi kami menghentikan project tersebut. Memang sulit mempelajarinya, tetapi setiap kesalahan memicu kebangkitan CSS dan HTML yang terjadi sekarang.
Mari kita bahas LAPI lebih lanjut. Apa yang terjadi di sana?
Nicole: Untuk LAPI, kami tahu bahwa web memerlukan pengalaman developer komponen siap pakai yang lebih dekat untuk membangun UI native. Dan jelaslah bahwa menciptakan hal yang baru justru menghambat para pengembang. Aku tidak bisa menghitung jumlah tab yang kubangun selama karierku! Meskipun demikian, kami mencoba mengatasinya dengan mengirimkan JavaScript menggunakan browser yang sangat sulit. Tidak ada yang pernah mengirimkan JavaScript di browser sebelumnya, dan tidak jelas bagaimana ia harus berinteraksi dengan kode C++ yang mendukung mesin rendering browser. Kami memperhatikan vendor browser lainnya (terima kasih, Mozilla!) dan mundur dari pendekatan itu dan jadi kami dapat menemukan sesuatu yang jauh lebih baik dengan Open UI. Dengan mengandalkan HTML dan CSS, kita akan mendapatkan solusi deklaratif yang fleksibel. Karena bersifat deklaratif, kita bisa memasukkan aksesibilitas dengan cara yang tidak akan mudah dilakukan dengan JavaScript. Saya sangat bersemangat mengenai ke mana arahnya. Kami berupaya mendukung selectmenu, pop-up, tooltip, nav, akordeon, tab, carousel, dan tombol beralih yang merupakan pola desain UI yang sangat penting.
Kita telah belajar banyak. Saya tahu ada inisiatif lain dalam bidang ini, seperti CSS Houdini. Apa ceritanya?
Una: Benar, CSS Houdini adalah salah satu tempat kami belajar dari komunitas. Ada banyak sekali fitur Houdini yang berguna, tetapi banyak di antaranya yang sifatnya terlalu rendah untuk mendapatkan penggunaan dan dukungan yang lebih luas. Kami menyadari bahwa menerapkan API tingkat rendah tidak selalu mengurangi hambatan bagi developer. Sebaliknya, berfokus pada solusi dan kebutuhan pada tingkat yang lebih tinggi telah membantu mendapatkan dukungan lintas browser dan penyelesaian yang diperlukan untuk mendorong perubahan dalam ekosistem. Kami sedang melacak 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 pendapat Anda dari developer?
Una: Salah satu poin masalah utama yang kami dengar dari developer adalah "membuat desain berfungsi sama di seluruh browser". Kami telah mengatasi masalah ini dengan bekerja sama dengan vendor browser lainnya untuk memprioritaskan dan mendapatkan beberapa fitur developer yang paling banyak diminta. Selain itu, masukan yang kami terima dari komunitas sangat positif. Selain itu, melalui upaya arsitektur ulang besar-besaran yang disebut RenderingNG, beberapa fitur ini dapat ditempatkan dengan lebih baik. Para developer senang bahwa fitur yang telah lama ditunggu-tunggu ini, yang selama ini mereka minta, akhirnya berhasil dikembangkan dan tersedia di lintas browser.
Nicole: Antusiasme dalam komunitas terlihat jelas. Anda dapat melihatnya di Twitter. :)
Bekerja dengan ekosistem telah terbukti sangat penting bagi kesuksesan apa pun yang kami miliki dalam mempermudah pekerjaan developer. Saya tahu bahwa tim Anda telah melakukan banyak hal di sana. Mau membagikan beberapa detail?
Nicole: Pertama, saya selalu kagum dengan project yang dibangun developer di web. Mulai dari library terkecil hingga framework lengkap, developer membuat hal-hal yang luar biasa. Ini adalah komunitas kreator yang fantastis. Dan Chrome mengambil banyak langkah agar dapat lebih terhubung dengan proyek-proyek ini.
Misalnya, beberapa tahun yang lalu kami mulai menggunakan Framework JavaScript seperti React dan Angular. Dan metaframeworks—misalnya, Next, Nuxt, dan Gatsby. Tahun lalu, kami mulai melakukan hal yang sama dengan alat dan framework UI seperti Sass, Bootstrap, dan Material. Semoga tahun depan, kita dapat berkolaborasi dengan GreenSock dan alat lainnya yang mempermudah pekerjaan developer. Saya baru saja melihat Cassie Evans dari GreenSock berbicara di Smashing Conference dan saya sangat bersemangat untuk bekerja sama dengan orang-orang di bidang animasi.
Jadi, di mana kita dapat melihat peluang terbesar bagi ekosistem UI Web?
Una: Dalam hal peluang besar, saya merasa seperti kita sedang mempelajari kemungkinan untuk pengalaman web yang dapat disesuaikan. API baru seperti kueri penampung dan fitur media preferensi pengguna CSS mendefinisikan ulang cara developer melihat desain responsif. Saya juga bersemangat dengan pengalaman desain kolaboratif yang memungkinkan pengembang dan desainer untuk bekerja serentak dengan pengguna yang mengunjungi situs web mereka.
Dan Nicole, apa rencana selanjutnya untuk tim Anda?
Nicole: Tidak semua eksplorasi berubah menjadi sesuatu yang dapat dikirimkan, tetapi ada banyak hal yang sangat saya minati saat ini:
Kami telah menyinggung hal pertama, kami memungkinkan desain responsif berbasis komponen. Ini mencakup alat untuk mendesain sistem warna sehingga desainer dapat merespons preferensi pengguna seperti mode gelap. Misalnya, ruang warna OKLCH menjaga kecerahan tetap konsisten di seluruh rona. Desainer dapat beralih dari memilih warna hingga mendesain hubungan antar warna, tanpa berakhir dengan palet yang tampak berlumpur!
Kami juga sedang mengerjakan beberapa API yang paling banyak diminta, seperti kueri container, lapisan bertingkat, pemilih induk (:has), gaya cakupan, dan tingkat bertingkat. Developer memerlukannya agar dapat membangun sistem desain fleksibel yang penuh dengan komponen yang dapat digunakan kembali.
Animasi dengan link scroll juga menjadi area menarik lainnya. Saya sangat suka demo Steve Gardner. Dia memiliki scroll yang halus dan animasi pesawat keren yang dipicu saat men-scroll. Meskipun menyenangkan, mungkin sulit untuk melakukannya dengan benar, terutama dengan mempertimbangkan aksesibilitas. Sekarang kita sedang menjalankan pengujian pengguna untuk aksesibilitas pada fitur.
Hal yang paling menarik bagi saya adalah kontrol {i>built-in web UI<i}. Pengembang terus membangun kumpulan tab yang sama berulang kali, saya rasa browser dapat membantu. Di bagian Open UI, kita sedang mengerjakan komponen seperti selectmenu, pop-up, tooltip, tab, nav, akordeon, dan tombol. Kami sedang mengeksplorasi bagaimana akan terlihatnya aksesibilitas ke dalam primitif browser ini sehingga web dapat, seiring waktu, menjadi dapat diakses secara default. Kemudian, developer dapat berfokus pada masalah yang lebih kompleks dan bervariasi, sementara dasar-dasar seperti tab bagaimana melakukan tab, dapat didukung oleh browser. Mungkin perlu postingan tersendiri, jadi saya akan berhenti di sini untuk saat ini!
Terakhir, kita akan terus berinvestasi dalam interop antar-browser. Sangat menyenangkan bekerja dengan orang-orang di WebKit dan Gecko untuk menghadirkan konsistensi pada pengalaman developer. Kami mendengar masukan developer yang jelas bahwa mereka menginginkan hal ini.
Oh, dan jika Anda belum mencobanya, Shared Element Transitions API dari tim Smooth Web akan mengubah cara orang mendesain untuk web. Semua transisi kecil yang memungkinkan desainer untuk mengorientasikan desain mereka dalam ruang fisik tidak hanya mungkin dilakukan, tetapi juga mudah. Jake Archibald memiliki demo yang hebat.
Kita mungkin, jika standar berjalan dengan baik, bahkan melihat ritme vertikal tahun ini! Kami 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 dalam dunia UI Web. Masih banyak yang harus dipelajari. Jadi, dari mana kita sebaiknya memulai perjalanan?
Una: Sesi Yang baru untuk platform web kami di I/O membahas sorotan dari banyak fitur yang tersedia tahun ini. Adam Argyle juga menulis artikel bermanfaat tentang semua pendaratan CSS yang baru dan yang akan datang. Secara berkelanjutan, saya akan berfokus pada rilis stabil untuk saat ini dan hanya memperhatikan beberapa pekerjaan lain yang akan segera hadir. Seri Platform web baru yang keren untuk diikuti. Berlangganan newsletter web.dev juga akan menghadirkan konten ini ke kotak masuk developer. Bagi developer yang ingin terlibat dan membantu menyelesaikan semua ini, bergabung dengan Open UI adalah salah satu cara terbaik untuk mendukung pekerjaan ini.
Update penting mendatang
Kami mempertahankan tradisi untuk memberikan pemberitahuan tentang perubahan mendatang yang harus Anda ingat saat membangun pengalaman web.
Batasi usia maksimum untuk cookie hingga 400 hari
- Pembaruan: Jika cookie ditetapkan dengan atribut
Expires/Max-Ageeksplisit, nilainya sekarang akan dibatasi hingga tidak lebih dari 400 hari ke depan. Sebelumnya, tidak ada batasan dan cookie dapat habis masa berlakunya beberapa ribu tahun di masa mendatang. Tujuan dari batasan ini adalah untuk mencapai keseimbangan antara pola penggunaan umum dan menghormati privasi pengguna. Situs apa pun yang dikunjungi lebih sering dari setiap 400 hari dapat menyegarkan cookie untuk memastikan keberlanjutan layanan dan pengguna dapat yakin bahwa cookie tidak akan berada 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 lagi di kuartal berikutnya.
Sementara itu, sampaikan pendapat Anda tentang Chrome Dev Insider edisi ini dan apa yang dapat kami lakukan untuk membuatnya lebih baik.
Apa pendapat Anda tentang Chrome Dev Insider ini? Bagikan masukan Anda.