Web topluluğunun bir kısmının web geliştirmenin durumu hakkında konuşmak için çevrimiçi olarak bir araya geldiği üç günlük web.dev LIVE etkinliğimizi yeni tamamladık. Her güne farklı bir bölgesel saat diliminde başladık ve Google çalışanları, web’i istikrarlı, güçlü ve erişilebilir tutmak için araçlar ve rehberlikle geliştiricilere yardımcı olma ruhuyla bir dizi güncelleme, haber ve ipucu paylaştı.
Canlı yayının bir kısmını kaçırdıysanız tüm oturumlar kaydedilir ve YouTube’da izlemeniz için hazırdır. Ayrıca, tüm dünyada Google Geliştirici Grupları tarafından düzenlenen ve web.dev LIVE sırasında ele aldıklarımızla ilgili derinlemesine oturumlar sağlayacak bölgesel etkinliklerimiz de olacak.
Üç gün boyunca paylaşılan bazı haberlere ve güncellemelere göz atalım.
Web Verileri #
Chrome ekibi ilan edildi geliştiricilerin web’de harika kullanıcı deneyimleri sunmalarına yardımcı olmak için birleşik rehberlik, ölçümler ve araçlar sağlayan Web Vitals girişimi. Google Arama ekibi ayrıca yakın zamanda duyuruldu sayfa deneyimini bir sıralama kriteri olarak değerlendireceklerini ve temel olarak Önemli Web Verileri ölçümlerini içereceklerini.
2020 Önemli Web Verileri’nin üç sütunu, aşağıdaki metriklerle yakalanan sayfa içeriğinin yüklenmesi, etkileşimi ve görsel kararlılığıdır:
- Largest Contentful Paint, algılanan yükleme hızını ölçer ve sayfa yükleme zaman çizelgesinde bir sayfanın ana içeriğinin büyük olasılıkla yüklendiği noktayı işaretler.
- İlk Giriş Gecikmesi yanıt verebilirliği ölçer ve kullanıcıların bir sayfayla ilk etkileşimde bulunmaya çalışırken hissettikleri deneyimi nicelleştirir.
- Kümülatif Düzen Kayması, görsel kararlılığı ölçer ve sayfa içeriğinin beklenmeyen hareket miktarını belirler.
Web.dev LIVE’da, nasıl yapılacağına ilişkin en iyi uygulamaları paylaştık. Önemli Web Verileri için optimize edin ve nasıl kullanılır Sitenizin vitals değerlerini keşfetmek için Chrome DevTools. Ayrıca, 1. Gün programında web.dev/live adresinde bulabileceğiniz, performansla ilgili birçok başka konuşmayı da paylaştık.
Web kadar geniş bir platform için geliştirme yapmak zor olabilir. Derleme araçları genellikle web geliştirme projenizin merkezinde yer alır ve geliştiricinizin ve ürün yaşam döngünüzün yönetilmesinde önemli bir rol üstlenir.
Web geliştiricilerine yardımcı olmak için hepimiz hantal yapı yapılandırma dosyaları gördük. Ve tooling yazarları web’in karmaşıklığını fethederek tooling.report’u oluşturduk. Bir sonraki projeniz için doğru oluşturma aracını seçmenize, bir araçtan diğerine geçiş yapmaya değip değmeyeceğine karar vermenize veya en iyi uygulamaları araç yapılandırmanıza ve kod tabanınıza nasıl dahil edeceğinizi bulmanıza yardımcı olan bir web sitesidir.
Hangi derleme araçlarının web geliştirme en iyi uygulamalarını takip etmenize izin verdiğini belirlemek için bir dizi test tasarladık. Araçlarını doğru kullandığımızdan ve onları adil bir şekilde temsil ettiğimizden emin olmak için derleme aracı yazarlarıyla birlikte çalıştık.
tooling.report’un ilk sürümü, şu anda en popüler derleme araçları gibi görünen webpack v4, Rollup v2, Parcel v2 ve Browserify with Gulp’u kapsar. Tooling.report’u topluluğun yardımıyla daha fazla oluşturma aracı ve ek testler ekleme esnekliğiyle oluşturduk.
Test edilmesi gereken bir en iyi uygulamayı kaçırıyorsak, lütfen bir GitHub sayısında önerin. Bir test yazmaya veya ilk sete dahil etmediğimiz yeni bir araç eklemeye hazırsanız, hoş geldiniz. katkı yapmak!
Bu arada, tooling.report oluşturmaya yönelik yaklaşımımız hakkında daha fazla bilgi edinebilir ve oturumumuzu web.dev LIVE’dan izleyebilirsiniz.
Web’de gizlilik ve güvenlik #
Chrome, kullanıcıların gizliliğine saygılı ve web’in herkes için çalışmasını sağlayan temel kullanım örneklerini koruyan açık bir web’e inanır.
2019’da Chrome önerilen çerezleri varsayılan olarak birinci taraf bağlamlarıyla kısıtlamak ve üçüncü taraf bağlamları için çerezlerin açıkça bu şekilde işaretlenmesini zorunlu kılmak için çerez standardında bir güncelleme. Özellikle bu, Siteler Arası İstek Sahteciliği saldırılarına karşı bir savunma hattı sağlar. Teklif şu anda Chrome, Firefox, Edge ve diğer tarayıcılar tarafından benimseniyor.
Chrome karar verirken geçici olarak geri alma COVID-19 ışığında bu değişiklikler, ne yazık ki insanların en savunmasız olduğu bir kriz sırasında bu tür saldırıların arttığını da görüyorsunuz. Bu nedenle, Chrome 84 Mevcut ürün sürümüyle (2020 Temmuz ortası), değişiklikler tekrar yayılmaya başla 80 ve sonraki tüm Chrome sürümlerinde. Daha fazla bilgi edinmek için SameSite çerez kılavuzuna ve web.dev CANLI oturumuna göz atın.
Ayrıca bayrağı altında Gizlilik Korumalı Alanı Chrome, insanların web platformunu kullanarak hayatlarını kazanmalarına izin veren, ancak bunu kullanıcı gizliliğine daha fazla saygı gösterecek şekilde yapan kullanım durumlarını desteklemeyi amaçlayan bir dizi standart teklifi sunuyor. Chrome aktif olarak bu teklifler hakkında geri bildirim almakta ve diğer taraflarca sunulan tekliflerin yanı sıra teklifleri tartışmak için W3C’nin açık forumlarına katılmaktadır. Bu girişim hakkında daha fazla bilgi için bkz. Açık web için güvenlik ve gizlilik oturum.
Son olarak, kullanıcı güvenliğine bakıldığında, Hayalet bir tarayıcı işleminde çalışan kötü amaçlı kodun, farklı bir kaynaktan gelse bile bu işlemle ilişkili tüm verileri okuyabileceği anlamına gelen bir güvenlik açığıydı. Bunun için tarayıcı hafifletme yollarından biri, site izolasyonudur, yani her siteyi ayrı bir sürece koymaktır. web.dev CANLI oturumunu şu adreste izleyin: yeni Kaynaklar Arası Açıcı ve Katıştırıcı Politikaları (COOP ve COEP) daha fazla bilgi için.
Güçlü yeteneklere sahip bir web oluşturma #
Chrome, farklı cihazlarda kullanıcılara en geniş erişimi sağlayan en yüksek kaliteli web uygulamalarını oluşturmakta özgür olmanızı istiyor. PWA’ların kurulabilirliğini ve güvenilirliğini birleştirerek, yetenekler projesi (Project Fugu), Chrome harika deneyimler oluşturmanıza ve sunmanıza yardımcı olmak için platforma özel uygulamalar ile web arasındaki boşluğu kapatmak üzere üç şeye odaklanıyor.
İlk olarak, Chrome ekipleri, çok amaçlı adres çubuğuna bir yükleme promosyonu ekleyerek ve daha fazlasını yaparak, web geliştiricilerine ve kullanıcılara yükleme deneyimi üzerinde daha fazla kontrol sağlamak için çok çalışıyor. Web’in her yerde bulunabilmesine rağmen, bazı işletmeler için uygulamalarının mağazada olması hala önemlidir. Yardımcı olmak için Chrome başlatıldı Kabarcık sargısı, PWA’nızı Play Store’a sokmayı önemsiz hale getiren bir kitaplık ve CLI. Aslında, PWABuilder.com artık kaputun altında Bubblewrap kullanıyor. Yalnızca birkaç fare tıklamasıyla bir APK oluşturabilir ve PWA’nızı Play Store’a yükleyebilirsiniz. kriterler.
İkincisi, Chrome, Web Share API ile sistem düzeyinde paylaşım hizmetini çağırarak bir fotoğrafı, şarkıyı veya başka bir şeyi paylaşma yeteneği veya yüklenmiş farklı bir uygulamadan paylaşıldığında içerik alma yeteneği gibi işletim sistemiyle daha sıkı entegrasyon sağlıyor. Uygulama rozeti ile kullanıcıları güncel tutabilir veya onlara yeni etkinlikler hakkında ustaca bildirimde bulunabilirsiniz. Ayrıca, kullanıcıların Chrome 84’te (Temmuz 2020 ortası) kullanıma sunulacak olan Uygulama Kısayollarını kullanarak hızlı bir şekilde işlem başlatması artık daha kolay.
Ve son olarak, Chrome, kullanıcının yerel dosya sistemindeki dosyaları okuyup bunlara yazan veya kullanıcıların tasarımlarında kullanabilmeleri için yerel olarak yüklenmiş yazı tiplerinin listesini alan düzenleyiciler gibi daha önce mümkün olmayan yeni senaryoları mümkün kılan yeni yetenekler üzerinde çalışıyor.
web.dev LIVE sırasında hakkında konuştuk diğer birçok yetenek ve özellik bu, platforma özel uygulamalarla aynı türde bir deneyimi aynı yeteneklerle sunmanıza olanak sağlayabilir. 2. Gün programında web.dev/liv adresindeki tüm oturumları görün.
Chrome Devtools: yeni Sorunlar sekmesi, renk eksiklikleri öykünücüsü ve Web Verileri desteği #
Chrome DevTools’un en güçlü özelliklerinden biri, bir web sayfasındaki sorunları belirleyip geliştiricinin dikkatine sunabilmesidir. Bu, bir sonraki aşamaya geçerken en uygun olanıdır. gizlilik öncelikli web. Konsoldaki bildirim yorgunluğunu ve karmaşasını azaltmak için Chrome DevTools, Sorunlar sekmesi Başlamak için üç tür kritik soruna odaklanır: çerez sorunları, karışık içerik ve COEP sorunları. web.dev CANLI oturumunu izleyin Sorunlar sekmesiyle ilgili sorunları bulma ve düzeltme başlamak.
Ayrıca, Web geliştiricilerinin izlemesi ve ölçmesi için en kritik ölçüm kümelerinden biri haline gelen Önemli Web Verileri ile DevTools, geliştiricilerin bu eşiklere göre nasıl performans gösterdiklerini kolayca takip edebilmelerini sağlamak istiyor. Dolayısıyla, bu üç metrik artık Chrome DevTools Performans panelinde.
Son olarak, erişilebilirliğe odaklanan geliştiricilerin sayısının artmasıyla birlikte DevTools, renk görme eksiklikleri öykünücüsü Bu, geliştiricilerin bulanık görme ve diğer görme eksikliklerini taklit etmesine olanak tanır. Bu ve diğer birçok özellik hakkında daha fazla bilgiyi şu adresten öğrenebilirsiniz: Geliştirici Araçları’ndaki yenilikler oturum.
Lighthouse 6.0: Yeni ölçümler, Önemli Web Verileri laboratuvar ölçümleri, güncellenmiş Performans puanı ve yeni denetimler #
deniz feneri geliştiricilerin sitelerinin performansını iyileştirmelerine yardımcı olan açık kaynaklı otomatik bir araçtır. Lighthouse ekibi, en son sürümünde, kritik boyutlara karşı kullanıcı deneyiminizin kalitesine ilişkin dengeli bir görünüm sağlayan metriklere dayalı içgörüler sağlamaya odaklandı.
Tutarlılığı sağlamak için Lighthouse, Önemli Web Verileri için destek ekledi: LCP, TBT (Lighthouse bir laboratuvar aracı olduğu ve FID yalnızca sahada ölçülebildiği için FID için bir proxy) ve CLS. Lighthouse ayrıca üç eski ölçümü de kaldırdı: İlk Anlamlı Boya, İlk CPU BoştaVe Maksimum Potansiyel FID. Bu kaldırmalar, Lighthouse’un ölçmeye çalıştığı kullanıcı deneyimi bölümünün daha iyi yansımalarını sunan metrik değişkenliği ve daha yeni metrikler gibi hususlardan kaynaklanmaktadır. Ek olarak Lighthouse, kullanıcı geri bildirimlerine dayalı olarak her bir metriğin genel Performans puanını ne kadar etkilediği konusunda da bazı ayarlamalar yaptı.
Fener ayrıca şunları ekledi: puanlama hesap makinesi sürüm 5 ve 6 puanları arasında bir karşılaştırma sağlayarak performans puanlamanızı keşfetmenize yardımcı olmak için. Lighthouse 6.0 ile bir denetim gerçekleştirdiğinizde, rapor, sonuçlarınızın doldurulduğu hesaplayıcıya bir bağlantıyla birlikte gelir.
Son olarak Lighthouse, JavaScript analizine ve erişilebilirliğe odaklanan bir dizi yeni denetim ekledi.
izleyerek daha fazla bilgi edinin Hızlı takımlamadaki yenilikler oturum.
Daha fazla bilgi edin #
Web platformunun fırsatlarını ve zorluklarını tartışmak için bize katılan topluluktaki herkese teşekkür ederiz.
Bu gönderi, etkinliğin bazı önemli noktalarını özetledi, ancak çok daha fazlası vardı. Daha fazla içeriğin doğrudan gelen kutunuza gelmesini istiyorsanız, tüm oturumları kontrol ettiğinizden ve web.dev haber bültenine abone olduğunuzdan emin olun. Kendi saat diliminizde yaklaşan bir topluluk etkinliği bulmak için web.dev/live adresindeki Bölgesel Etkinlikler bölümünü ziyaret edin!