Chrome 66-এ নতুন

পিট লেপেজ

এবং আরো অনেক আছে!

আমি পিট লেপেজ । চলুন ডুব দিয়ে দেখি Chrome 66-এ ডেভেলপারদের জন্য নতুন কী আছে!

পরিবর্তনের সম্পূর্ণ তালিকা চান? Chromium সোর্স রিপোজিটরি পরিবর্তনের তালিকা দেখুন।

CSS টাইপ করা অবজেক্ট মডেল

আপনি যদি জাভাস্ক্রিপ্টের মাধ্যমে একটি CSS প্রপার্টি আপডেট করে থাকেন, তাহলে আপনি CSS অবজেক্ট মডেল ব্যবহার করেছেন। কিন্তু এটি একটি স্ট্রিং হিসাবে সবকিছু প্রদান করে।

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

opacity সম্পত্তি অ্যানিমেট করতে, আমাকে একটি সংখ্যায় স্ট্রিংটি কাস্ট করতে হবে, তারপর মান বৃদ্ধি করতে হবে এবং আমার পরিবর্তনগুলি প্রয়োগ করতে হবে। ঠিক আদর্শ নয়।

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

নতুন সিএসএস টাইপড অবজেক্ট মডেলের সাথে, সিএসএস মানগুলি টাইপ করা জাভাস্ক্রিপ্ট অবজেক্ট হিসাবে উন্মোচিত হয়, প্রচুর টাইপ ম্যানিপুলেশন দূর করে এবং সিএসএস-এর সাথে কাজ করার আরও বুদ্ধিমান উপায় প্রদান করে।

element.style ব্যবহার করার পরিবর্তে, আপনি .attributeStyleMap প্রপার্টি বা .styleMap মাধ্যমে শৈলী অ্যাক্সেস করেন। তারা একটি মানচিত্রের মতো বস্তু ফেরত দেয় যা পড়া বা আপডেট করা সহজ করে তোলে।

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

পুরানো CSS অবজেক্ট মডেলের তুলনায়, প্রারম্ভিক বেঞ্চমার্কগুলি প্রতি সেকেন্ডে ক্রিয়াকলাপে প্রায় 30% উন্নতি দেখায় - যা জাভাস্ক্রিপ্ট অ্যানিমেশনের জন্য বিশেষভাবে গুরুত্বপূর্ণ।

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

এটি একটি স্ট্রিং থেকে একটি সংখ্যায় মান কাস্ট করতে ভুলে যাওয়ার কারণে সৃষ্ট বাগগুলি দূর করতেও সহায়তা করে এবং এটি স্বয়ংক্রিয়ভাবে মানগুলির রাউন্ডিং এবং ক্ল্যাম্পিং পরিচালনা করে। এছাড়াও, ইউনিট রূপান্তর, পাটিগণিত এবং সমতা নিয়ে কাজ করার জন্য কিছু সুন্দর ঝরঝরে নতুন পদ্ধতি রয়েছে।

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

এরিক তার ব্যাখ্যাকারীতে বেশ কয়েকটি ডেমো এবং উদাহরণ সহ একটি দুর্দান্ত পোস্ট রয়েছে।

Async ক্লিপবোর্ড API

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

document.execCommand ব্যবহার করে সিঙ্ক্রোনাস কপি এবং পেস্ট করা ছোট ছোট টেক্সটের জন্য ঠিক হতে পারে, কিন্তু অন্য যেকোন কিছুর জন্য, এটির সিঙ্ক্রোনাস প্রকৃতি পৃষ্ঠাটিকে ব্লক করে দেবে, যার ফলে ব্যবহারকারীর জন্য খারাপ অভিজ্ঞতা হবে। এবং ব্রাউজারগুলির মধ্যে অনুমতি মডেলটি অসঙ্গত।

নতুন Async ক্লিপবোর্ড API হল একটি প্রতিস্থাপন যা অ্যাসিঙ্ক্রোনাসভাবে কাজ করে, এবং ব্যবহারকারীদের জন্য আরও ভাল অভিজ্ঞতা প্রদানের জন্য অনুমতি API-এর সাথে একীভূত হয়।

writeText() কল করে ক্লিপবোর্ডে টেক্সট কপি করা যায়।

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

যেহেতু এই APIটি অ্যাসিঙ্ক্রোনাস, তাই writeText() ফাংশন একটি প্রতিশ্রুতি প্রদান করে যা আমরা পাস করা পাঠ্য সফলভাবে অনুলিপি করা হয়েছে কিনা তার উপর নির্ভর করে সমাধান বা প্রত্যাখ্যান করা হবে।

একইভাবে, getText() কল করে ক্লিপবোর্ড থেকে পাঠ্য পড়া যেতে পারে এবং পাঠ্যের সাথে সমাধান করার জন্য ফিরে আসা প্রতিশ্রুতির জন্য অপেক্ষা করা যেতে পারে।

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

