ওয়েব-ফিচার প্যাকেজ দিয়ে বেসলাইন টুল তৈরি করুন

জেরেমি ওয়াগনার
রিক ভিসকোমি

প্রকাশিত: ১২ সেপ্টেম্বর, ২০২৫

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

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

web-features প্যাকেজ দিয়ে শুরু করুন

প্রথমে, আপনার প্রকল্পে নির্ভরতা হিসেবে প্যাকেজটি ইনস্টল করুন:

npm install web-features

একবার ইনস্টল হয়ে গেলে, web-features প্যাকেজ থেকে আপনার প্রকল্পে এক বা একাধিক নামযুক্ত রপ্তানি আমদানি করুন:

import { features, groups, browsers, snapshots } from 'web-features';

আপনার লক্ষ্যের উপর নির্ভর করে, আপনার এই সমস্ত রপ্তানির প্রয়োজন নাও হতে পারে। এই রপ্তানিগুলি নিম্নলিখিত তথ্য প্রদান করে:

  • features : বস্তুর একটি অ্যারে, যেখানে প্রতিটি বস্তু একটি ওয়েব বৈশিষ্ট্য উপস্থাপন করে। এটি হল সেই রপ্তানি যা আপনি প্রায়শই ব্যবহার করবেন।
  • browsers : ব্রাউজার বর্ণনাকারী বস্তুর একটি অ্যারে।
  • groups : বস্তুর একটি অ্যারে যা বৈশিষ্ট্যগুলির একটি লজিক্যাল গ্রুপিং সংজ্ঞায়িত করে। যদি আপনার লক্ষ্য ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলির একটি উপসেটকে লক্ষ্য করা হয়, যেমন CSS, JavaScript এবং আরও নির্দিষ্ট গ্রুপিংয়ের জন্য, তাহলে এগুলি কার্যকর।
  • snapshots : এতে সংশ্লিষ্ট জাভাস্ক্রিপ্ট বৈশিষ্ট্যগুলির ECMAScript সংস্করণ রয়েছে, যেমন ES2023, ES2022, এবং অন্যান্য ECMAScript সংস্করণ।

বেসলাইন টুলিং তৈরির জন্য বৈশিষ্ট্য রপ্তানি নিম্নলিখিত বৈশিষ্ট্যগুলি প্রদান করে:

  • id : বৈশিষ্ট্যটির জন্য অনন্য শনাক্তকারী। উদাহরণস্বরূপ, CSS গ্রিডের শনাক্তকারী হল "grid" । দ্রষ্টব্য : এটি ডেটা অবজেক্টের মধ্যে কোনও বৈশিষ্ট্য নয়। এটি অবজেক্ট কী।
  • compat_features : বৈশিষ্ট্যটিতে অন্তর্ভুক্ত পৃথক BCD কীগুলির একটি অ্যারে।
  • name : বৈশিষ্ট্যের নামের মানুষের পঠনযোগ্য স্ট্রিং, যেমন "Container Queries" ।
  • description : বৈশিষ্ট্যটির একটি সংক্ষিপ্ত বিবরণ।
  • group : যে গ্রুপে বৈশিষ্ট্যটি অন্তর্ভুক্ত। এটি groups এক্সপোর্টে পাওয়া গ্রুপ ডেটার সাথে সম্পর্কিত।
  • baseline : বৈশিষ্ট্যের বেসলাইন অবস্থা। এটি তিনটি মানের মধ্যে একটি হতে পারে:
    1. false : বৈশিষ্ট্যটির অবস্থা সীমিত উপলব্ধতা।
    2. "low ": বৈশিষ্ট্যটি হল Baseline নতুনভাবে উপলব্ধ।
    3. "high ": বৈশিষ্ট্যটি বেসলাইন ব্যাপকভাবে উপলব্ধ।
    4. baseline_high_date : বৈশিষ্ট্যটি Baseline Widely উপলব্ধ হওয়ার তারিখ। দ্রষ্টব্য : বৈশিষ্ট্যটি Baseline Widely উপলব্ধ না হলে এটি উপলব্ধ নয়।
    5. baseline_low_date : বৈশিষ্ট্যটি যে তারিখে পরিণত হয়েছে Baseline নতুনভাবে উপলব্ধ। দ্রষ্টব্য : এটি সীমিত উপলব্ধতা বৈশিষ্ট্যগুলির জন্য উপলব্ধ নয়।

নিম্নলিখিত উদাহরণটি CSS সাবগ্রিড বৈশিষ্ট্যের জন্য সম্পূর্ণ ডেটা অবজেক্ট:

