Chrome 124-এ নতুন

পিট লেপেজ

এখানে Chrome 124 এর হাইলাইটগুলি রয়েছে:

সম্পূর্ণ রান ডাউন চান? Chrome 124 রিলিজ নোটগুলি দেখুন।

জাভাস্ক্রিপ্টে ঘোষণামূলক ছায়া DOM ব্যবহার করুন

দুটি নতুন API রয়েছে যা জাভাস্ক্রিপ্ট থেকে ঘোষণামূলক ছায়া DOM ব্যবহার করার অনুমতি দেয়।

setHTMLUnsafe() innerHTML এর অনুরূপ, এবং আপনাকে প্রদত্ত স্ট্রিংটিতে একটি উপাদানের অভ্যন্তরীণ HTML সেট করতে দেয়। এটি সাহায্য করে যখন আপনার কাছে কিছু এইচটিএমএল থাকে যাতে একটি ঘোষণামূলক ছায়া DOM অন্তর্ভুক্ত থাকে, যেমন।

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

যদি আপনি শুধুমাত্র innerHTML ব্যবহার করেন, ব্রাউজার এটি সঠিকভাবে পার্স করবে না, এবং কোন ছায়া DOM নেই। কিন্তু setHTMLUnsafe() এর সাথে, আপনার ছায়া DOM তৈরি করা হয়েছে, এবং উপাদানটি পার্স করা হয়েছে যেমনটি আপনি আশা করেন।

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

অন্য API হল parseHTMLUnsafe() , এবং এটি DOMParser.parseFromString() এর মতই কাজ করে।

এই উভয় APIই অনিরাপদ , যার মানে তারা কোনো ইনপুট স্যানিটাইজেশন করে না। তাই আপনি নিশ্চিত করতে চাইবেন যে আপনি তাদের যা কিছু খাওয়ান তা নিরাপদ। একটি আসন্ন রিলিজে, আমরা একটি সংস্করণ দেখতে আশা করি যা ইনপুট স্যানিটাইজেশন প্রদান করে।

অবশেষে, এই উভয় APIই ইতিমধ্যে ফায়ারফক্স এবং সাফারির সর্বশেষ সংস্করণে সমর্থিত!

ওয়েবসকেট স্ট্রিম API

WebSockets হল ভোটের উপর নির্ভর না করেই ব্যবহারকারীর ব্রাউজার এবং সার্ভারের মধ্যে ডেটা বারবার পাঠানোর একটি দুর্দান্ত উপায়৷ এটি চ্যাট অ্যাপের মতো জিনিসগুলির জন্য দুর্দান্ত, যেখানে আপনি তথ্য আসার সাথে সাথেই এটি মোকাবেলা করতে চান৷

কিন্তু যদি ডেটা আপনার পরিচালনার চেয়ে দ্রুত আসে?

এটিকে ব্যাক প্রেসার বলা হয় এবং এটি আপনার জন্য কিছু গুরুতর মাথাব্যথার কারণ হতে পারে। দুর্ভাগ্যবশত, WebSocket API এর পিছনের চাপ মোকাবেলা করার একটি সুন্দর উপায় নেই।

WebSocket Stream API আপনাকে স্ট্রীম এবং ওয়েব সকেটের শক্তি দেয়, যার অর্থ কোনও অতিরিক্ত খরচ ছাড়াই পিছনের চাপ প্রয়োগ করা যেতে পারে।

একটি নতুন WebSocketStream তৈরি করে শুরু করুন এবং এটিকে WebSocket সার্ভারের URL পাস করুন৷

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

এর পরে, আপনি সংযোগ খোলার জন্য অপেক্ষা করুন, যার ফলে একটি ReadableStream এবং একটি WritableStream হয়। ReadableStream.getReader() পদ্ধতিতে কল করার মাধ্যমে, আপনি একটি ReadableStreamDefaultReader পাবেন যা আপনি স্ট্রীমটি সম্পন্ন না হওয়া পর্যন্ত ডেটা read() পারবেন।

ডেটা লিখতে, WritableStream.getWriter() পদ্ধতিতে কল করুন, যা আপনাকে একটি WritableStreamDefaultWriter দেয়, যেটিতে আপনি তারপরে write() পারেন।

পরিবর্তনের উন্নতি দেখুন

আমি ভিউ ট্রানজিশন বৈশিষ্ট্যগুলি সম্পর্কে উত্তেজিত, এবং Chrome 124-এ দুটি নতুন বৈশিষ্ট্য রয়েছে যা ভিউ ট্রানজিশনগুলিকে সহজ করার জন্য ডিজাইন করা হয়েছে৷

pageswap ইভেন্টটি একটি নথির উইন্ডো অবজেক্টে ফায়ার করা হয় যখন একটি নেভিগেশন নথিটিকে একটি নতুন নথির সাথে প্রতিস্থাপন করবে।

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

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

এবং আরো!

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

  • disallowReturnToOpener ব্রাউজারকে ইঙ্গিত দেয় যে এটি পিকচার-ইন-পিকচার উইন্ডোতে এমন একটি বোতাম দেখাবে না যা ব্যবহারকারীকে ওপেনার ট্যাবে ফিরে যেতে দেয়।

  • কীবোর্ড-ফোকাসযোগ্য স্ক্রোল কন্টেইনারগুলি অনুক্রমিক ফোকাস নেভিগেশন ব্যবহার করে স্ক্রোল পাত্রে ফোকাসযোগ্য করে অ্যাক্সেসযোগ্যতা উন্নত করে।

  • এবং ইউনিভার্সাল ইন্সটল ব্যবহারকারীদের যেকোন পৃষ্ঠা ইনস্টল করার অনুমতি দেয়, এমনকি যারা বর্তমান PWA মানদণ্ড পূরণ করে না।

আরও পড়া

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

সাবস্ক্রাইব

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

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