ব্যাখ্যাকারীতে জেসনের পোস্ট এবং ডেমোগুলি দেখুন। তিনি এমন উদাহরণও পেয়েছেন যা async ফাংশন ব্যবহার করে।

নতুন ক্যানভাস প্রসঙ্গ BitmapRenderer

canvas উপাদান আপনাকে পিক্সেল স্তরে গ্রাফিক্স ম্যানিপুলেট করতে দেয়, আপনি গ্রাফ আঁকতে পারেন, ফটো ম্যানিপুলেট করতে পারেন বা এমনকি রিয়েল টাইম ভিডিও প্রসেসিং করতে পারেন৷ কিন্তু, আপনি একটি ফাঁকা canvas দিয়ে শুরু না করলে, canvas একটি ছবি রেন্ডার করার জন্য আপনার একটি উপায় প্রয়োজন।

ঐতিহাসিকভাবে, এর অর্থ হল একটি image ট্যাগ তৈরি করা, তারপর এটির বিষয়বস্তু canvas রেন্ডার করা। দুর্ভাগ্যবশত এর মানে ব্রাউজারটিকে মেমরিতে ছবির একাধিক কপি সংরক্ষণ করতে হবে।

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

Chrome 66 থেকে শুরু করে, একটি নতুন অ্যাসিঙ্ক্রোনাস রেন্ডারিং প্রসঙ্গ রয়েছে যা ImageBitmap অবজেক্টের প্রদর্শনকে সুগম করেছে৷ তারা এখন অ্যাসিঙ্ক্রোনাসভাবে কাজ করে এবং মেমরি ডুপ্লিকেশন এড়িয়ে আরও দক্ষতার সাথে এবং কম জ্যাঙ্ক সহ রেন্ডার করে।

এটি ব্যবহার করতে:

  1. createImageBitmap কল করুন এবং এটিকে একটি ইমেজ ব্লব দিন, ইমেজ তৈরি করতে।
  2. canvas থেকে bitmaprenderer প্রসঙ্গ ধরুন।
  3. তারপরে ছবিটি স্থানান্তর করুন।
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

সম্পন্ন, আমি ইমেজ রেন্ডার করেছি!

অডিও ওয়ার্কলেট

ওয়ার্কলেট আছে! PaintWorklet Chrome 65-এ পাঠানো হয়েছে, এবং এখন আমরা Chrome 66-এ ডিফল্টরূপে AudioWorklet সক্ষম করছি। এই নতুন ধরনের ওয়ার্কলেট ডেডিকেটেড অডিও থ্রেডে অডিও প্রক্রিয়া করতে ব্যবহার করা যেতে পারে, লিগ্যাসি ScriptProcessorNode প্রতিস্থাপন করে যা মূল থ্রেডে চলে। প্রতিটি অডিও ওয়ার্কলেট তার নিজস্ব বৈশ্বিক সুযোগে চলে, বিলম্ব কমায় এবং থ্রুপুট স্থায়িত্ব বাড়ায়।

গুগল ক্রোম ল্যাবসে অডিও ওয়ার্কলেটের কিছু আকর্ষণীয় উদাহরণ রয়েছে।

এবং আরো!

এইগুলি বিকাশকারীদের জন্য Chrome 66-এর কয়েকটি পরিবর্তন, অবশ্যই, আরও অনেক কিছু আছে।

  • TextArea এবং Select now autocomplete বৈশিষ্ট্য সমর্থন করে।
  • একটি form উপাদানে autocapitalize সেট করা যেকোনো চাইল্ড ফর্ম ক্ষেত্রে প্রযোজ্য হবে, Safari-এর autocapitalize বাস্তবায়নের সাথে সামঞ্জস্যতা উন্নত করবে।
  • trimStart() এবং trimEnd() এখন স্ট্রিং থেকে হোয়াইটস্পেস ছাঁটাই করার মান-ভিত্তিক উপায় হিসাবে উপলব্ধ।

Chrome 66-এ DevTools-এর জন্য নতুন কী আছে তা জানতে Chrome DevTools-এ নতুন চেক করতে ভুলবেন না। এবং, আপনি যদি প্রগ্রেসিভ ওয়েব অ্যাপে আগ্রহী হন, নতুন PWA Roadshow ভিডিও সিরিজ দেখুন। তারপর, আমাদের YouTube চ্যানেলে সাবস্ক্রাইব বোতামে ক্লিক করুন, এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷

আমি পিট লেপেজ, এবং Chrome 67 রিলিজ হওয়ার সাথে সাথে, আমি আপনাকে বলতে এখানে থাকব -- Chrome-এ নতুন কি!