"subgrid": {
  "caniuse": "css-subgrid",
  "compat_features": [
    "css.properties.grid-template-columns.subgrid",
    "css.properties.grid-template-rows.subgrid"
  ],
  "description": "The subgrid value for the grid-template-columns and grid-template-rows properties allows a grid item to inherit the grid definition of its parent grid container.",
  "description_html": "The <code>subgrid</code> value for the <code>grid-template-columns</code> and <code>grid-template-rows</code> properties allows a grid item to inherit the grid definition of its parent grid container.",
  "group": "grid",
  "name": "Subgrid",
  "spec": "https://drafts.csswg.org/css-grid-2/#subgrids",
  "status": {
    "baseline": "low",
    "baseline_low_date": "2023-09-15",
    "support": {
      "chrome": "117",
      "chrome_android": "117",
      "edge": "117",
      "firefox": "71",
      "firefox_android": "79",
      "safari": "16",
      "safari_ios": "16"
    }
  }
}

groups এক্সপোর্ট নিম্নলিখিত কাঠামো সহ বৈশিষ্ট্য গ্রুপিং সম্পর্কিত ডেটা সরবরাহ করে:

  • id : গ্রুপের জন্য অনন্য শনাক্তকারী। উদাহরণস্বরূপ, CSS বৈশিষ্ট্যগুলির একটি ID হল "css"। দ্রষ্টব্য: এটি গ্রুপ অবজেক্টের মধ্যে কোনও সম্পত্তি নয়। এটি নিজেই অবজেক্ট কী।
  • name : গ্রুপের মানুষ-পঠনযোগ্য নাম।
  • parent : গ্রুপের প্যারেন্ট গ্রুপের আইডি। যদি গ্রুপের প্যারেন্ট না থাকে তবে এটি পাওয়া যাবে না।

উদাহরণ

বেসলাইন টুলিং তৈরির জন্য প্রয়োজনীয় ডেটা পেতে web-features package কীভাবে ব্যবহার করবেন তা নিম্নলিখিত উদাহরণগুলিতে দেখানো হয়েছে।

একটি নির্দিষ্ট বৈশিষ্ট্যের জন্য বেসলাইন স্ট্যাটাসটি দেখুন। 

import { features } from 'web-features';

function getBaselineStatus (featureId) {
  return features[featureId]?.status.baseline;
}

এই উদাহরণটি web-features প্যাকেজের জন্য সবচেয়ে সরাসরি ব্যবহারের উদাহরণ উপস্থাপন করে, যেখানে আপনি status.baseline প্রপার্টিতে বেসলাইন ডেটা উপলব্ধ করার জন্য একটি বৈশিষ্ট্যের আইডি নির্দিষ্ট করেন। এই প্রপার্টি আপনাকে বলে যে কোনও বৈশিষ্ট্য সীমিত উপলব্ধতা, নতুনভাবে উপলব্ধ, নাকি ব্যাপকভাবে উপলব্ধ। পরবর্তী দুটি ক্ষেত্রে, আপনার কাছে সেই তারিখগুলিতেও অ্যাক্সেস থাকবে যা বর্ণনা করে যে বৈশিষ্ট্যটি কখন একটি নির্দিষ্ট বেসলাইন থ্রেশহোল্ডে পৌঁছেছে।

একটি নির্দিষ্ট BCD কী-এর জন্য বেসলাইন স্ট্যাটাসটি দেখুন।

BCD এর অর্থ হল browser-compat-data , MDN দ্বারা পরিচালিত একটি প্রকল্প যা ব্রাউজার জুড়ে বৈশিষ্ট্যগুলির জন্য সহায়তা ক্যাটালগ করার জন্য ব্যবহৃত হয়। একটি BCD কী একটি গ্রানুলার বৈশিষ্ট্যের সাথে সম্পর্কিত, যেমন একটি নির্দিষ্ট CSS সম্পত্তি মান বা স্পেক দ্বারা সংজ্ঞায়িত একটি আচরণগত উপ-বৈশিষ্ট্য।

