Chrome 66'daki yenilikler

Pete LePage

Daha birçok özellik de var.

Adım Pete LePage. Chrome 66'ta geliştiriciler için neler yeni olduğuna göz atalım.

Değişikliklerin tam listesini görmek ister misiniz? Chromium kaynak deposu değişiklik listesine göz atın.

CSS Yazılı Nesne Modeli

Bir CSS mülkünü JavaScript aracılığıyla güncellediyseniz CSS nesne modelini kullanmışsınızdır. Ancak her şeyi dize olarak döndürür.

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

opacity özelliğini animasyonlu hale getirmek için dizeyi bir sayıya dönüştürmem, ardından değeri artırmam ve değişikliklerimi uygulamam gerekir. Tam olarak ideal değil.

function step(timestamp) {
  const currentOpacity = parseFloat(el.style.opacity);
  const newOpacity = currentOpacity + 0.01;
  element.style.opacity = newOpacity;
  if (newOpacity <= 1) {
    window.requestAnimationFrame(step);
  }
}

Yeni CSS Yazılı Nesne Modeli ile CSS değerleri, yazılı JavaScript nesneleri olarak gösterilir. Bu sayede, tür değiştirme işlemlerinin çoğu ortadan kaldırılır ve CSS ile çalışmanın daha mantıklı bir yolu sağlanır.

element.style yerine stillere .attributeStyleMap mülkü veya .styleMap aracılığıyla erişirsiniz. Bu işlevler, okumayı veya güncellemeyi kolaylaştıran haritaya benzer bir nesne döndürür.

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!

Eski CSS nesne modeline kıyasla, ilk karşılaştırmalar saniye başına işlemlerde yaklaşık %30 oranında bir iyileşme olduğunu gösteriyor. Bu, özellikle JavaScript animasyonları için önemli bir gelişme.

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

Ayrıca, değeri bir dize yerine sayıya dönüştürmeyi unutarak oluşan hataları ortadan kaldırmaya yardımcı olur ve değerlerin yuvarlanması ve sınırlandırılması işlemlerini otomatik olarak gerçekleştirir. Ayrıca birim dönüşümleri, aritmetik ve eşitlikle ilgili bazı oldukça kullanışlı yeni yöntemler de mevcuttur.

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

Eric'in açıklamasında çeşitli demolar ve örnekler içeren harika bir yayını var.

Async Clipboard API

const successful = document.execCommand('copy');

document.execCommand kullanarak eşzamanlı kopyalama ve yapıştırma işlemi küçük metin parçaları için uygun olabilir ancak diğer durumlarda eşzamanlı olması nedeniyle sayfanın engellenmesi ve kullanıcının kötü bir deneyim yaşaması olasıdır. Ayrıca tarayıcılar arasındaki izin modeli tutarsızdır.

Yeni Async Clipboard API, eşzamansız olarak çalışan ve kullanıcılara daha iyi bir deneyim sunmak için izin API'siyle entegre olan bir değişimdir.

writeText() çağrılarak metin panoya kopyalanabilir.

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

Bu API eşzamansız olduğundan writeText() işlevi, ilettiğimiz metnin başarıyla kopyalanıp kopyalanmadığına bağlı olarak çözülecek veya reddedilecek bir Promise döndürür.

Benzer şekilde, getText() çağrılarak ve döndürülen Promise'in metinle çözülmesini bekleyerek metin panoyadan okunabilir.

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

Jason'ın açıklamasında yer alan yayına ve demolara göz atın. Ayrıca async işlevlerini kullanan örnekler de vardır.

Yeni Canvas Bağlam BitmapRenderer

canvas öğesi, grafikleri piksel düzeyinde değiştirmenize olanak tanır. Grafik çizebilir, fotoğrafları değiştirebilir ve hatta gerçek zamanlı video işleme yapabilirsiniz. Ancak boş bir canvas ile başlamıyorsanız canvas'te bir resim oluşturmanın bir yoluna ihtiyacınız vardır.

Geçmişte bu, bir image etiketi oluşturmak ve ardından içeriğini canvas'a oluşturmak anlamına geliyordu. Maalesef bu, tarayıcının görüntünün birden fazla kopyasını bellekte depolaması gerektiği anlamına gelir.

const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
}
img.src = 'llama.png';

Chrome 66'dan itibaren, ImageBitmap nesnelerinin görüntülenmesini kolaylaştıran yeni bir asenkron oluşturma bağlamı vardır. Artık, eşzamanlı olmayan bir şekilde çalışarak ve bellek çoğaltmasını önleyerek daha verimli ve daha az takılmayla oluşturma işlemi gerçekleştiriyorlar.

Bu özelliği kullanmak için:

  1. Resmi oluşturmak için createImageBitmap işlevini çağırın ve işleve bir resim blob'u iletin.
  2. canvas öğesinden bitmaprenderer bağlamını alın.
  3. Ardından resmi aktarın.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Tamam, resmi oluşturdum.

AudioWorklet

Worklet'ler kullanıma sunuldu PaintWorklet, Chrome 65'te kullanıma sunuldu. Şimdi de Chrome 66'da AudioWorklet'i varsayılan olarak etkinleştiriyoruz. Bu yeni Worklet türü, ana iş parçacığında çalışan eski ScriptProcessorNode'un yerini alarak sesleri özel ses iş parçacığında işlemek için kullanılabilir. Her AudioWorklet kendi genel kapsamında çalışır. Bu sayede gecikme süresi azalır ve aktarım hızı kararlılığı artar.

Google Chrome Labs'de AudioWorklet ile ilgili bazı ilginç örnekler bulabilirsiniz.

Diğer özellikler

Bunlar, Chrome 66'da geliştiriciler için yapılan değişikliklerden yalnızca birkaçıdır. Elbette daha birçok değişiklik vardır.

  • TextArea ve Select artık autocomplete özelliğini destekliyor.
  • form öğesinde autocapitalize ayarlaması yapıldığında bu ayar, tüm alt form alanları için geçerli olur ve Safari'nin autocapitalize uygulamasıyla uyumluluğu iyileştirir.
  • trimStart() ve trimEnd() artık dizelerdeki boşlukları kaldırmak için standart tabanlı bir yöntem olarak kullanılabilir.

Chrome 66'taki DevTools'taki yenilikleri öğrenmek için Chrome Geliştirici Araçları'nda yenilikler başlıklı makaleyi inceleyin. Progresif web uygulamalarıyla ilgileniyorsanız yeni PWA Roadshow video serisine göz atın. Ardından, YouTube kanalımızdaki abone ol düğmesini tıklayın. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Adım Pete LePage. Chrome 67 yayınlanır yayınlanmaz Chrome'daki yenilikleri size bildirmek için burada olacağım.