বেসলাইন টুলিংয়ের জন্য কীভাবে ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ডে প্রশ্ন করবেন

Jeremy Wagner

প্রকাশিত: ৪ মার্চ, ২০২৫

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

সৌভাগ্যবশত, ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ড ব্যবহার করে আপনি জানতে পারবেন কোন ফিচারগুলো বেসলাইন নিউলি বা ওয়াইডলি অ্যাভেইলেবল। এই ড্যাশবোর্ডটি web-features npm প্যাকেজ দ্বারা চালিত। এছাড়াও, আপনার টুলিং ওয়ার্কফ্লোতে বেসলাইন ডেটা ইন্টিগ্রেট করার জন্য আপনি এর HTTP API ব্যবহার করে এই তথ্য অ্যাক্সেস করতে পারেন, এবং এই গাইডে তা কীভাবে করতে হয় তা ব্যাখ্যা করা হয়েছে।

ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ডের প্রাসঙ্গিক বেসলাইন কোয়েরি ব্যাকরণ

ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ড আপনাকে ওয়েব ফিচার সাপোর্ট অনুসন্ধান করতে সাহায্য করার জন্য একটি নির্দিষ্ট কোয়েরি গ্রামার ব্যবহার করে। আপনি এই কোয়েরি গ্রামারটি সরাসরি ড্যাশবোর্ডেই ব্যবহার করতে পারেন।

পৃষ্ঠার শীর্ষে থাকা সার্চ বক্সে টাইপ করার সাথে সাথে, আপনার সামনে বেশ কিছু কোয়েরি প্যারামিটার উপস্থাপন করা হবে যা আপনি ওয়েব ফিচারগুলো ফিল্টার করতে ব্যবহার করতে পারেন।

কোয়েরি ব্যাকরণটি ভাবপ্রকাশক, যা আপনাকে ড্যাশবোর্ডে প্রদর্শিত ওয়েব ফিচারগুলো ফিল্টার করার ক্ষেত্রে অনেক নমনীয়তা দেয়। নিম্নলিখিত স্ক্রিনশটটি দেখায় কিভাবে একটি নির্দিষ্ট ফিচারে অনুসন্ধানকে সীমাবদ্ধ করতে id কোয়েরি প্যারামিটারটি ব্যবহার করা যেতে পারে:

কোয়েরি ব্যাকরণ নথিভুক্ত করা আছে—কিন্তু ফিচারগুলির বেসলাইন ডেটা খুঁজে বের করার জন্য এর সবকিছু জানার প্রয়োজন নেই । আপনি ড্যাশবোর্ডে এই বিকল্পগুলির যেকোনোটি ব্যবহার করতে পারেন, তবে এখানে কয়েকটি বিশেষভাবে দরকারি বিকল্প দেওয়া হলো:

• baseline_status : তিনটি নির্দিষ্ট মানের ভিত্তিতে ফিচার ফিল্টার করতে এই প্যারামিটারটি ব্যবহার করুন:
  • limited : যেসব ফিচারের ব্রাউজার সাপোর্ট সীমিত, সেগুলো ফেরত দেয়। আপনি যদি এই মান দিয়ে ফিল্টার করেন, তাহলে শুধু সেই ফিচারগুলোই পাবেন যেগুলো কোনো বেসলাইন স্ট্যাটাসে পৌঁছায়নি।
  • newly : বেসলাইন হিসেবে নতুনভাবে উপলব্ধ বৈশিষ্ট্যগুলো ফেরত দেয়।
  • widely : এমন ফিচারগুলো ফেরত দেয় যা বেসলাইন হিসেবে ব্যাপকভাবে উপলব্ধ, অর্থাৎ যে ফিচারগুলো কমপক্ষে ৩০ মাস ধরে বেসলাইনে রয়েছে। এই ফিচারগুলো আপনি ব্রাউজার সাপোর্ট বা পলিফিল নিয়ে চিন্তা না করেই ব্যবহার করতে পারবেন।
