Chrome 85-এ নতুন কী কী আছে

Pete LePage

Chrome 85 এখন স্টেবল ভার্সনে রিলিজ করা শুরু হচ্ছে।

আপনার যা জানা প্রয়োজন তা এখানে দেওয়া হল:

আমি পিট লেপেজ, বাড়ি থেকে কাজ করছি এবং শুট করছি, আসুন, Chrome 85-এ ডেভেলপারদের জন্য নতুন কী কী আছে তা দেখে নেওয়া যাক!

কন্টেন্টের দৃশ্যমানতা

ব্রাউজারের রেন্ডারিং প্রসেস

আপনার HTML-কে এমন কিছুতে পরিবর্তন করা যা ব্যবহারকারী দেখতে পাবেন, এর জন্য ব্রাউজারকে প্রথম পিক্সেলটি আঁকার আগে বেশ কয়েকটি ধাপ অতিক্রম করতে হবে। এটি পুরো পৃষ্ঠার জন্য এটি করে, এমনকি ভিউপোর্টে দৃশ্যমান নয় এমন কন্টেন্টের জন্যও এটি করে।

কোনও এলিমেন্টে content-visibility: auto প্রয়োগ করলে, ব্রাউজার বুঝতে পারে যে সেটি ভিউপোর্টে স্ক্রল করে না আসা পর্যন্ত সেই এলিমেন্টের জন্য রেন্ডারিং কাজ এড়িয়ে যেতে পারে, এর ফলে প্রাথমিক রেন্ডারিং আরও দ্রুত হয়।


.my-class {
  content-visibility: auto;
}

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

কন্টেন্টকে ছোট ছোট ভাগে ভাগ করে content-visibility: auto; যোগ করার ফলে, এই পৃষ্ঠাটি ২৩২ মিলি সেকেন্ডের পরিবর্তে মাত্র ৩০ মিলি সেকেন্ডে রেন্ডার করা যাচ্ছে।

আপনার রেন্ডারিং পারফর্ম্যান্স উন্নত করতে আপনি কীভাবে এটি ব্যবহার করতে পারেন তা দেখতে কন্টেন্ট দৃশ্যমানতা চেক করে দেখুন।

@property এবং CSS ভেরিয়েবল

CSS ভেরিয়েবল, যাকে টেকনিক্যালি কাস্টম প্রপার্টি বলা হয়, তা অসাধারণ। Houdini CSS Properties and Values API-এর সাহায্যে, আপনি কাস্টম প্রপার্টির জন্য একটি ধরন এবং ডিফল্ট ফলব্যাক ভ্যালু নির্ধারণ করতে পারবেন। আমি আগে Chrome 78-এ নতুন ফিচারে এগুলি কভার করেছি, যখন আমরা জাভাস্ক্রিপ্টে এগুলি সংজ্ঞায়িত করার জন্য সহায়তা যোগ করেছি।

Chrome 85 থেকে শুরু করে, আপনি CSS-এ সরাসরি CSS প্রপার্টি সংজ্ঞায়িত ও সেট করতে পারবেন। CSS প্রপার্টি সম্পর্কে আমার যা ভালো লাগে - তা হল এটি প্রপার্টিকে অর্থপূর্ণ নাম, ফলব্যাক ভ্যালু দেয় এবং এমনকি CSS টেস্টিংও চালু করে।

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una-র একটি দুর্দান্ত পোস্ট আছে @property: CSS ভেরিয়েবলকে সুপারপাওয়ার দেওয়া যেখানে আপনি কীভাবে সেগুলি ব্যবহার করতে পারবেন তা দেখানো হয়েছে।

সম্পর্কিত অ্যাপ ইনস্টল করা

getInstalledRelatedApps() API-এর সাহায্যে আপনি চেক করতে পারবেন যে আপনার অ্যাপ ইনস্টল করা আছে কিনা, তারপর ব্যবহারকারীর অভিজ্ঞতা কাস্টমাইজ করতে পারবেন।

যেমন, আপনার অ্যাপ আগে থেকেই ইনস্টল করা থাকলে, ল্যান্ডিং পৃষ্ঠায় ব্যবহারকারীকে আলাদা কন্টেন্ট দেখান। বিভ্রান্তি এড়াতে, ওভারল্যাপ করা ফাংশনালিটি একটি অ্যাপে সেন্ট্রালাইজ করুন। অথবা, আপনার নেটিভ অ্যাপ আগে থেকেই ইনস্টল করা থাকলে, আপনার PWA ইনস্টল করার প্রোমোশন করবেন না।

