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 dari cerita orang dalam tentang cara kami menangani pekerjaan, dan sekilas tentang beberapa pembaruan terpenting yang harus Anda perhatikan.
Saya Rachel Andrew, Pemimpin Konten 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 Kelompok Kerja CSS.
Dua bulan lalu, kami mengakhiri Google I/O dengan membagikan beberapa info terbaru yang paling penting tentang cara kami mendukung developer dalam membuat web lebih cepat dan lebih canggih sekaligus menjaga informasi pengguna tetap aman dan pribadi.
Salah satu hal yang menarik (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 mengajak Anda melihat proses di balik layar tentang siapa yang berada di balik pekerjaan ini, cara kami mendukung developer CSS dan UI, serta apa yang akan terjadi di masa mendatang. Itulah sebabnya saya senang dapat menjadi tuan rumah edisi Insider ini.
Dalam berita
Dalam Chrome Dev Insider pertama, kami membagikan beberapa info terbaru tentang inisiatif Compat 2021 dan Interop 2022, yang melibatkan vendor browser dan pelaku ekosistem yang telah berpartner untuk menghadirkan lebih banyak fitur ke web yang didukung di semua browser. Inisiatif ini berfokus pada CSS karena inkompatibilitas browser adalah salah satu tantangan terbesar bagi developer CSS.
Meskipun hal ini mungkin bukan berita baru bagi sebagian besar orang, kami senang melihat progres yang telah kami buat di seluruh browser.
Awal bulan lalu, kami melihat Safari mengumumkan rilis bumper dengan Safari 16.0 Beta yang menyertakan fitur menarik seperti Kueri Penampung, sub-petak, dan pengawas flexbox. Rilis terbaru Firefox dan Chrome telah menyertakan sejumlah fitur dan perbaikan menarik. Saya membahas hal-hal penting di browser stabil dan beta setiap bulan dalam rangkaian postingan baru menggunakan platform web.
Info eksklusif: Mendukung developer CSS dan UI
Tahun 2022 ternyata menjadi tahun yang menarik untuk fitur CSS. Oleh karena itu, kami ingin mengajak Anda melihat di balik layar. Saya berbincang dengan Una Kravets, kepala DevRel untuk UI Web dan DevTools serta Nicole Sullivan, Product Manager kami untuk UI Web yang berfokus pada CSS dan HTML API, untuk membahas perjalanan Chrome dalam mendukung developer UI.
Mari kita mulai dengan Anda berdua. Ceritakan lebih lanjut 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 developer dan desainer yang membuat UI. Ini adalah ruang yang menarik dengan beberapa API yang sangat penting yang muncul seperti Kueri Penampung, Cakupan, dan (semoga!) ritme vertikal.
Una: Saya memimpin tim DevRel UI Web dan DevTools. Kami berfokus untuk mendukung engineer UI di platform web dan memastikan mereka memiliki alat yang diperlukan 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 lama untuk sampai di 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 MDN DNA pada tahun 2019, yang mengidentifikasi UI sebagai beberapa titik masalah utama di platform. Sejak itu, kami terus menggunakan data sebagai panduan melalui MDN dan survei kepuasan developer internal kami sendiri. Hasil dari semua ini adalah kami dapat mendapatkan dukungan yang lebih mendalam dari para pemimpin dan dapat memprioritaskan pekerjaan engineering di sekitar 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 dari pimpinan, kami juga harus menemukan cara yang tepat untuk menyampaikan API ini kepada developer. Saat pertama kali bergabung dengan Chrome, saya mengacaukan hal ini dalam project yang disebut Layered API (atau LAPI untuk singkatnya). LAPI bertujuan untuk memberi developer pengalaman komponen drop-in. Saya masih menganggap ini adalah hasil yang bagus untuk dicapai, tetapi kami melakukan banyak kesalahan. Pertama-tama, kita berfokus pada Notifikasi Toast dan Daftar Virtual. Toast hampir tidak mungkin diakses dan daftar virtual adalah salah satu komponen tersulit untuk dilakukan dengan benar. Niat kami baik, tetapi tidak membantu developer, jadi kami menghentikan project tersebut. Memang sulit untuk belajar dengan cara yang sulit, tetapi setiap kesalahan akan mendorong kebangkitan CSS dan HTML yang sedang terjadi sekarang.
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 membuat ulang roda akan menghambat developer. Saya tidak dapat menghitung jumlah tab yang telah saya buat selama berkarier. Meskipun demikian, kami mencoba mengatasinya dengan mengirimkan JavaScript dengan browser yang sangat sulit. Belum ada yang mengirimkan JavaScript di browser sebelumnya, dan tidak jelas bagaimana JavaScript harus berinteraksi dengan kode C++ yang mendukung mesin rendering browser. Kami mendengarkan vendor browser lain (terima kasih, Mozilla!) dan membatalkan pendekatan tersebut sehingga kami dapat menemukan sesuatu yang jauh lebih baik dengan UI Terbuka. Dengan menggunakan HTML dan CSS, kita akan mendapatkan solusi deklaratif yang fleksibel. Karena bersifat deklaratif, kita dapat menyertakan aksesibilitas dengan cara yang tidak akan semudah dilakukan dengan JavaScript. Saya sangat antusias dengan perkembangannya. Kami sedang berupaya mendukung selectmenu, pop-up, tooltip, navigasi, akordeon, tab, carousel, dan tombol yang merupakan pola desain UI yang sangat penting.
Jadi, kita telah belajar banyak hal. Dan saya tahu ada inisiatif lain di ruang ini, seperti CSS Houdini. Apa ceritanya?
Una: Ya, CSS Houdini adalah tempat lain tempat kami belajar dari komunitas. Ada banyak fitur Houdini yang berguna, tetapi banyak yang terlalu rendah untuk mendapatkan adopsi dan dukungan yang lebih luas. Kami menyadari bahwa menerapkan API tingkat rendah tidak selalu mengurangi hambatan bagi developer. Sebaliknya, berfokus pada solusi dan kebutuhan tingkat tinggi telah membantu mendapatkan dukungan lintas browser dan landing yang diperlukan untuk meningkatkan kualitas 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 seluruh 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 re-arsitektur besar yang disebut RenderingNG, beberapa fitur ini dapat diluncurkan dengan performa yang jauh lebih baik. Developer sangat senang karena fitur yang telah lama mereka tunggu selama bertahun-tahun akhirnya sedang dikerjakan dan diluncurkan di seluruh browser.
Nicole: Antusiasme di komunitas ini sangat terasa. Anda dapat melihatnya di Twitter. :)
Bekerja sama dengan ekosistem telah terbukti sangat penting untuk kesuksesan yang telah kami raih dalam mempermudah kehidupan developer. Saya tahu tim Anda telah melakukan banyak pekerjaan di sana. Bisakah Anda menjelaskan detailnya?
Nicole: Pertama, saya selalu kagum dengan project yang dibuat developer di web. Dari library terkecil hingga framework lengkap, developer membuat berbagai hal yang luar biasa. Ini adalah komunitas pembuat yang fantastis. Dan Chrome melakukan banyak langkah untuk lebih terhubung dengan 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. Kami berharap tahun depan kami 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 antusias untuk bekerja 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 saja menggali potensi 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 senang dengan pengalaman desain kolaboratif yang memungkinkan developer dan desainer bekerja sama dengan pengguna yang mengunjungi situs mereka.
Dan Nicole, apa rencana selanjutnya untuk tim Anda?
Nicole: Tidak semua eksplorasi berubah menjadi sesuatu yang dapat dikirim, tetapi ada banyak hal yang sangat saya minati saat ini:
Una telah membahas hal pertama, yaitu kita memungkinkan 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 nuansa. Desainer dapat beralih dari memilih warna ke mendesain hubungan antarwarna, tanpa berakhir dengan palet yang terlihat buram.
Kami juga sedang mengerjakan beberapa API yang paling banyak diminta, seperti kueri penampung, lapisan kaskade, pemilih induk (:has), gaya cakupan, dan penyematan. Developer memerlukannya agar dapat membuat sistem desain yang fleksibel dan penuh dengan komponen yang dapat digunakan kembali.
Men-scroll animasi tertaut adalah area menarik lainnya. Saya sangat menyukai demo Steve Gardner. Ia memiliki scroll yang mulus dan animasi pesawat keren yang dipicu saat di-scroll. Meskipun menyenangkan, membuat animasi ini dengan benar bisa jadi sulit, terutama dengan mempertimbangkan aksesibilitas. Jadi, sekarang kita menjalankan pengujian pengguna untuk aksesibilitas pada fitur tersebut.
Hal yang paling saya sukai secara pribadi adalah kontrol UI web bawaan. Developer terus membuat kumpulan tab yang sama berulang kali, saya rasa browser dapat membantu. Di Open UI, kami sedang mengerjakan komponen seperti selectmenu, pop-up, tooltip, tab, navigasi, akordeon, dan tombol. Kami sedang mempelajari tampilan aksesibilitas yang diintegrasikan ke dalam primitif browser ini sehingga web dapat diakses secara default dari waktu ke waktu. Developer kemudian dapat berfokus pada masalah yang lebih kompleks dan nuansanya, sementara dasar-dasar seperti cara tab tab, dapat didukung oleh browser. Hal ini mungkin memerlukan postingan tersendiri, jadi saya akan berhenti di sana untuk saat ini.
Terakhir, kami akan terus berinvestasi dalam interop antar-browser. Sangat menyenangkan bekerja sama dengan orang-orang di WebKit dan Gecko untuk menghadirkan konsistensi pada pengalaman developer. Kami telah menerima masukan dari developer bahwa mereka menginginkannya.
Oh, dan jika Anda belum melihatnya, Shared Element Transitions API dari tim Seamless Web akan mengubah cara orang mendesain untuk web. Semua transisi kecil yang halus yang memungkinkan desainer mengorientasikan desain mereka di ruang fisik tidak hanya akan memungkinkan, tetapi juga mudah. Jake Archibald memiliki demo yang bagus.
Jika standarnya berjalan lancar, kita mungkin bahkan akan melihat ritme vertikal tahun ini. Kita dapat mem-build di atas LayoutNG yang membuka banyak fitur.
Terima kasih. Saya yakin seluruh komunitas, seperti kami, sangat antusias melihat laju peningkatan dan fitur baru yang hadir di dunia UI Web. Masih banyak hal yang harus dipahami, jadi menurut Anda, dari mana seseorang harus memulai perjalanannya?
Una: Sesi Yang baru untuk platform web kami di I/O membahas sorotan dari banyak fitur yang diluncurkan tahun ini. Adam Argyle juga menulis artikel bagus tentang semua landing page CSS baru dan mendatang. Untuk saat ini, saya akan fokus pada rilis stabil dan hanya memperhatikan pekerjaan lain yang akan datang. Seri Baru menggunakan platform web yang luar biasa adalah seri yang tepat untuk diikuti. Dengan berlangganan newsletter web.dev, konten ini juga akan dikirim ke kotak masuk developer. Dan bagi developer yang ingin terlibat dan membantu semua hal ini, bergabung dengan Open UI adalah salah satu cara terbaik untuk mendukung pekerjaan ini.
Update utama mendatang
Kami tetap melanjutkan tradisi kami untuk memberi tahu Anda tentang perubahan mendatang yang harus diingat saat Anda membuat pengalaman web.
Membatasi max-age untuk cookie hingga 400 hari
- Pembaruan: Jika cookie ditetapkan dengan atribut
Expires/Max-Ageeksplisit, nilainya kini akan dibatasi hingga tidak lebih dari 400 hari di masa mendatang. Sebelumnya, tidak ada batasan dan masa berlaku cookie dapat mencapai beberapa milenium di masa mendatang. Tujuan batasan ini adalah untuk mencapai keseimbangan antara pola penggunaan umum dan menghormati privasi pengguna. Setiap situs yang dikunjungi lebih sering dari setiap 400 hari dapat memuat ulang cookie untuk memastikan kelangsungan layanan dan pengguna dapat yakin bahwa cookie tidak akan tetap berada di browser mereka selama ribuan tahun tanpa digunakan. - Perkiraan linimasa: Dikirimkan 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 akan logout 400 hari setelah cookie ditetapkan pada awalnya.
Semoga Anda menikmati membaca edisi Chrome Dev Insider ini. Jika Anda melewatkan artikel tersebut, berikut artikel pertama. Kami berharap dapat menghadirkan lebih banyak fitur pada kuartal berikutnya.
Sampai saat 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.