• baseline_date : ফিচারগুলো কখন বেসলাইনে পৌঁছেছে তার একটি ঊর্ধ্ব ও নিম্ন সীমা নির্দিষ্ট করতে YYYY-MM-DD..YYYY-MM-DD ফরম্যাট ব্যবহার করে। উদাহরণস্বরূপ, এক বছরের মধ্যে সমস্ত ফিচার খুঁজে পেতে, 2024-01-01..2025-01-01 এর মতো একটি মান ব্যবহার করুন।
• id : কোনো নির্দিষ্ট ফিচারের শনাক্তকারী। এই শনাক্তকারীগুলো web-features প্যাকেজে সংজ্ঞায়িত করা থাকে। উদাহরণস্বরূপ, Promise.try() এর ফিচার এন্ট্রিটি promise-try আইডি-র সাথে ম্যাপ করা থাকে।
• group : ফিচারগুলোর জন্য তালিকাভুক্ত অনেকগুলো গ্রুপের নামের মধ্যে একটি। আপনি যদি শুধুমাত্র ওয়েব প্ল্যাটফর্মের ফিচারগুলোর একটি নির্দিষ্ট উপসেটের জন্য কোয়েরি করতে চান, তাহলে এই মানদণ্ডটি বেশ কার্যকর। উদাহরণস্বরূপ, আপনি css ভ্যালু দিয়ে CSS ফিচারগুলোর একটি তালিকা ফিল্টার করতে পারেন।

ড্যাশবোর্ড ফ্রন্টএন্ডটি নিঃসন্দেহে কার্যকরী হলেও, এটি এমন একটি HTTP API-এর উপর ভিত্তি করে তৈরি যা আপনি সরাসরি কোয়েরি করতে পারেন। উদাহরণস্বরূপ, এখানে একটি এন্ডপয়েন্ট দেওয়া হলো যা নতুনভাবে উপলব্ধ সমস্ত বেসলাইন ফিচারগুলো খুঁজে বের করে:

https://api.webstatus.dev/v1/features?q=baseline_status:newly

JSON প্রতিক্রিয়া কাঠামো

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

• baseline : কোনো নির্দিষ্ট ফিচারের বেসলাইন স্ট্যাটাস সম্পর্কে সাধারণ তথ্য থাকে, যার নিম্নলিখিত সাবফিল্ডগুলো রয়েছে:
  • status : কোনো ফিচারের বেসলাইন স্ট্যাটাস। এর ভ্যালু হতে পারে limited , newly বা widely । দ্রষ্টব্য: যদি status ভ্যালু ' limited হয়, তবে এটিই হবে একমাত্র সাবফিল্ড।
  • low_date : এটি সেই তারিখ নির্দেশ করে যেদিন প্রদত্ত ফিচারটি বেসলাইন হিসেবে নতুনভাবে উপলব্ধ হয়েছে। এই ফিল্ডটি শুধুমাত্র তখনই দেখা যায় যখন status newly বা widely হয়।
  • high_date : এটি সেই তারিখ নির্দেশ করে যেদিন প্রদত্ত ফিচারটি বেসলাইন ওয়াইডলি অ্যাভেইলেবল (Baseline Widely available) হয়েছিল। এই ফিল্ডটি শুধুমাত্র তখনই উপলব্ধ হয় যখন status widely থাকে।
• feature_id : ফিচারটির আইডি। উদাহরণস্বরূপ, CSS গ্রিডের জন্য এর মান হবে "grid" ।
• name : ফিচারটির ফরম্যাট করা নাম। কিছু ক্ষেত্রে এটি feature_id এর মতো হতে পারে, কিন্তু সাধারণত ভিন্ন হয়। উদাহরণস্বরূপ, Promise.try() -এর জন্য feature_id মান হলো "promise-try" , যেখানে একই ফিচারের জন্য name ফিল্ডটি হলো "Promise.try()" ।
• spec : এই ফিল্ডটিতে links নামে একটি সাবফিল্ড রয়েছে, যা স্পেসিফিকেশন এবং অন্যান্য রিসোর্সের লিঙ্কের একটি অ্যারে।

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

