Şunları bilmeniz gerekir:
- Tarayıcıya eklenen
URLPattern
sayesinde yönlendirme artık daha kolay. - Eye Dropper API, renk seçmek için yerleşik bir araç sunar.
- İndirilmiş UA dizesini hemen etkinleştirebilmenizi sağlayan yeni bir kaynak denemesi mevcuttur.
- PWA Zirvesi videolarının tümü çevrimiçidir.
- Daha fazlası da var.
Ben Pete LePage. Evde çalışıyor ve çekim yapıyorum. Şimdi Chrome 95'te geliştiricilere yönelik yenilikleri görelim.
URLPattern
ile yönlendiriliyor
İster diskteki dosyaların yolunu eşleyen bir sunucuda çalışan kod ister URL değiştiğinde DOM'u güncelleyen tek sayfalık bir mantık olsun, neredeyse tüm web uygulamaları bir şekilde yönlendirmeye bağımlıdır. URLPattern
, yönlendirme kalıbı söz dizimini standart hâle getiren yeni bir web platformu API'sidir.
Mevcut çerçevelerin temeli üzerine kurulu olduğundan yaygın yönlendirme görevlerini gerçekleştirmeyi kolaylaştırır. Örneğin, tam URL'lerle veya bir URL yol adıyla eşleştirme, ardından jeton ve grup eşleşmeleri hakkında bilgi döndürme.
Express, Ruby on Rails veya path-to-regexp'te kullanılan yönlendirme söz dizimine zaten aşinaysanız bu, büyük olasılıkla size tanıdık gelecektir.
Bunu kullanmak için yeni bir URLPattern()
oluşturun ve eşleştirme 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ştiricileri 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
öğesine bakalım.
Dosyanın kind
, ID
dosyası ve hangi mode
içinde açılacağını belirteceğiz.
Daha sonra, kalıbı kullanmak için test()
veya exec()
olarak adlandı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 ile Edge 95 ve sonraki sürümlerde varsayılan olarak etkindir.
Henüz desteklenmeyen Node gibi tarayıcılar veya ortamlar için urlpattern-polyfill kitaplığını kullanabilirsiniz.
Tüm ayrıntıları öğrenmek için Jeff'in URLPattern web platformuna yönlendirmeyi getiriyor adlı makalesine göz atın!
Eye Dropper API ile renk seçme
Kullandığım hemen hemen her tasarım uygulamasında bir şeyin ne renk olduğunu kolayca anlamamı
sağlayan bir damlalık aracı var. Bazı tarayıcılarda
damlalık özelliği <input type=color>
içinde yerleşik olarak bulunur,
ancak bu ideal değildir.
Microsoft'taki bazı kişiler tarafından uygulanan damlalık API'sı, bu işlevi web'e taşıyor. Kullanmak için yeni bir EyeDropper()
örneği oluşturup bu örnekte open()
çağrısı yapın.
const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}
Diğer birçok modern web API'si gibi, eşzamansız olarak çalıştığı için ana iş parçacığını engellemez. Kullanıcı istediği rengi tıkladığında, sorun, kullanıcının tıkladığı renkle çözülür.
Hızlı bir demo deneyebilir ve Glitch'te kodu görebilirsiniz.
PWA Zirvesi
PWA Zirvesi'ni bu ayın başlarında yakaladınız mı?
Bu kadar çok kişinin PWA'lardan bahsettiğini ve deneyimlerini paylaştığını görmek harikaydı. Kaçırdıysanız tüm videolara göz atmayı unutmayın. PWASummit.org veya PWA Summit YouTube kanalına göz atmayı unutmayın.
Kullanıcı aracısı azaltma kaynak denemesi
Kullanıcı Aracısı Kısaltma, User-Agent dizesindeki bilgileri tarayıcının markası ve önemli bir sürümü, masaüstü veya mobil sürümü ve çalıştığı platform ile azaltarak pasif parmak izi yüzeylerini azaltmaya yönelik bir girişimdir.
Chrome 95'ten itibaren, kısaltılmış UA dizesini hemen almanızı sağlayan yeni bir kaynak denemesi bulunmaktadır. Bu sayede, azaltılan UA Chrome'da varsayılan davranış haline gelmeden önce sorunları keşfedip düzeltebilirsiniz.
Değişiklikler bir dizi sürüme aşamalı olarak uygulanacak olsa da hazırlamak ve test etmek için ihtiyacınız olan her şey şu anda hazır.
Tüm ayrıntıları ve zaman çizelgesini developer.chrome.com adresindeki Kullanıcı Aracısı Azaltma kaynak denemesi yayınında bulabilirsiniz.
Diğer ölçütler
Elbette dahası var.
- Storage Foundation API çalışmasını takip ediyorsanız Erişim işleyicileri için yeni bir kaynak denemesi mevcut.
- WebAssembly artık bir istisna atıldığında kodun kontrol akışını bozmasını sağlayan istisna işleme desteği sunuyor.
- Chrome 100 gelecek yıl kullanıma sunulacak. Bu nedenle, kodunuzun iki'den fazla basamağı işleyebildiğinden emin olmanın zamanı geldi.
Daha fazla bilgi
Burada, öne çıkan özelliklerin yalnızca bir kısmı ele alınıyor. Chrome 95'teki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.
- Chrome Geliştirici Araçları'ndaki yenilikler (95)
- Chrome 95 için desteğin sonlandırılması ve kaldırılması
- Chrome 95 için ChromeStatus.com güncellemeleri
- Chrome 95'te JavaScript'teki yenilikler
- Chromium kaynak deposu değişiklik listesi
- Chrome sürüm takvimi
Abone ol
Gelişmelerden haberdar olmak için Chrome Developers YouTube kanalına abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.
Ben Pete LePage. Chrome 96 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım!