Chrome 95'teki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

Ben Pete LePage. Evden çalışıyorum ve video çekiyorum. Chrome 95'te geliştiriciler için neler yeni olduğuna göz atalım.

URLPattern ile yönlendirme

Neredeyse tüm web uygulamaları, bir sunucu üzerinde çalışan ve diskteki dosyaların yolunu eşleyen kod veya URL değiştiğinde DOM'u güncelleyen tek sayfalı bir uygulamadaki mantık olsun, bir şekilde yönlendirmeye bağlıdır. URLPattern, yönlendirme kalıbı söz dizimini standartlaştıran yeni bir web platformu API'sidir.

Mevcut çerçevelerin temelini kullanarak yaygın yönlendirme görevlerini gerçekleştirmeyi kolaylaştırır. Örneğin, tam URL'lerle veya URL yol adıyla eşleştirme yapma ve ardından jeton ve grup eşleşmeleri hakkında bilgi döndürme.

Express, Ruby on Rails veya path-to-regexp'de kullanılan yönlendirme söz dizimine aşina iseniz bu söz dizimi size tanıdık gelecektir.

Bunu kullanmak için yeni bir URLPattern() oluşturun ve kalıp eşleştirmesini yapmak istediğiniz ayrıntıları sağlayın. Kalıplar joker karakterler, adlandırılmış jeton grupları, normal ifade grupları ve grup değiştiriciler içerebilir.

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

Örneğin, Google Dokümanlar tarafından kullanılabilecek URLPattern özelliğine bakalım. Dosyanın kind değerini, ID dosyasını ve dosyanın açılacağı mode değerini belirtiriz. Ardından kalıbı kullanmak için test() veya exec() çağrılabilir.

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern, Chrome ve Edge 95 ve sonraki sürümlerinde varsayılan olarak etkindir. Henüz desteklemeyen tarayıcılar veya Node gibi ortamlar için urlpattern-polyfill kitaplığını kullanabilirsiniz.

Tüm ayrıntılar için Jeff'in URLPattern, yönlendirmeyi web platformuna getiriyor başlıklı makalesine göz atın.

Eye Dropper API ile renk seçme

Kullandığım neredeyse her tasarım uygulamasında, bir nesnenin rengini kolayca belirlemenizi sağlayan bir damlalık aracı bulunur. Bazı tarayıcılarda <input type=color> yerleşik damlalık özelliği vardır ancak bu ideal değildir.

Microsoft'taki bazı kişiler tarafından uygulanan damlalık API'si bu işlevi web'e getiriyor. Bunu kullanmak için yeni bir EyeDropper()örnek oluşturun ve ardından open()'ı çağırın.

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

Diğer birçok modern web API'si gibi, ana iş parçacığının engellenmemesi için asenkron olarak çalışır. Kullanıcı istediği rengi tıkladığında, tıkladığı renkle çözülür.

Hızlı bir demo deneyebilir ve Glitch'te kodu görebilirsiniz.

PWA Summit

Bu ayın başlarında düzenlenen PWA Summit'e katıldınız mı?

Birçok kişinin PWA'lardan bahsettiğini ve deneyimlerini paylaştığını görmek harikaydı. Etkinliği kaçırmadıysanız tüm videoları PWASummit.org adresinden veya PWA Summit YouTube kanalından izleyebilirsiniz.

Kullanıcı aracısı kısaltma kaynak denemesi

Kullanıcı Aracısı Kısaltma, User-Agent dizesindeki bilgileri yalnızca tarayıcının markası ve önemli sürümü, masaüstü veya mobil ayırımı ve çalıştığı platformla sınırlandırarak pasif parmak izi yüzeylerini azaltma çabasıdır.

Chrome 95'ten itibaren, azaltılmış UA dizesini hemen almaya başlamanıza olanak tanıyan yeni bir kaynak denemesi mevcuttur. Bu sayede, azaltılmış UA Chrome'da varsayılan davranış haline gelmeden önce sorunları tespit edip düzeltebilirsiniz.

Değişiklikler birkaç sürüm boyunca kademeli olarak uygulanacak olsa da hazırlamanız ve test etmeniz gereken her şey şu anda hazır.

Tüm ayrıntılar ve zaman çizelgesi, developer.chrome.com adresindeki User-Agent Reduction kaynak denemesi yayınında yer almaktadır.

Diğer özellikler

Elbette daha birçok özellik var.

Daha fazla bilgi

Bu, önemli noktalardan yalnızca bazılarını kapsar. Chrome 95'teki diğer değişiklikler için aşağıdaki bağlantılara göz atın.

Abone ol

Gelişmelerden haberdar olmak için Chrome Developers YouTube kanalına abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Adım Pete LePage. Chrome 96 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.