উদাহরণ কোয়েরি

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

একটি নির্দিষ্ট বৈশিষ্ট্যের জন্য ডেটা পান

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

// Specify and encode the query for a query string:
const query = encodeURIComponent('id:grid');

// Construct the URL:
let url = `https://api.webstatus.dev/v1/features?q=${query}`;

// Fetch the resource:
const response = await fetch(url);

if (response.ok) {
  // Convert the response to JSON:
  const { data } = await response.json();

  // Log data for each feature to the:
  console.log(data);
}

এক্ষেত্রে, আমরা CSS গ্রিড ফিচারের সাপোর্টের তথ্য পাওয়ার জন্য grid ভ্যালু সহ একটি id প্যারামিটার নির্দিষ্ট করি, যা বেসলাইন ওয়াইডলি অ্যাভেইলেবল (Baseline Widely available) হিসেবে উপলব্ধ। উদাহরণস্বরূপ, ফিচারটির ব্যবহার শনাক্ত করতে এবং ব্যবহারকারীদের জানাতে যে তারা সাপোর্ট নিয়ে চিন্তা না করেই সমস্ত আধুনিক ব্রাউজার ইঞ্জিনে এটি ব্যবহার করতে পারবেন, আপনি এই তথ্যটি ব্যবহার করতে পারেন।

তবে, এটি কেবল শুরু, এবং HTTP API আপনাকে একটিমাত্র বৈশিষ্ট্যের জন্য ডেটা সংগ্রহের চেয়েও আরও অনেক বেশি কিছু করতে পারে।

বেসলাইনের সমস্ত নতুন এবং বহুল উপলব্ধ বৈশিষ্ট্যগুলি পান

ধরুন, আপনি এমন একটি স্ক্রিপ্ট চান যা ‘বেসলাইন নিউলি’ অথবা ‘ওয়াইডলি অ্যাভেইলেবল’—এই সমস্ত ফিচার সংগ্রহ করবে। এটি কাজে আসতে পারে, উদাহরণস্বরূপ, যদি আপনার এমন একটি স্ক্রিপ্ট থাকে যা একটি নির্দিষ্ট বিরতিতে চলে এবং আপনি এমন একটি হালনাগাদ তালিকা পেতে চান যা ফিচারগুলো ‘লিমিটেড অ্যাভেইলেবিলিটি’ থেকে ‘বেসলাইন’ স্ট্যাটাসে আসার সাথে সাথে পরিবর্তিত হয়।

const query = encodeURIComponent('-baseline_status:limited');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

এই কোয়েরিটি সমস্ত বেসলাইন নিউলি এবং ওয়াইডলি অ্যাভেইলেবল ফিচারগুলো পায় না, বরং শুধুমাত্র প্রথম ১০০টি পায়। যদি প্রাপ্ত ফিচারের সংখ্যা এর চেয়ে বেশি হয়, তাহলে JSON রেসপন্সের টপ লেভেলে একটি metadata ফিল্ড থাকে, যাতে সর্বোচ্চ দুটি সাবফিল্ড থাকতে পারে:

• next_page_token : একটি স্ট্রিং যাতে একটি টোকেন থাকে, যা আপনি ব্যাকএন্ডে GET অনুরোধের কোয়েরি স্ট্রিং-এ যোগ করতে পারেন। যখন আপনি এটি ব্যবহার করে webstatus.dev ব্যাকএন্ড থেকে ডেটা পুনরায় ফেচ করবেন, তখন এটি মিলে যাওয়া ফিচারগুলোর পরবর্তী ব্যাচ ফেরত দেবে। দ্রষ্টব্য: যদি বর্তমান কোয়েরিতে ১০০টির কম ফলাফল আসে, অথবা যদি বর্তমান কোয়েরিটি ফলাফল সেটের শেষে থাকে, তাহলে এই ফিল্ডটি অনুপলব্ধ থাকবে।
• total : একটি পূর্ণসংখ্যা যা বর্তমান কোয়েরির জন্য উপলব্ধ মোট ফিচারের সংখ্যা নির্দেশ করে।

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

