Chrome 83-এ নতুন

পিট লেপেজ

Chrome 83 এখন স্থিতিশীল হতে শুরু করছে।

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

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

বিশ্বস্ত প্রকার

DOM-ভিত্তিক ক্রস-সাইট স্ক্রিপ্টিং হল ওয়েবে সবচেয়ে সাধারণ নিরাপত্তা দুর্বলতার একটি। ঘটনাক্রমে আপনার পৃষ্ঠায় একজনকে পরিচয় করিয়ে দেওয়া সহজ হতে পারে। বিশ্বস্ত প্রকারগুলি এই ধরণের দুর্বলতাগুলিকে প্রতিরোধ করতে সাহায্য করতে পারে, কারণ তারা আপনাকে ডেটাটিকে একটি সম্ভাব্য বিপজ্জনক ফাংশনে পাস করার আগে প্রক্রিয়া করতে হবে৷

উদাহরণস্বরূপ, innerHTML ধরুন, বিশ্বস্ত প্রকারগুলি চালু থাকলে, যদি আমি একটি স্ট্রিং পাস করার চেষ্টা করি তবে এটি একটি TypeError এর সাথে ব্যর্থ হবে কারণ ব্রাউজারটি স্ট্রিংটিকে বিশ্বাস করতে পারে কিনা তা জানে না।

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

পরিবর্তে, আমাকে হয় একটি নিরাপদ ফাংশন ব্যবহার করতে হবে, যেমন textContent , একটি বিশ্বস্ত প্রকারে পাস করতে হবে, অথবা উপাদান তৈরি করতে হবে এবং appendChild() ব্যবহার করতে হবে।

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

আপনি বিশ্বস্ত প্রকারগুলি চালু করার আগে, আপনি report-only সিএসপি শিরোনাম ব্যবহার করে কোনো লঙ্ঘন সনাক্ত করতে এবং ঠিক করতে চাইবেন।

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com

তারপর আপনি একবার সবকিছু বোতাম আপ পেয়ে গেলে, আপনি এটি সঠিকভাবে চালু করতে পারেন। web.dev-এ বিশ্বস্ত প্রকারের সাথে DOM-ভিত্তিক ক্রস-সাইট স্ক্রিপ্টিং দুর্বলতা প্রতিরোধে সম্পূর্ণ বিবরণ রয়েছে।

ফর্ম নিয়ন্ত্রণের আপডেট

আমরা প্রতিদিন HTML ফর্ম কন্ট্রোল ব্যবহার করি, এবং সেগুলি ওয়েবের অনেক ইন্টারঅ্যাক্টিভিটির চাবিকাঠি। এগুলি ব্যবহার করা সহজ, বিল্ট-ইন অ্যাক্সেসযোগ্যতা রয়েছে এবং আমাদের ব্যবহারকারীদের কাছে পরিচিত৷ ফর্ম কন্ট্রোলের স্টাইল ব্রাউজার এবং অপারেটিং সিস্টেম জুড়ে অসামঞ্জস্যপূর্ণ হতে পারে। এবং ডিভাইস জুড়ে সামঞ্জস্যপূর্ণ চেহারা পেতে আমাদের প্রায়শই অনেকগুলি CSS নিয়ম প্রেরণ করতে হয়।

আগে, ফর্ম নিয়ন্ত্রণের ডিফল্ট স্টাইলিং।
পরে, ফর্ম নিয়ন্ত্রণের স্টাইলিং আপডেট করা হয়েছে।

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

নতুন ফর্ম নিয়ন্ত্রণগুলি ইতিমধ্যেই মাইক্রোসফ্ট এজ-এ অবতরণ করেছে, এবং এখন Chrome 83-এ উপলব্ধ৷ আরও তথ্যের জন্য, ফর্ম নিয়ন্ত্রণগুলির আপডেটগুলি দেখুন এবং Chromium ব্লগে ফোকাস করুন ৷

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

মেমরি measureMemory() দিয়ে মেমরি পরিমাপ করুন

Chrome 83-এ একটি অরিজিন ট্রায়াল শুরু করা হচ্ছে, performance.measureMemory() হল একটি নতুন API যা আপনার পৃষ্ঠার মেমরি ব্যবহার পরিমাপ করা এবং মেমরি লিক শনাক্ত করা সম্ভব করে৷

মেমরি লিক প্রবর্তন করা সহজ:

  • একটি ইভেন্ট শ্রোতা নিবন্ধনমুক্ত করতে ভুলে যাওয়া
  • আইফ্রেম থেকে বস্তু ক্যাপচার করা
  • একজন শ্রমিককে বন্ধ করছেন না
  • অ্যারেতে বস্তু জমা করা
  • এবং তাই

মেমরি ফাঁসের ফলে এমন পৃষ্ঠা দেখা যায় যা ব্যবহারকারীদের কাছে ধীরগতির এবং ফোলা দেখায়।

