Chrome 107-এ নতুন

আদ্রিয়ানা জারা

আপনার যা জানা দরকার তা এখানে:

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

স্ক্রীন ক্যাপচার API-এ নতুন বৈশিষ্ট্য

এই সংস্করণে স্ক্রিন ক্যাপচার API স্ক্রিন ভাগ করার অভিজ্ঞতা উন্নত করতে নতুন বৈশিষ্ট্য যোগ করে।

DisplayMediaStreamOptions selfBrowserSurface সম্পত্তি যোগ করেছে। এই ইঙ্গিত দিয়ে অ্যাপ্লিকেশনটি ব্রাউজারকে বলতে পারে যে getDisplayMedia() কল করার সময় বর্তমান ট্যাবটি বাদ দেওয়া উচিত।

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

এটি দুর্ঘটনাজনিত স্ব-ক্যাপচার প্রতিরোধ করতে সাহায্য করে এবং ভিডিও কনফারেন্সে আমরা দেখেছি "হল অফ মিররস" প্রভাব এড়ায়৷

DisplayMediaStreamOptions এখন surfaceSwitching প্রপার্টিও রয়েছে। স্ক্রিন শেয়ার করার সময় ক্রোম ট্যাব স্যুইচ করার জন্য একটি বোতাম দেখায় কিনা তা প্রোগ্রাম্যাটিকভাবে নিয়ন্ত্রণ করার জন্য এই বৈশিষ্ট্যটি একটি বিকল্প যোগ করে। এই বিকল্পগুলি getDisplayMedia() এ পাস করা হবে। Share this tab instead বোতামটি ব্যবহারকারীদের ভিডিও-কনফারেন্সিং ট্যাবে ফিরে না গিয়ে বা ট্যাবগুলির একটি দীর্ঘ তালিকা থেকে নির্বাচন না করে একটি নতুন ট্যাবে স্যুইচ করতে দেয়, তবে ওয়েব অ্যাপ্লিকেশন এটি পরিচালনা না করলে আচরণটি শর্তসাপেক্ষে প্রকাশ করা হয়৷

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

এছাড়াও MediaTrackConstraintSet প্রপার্টি displaySurface যোগ করে। যখন getDisplayMedia() বলা হয় তখন ব্রাউজার ব্যবহারকারীকে ডিসপ্লে সারফেসের পছন্দের প্রস্তাব দেয়: ট্যাব, উইন্ডো বা মনিটর। displaySurface সীমাবদ্ধতা ব্যবহার করে, ওয়েব অ্যাপটি এখন ব্রাউজারে ইঙ্গিত দিতে পারে যদি এটি পৃষ্ঠের প্রকারগুলির একটিকে আরও স্পষ্টভাবে অফার করতে পছন্দ করে।

উদাহরণস্বরূপ, এটি দুর্ঘটনাক্রমে ওভারশেয়ারিং প্রতিরোধে সহায়তা করতে পারে কারণ একটি একক ট্যাব ভাগ করা ডিফল্ট হতে পারে৷ পুরানো এবং নতুন মিডিয়া পিকার প্রম্পটগুলির স্ক্রিনশট।

রেন্ডার ব্লকিং সংস্থান সনাক্ত করুন

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

এখন পারফরম্যান্স API-এ রেন্ডারব্লকিং স্ট্যাটাস প্রপার্টি অন্তর্ভুক্ত রয়েছে যা ব্রাউজার থেকে একটি সরাসরি সংকেত প্রদান করে যা আপনার পৃষ্ঠাটিকে ডাউনলোড করা পর্যন্ত প্রদর্শন থেকে বাধা দেয় এমন সংস্থানগুলি সনাক্ত করে৷

এখানে কোড স্নিপেট, দেখায় কিভাবে আপনার সমস্ত সম্পদের একটি তালিকা পেতে হয় এবং নতুন renderBlockingStatus প্রপার্টি ব্যবহার করে যে সমস্ত রেন্ডার ব্লক করা হয় তাদের তালিকাভুক্ত করতে।

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

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

PendingBeacon API অরিজিন ট্রায়াল

ঘোষণামূলক PendingBeacon API ব্রাউজারকে বীকন পাঠানোর সময় নিয়ন্ত্রণ করতে দেয়।

একটি বীকন একটি নির্দিষ্ট প্রতিক্রিয়া আশা না করে একটি ব্যাকএন্ড সার্ভারে পাঠানো ডেটার একটি বান্ডিল।

অ্যাপ্লিকেশনগুলি প্রায়শই ব্যবহারকারীর পরিদর্শনের শেষে এই বীকনগুলি পাঠাতে চায়, তবে "পাঠান" কল করার জন্য কোনও ভাল সময় নেই৷ এই এপিআই ব্রাউজারে পাঠানোর দায়িত্ব অর্পণ করে, তাই এটি page unload বা page hide বীকন সমর্থন করতে পারে, বিকাশকারীকে সঠিক সময়ে কল পাঠাতে হবে না।

অরিজিন ট্রায়ালের জন্য সাইন আপ করুন , API একবার চেষ্টা করে দেখুন এবং ব্যবহারের ক্ষেত্রে উন্নতি করার জন্য আমাদের উপায়ে প্রতিক্রিয়া পাঠান।

এবং আরো!

অবশ্যই আরো অনেক আছে.

  • expect-ct http শিরোনামটি অবমুক্ত করা হয়েছে।
  • rel অ্যাট্রিবিউট এখন <form> উপাদানগুলিতে সমর্থিত।
  • গতবার আমি grid-template ইন্টারপোলেশন উল্লেখ করেছি, এবার এটি অন্তর্ভুক্ত করা উচিত।

আরও পড়া

এটি শুধুমাত্র কিছু মূল হাইলাইট কভার করে। Chrome 107-এ অতিরিক্ত পরিবর্তনের জন্য নীচের লিঙ্কগুলি দেখুন৷

সাবস্ক্রাইব

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

আমি আদ্রিয়ানা জারা, এবং Chrome 108 রিলিজ হওয়ার সাথে সাথে, Chrome-এ নতুন কী আছে তা জানাতে আমি এখানেই থাকব!