Chrome 95'teki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

Ben Pete LePage, çalışıyorum ve evden çekim yapıyorum. Birlikte ilerleyelim ve Chrome 95'teki geliştiricilere yönelik yenilikleri görelim.

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.

Ekspres, Ruby on Rails veya path-to-regexp'de kullanılan yönlendirme söz dizimine aşinaysanız muhtemelen 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. Daha sonra, kalıbı kullanmak için test() veya exec() yöntemini çağırabiliriz.

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 öğrenmenizi 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()örneği 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.

Kısa bir demo deneyip Glitch'te kodu görebilirsiniz.

PWA Summit

Bu ayın başlarında PWA Zirvesi'ne 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ı Azaltma, Kullanıcı Aracısı dizesindeki bilgileri yalnızca tarayıcının markası ve önemli sürümü, masaüstü veya mobil farklılığı ve üzerinde çalıştığı platformla sınırlandırarak pasif parmak izi yüzeylerini azaltmaya yönelik bir çalışmadı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ı keşfedip 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.

Ben Pete LePage. Chrome 96 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatmak için burada olacağım!