Chrome 80-তে প্রথম রিলিজ করার সময়, এটি শুধুমাত্র Android অ্যাপের জন্য কাজ করত। এখন, Android-এ, এটি আপনার PWA ইনস্টল করা আছে কিনা তাও চেক করতে পারে। এবং Windows-এ, এটি চেক করতে পারে যে আপনার Windows UWP অ্যাপ ইনস্টল করা আছে কিনা।

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

আমার এই নিবন্ধটি দেখুন আপনার অ্যাপ কি ইনস্টল করা আছে? getInstalledRelatedApps() আপনাকে জানাবে! আপনার অ্যাপ যে আপনারই তা প্রমাণ করতে, এটি কীভাবে কাজ করে এবং কীভাবে অ্যাপে সাইন-ইন করতে হয় তা জানতে web.dev দেখুন।

অ্যাপ আইকন শর্টকাট

Windows-এ অ্যাপ আইকন শর্টকাট

Chrome 84 ভার্সনে, আমরা অ্যাপ আইকন শর্টকাট সংক্রান্ত সহায়তা যোগ করেছি। আমি ভুল করে বলেছিলাম যে এগুলি সব জায়গায় উপলভ্য, কিন্তু সেগুলি শুধুমাত্র Android-এ উপলভ্য। এখন, Chrome 85 ভার্সনে, এগুলি Android ও Windows এবং Chrome ও Edge, দু'টি ব্রাউজারেই উপলভ্য।


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

সম্পূর্ণ বিবরণ পেতে, web.dev-এ অ্যাপ আইকন শর্টকাট নিবন্ধটি দেখুন এবং আমি যে বিভ্রান্তি সৃষ্টি করেছি তার জন্য দুঃখিত।

অরিজিন ট্রায়াল: fetch() সহ স্ট্রিমিং অনুরোধ

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

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

যেমন, সার্ভার গরম করার জন্য অথবা মাইক্রোফোন বা ক্যামেরা থেকে ক্যাপচার করা অডিও বা ভিডিও স্ট্রিম করার জন্য এটি ব্যবহার করুন।

Jake-এর fetch API-এর মাধ্যমে স্ট্রিম করা অনুরোধ সম্পর্কে web.dev-এ বিস্তারিত তথ্য আছে এবং তিনি এটি লেটেস্ট HTTP203 - fetch-এর মাধ্যমে স্ট্রিম করা অনুরোধ ভিডিওতেও কভার করেছেন।

এবং আরও অনেক কিছু

অবশ্যই, আরও অনেক কিছু আছে।

Promise.any এমন একটি প্রমিস রিটার্ন করে যা প্রথম দেওয়া প্রমিসের মাধ্যমে সম্পূর্ণ করা হয় সম্পূর্ণ করা বা বাতিল করা হয়।

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

.replaceAll()-এর সাহায্যে কোনও স্ট্রিংয়ের সবকটি ইনস্ট্যান্স পরিবর্তন করা আরও সহজ, আর রেগুলার এক্সপ্রেশন ব্যবহার করতে হবে না!

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85-এ AVIF-এর জন্য ডিকোড করার সুবিধা যোগ করা হয়েছে, এটি হল AV1-এর মাধ্যমে এনকোড করা একটি ইমেজ ফর্ম্যাট এবং ওপেন মিডিয়ার জন্য অ্যালায়েন্স-এর মাধ্যমে স্ট্যান্ডার্ডাইজ করা হয়েছে। JPEG ও WebP-এর তুলনায় AVIF-এ উল্লেখযোগ্য কম্প্রেশন সুবিধা পাওয়া যায়। সম্প্রতি Netflix-এর সমীক্ষায় দেখা গেছে যে স্ট্যান্ডার্ড JPEG-এর তুলনায় ৫০% এবং ৪:৪:৪ কন্টেন্টে ৬০%-এর বেশি ডেটা সেভ করা যায়।

এবং AppCache সরিয়ে দেওয়ার প্রসেস শুরু হয়ে গেছে।

আরও পড়ুন

এতে শুধু কিছু গুরুত্বপূর্ণ হাইলাইট কভার করা হয়েছে। Chrome 85-এ অতিরিক্ত পরিবর্তনের জন্য নিচে দেওয়া লিঙ্ক চেক করুন।

সাবস্ক্রাইব করুন

আমাদের ভিডিও সম্পর্কে আপ-টু-ডেট থাকতে চাইলে, Chrome Developers YouTube চ্যানেল-এ সাবস্ক্রাইব করুন এবং আমরা নতুন ভিডিও প্রকাশ করলেই আপনি ইমেল বিজ্ঞপ্তি পাবেন।

আমি পিট লেপেজ এবং অবশেষে আমার চুল কাটানো হয়ে গেছে!

Chrome 86 রিলিজ করার সাথে সাথেই, Chrome-এ নতুন কী কী আছে তা জানাতে আমি এখানে উপস্থিত থাকব!