web-features প্রজেক্ট প্রতিটি ফিচারের জন্য compat_features অ্যারেতে সম্পর্কিত BCD কীগুলিকে গ্রুপ করে। কখনও কখনও আপনার পুরো ফিচারের জন্য সামগ্রিক বেসলাইন স্ট্যাটাসের পরিবর্তে একটি BCD কী-এর বেসলাইন স্ট্যাটাস প্রয়োজন হয়। উদাহরণস্বরূপ, যদি আপনি একটি CSS লিন্টার তৈরি করেন এবং জানতে চান যে একটি প্রোপার্টি-ভ্যালু পেয়ার প্রধান ব্রাউজারগুলিতে সামঞ্জস্যপূর্ণ কিনা, তাহলে ফিচার-লেভেল ডেটা খুব মোটা হয়। এটি ঘটে কারণ প্যাকেজটি প্রতিটি ফিচারকে তার সমস্ত উপাদান BCD কী-এর উপর একত্রিত করে এবং কিছু কী অন্যদের তুলনায় ভালো ব্রাউজার সাপোর্ট করে।

একটি BCD কী-এর বেসলাইন স্ট্যাটাস দেখতে, feature অবজেক্টের status.by_compat_key প্রোপার্টিটি পরীক্ষা করুন ( web-features 3.6.0 এবং পরবর্তী সংস্করণে উপলব্ধ):

import { features } from 'web-features';

function getBaselineStatus (featureId, bcdKey) {
  return features[featureId]?.status.by_compat_key[bcdKey];
}

উদাহরণস্বরূপ, getBaselineStatus('outline', 'css.properties.outline') এর আউটপুট হল:

{
  "baseline": "low",
  "baseline_low_date": "2023-03-27",
  "support": {
    "chrome": "94",
    "chrome_android": "94",
    "edge": "94",
    "firefox": "88",
    "firefox_android": "88",
    "safari": "16.4",
    "safari_ios": "16.4"
  }
}

বৈশিষ্ট্যগুলিকে তাদের বেসলাইন স্ট্যাটাস অনুসারে সাজান

এই উদাহরণটি features অবজেক্টের প্রতিটি বৈশিষ্ট্যের মাধ্যমে পুনরাবৃত্তি করে এবং প্রতিটিকে তার বেসলাইন স্ট্যাটাস অনুসারে একটি অ্যারেতে সাজায়।

import { features } from "web-features";

const webFeatures = Object.values(features);

const widelyAvailable = webFeatures.filter(feature => {
  return feature.status.baseline === 'high';
});

const newlyAvailable = webFeatures.filter(feature => {
  return feature.status.baseline === 'low';
});

const limitedAvailability = webFeatures.filter(feature => {
  return feature.status.baseline === false;
});

এই উদাহরণটি আপনার টুলিং-এ status.baseline প্রপার্টি কীভাবে ব্যবহার করবেন তা ব্যাখ্যা করে। উদাহরণস্বরূপ, আপনি একটি ওয়েব অ্যাপ্লিকেশনে এই পদ্ধতিটি ব্যবহার করে সমস্ত ওয়েব বৈশিষ্ট্যের তালিকা তাদের বেসলাইন স্ট্যাটাস অনুসারে প্রদর্শন করতে পারেন।

একটি গ্রুপের মধ্যে সমস্ত বৈশিষ্ট্য খুঁজুন

এখন পর্যন্ত, দেখানো সমস্ত উদাহরণে features রপ্তানি ব্যবহার করা হয়েছে, কিন্তু groups রপ্তানি সমস্ত বৈশিষ্ট্যকে গ্রুপের মধ্যে যুক্তিসঙ্গতভাবে সংগঠিত করে। এর অর্থ হল, উদাহরণস্বরূপ, আপনি ভিউ ট্রানজিশনের অংশ এমন সমস্ত বৈশিষ্ট্য খুঁজে পেতে পারেন:

import { features, groups } from 'web-features';

const groupKeys = Object.keys(groups);
const featuresData = Object.values(features);

const viewTransitionsGroup = groupKeys.find(groupKey => {
  return groupKey === 'view-transitions';
});

const viewTransitionsFeatures = featuresData.filter(feature => {
  return feature.group === viewTransitionsGroup;
});

features এবং group রপ্তানির মধ্যে ছেদ আপনাকে ওয়েব বৈশিষ্ট্যগুলির জন্য আপনার অনুসন্ধানকে তারা যে গোষ্ঠীর অন্তর্ভুক্ত তার ভিত্তিতে সংকুচিত করতে দেয়।

সবকিছু একসাথে করা

আপনি লুকআপগুলি ব্যবহার করে দরকারী টুল তৈরি করতে পারেন, উদাহরণস্বরূপ একটি CSS লিন্টার তৈরি করতে।

