Selamat datang di edisi kedua Chrome Dev Insider, tempat kami membagikan info terbaru tentang hal-hal baru dan menarik di komunitas dan di Chrome. Ini adalah episode baru tentang kisah orang dalam tentang cara kami menangani pekerjaan kami, dan sekilas tentang beberapa info terbaru terpenting yang harus Anda perhatikan.
Saya Rachel Andrew, Pemimpin Konten 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 menyelesaikan Google I/O tempat kami membagikan beberapa info terbaru yang paling penting tentang cara kami mendukung developer dalam membuat web yang lebih cepat dan canggih sekaligus menjaga keamanan dan privasi informasi pengguna.
Salah satu hal yang menonjol (dan kami senang komunitas memperhatikannya!) adalah banyaknya pekerjaan yang dilakukan tim untuk mendukung lebih banyak fitur CSS dan UI di web. Dalam edisi Chrome Dev Insider ini, kami akan menjelaskan siapa yang mengerjakan fitur ini, cara kami mendukung developer CSS dan UI, serta apa yang akan terjadi selanjutnya. Itulah sebabnya saya senang sekali menjadi pembawa acara edisi Insider kali ini.
Dalam berita
Dalam Chrome Dev Insider pertama, kami membagikan beberapa info terbaru tentang inisiatif Compat 2021 dan Interop 2022, di mana vendor browser dan pemain ekosistem telah berpartner untuk menghadirkan lebih banyak fitur ke web yang didukung di semua browser. Inisiatif ini sangat berfokus pada CSS karena ketidakcocokan browser adalah salah satu tantangan terbesar bagi developer CSS.
Meskipun mungkin bukan berita baru bagi sebagian besar orang, kami senang melihat progres yang telah kami capai di berbagai browser.
Awal bulan lalu, kami melihat Safari mengumumkan rilis besar dengan Safari 16.0 Beta yang mencakup fitur menarik seperti Container Queries, subgrid, dan pemeriksa flexbox. Rilis Firefox dan Chrome baru-baru ini telah menyertakan sejumlah fitur dan perbaikan menarik—saya membahas hal-hal penting di browser stabil dan beta setiap bulan dalam serangkaian postingan baru di platform web.
Info eksklusif: Mendukung developer CSS dan UI
Karena tahun 2022 ternyata menjadi tahun yang menarik untuk fitur CSS, kami rasa ini adalah saat yang tepat untuk mengajak Anda melihat di balik layar. Kami berbincang dengan Una Kravets, ketua DevRel untuk Web UI dan DevTools, serta Nicole Sullivan, Product Manager kami untuk Web UI yang berfokus pada CSS dan HTML API, untuk membahas perjalanan Chrome dalam mendukung developer UI.
Mari kita mulai dengan kalian berdua. Bisakah Anda menceritakan lebih banyak tentang diri Anda?
Nicole: Saya adalah product manager untuk UI Web di Chrome. Saya secara khusus berfokus pada API CSS dan HTML baru serta pada developer dan desainer yang membangun UI. Ini adalah ruang yang menarik dengan beberapa API yang sangat penting seperti Kueri Penampung, Cakupan, dan (semoga!) irama vertikal.
Una: Saya memimpin tim DevRel Web UI dan DevTools. Kami berfokus untuk mendukung engineer UI di platform web dan memastikan mereka memiliki alat yang dibutuhkan untuk meraih kesuksesan. Hal ini mencakup API CSS dan komponen HTML beserta fitur DevTools untuk melihat perubahan dan masukan aktif.
Dukungan Chrome untuk developer UI telah berkembang pesat dalam beberapa tahun terakhir. Menurut Anda, mengapa perlu waktu begitu lama untuk sampai ke sini? Apa tantangan terbesarnya?
Una: Kami perlu melakukan beberapa pekerjaan untuk menunjukkan betapa pentingnya pekerjaan ini, dan mengapa pekerjaan ini harus menjadi prioritas. Kami memulai dengan survei DNA MDN pada tahun 2019, yang mengidentifikasi UI sebagai salah satu poin masalah utama di platform. Sejak saat itu, kami terus menggunakan data sebagai panduan kami melalui MDN dan survei kepuasan developer internal kami sendiri. Hasilnya, kami berhasil mendapatkan dukungan kepemimpinan yang lebih mendalam dan dapat memprioritaskan pekerjaan engineering terkait beberapa fitur developer yang paling banyak diminta di ruang UI yang juga menjadi fokus utama inisiatif seperti Compat 2021 dan Interop 2022.
Nicole: Selain mendapatkan dukungan pimpinan, kami juga harus menemukan cara yang tepat untuk menyediakan API ini kepada developer. Saat pertama kali bergabung dengan Chrome, saya melakukan kesalahan ini dalam project yang disebut Layered API (atau LAPIs). LAPI bertujuan untuk memberikan pengalaman komponen drop-in kepada developer. Saya tetap berpikir bahwa ini adalah hasil yang bagus untuk diupayakan, tetapi kami melakukan banyak kesalahan. Kami pertama-tama berfokus pada Notifikasi Toast dan Daftar Virtual. Toast hampir tidak mungkin dibuat dapat diakses dan daftar virtual adalah salah satu komponen yang paling sulit untuk dibuat dengan benar. Niat kami baik, tetapi project tersebut tidak membantu developer, jadi kami menghentikannya. Memang sulit untuk belajar dengan cara yang sulit, tetapi setiap kesalahan memicu kebangkitan CSS dan HTML yang sedang terjadi saat ini.
Mari kita bahas LAPI lebih lanjut. Apa yang terjadi di sana?
Nicole: Untuk LAPI, kami tahu bahwa web memerlukan pengalaman developer komponen drop-in yang lebih dekat dengan pembuatan UI native. Dan jelas bahwa menciptakan sesuatu dari awal menghambat developer. Saya tidak dapat menghitung jumlah tab yang telah saya buat dalam karier saya. Namun, kami mencoba menyelesaikannya dengan mengirimkan JavaScript bersama browser, yang sangat sulit. Sebelumnya, tidak ada yang mengirimkan JavaScript di browser, dan tidak jelas bagaimana JavaScript harus berinteraksi dengan kode C++ yang mendukung mesin rendering browser. Kami mendengarkan vendor browser lain (terima kasih, Mozilla!) dan menghentikan pendekatan tersebut, sehingga 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 dapat menerapkan aksesibilitas dengan cara yang tidak akan semudah dilakukan dengan JavaScript. Saya sangat bersemangat dengan arah yang akan dituju. Kami sedang berupaya mendukung selectmenu, popup, tooltip, nav, accordion, tabs, carousel, dan toggle yang merupakan pola desain UI yang sangat penting.
Jadi, kita telah belajar banyak. Dan saya tahu ada inisiatif lain di bidang ini, seperti CSS Houdini. Apa ceritanya?
Una: Ya, CSS Houdini adalah tempat lain di mana kami belajar dari komunitas. Ada banyak fitur Houdini yang berguna, tetapi banyak yang terlalu tingkat rendah untuk mendapatkan adopsi dan dukungan yang lebih luas. Kami menyadari bahwa penerapan API tingkat rendah tidak selalu mengurangi hambatan bagi developer. Sebaliknya, berfokus pada solusi dan kebutuhan tingkat yang lebih tinggi telah membantu mendapatkan dukungan lintas browser dan halaman landing yang diperlukan untuk membuat perubahan dalam ekosistem. Saat ini kami 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 yang Anda dengar dari developer?
Una: Salah satu masalah utama yang kami dengar dari developer adalah "membuat desain berfungsi sama di berbagai browser". Kami telah mengatasi hal ini dengan bekerja sama dengan vendor browser lain untuk memprioritaskan dan meluncurkan beberapa fitur developer yang paling banyak diminta. Dan masukan yang kami terima dari komunitas sangat positif. Selain itu, melalui upaya arsitektur ulang yang besar yang disebut RenderingNG, beberapa fitur ini dapat diluncurkan dengan performa yang jauh lebih baik. Developer sangat senang karena fitur yang telah lama dinanti-nantikan dan telah mereka minta selama bertahun-tahun akhirnya dikerjakan dan tersedia di berbagai browser.
Nicole: Antusiasme dalam komunitas sangat terasa. Anda dapat melihatnya di Twitter. :)
Bekerja sama dengan ekosistem telah terbukti sangat penting untuk setiap kesuksesan yang kami raih dalam mempermudah pekerjaan developer. Saya tahu bahwa tim Anda telah melakukan banyak pekerjaan di sana. Bersedia membagikan beberapa detail?
Nicole: Pertama, saya selalu kagum dengan project yang dibuat developer di web. Mulai dari library terkecil hingga framework lengkap, developer membangun berbagai hal yang luar biasa. Ini adalah komunitas pembuat yang luar biasa. Selain itu, Chrome mengambil sejumlah langkah untuk lebih terhubung dengan project ini.
Misalnya, beberapa tahun yang lalu kami mulai bekerja dengan 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 berharap 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 hal itu membuat saya sangat bersemangat untuk bekerja sama dengan orang-orang di bidang animasi.
Jadi, di mana kita melihat peluang terbesar untuk ekosistem UI Web?
Una: Dalam hal peluang besar, saya merasa kita baru menyentuh permukaan dari apa yang mungkin dilakukan untuk pengalaman web yang dapat disesuaikan. API baru seperti kueri penampung dan fitur media preferensi pengguna CSS mengubah cara developer melihat desain responsif. Saya juga antusias dengan pengalaman desain kolaboratif yang memungkinkan developer dan desainer dapat bekerja secara serempak dengan pengguna yang mengunjungi situs mereka.
Dan Nicole, apa langkah selanjutnya dalam rencana tim Anda?
Nicole: Tidak semua eksplorasi menghasilkan sesuatu yang dapat dikirim, tetapi ada banyak hal yang membuat saya sangat bersemangat saat ini:
Una menyentuh hal pertama, kami mengaktifkan desain responsif berbasis komponen. Alat 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 warna. Desainer dapat beralih dari memilih warna ke mendesain hubungan antarwarna, tanpa menghasilkan palet yang terlihat kotor.
Kami juga sedang mengerjakan beberapa API yang paling banyak diminta, seperti kueri penampung, lapisan bertingkat, pemilih induk (:has), gaya yang dicakup, dan penyusunan bertingkat. Developer memerlukannya agar dapat membuat sistem desain fleksibel yang penuh dengan komponen yang dapat digunakan kembali.
Animasi yang ditautkan ke scroll adalah area menarik lainnya. Saya sangat menyukai demo Steve Gardner. Dia memiliki scrolling yang sangat lancar dan animasi pesawat keren yang dipicu saat men-scroll. Meskipun menyenangkan, hal ini bisa jadi rumit untuk dilakukan dengan benar, terutama dengan mempertimbangkan aksesibilitas. Jadi, kami menjalankan pengujian pengguna untuk aksesibilitas pada fitur ini sekarang.
Hal yang paling saya nantikan adalah kontrol UI web bawaan. Developer terus membuat tabset yang sama berulang-ulang, saya rasa browser dapat membantu. Di Open UI, kami sedang mengerjakan komponen seperti selectmenu, popup, tooltip, tab, nav, accordion, dan toggle. Kami sedang mempelajari seperti apa tampilan jika aksesibilitas diintegrasikan ke dalam primitif browser ini sehingga web, seiring waktu, dapat diakses secara default. Kemudian, developer dapat berfokus pada masalah yang lebih kompleks dan bernuansa, sementara dasar-dasar seperti cara tab berfungsi, dapat didukung oleh browser. Mungkin ini perlu postingan sendiri, jadi saya akan berhenti di sini dulu.
Terakhir, kami akan terus berinvestasi dalam interoperabilitas antar-browser. Kami senang bekerja sama dengan tim WebKit dan Gecko untuk menghadirkan konsistensi pada pengalaman developer. Kami mendengar dengan jelas bahwa developer menginginkan fitur ini.
Oh, dan jika Anda belum mencobanya, Shared Element Transitions API dari tim Seamless Web akan mengubah cara orang mendesain untuk web. Semua transisi kecil yang halus yang memungkinkan desainer mengarahkan desain mereka dalam ruang fisik tidak hanya akan mungkin, tetapi juga mudah. Jake Archibald memiliki demo yang bagus.
Jika standar berjalan dengan baik, kita bahkan mungkin akan melihat ritme vertikal tahun ini. Kita dapat membangun di atas LayoutNG yang membuka banyak fitur.
Terima kasih. Saya yakin seluruh komunitas, seperti kami, sangat antusias melihat peningkatan dan fitur baru yang akan hadir di dunia UI Web. Masih banyak yang perlu dipahami, jadi menurut Anda, dari mana seseorang harus memulai perjalanannya?
Una: Sesi What's new for the web platform di I/O membahas sorotan banyak fitur yang akan diluncurkan tahun ini. Adam Argyle juga menulis artikel menarik tentang semua halaman landing CSS baru dan mendatang. Untuk saat ini, saya akan terus berfokus pada rilis stabil dan hanya mengetahui pekerjaan lain yang akan datang. Seri Baru di platform web yang luar biasa ini sangat bagus untuk diikuti. Dengan berlangganan newsletter web.dev, developer juga akan menerima konten ini di kotak masuk mereka. Bagi developer yang ingin berpartisipasi dan membantu semua ini, bergabung dengan Open UI adalah salah satu cara terbaik untuk mendukung pekerjaan ini.
Update penting mendatang
Kami melanjutkan tradisi kami untuk memberi tahu Anda tentang perubahan mendatang yang harus Anda perhatikan saat membangun pengalaman web.
Batasi max-age untuk cookie hingga 400 hari
- Pembaruan: Jika cookie ditetapkan dengan atribut
Expires/Max-Ageeksplisit, nilai tersebut kini akan dibatasi hingga tidak lebih dari 400 hari ke depan. Sebelumnya, tidak ada batasan dan cookie dapat berakhir masa berlakunya beberapa milenium pada masa mendatang. Tujuan batas ini adalah untuk menyeimbangkan pola penggunaan umum dan penghormatan terhadap privasi pengguna. Situs yang dikunjungi lebih sering daripada setiap 400 hari dapat memperbarui cookie untuk memastikan kelangsungan layanan dan pengguna dapat yakin bahwa cookie tidak akan tetap berada di browser mereka selama ribuan tahun tanpa digunakan. - Perkiraan jadwal: Tersedia di Chrome 104 (Stabil pada 2 Agustus 2022).
- CTA Developer: Developer mungkin perlu memuat ulang cookie secara proaktif lebih sering daripada sebelumnya saat pengguna mengunjungi situs mereka. Jika tidak, pengguna mungkin logout 400 hari setelah cookie ditetapkan pertama kali.
Semoga Anda menikmati edisi Chrome Dev Insider ini. Jika Anda melewatkannya, berikut artikel pertama. Kami berharap dapat memberikan lebih banyak informasi kepada Anda pada kuartal berikutnya.
Sementara itu, beri tahu kami pendapat Anda tentang edisi Chrome Dev Insider ini dan apa yang dapat kami lakukan untuk meningkatkannya.
Bagaimana pendapat Anda tentang edisi The Chrome Dev Insider ini? Berikan masukan Anda.