async function queryWebStatusDashboard (query, token) {
  const urlBase = 'https://api.webstatus.dev/v1/features?q=';
  let queryUrl = `${urlBase}${encodeURIComponent(query)}`;

  if (token) {
    queryUrl += `&page_token=${encodeURIComponent(token)}`;
  }

  const response = await fetch(queryUrl);

  if (response.ok) {
    const { data, metadata } = await response.json();

    console.log(data);

    // See if there's a page token in this query:
    if ('next_page_token' in metadata) {
      const { next_page_token } = metadata;
      queryWebStatusDashboard(query, next_page_token);
    } else {
      console.log('All results collected');
    }
  }
}

// Make the first query, and if there are more
// than 100 entries, the function will run
// recursively until all features are fetched
queryWebStatusDashboard('-baseline_status:limited');

বেসলাইনের নতুন উপলব্ধ সমস্ত CSS ফিচার পান

ধরুন, আপনি CSS-এর উপর বিশেষ দক্ষতা সম্পন্ন একজন ইঞ্জিনিয়ার, এবং আপনি জানতে আগ্রহী যে কোন CSS ফিচারগুলো বেসলাইন হিসেবে নতুন উপলব্ধ ফিচারে পরিণত হয়। এটি group কোয়েরি ভ্যালু ব্যবহারের একটি উপযুক্ত ক্ষেত্র, এবং সেইসাথে webstatus.dev কোয়েরি করার সময় AND অপারেটর কীভাবে ব্যবহার করতে হয়, তারও একটি উদাহরণ।

const query = encodeURIComponent('baseline_status:newly AND group:css');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

group এর জন্য css এর একটি মান নির্দিষ্ট করার সময়, আপনি সমস্ত Baseline Newly available ফিচারগুলির জন্য কোয়েরি করতে পারেন। যদি আপনি এর পরিধি বাড়িয়ে Baseline Widely available CSS ফিচারগুলিকেও অন্তর্ভুক্ত করতে চান, তাহলে আপনি শেষ কোড স্যাম্পলের পদ্ধতিটি ব্যবহার করতে পারেন এবং ' -baseline_status:limited AND group:css' মতো একটি কোয়েরির সাথে নেগেশন অপারেটর ব্যবহার করতে পারেন।

আরেকটি ফিল্ড যা আপনি কোয়েরি করতে পারেন তা হলো snapshot ফিল্ড, যা ECMAScript ফিচারের একটি নির্দিষ্ট সেটের অংশ এমন জাভাস্ক্রিপ্ট ফিচারগুলো খুঁজে বের করার জন্য উপযোগী। নিম্নলিখিত কোডটি ecmascript-2023 স্ন্যাপশটের অংশ এমন সমস্ত বেসলাইন নতুন উপলব্ধ ফিচারগুলো পরীক্ষা করে:

const query = encodeURIComponent('baseline_status:newly AND snapshot:ecmascript-2023');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

একটি নির্দিষ্ট তারিখের পরিসরের মধ্যে সমস্ত বেসলাইন বৈশিষ্ট্য পান।

একটি নির্দিষ্ট তারিখের সীমার মধ্যে বেসলাইন হওয়া সমস্ত ফিচার খুঁজে বের করার জন্য baseline_date ফিল্ডটি কোয়েরি করা যেতে পারে:

const query = encodeURIComponent('baseline_status:widely AND baseline_date:2022-01-01..2022-12-31 AND group:css');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

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

উপসংহার

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

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