CSS লিন্টারগুলি at-rules, pseudo-elements, properties, এবং property-value pairs মূল্যায়ন করে। আপনার Baseline linter এর জন্য, প্রতিটি টোকেনের অবস্থা তার BCD কী দ্বারা দেখুন, এর প্যারেন্ট বৈশিষ্ট্য দ্বারা নয়।

CSSTree এর মতো একটি পার্সার CSS কে টোকেনাইজ করে, একটি স্টাইলশিটকে একটি অ্যাবস্ট্রাক্ট সিনট্যাক্স ট্রি (AST) তে ভেঙে দেয়। নিম্নলিখিত উদাহরণে একটি CSS নিয়ম দেখানো হয়েছে যা একটি জেনেরিক ক্লাস নির্বাচক এবং একটি স্টাইল ঘোষণা ব্যবহার করে:

.foo {
  word-break: auto-phrase;
}

AST দেখতে এরকম কিছু হবে: 

{
  "type": "StyleSheet",
  "children": [
    {
      "type": "Rule",
      "prelude": {
        "type": "SelectorList",
        "children": [
          {
            "type": "Selector",
            "children": [
              {
                "type": "ClassSelector",
                "name": "foo"
              }
            ]
          }
        ]
      },
      "block": {
        "type": "Block",
        "children": [
          {
            "type": "Declaration",
            "important": false,
            "property": "word-break",
            "value": {
              "type": "Value",
              "children": [
                {
                  "type": "Identifier",
                  "name": "auto-phrase"
                }
              ]
            }
          }
        ]
      }
    }
  ]
}

AST-এর মধ্য দিয়ে হেঁটে যাওয়ার সময় যখন আপনি কোনও সম্পত্তি ঘোষণা খুঁজে পান, তখন সেই সম্পত্তির নামটি তার সংশ্লিষ্ট BCD কী-এর সাথে ম্যাপ করুন যাতে এর বেসলাইন স্ট্যাটাস পরীক্ষা করা যায়। BCD css.properties অবজেক্টের অধীনে CSS বৈশিষ্ট্যগুলিকে শ্রেণীবদ্ধ করে, তাই সংশ্লিষ্ট BCD কী হল css.properties.word-break ।

তারপর, সেই BCD কী-এর সাথে সম্পর্কিত বৈশিষ্ট্যটি খুঁজুন এবং এর স্থিতি দেখুন। 

// Assuming we only know the BCD key and not the feature ID.
const bcdKey = 'css.properties.word-break';
const [featureId, feature] = Object.entries(features).find(([id, feature]) =>
  feature.compat_features?.includes(bcdKey)
) || [];
const status = feature?.status.by_compat_key[bcdKey];

word-break প্রোপার্টির বেসলাইন স্ট্যাটাস নিম্নরূপ: 

{
  "baseline": "high",
  "baseline_high_date": "2018-03-30",
  "baseline_low_date": "2015-09-30",
  "support": {
    "chrome": "44",
    "chrome_android": "44",
    "edge": "12",
    "firefox": "15",
    "firefox_android": "15",
    "safari": "9",
    "safari_ios": "9"
  }
}

"high" বেসলাইন স্ট্যাটাস নির্দেশ করে যে সম্পত্তিটি ব্যাপকভাবে উপলব্ধ, তাই আপনার লিন্টারকে কোনও সতর্কতা জারি করার প্রয়োজন নেই। এরপর, সম্পত্তির মূল্য পরীক্ষা করুন।

AST দেখায় যে এই প্রোপার্টির মান হল auto-phrase । সংশ্লিষ্ট BCD কী পেতে, প্যারেন্ট প্রোপার্টির BCD কীতে মানটি যোগ করুন: css.properties.word-break.auto-phrase ।

এই ক্ষেত্রে, web-features দেখায় যে word-break: auto-phrase property-value জোড়ার অবস্থা Baseline নয়: 

{
  "baseline": false,
  "support": {
    "chrome": "119",
    "chrome_android": "119",
    "edge": "119"
  }
}

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

বাস্তব উদাহরণ

পূর্ববর্তী উদাহরণগুলিতে web-features প্যাকেজের মৌলিক ব্যবহারগুলি দেখানো হয়েছে। ইতিমধ্যেই বেশ কয়েকটি সরঞ্জাম এই ডেটা ব্যবহার করে। উদাহরণস্বরূপ:

বেসলাইন টুল তৈরিতে এই ডেটা সোর্স কীভাবে ব্যবহার করা যেতে পারে তার আরও উদাহরণ রয়েছে—এবং আমরা আশা করি আপনার প্রকল্পটিও তাদের মধ্যে একটি হয়ে উঠবে!