if (performance.measureMemory) {
  try {
    const result = await performance.measureMemory();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

নতুন API-এর সমস্ত বিশদ বিবরণের জন্য web.dev-এ measureMemory() দিয়ে আপনার ওয়েব পৃষ্ঠার মোট মেমরি ব্যবহার মনিটর করুন।

নেটিভ ফাইল সিস্টেম API-এ আপডেট

নেটিভ ফাইল সিস্টেম এপিআই লেখার যোগ্য স্ট্রীমগুলির সমর্থন এবং ফাইল হ্যান্ডলগুলি সংরক্ষণ করার ক্ষমতা সহ Chrome 83-এ একটি নতুন অরিজিন ট্রায়াল শুরু করেছে৷

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

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

IndexedDB-তে ফাইল হ্যান্ডলগুলি সংরক্ষণ করা আপনাকে স্থিতি সংরক্ষণ করতে বা ব্যবহারকারী কোন ফাইলগুলিতে কাজ করছিল তা মনে রাখতে দেয়। উদাহরণস্বরূপ সম্প্রতি সম্পাদিত ফাইলগুলির একটি তালিকা রাখুন, ব্যবহারকারী যে শেষ ফাইলটিতে কাজ করছিলেন সেটি খুলুন এবং আরও অনেক কিছু।

এই বৈশিষ্ট্যগুলি ব্যবহার করার জন্য আপনার একটি নতুন অরিজিন ট্রায়াল টোকেন লাগবে, তাই আমার আপডেট করা নিবন্ধটি দেখুন নেটিভ ফাইল সিস্টেম API: সমস্ত বিবরণ সহ web.dev-এ স্থানীয় ফাইলগুলিতে অ্যাক্সেস সহজ করা এবং কীভাবে আপনার নতুন অরিজিন ট্রায়াল টোকেন পাবেন।

অন্যান্য মূল ট্রায়াল

চেক করুন অরিজিন ট্রায়ালে বৈশিষ্ট্যের সম্পূর্ণ তালিকার জন্য।

নতুন ক্রস-অরিজিন নীতি

কিছু ওয়েব এপিআই স্পেকটারের মতো পার্শ্ব-চ্যানেল আক্রমণের ঝুঁকি বাড়ায়। সেই ঝুঁকি কমানোর জন্য, ব্রাউজারগুলি ক্রস-অরিজিন আইসোলেটেড নামে একটি অপ্ট-ইন-ভিত্তিক বিচ্ছিন্ন পরিবেশ অফার করে। ক্রস-অরিজিন আইসোলেটেড স্টেট document.domain পরিবর্তনকেও বাধা দেয়। document.domain পরিবর্তন করতে সক্ষম হওয়া একই-সাইটের নথিগুলির মধ্যে যোগাযোগের অনুমতি দেয় এবং একই-অরিজিন নীতিতে এটি একটি ফাঁকা পথ হিসাবে বিবেচিত হয়েছে।

সম্পূর্ণ বিবরণের জন্য COOP এবং COEP ব্যবহার করে আপনার ওয়েবসাইটকে "ক্রস-অরিজিন আইসোলেটেড" করা Eiji-এর পোস্ট দেখুন।

ওয়েব অত্যাবশ্যক

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

  • সবচেয়ে বড় কন্টেন্টফুল পেইন্ট অনুভূত লোডের গতি পরিমাপ করে এবং পৃষ্ঠার প্রধান বিষয়বস্তু সম্ভবত লোড হওয়ার সময় পৃষ্ঠা লোডের টাইমলাইনে বিন্দুটিকে চিহ্নিত করে।
  • প্রথম ইনপুট বিলম্ব প্রতিক্রিয়াশীলতা পরিমাপ করে এবং পৃষ্ঠার সাথে প্রথম ইন্টারঅ্যাক্ট করার চেষ্টা করার সময় ব্যবহারকারীরা যে অভিজ্ঞতা অনুভব করে তা পরিমাপ করে।
  • ক্রমবর্ধমান লেআউট শিফট চাক্ষুষ স্থায়িত্ব পরিমাপ করে এবং দৃশ্যমান পৃষ্ঠা বিষয়বস্তুর অপ্রত্যাশিত বিন্যাস স্থানান্তরের পরিমাণ পরিমাপ করে।

এই সমস্ত মেট্রিক্স গুরুত্বপূর্ণ ব্যবহারকারী-কেন্দ্রিক ফলাফল ক্যাপচার করে, ক্ষেত্র পরিমাপযোগ্য, এবং ল্যাব ডায়াগনস্টিক মেট্রিক সমতুল্য এবং টুলিং সমর্থন করে। উদাহরণস্বরূপ, লার্জেস্ট কনটেন্টফুল পেইন্ট হল টপলাইন লোডিং মেট্রিক, এটি ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) এবং টাইম টু ফার্স্ট বাইট (TTFB) এর উপরও অত্যন্ত নির্ভরশীল, যা নিরীক্ষণ এবং উন্নতির জন্য গুরুত্বপূর্ণ।

আরও জানতে, সম্পূর্ণ বিশদ বিবরণের জন্য ক্রোমিয়াম ব্লগে একটি স্বাস্থ্যকর সাইটের জন্য প্রয়োজনীয় মেট্রিক্স: পরিচিতি ওয়েব ভাইটাল দেখুন।

এবং আরো

  • Chrome এখন বারকোড সনাক্তকরণ API সমর্থন করে, যা বারকোড সনাক্ত এবং ডিকোড করার ক্ষমতা প্রদান করে।
  • নতুন CSS @supports ফাংশন CSS নির্বাচকদের জন্য বৈশিষ্ট্য সনাক্তকরণ প্রদান করে।
  • নতুন ARIA টীকাগুলি মন্তব্য, পরামর্শ, এবং শব্দার্থগত অর্থ সহ পাঠ্য হাইলাইটের জন্য স্ক্রীন রিডার অ্যাক্সেসযোগ্যতা সমর্থন করে ( <mark> এর অনুরূপ)।
  • prefers-color-scheme মিডিয়া ক্যোয়ারী লেখকদের তাদের নিজস্ব অন্ধকার থিম সমর্থন করতে দেয় যাতে তাদের তৈরি অভিজ্ঞতার উপর তাদের সম্পূর্ণ নিয়ন্ত্রণ থাকে।
  • জাভাস্ক্রিপ্ট এখন ভাগ করা কর্মীদের মডিউল সমর্থন করে।

ভবিষ্যতে কি আসছে তা নিয়ে আগ্রহী? দেখতে Fugu API ট্র্যাকার দেখুন!

আরও পড়া

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

সদস্যতা

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

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