Chrome 103-এ নতুন

পিট লেপেজ

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

  • একটি নতুন HTTP 103 স্ট্যাটাস কোড রয়েছে যা ব্রাউজারকে পৃষ্ঠাটি আসা শুরু করার আগে কোন বিষয়বস্তু প্রিলোড করতে হবে তা সিদ্ধান্ত নিতে সাহায্য করে।
  • স্থানীয় ফন্ট অ্যাক্সেস API ওয়েব অ্যাপ্লিকেশনগুলিকে ব্যবহারকারীর কম্পিউটারে ইনস্টল করা ফন্টগুলি গণনা এবং ব্যবহার করার ক্ষমতা দেয়৷
  • AbortSignal.timeout() হল অ্যাসিঙ্ক্রোনাস API-এ টাইমআউট বাস্তবায়নের একটি সহজ উপায়।
  • এবং আরো অনেক আছে.

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

HTTP 103 স্ট্যাটাস কোড 103 - প্রাথমিক ইঙ্গিত

পৃষ্ঠার কর্মক্ষমতা উন্নত করার একটি উপায় হল রিসোর্স ইঙ্গিত ব্যবহার করা। তারা ব্রাউজারকে পরে কি জিনিসের প্রয়োজন হতে পারে সে সম্পর্কে "ইঙ্গিত" দেয়। উদাহরণস্বরূপ, ফাইলগুলি প্রিলোড করা, বা একটি ভিন্ন সার্ভারের সাথে সংযোগ করা।

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

কিন্তু সার্ভার পৃষ্ঠার অন্তত অংশ না পাঠানো পর্যন্ত ব্রাউজার সেই ইঙ্গিতগুলিতে কাজ করতে পারে না।

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

তারপর, একবার সার্ভার পৃষ্ঠাটি তৈরি করলে, এটি সাধারণ HTTP 200 প্রতিক্রিয়া সহ এটি পাঠাতে পারে। পৃষ্ঠাটি আসার সাথে সাথে, ব্রাউজার ইতিমধ্যে প্রয়োজনীয় সংস্থানগুলি লোড করা শুরু করেছে৷

যেহেতু এটি একটি নতুন HTTP স্ট্যাটাস কোড, এটি ব্যবহার করার জন্য আপনার সার্ভারে আপডেট প্রয়োজন।

HTTP 103 প্রারম্ভিক ইঙ্গিত দিয়ে শুরু করুন:

স্থানীয় ফন্ট অ্যাক্সেস API

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

নতুন স্থানীয় ফন্ট অ্যাক্সেস API ওয়েব অ্যাপ্লিকেশনগুলিকে ব্যবহারকারীর ডিভাইসে স্থানীয় ফন্টগুলি গণনা করার ক্ষমতা দেয় এবং ফন্ট টেবিল ডেটাতে অ্যাক্সেস সরবরাহ করে।

ডিভাইসে ইনস্টল করা ফন্টগুলির একটি তালিকা পেতে, আপনাকে প্রথমে অনুমতির অনুরোধ করতে হবে৷

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

তারপর, window.queryLocalFonts() কল করুন। এটি ব্যবহারকারীদের ডিভাইসে ইনস্টল করা সমস্ত ফন্টের একটি অ্যারে প্রদান করে।

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

আপনি যদি শুধুমাত্র ফন্টের একটি উপসেটে আগ্রহী হন, তাহলে আপনি একটি postscriptNames প্যারামিটার যোগ করে সেগুলিকে ফিল্টার করতে পারেন।

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

সম্পূর্ণ বিশদ বিবরণের জন্য টমের নিবন্ধটি দেখুন web.dev-এ স্থানীয় ফন্ট সহ উন্নত টাইপোগ্রাফি ব্যবহার করুন ।

AbortSignal.timeout() এর সাথে সহজ টাইমআউট

জাভাস্ক্রিপ্টে, AbortController এবং AbortSignal একটি অ্যাসিঙ্ক্রোনাস কল বাতিল করতে ব্যবহৃত হয়।

উদাহরণস্বরূপ, একটি fetch() অনুরোধ করার সময়, আপনি একটি AbortSignal তৈরি করতে পারেন এবং এটি fetch() এ পাস করতে পারেন। আপনি যদি fetch() ফিরে আসার আগে বাতিল করতে চান, তাহলে AbortSignal এর উদাহরণে abort() কে কল করুন। এখন অবধি, আপনি যদি এটি একটি নির্দিষ্ট সময়ের পরে বাতিল করতে চান তবে আপনাকে এটি একটি setTimeout() এ মোড়ানো দরকার।

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

সৌভাগ্যক্রমে, AbortSignal এ একটি নতুন timeout() স্ট্যাটিক পদ্ধতির সাথে এটি সহজ হয়ে গেছে। এটি একটি AbortSignal অবজেক্ট প্রদান করে যা প্রদত্ত সংখ্যক মিলিসেকেন্ডের পরে স্বয়ংক্রিয়ভাবে বাতিল হয়ে যায়। কোডের একটি মুষ্টিমেয় লাইন কি ব্যবহার করা হয়, এখন শুধু একটি.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout() Chrome 103-এ সমর্থিত, এবং ইতিমধ্যেই Firefox এবং Safari-এ রয়েছে।

এবং আরো!

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

  • avif ইমেজ ফাইল ফরম্যাট এখন ওয়েব শেয়ার দ্বারা শেয়ারযোগ্য
  • ক্রোমিয়াম এখন URL পরিবর্তনের পরপরই popstate ফায়ার করে Firefox-এর সাথে মেলে। ইভেন্টের ক্রম এখন: popstate তারপর উভয় প্ল্যাটফর্মে hashchange ।
  • এবং Element.isVisible() আপনাকে বলে যে একটি উপাদান দৃশ্যমান কি না।

আরও পড়া

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

সাবস্ক্রাইব

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

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