Ringkasan berita utama dan pembaruan yang diumumkan selama acara komunitas online kami selama 3 hari, dan pengingat tentang acara regional yang akan datang.
Kami baru saja mengakhiri acara selama tiga hari, web.dev LIVE, yang menampilkan sejumlah komunitas web secara online untuk membahas kondisi pengembangan web. Kami memulai setiap hari di zona waktu regional yang berbeda, dan Googler berbagi putaran info terbaru, berita, dan tips dalam semangat untuk membantu developer dengan alat dan panduan untuk menjaga web tetap stabil, canggih, dan mudah diakses.
Jika Anda melewatkan beberapa live stream, semua sesi tersebut direkam dan tersedia untuk ditonton di YouTube. Kami juga memiliki acara regional mendatang di seluruh dunia yang diselenggarakan oleh Grup Developer Google dan akan menyediakan sesi pembahasan mendalam tentang topik yang terkait dengan pembahasan kita selama LIVE web.dev.
Mari kita lihat beberapa berita dan pembaruan yang dibagikan selama tiga hari.
Data Web
Tim Chrome mengumumkan inisiatif Data Web untuk memberikan panduan, metrik, dan alat terpadu guna membantu developer memberikan pengalaman pengguna yang luar biasa di web. Tim Google Penelusuran juga baru-baru ini mengumumkan bahwa mereka akan mengevaluasi pengalaman halaman sebagai kriteria peringkat, dan akan menyertakan metrik Tanda Vital Web Inti sebagai dasarnya.
Tiga pilar Data Web Inti 2020 adalah pemuatan, interaktivitas, dan stabilitas visual konten halaman, yang ditangkap dengan metrik berikut:
- Largest Contentful Paint mengukur kecepatan pemuatan yang dirasakan dan menandai titik di linimasa pemuatan halaman saat konten utama halaman kemungkinan telah dimuat.
- Penundaan Input Pertama mengukur responsivitas dan mengukur pengalaman yang dirasakan pengguna saat mencoba berinteraksi pertama kali dengan halaman.
- Pergeseran Tata Letak Kumulatif mengukur stabilitas visual dan mengukur jumlah pergerakan konten halaman yang tidak terduga.
Di web.dev LIVE, kami membagikan praktik terbaik tentang cara mengoptimalkan Core Web Vitals dan cara menggunakan Chrome DevTools untuk mempelajari nilai-nilai vital situs Anda. Kami juga membagikan banyak diskusi terkait performa lainnya yang dapat Anda temukan di web.dev/live dalam jadwal Hari ke-1.
tooling.report
Mengembangkan untuk platform seluas web bisa jadi menantang. Alat build sering kali menjadi inti project pengembangan web, berperan penting dalam menangani siklus proses developer dan produk Anda.
Kita semua telah melihat file konfigurasi build yang berat. Jadi, kami membuat tooling.report untuk membantu developer web dan penulis alat mengatasi kompleksitas web. Ini adalah situs yang membantu Anda memilih alat build yang tepat untuk project berikutnya, memutuskan apakah migrasi dari satu alat ke alat lain bermanfaat, atau mencari tahu cara menerapkan praktik terbaik ke dalam konfigurasi alat dan code base.
Kami merancang serangkaian pengujian untuk menentukan alat build mana yang memungkinkan Anda mengikuti praktik terbaik pengembangan web. Kami bekerja sama dengan penulis alat build untuk memastikan bahwa alat mereka digunakan dengan benar dan mewakilinya secara adil.
Rilis awal tooling.report mencakup webpack v4, Rollup v2, Parcel v2, dan Browserify dengan Gulp, yang tampaknya menjadi alat build paling populer saat ini. Kami membuat tooling.report dengan fleksibilitas untuk menambahkan lebih banyak alat build dan pengujian tambahan dengan bantuan dari komunitas.
Jika kami tidak memiliki praktik terbaik yang harus diuji, usulkan praktik terbaik tersebut di masalah GitHub. Jika Anda ingin menulis pengujian atau menambahkan alat baru yang tidak kami sertakan pada set awal, silakan berkontribusi.
Sementara itu, Anda dapat membaca selengkapnya tentang pendekatan kami untuk membangun tooling.report dan menonton sesi kami dari web.dev LIVE.
Privasi dan keamanan di web
Chrome meyakini bahwa web terbuka yang menghormati privasi pengguna dan mempertahankan kasus penggunaan utama yang membuat web tetap berfungsi bagi semua orang.
Pada tahun 2019, Chrome mengusulkan update pada standar cookie untuk membatasi cookie ke konteks pihak pertama secara default dan mewajibkan cookie untuk konteks pihak ketiga ditandai secara eksplisit seperti itu. Secara khusus, tindakan ini memberikan garis pertahanan terhadap serangan Pemalsuan Permintaan Lintas Situs. Proposal ini sekarang diadopsi oleh Chrome, Firefox, Edge, dan browser lainnya.
Meskipun Chrome memutuskan untuk melakukan rollback sementara perubahan ini sehubungan dengan COVID-19, sayangnya, selama krisis ketika orang sangat rentan, Anda juga melihat jenis serangan ini meningkat. Jadi, dengan rilis Stabil Chrome 84 (pertengahan Juli 2020), perubahan tersebut akan mulai diluncurkan kembali di semua versi Chrome dari 80 dan yang lebih baru. Lihat panduan cookie SameSite serta sesi LIVE web.dev untuk mempelajari lebih lanjut.
Selain itu, di bawah banner Privacy Sandbox, Chrome memperkenalkan sejumlah proposal standar yang bertujuan untuk mendukung kasus penggunaan yang memungkinkan orang memperoleh kehidupan menggunakan platform web, tetapi melakukannya dengan cara yang lebih menghormati privasi pengguna. Chrome secara aktif mencari masukan mengenai proposal ini, dan berpartisipasi dalam forum terbuka W3C untuk membahas proposal serta proposal yang dikirimkan oleh pihak lain. Pelajari inisiatif ini lebih lanjut di sesi Keamanan dan privasi untuk web terbuka.
Terakhir, dengan melihat pada keamanan pengguna, Spectre adalah kerentanan yang berarti kode berbahaya yang berjalan di satu proses browser mungkin dapat membaca data apa pun yang terkait dengan proses tersebut meskipun berasal dari asal yang berbeda. Salah satu mitigasi browser untuk hal ini adalah isolasi situs, yaitu menempatkan setiap situs ke dalam proses terpisah. Tonton sesi LIVE web.dev tentang Kebijakan Pembuka dan Penyemat Lintas Asal baru (COOP dan COEP) untuk mempelajari lebih lanjut.
Membangun web dengan kemampuan canggih
Chrome ingin Anda bebas membuat aplikasi web berkualitas tertinggi yang memberikan jangkauan terbesar untuk pengguna di berbagai perangkat. Dengan menggabungkan kemampuan penginstalan dan keandalan PWA, dengan project kemampuan (Project Fugu), Chrome berfokus pada tiga hal untuk menutup kesenjangan antara aplikasi khusus platform dan web, untuk membantu Anda membangun dan memberikan pengalaman terbaik.
Pertama, tim Chrome telah bekerja keras untuk memberi developer web dan pengguna kontrol yang lebih besar atas pengalaman penginstalan, menambahkan promosi penginstalan ke omnibox, dan banyak lagi. Terlepas dari adanya web di mana-mana, tetap penting bagi beberapa bisnis untuk memiliki aplikasi di toko. Untuk membantu, Chrome meluncurkan Bubblewrap, library dan CLI yang memudahkan untuk memasukkan PWA Anda ke Play Store. Bahkan, PWABuilder.com sekarang menggunakan Bubblewrap. Hanya dengan beberapa klik mouse, Anda dapat membuat APK dan mengupload PWA ke Play Store, selama Anda memenuhi kriteria.
Kedua, Chrome memberikan integrasi yang lebih erat dengan sistem operasi, seperti kemampuan untuk berbagi foto, lagu, atau apa pun dengan memanggil layanan berbagi tingkat sistem dengan Web Share API, atau kemampuan untuk menerima konten saat dibagikan dari aplikasi terinstal yang berbeda. Anda dapat terus memberikan informasi terbaru kepada pengguna, atau secara halus memberi tahu pengguna tentang aktivitas baru dengan badge aplikasi. Selain itu, kini lebih mudah bagi pengguna untuk memulai tindakan dengan cepat menggunakan Pintasan App, yang akan tersedia di Chrome 84 (pertengahan Juli 2020).
Dan terakhir, Chrome telah mengerjakan kemampuan baru yang memungkinkan skenario baru yang sebelumnya tidak dapat dilakukan, seperti editor yang membaca dan menulis ke file di sistem file lokal pengguna, atau mendapatkan daftar font yang diinstal secara lokal sehingga pengguna dapat menggunakannya dalam desain mereka.
Selama web.dev LIVE, kami berbicara tentang banyak kemampuan dan fitur lainnya yang dapat memungkinkan Anda memberikan jenis pengalaman yang sama, dengan kemampuan yang sama, seperti aplikasi khusus platform. Lihat semua sesi di web.dev/live dalam jadwal Hari ke-2.
Yang baru di Chrome DevTools dan Lighthouse 6.0
Chrome Devtools: tab Masalah baru, emulator kekurangan warna, dan dukungan Data Web
Salah satu fitur paling canggih dari Chrome DevTools adalah kemampuannya untuk menemukan masalah di halaman web dan menarik perhatian developer. Hal ini paling relevan saat kita melanjutkan ke fase berikutnya dari web yang mengutamakan privasi. Untuk mengurangi kejenuhan dan kekacauan notifikasi di Konsol, Chrome DevTools meluncurkan tab Issues yang berfokus pada tiga jenis masalah penting untuk memulai: masalah cookie, konten campuran, dan masalah COEP. Tonton sesi LIVE web.dev tentang menemukan dan memperbaiki masalah dengan tab Masalah untuk memulai.
Selain itu, karena Data Web Inti menjadi salah satu kumpulan metrik paling penting untuk dilacak dan diukur oleh developer web, DevTools ingin memastikan developer dapat melacak dengan mudah performa mereka terhadap nilai minimum ini. Jadi, ketiga metrik ini sekarang berada di panel Performance Chrome DevTools.
Dan terakhir, dengan makin banyaknya developer yang berfokus pada aksesibilitas, DevTools juga memperkenalkan emulator defisiensi color vision yang memungkinkan developer mengemulasi blur vision dan jenis kekurangan penglihatan lainnya. Anda dapat mempelajari hal ini dan banyak fitur lainnya lebih lanjut di sesi What's new in DevTools.
Lighthouse 6.0: Metrik baru, pengukuran lab Data Web Inti, skor Performa yang diperbarui, dan audit baru
Lighthouse adalah alat otomatis open source yang membantu developer meningkatkan performa situs mereka. Pada versi terbarunya, tim Lighthouse berfokus untuk menyediakan insight berdasarkan metrik yang memberi Anda gambaran seimbang dari kualitas pengalaman pengguna terhadap dimensi penting.
Untuk memastikan konsistensi, Lighthouse menambahkan dukungan untuk Data Web Inti: LCP, TBT (proxy untuk FID karena Lighthouse adalah alat lab dan FID hanya dapat diukur di kolom) dan CLS. Lighthouse juga menghapus tiga metrik lama: First Viewsful Paint, First CPU Idle, dan Max Potential FID. Penghapusan ini disebabkan oleh pertimbangan seperti variabilitas metrik dan metrik yang lebih baru yang menawarkan refleksi yang lebih baik dari bagian pengalaman pengguna yang ingin diukur Lighthouse. Selain itu, Lighthouse juga melakukan beberapa penyesuaian untuk besarnya setiap faktor metrik ke dalam skor Performa keseluruhan berdasarkan masukan pengguna.
Lighthouse juga menambahkan kalkulator skor untuk membantu Anda mempelajari skor performa, dengan memberikan perbandingan antara skor versi 5 dan 6. Saat Anda menjalankan audit dengan Lighthouse 6.0, laporan akan dilengkapi dengan link ke kalkulator yang berisi hasil Anda.
Dan terakhir, Lighthouse menambahkan banyak audit baru, dengan fokus pada analisis dan aksesibilitas JavaScript.
Pelajari lebih lanjut dengan menonton sesi What's new in speed tooling.
Selengkapnya
Terima kasih kepada semua orang di komunitas yang telah bergabung dengan kami untuk mendiskusikan peluang dan tantangan platform web.
Postingan ini merangkum beberapa hal penting dari acara tersebut, dan masih banyak lagi. Pastikan untuk melihat semua sesi dan berlangganan newsletter web.dev jika ingin lebih banyak konten langsung di kotak masuk. Dan kunjungi bagian Acara Regional di web.dev/live untuk menemukan acara komunitas yang akan datang di zona waktu Anda.