আপনার প্রকল্পে বেসলাইন কিভাবে ব্যবহার করবেন

১. ভূমিকা

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

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

২. আপনার স্থানীয় মেশিনে ডেমোটি সেট আপ করুন।

প্রথমে, আপনার পছন্দের টার্মিনাল অ্যাপ্লিকেশনে যান, ডেমো রিপোজিটরিটি ক্লোন করুন এবং তারপরে প্রজেক্ট ডিরেক্টরিতে প্রবেশ করুন:

git clone git@github.com:GoogleChromeLabs/baseline-demos.git
cd baseline-demos/tooling/webpack

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

git checkout d3793f25

রিপোজিটরি ক্লোন করা হয়ে গেলে, এখন ডেমোটি চালু করা যাবে। এই প্রজেক্টটি নোড ভার্সনিং ম্যানেজ করার জন্য nvm ব্যবহার করে। আপনার সিস্টেমে যদি নোডের মোটামুটি সাম্প্রতিক কোনো ভার্সন গ্লোবালি ইনস্টল করা থাকে, তাহলে সম্ভবত আপনার এই ধাপটি সম্পন্ন করার প্রয়োজন নেই—কিন্তু আপনি যদি nvm ব্যবহার করেন, তাহলে নিম্নলিখিত কমান্ডগুলো চালান:

nvm install
nvm use

এখান থেকে প্রজেক্টের প্যাকেজগুলো ইনস্টল করুন:

npm install

আপনি যদি ডেমোটি দেখতে চান, তাহলে নিম্নলিখিত কমান্ডটি চালান:

npm start

এরপর http://localhost:8080- এ যান। ডেমোটি হলো কার্ডের একটি তালিকা, যা পেজের উপরের দিকে থাকা একটি ফর্ম ফিল্ড ব্যবহার করে ফিল্টার করা যায়। অ্যাপটিতে এমন সব ফিচারের মিশ্রণ ব্যবহার করা হয়েছে, যেগুলো একটি বেসলাইন থ্রেশহোল্ডে পৌঁছেছে।

ডেমোটি শেষ হলে, আপনার টার্মিনালে গিয়ে Ctrl+C চাপুন, যাতে আপনি যেকোনো সময় ডেমোটি চালানো বন্ধ করতে পারেন।

৩. প্রকল্পে বেসলাইন কীভাবে অন্তর্ভুক্ত করবেন

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

  • পরিবর্তনশীল লক্ষ্যমাত্রা , যা নতুন ব্রাউজার প্রকাশিত হওয়ার সাথে সাথে সময়ের সাথে আপডেট হয়:
    • বেসলাইন (নতুন উপলব্ধ) , যা বর্তমান থেকে ৩০ মাস আগের যেকোনো সময়ে মূল ব্রাউজার সেটে বাস্তবায়িত আন্তঃকার্যকরী বৈশিষ্ট্যগুলোকে সারিবদ্ধ করে।
    • বেসলাইন ব্যাপকভাবে উপলব্ধ , যার মধ্যে এমন আন্তঃকার্যকরী বৈশিষ্ট্য অন্তর্ভুক্ত রয়েছে যা ৩০ বা তারও বেশি মাস আগে মূল ব্রাউজার সেটে প্রয়োগ করা হয়েছে।
  • স্থির লক্ষ্যমাত্রা , যা একটি নির্দিষ্ট সময়ে ব্রাউজার সংস্করণকে নির্দেশ করে। এগুলোকে ২০১৬ থেকে বর্তমান বছর পর্যন্ত বছর হিসেবে প্রকাশ করা হয়।

শুরুতে, আমরা প্রজেক্টের জন্য মুভিং বেসলাইন ওয়াইডলি অ্যাভেইলেবল টার্গেটটি নির্বাচন করব। এটি করার জন্য, package.json খুলুন এবং নিম্নলিখিত কোডটি যোগ করুন:

"browserslist": "baseline widely available"

৪. বিভিন্ন বেসলাইন টার্গেট নির্বাচন করে কোড আউটপুটের পরিবর্তন পর্যবেক্ষণ করুন।

আপনি এইমাত্র ডেমো প্রজেক্টের টার্গেট হিসেবে ‘বেসলাইন ওয়াইডলি অ্যাভেইলেবল’ নির্বাচন করেছেন। এরপর, আপনাকে প্রজেক্টটি বিল্ড করতে হবে:

npm run build

প্রজেক্টের babel.config.js ফাইলে @babel/preset-env এর debug অপশনটি true হিসেবে নির্দিষ্ট করা থাকায় অনেক অতিরিক্ত আউটপুট দেখা যাচ্ছে। প্রথমে, বান্ডলার স্ট্যাটস-এ CSS এবং জাভাস্ক্রিপ্টের সাইজটি লক্ষ্য করুন:

assets by status 213 KiB [emitted]
  asset js/home.5f3c5480.js 208 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
  asset css/home.20db50ef.css 3.64 KiB [emitted] [immutable] (name: home) 1 related asset
  asset index.html 564 bytes [emitted]

এখানে উল্লেখ্য যে, জাভাস্ক্রিপ্ট বান্ডেলটি ২০৮ কিলোবাইট এবং সিএসএস ৩.৬৪ কিলোবাইট । যেহেতু এই প্রজেক্টটি জাভাস্ক্রিপ্ট পলিফিলের জন্য core-js এবং এমন সব সিএসএস প্রপার্টিতে ভেন্ডর-নির্দিষ্ট প্রিফিক্স প্রয়োগ করার জন্য autoprefixer ব্যবহার করে, যেগুলো এখনও সম্পূর্ণরূপে ইন্টারঅপারেবল নয়, তাই core-js এবং autoprefixer উভয়ই নির্বাচিত বেসলাইন ব্রাউজারলিস্ট কোয়েরি দ্বারা প্রভাবিত হয়।

আউটপুটে আরেকটি বিষয় লক্ষ্য করার মতো হলো, 'বেসলাইন ওয়াইডলি অ্যাভেইলেবল'-এর জন্য আপনার ব্রাউজারলিস্ট কোয়েরিটি কীভাবে একটি ব্রাউজারলিস্ট কোয়েরিতে রূপান্তরিত হয়। আপনার প্রোজেক্টে, এটি দেখতে অনেকটা এইরকম হবে:

Using targets: {
  "chrome": "108",
  "edge": "108",
  "firefox": "108",
  "ios": "16",
  "safari": "16"
}

বিল্ড আউটপুটে core-js দ্বারা ইনজেক্ট করা পলিফিলগুলো লক্ষ্য করুন: 

The corejs3 polyfill added the following polyfills:
  es.iterator.constructor { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
  es.iterator.filter { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
  es.iterator.map { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }

আপনার বেসলাইন টার্গেট পরিবর্তন করলে এই আউটপুটও পরিবর্তিত হতে পারে। ধরা যাক, আরও কঠোর SLA-এর কারণে আপনার অ্যাপ্লিকেশনটিকে অনেক পুরোনো ব্রাউজার সমর্থন করতে হয়। যদি আপনার ক্ষেত্রে এমনটা হয়, তাহলে আপনি সম্ভবত আরও রক্ষণশীল একটি টার্গেট বেছে নেবেন। আপনার package.json ফাইলে, Browserslist কনফিগারেশনটি পরিবর্তন করে নিম্নলিখিত বিষয়গুলো অন্তর্ভুক্ত করুন: 

"browserslist": "baseline 2016"

এটি বেসলাইন ২০১৬-কে টার্গেট হিসেবে নির্বাচন করে এবং একটি ব্রাউজারলিস্ট কোয়েরিতে রূপান্তরিত হবে। বিল্ডটি পুনরায় চালানোর পর আপনি টুলচেইন আউটপুটে পার্থক্যগুলো লক্ষ্য করতে পারবেন: 

npm run build

প্রথমে, বান্ডলার স্ট্যাটস-এ প্রজেক্টের জাভাস্ক্রিপ্ট এবং সিএসএস ফাইলের আকারের পরিবর্তনটি লক্ষ্য করুন: 

assets by status 237 KiB [emitted]
  asset js/home.b228612d.js 232 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
  asset css/home.0c3e4fd7.css 3.91 KiB [emitted] [immutable] (name: home) 1 related asset
  asset index.html 564 bytes [emitted]

আপনি লক্ষ্য করবেন যে জাভাস্ক্রিপ্ট বান্ডেলের আকার প্রায় ৩০ কিলোবাইট বৃদ্ধি পেয়েছে। প্রজেক্টের সিএসএস (CSS) সামান্যই বড় হয়েছে, কারণ autoprefixer ২০১৬ বেসলাইন টার্গেটের উপর ভিত্তি করে আরও ভেন্ডর প্রিফিক্স যুক্ত করেছে। এছাড়াও ব্রাউজারলিস্ট কোয়েরির পরিবর্তনটি লক্ষ্য করুন: 

Using targets: {
  "chrome": "53",
  "edge": "14",
  "firefox": "49",
  "ios": "10",
  "safari": "10"
}

বেসলাইন বহুল প্রচলিত টার্গেটের তুলনায়, এই ব্রাউজার সংস্করণগুলো অনেক, অনেক পুরোনো—এতটাই পুরোনো যে, এক্ষেত্রে টার্গেট করা এজ (Edge) সংস্করণটি ক্রোমিয়ামের (Chromium) আগের।

core-js দ্বারা ইনজেক্ট করা পলিফিলগুলোও পরিবর্তিত হবে, যা 'বেসলাইন ওয়াইডলি অ্যাভেইলেবল' লক্ষ্য হিসেবে নির্বাচিত হওয়ার সময়ের তুলনায় যথেষ্ট বেশি: 

The corejs3 polyfill added the following polyfills:
  es.array.filter { "edge":"14" }
  es.iterator.constructor { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.iterator.filter { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.object.to-string { "edge":"14", "firefox":"49" }
  es.array.includes { "firefox":"49" }
  es.string.includes { "edge":"14" }
  es.array.map { "firefox":"49" }
  es.iterator.map { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.symbol { "edge":"14", "firefox":"49" }
  es.symbol.description { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.array.iterator { "chrome":"53", "edge":"14", "firefox":"49" }
  web.dom-collections.iterator { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.array.push { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.regexp.to-string { "edge":"14" }
  es.array.from { "edge":"14", "firefox":"49" }
  es.regexp.exec { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.regexp.test { "edge":"14" }
  es.error.cause { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }

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

৫. ডাউনস্ট্রিম ব্রাউজারগুলিকে লক্ষ্য করা

পর্যালোচনা করলে দেখা যায়, বেসলাইন যে মূল ব্রাউজার সেটটিকে লক্ষ্য করে, তাতে নিম্নলিখিত ব্রাউজারগুলো অন্তর্ভুক্ত রয়েছে:

  • ক্রোম
  • অ্যান্ড্রয়েডে ক্রোম
  • ফায়ারফক্স
  • অ্যান্ড্রয়েডে ফায়ারফক্স
  • প্রান্ত
  • ম্যাকওএস-এ সাফারি
  • iOS-এ সাফারি

তবে, আপনি তথাকথিত "ডাউনস্ট্রিম ব্রাউজার"গুলোকে টার্গেট করতে পারেন। এই ব্রাউজারগুলোর ইঞ্জিন কোর ব্রাউজার সেটের কোনো একটি ব্রাউজার—বেশিরভাগ ক্ষেত্রেই ক্রোমিয়াম—থেকে উদ্ভূত। এর মধ্যে অপেরা, স্যামসাং ইন্টারনেট এবং অন্যান্য ব্রাউজার অন্তর্ভুক্ত। কোর ব্রাউজার সেটের ব্রাউজারগুলোর পাশাপাশি এই ব্রাউজারগুলোকেও টার্গেট করতে, যেকোনো বৈধ বেসলাইন ব্রাউজারলিস্ট কোয়েরিতে with downstream যোগ করুন: 

"browserslist": "baseline widely available with downstream"

এটি বেসলাইন ওয়াইডলি অ্যাভেইলেবল টার্গেট অনুসারে ডাউনস্ট্রিম ব্রাউজারগুলিকে টার্গেট করে। এটি কীভাবে একটি ব্রাউজারলিস্ট কোয়েরিতে রূপান্তরিত হয় তা দেখতে, প্রজেক্টটি রি-বিল্ড করুন: 

npm start

তারপর Browserslist কোয়েরিতে পরিবর্তনটি লক্ষ্য করুন: 

Using targets: {
  "android": "108",
  "chrome": "108",
  "edge": "108",
  "firefox": "108",
  "ios": "16",
  "opera": "94",
  "opera_mobile": "80",
  "safari": "16",
  "samsung": "21"
}

আপনি বছর অনুযায়ী ডাউনস্ট্রিম ব্রাউজারগুলোকেও টার্গেট করতে পারেন। উদাহরণস্বরূপ: 

"browserslist": "baseline 2016 with downstream"

এই কনফিগারেশনের ফলে আপনার ব্রাউজারলিস্ট কোয়েরি সেই অনুযায়ী পরিবর্তিত হবে: 

Using targets: {
  "android": "53",
  "chrome": "53",
  "edge": "14",
  "firefox": "49",
  "ios": "10",
  "opera": "40",
  "opera_mobile": "80",
  "safari": "10",
  "samsung": "6.2"
}

৬. লিন্টার এবং অন্যান্য সরঞ্জাম

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

বেসলাইনের জন্য লিন্টার সাপোর্টের একটি ভালো উদাহরণ হলো ESLint , যা তার CSS লিন্টিংয়ের অংশ হিসেবে @eslint/css ব্যবহার করে একটি use-baseline রুল প্রদান করে। এই রুলটি আপনাকে Baseline Newly, Baseline Widely available, অথবা Baseline years-এর যেকোনো একটিকে টার্গেট করতে দেয়। এছাড়াও কমিউনিটির @html-eslint/eslint-plugin প্যাকেজে একটি অনুরূপ রুল রয়েছে, যা আপনাকে আপনার eslint.config.js ফাইলে HTML ফিচারগুলোর জন্য একই কাজ করতে দেয়। 

export default [
  /* Omitted JS linting rules ... */
  // Lint CSS files for Baseline:
  {
    files: ["**/*.css"],
    plugins: {
      css
    },
    language: "css/css",
    rules: {
      "css/no-duplicate-imports": "error",
      // Lint CSS files to make sure they are using
      // only Baseline Widely available features:
      "css/use-baseline": ["warn", {
        available: "widely"
      }]
    },
  },
  // Lint HTML and JSX files for Baseline:
  {
    files: ["**/*.html"],
    ...html.configs["flat/recommended"],
    rules: {
      // Lint HTML files to make sure they are using
      // only Baseline Widely available features:
      "@html-eslint/use-baseline": ["warn", {
        available: "widely"
      }]
    }
  }
];

এই বিন্যাসে কয়েকটি বিষয় লক্ষণীয়:

  1. HTML এবং CSS উভয় লিন্টিং প্যাকেজই একটি use-baseline রুল ব্যবহার করে, এবং available: "widely" কনফিগারেশন অপশনটি ব্যবহার করে এটিকে Widely available হিসেবে সেট করা হয়।
  2. উভয় লিন্টিং প্যাকেজের ক্ষেত্রেই, লিন্টার ভায়োলেশনের জন্য লগ লেভেল "warn" এ সেট করা থাকে। বিল্ড হওয়া প্রতিরোধ করার জন্য একটি এরর কোডসহ বাদ পড়তে এটিকে "error" এ সেট করা যেতে পারে।

আপনি হয়তো আগেও npm run build চালানোর সময় লিন্টার আউটপুট দেখে থাকবেন, কিন্তু শুধুমাত্র লিন্টার আউটপুটটি দেখার জন্য, আপনি নিম্নলিখিত কমান্ডটি চালাতে পারেন: 

npm run lint

আপনি যে আউটপুটটি দেখবেন, তা প্রজেক্টটির CSS-এ থাকা বেশ কয়েকটি সতর্কবার্তা তুলে ধরে: 

/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/normalize.css
  222:3  warning  Property 'outline' is not a widely available baseline feature  css/use-baseline

/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/styles.css
  62:3   warning  Property 'outline' is not a widely available baseline feature                                css/use-baseline
  81:23  warning  Value 'subgrid' of property 'grid-template-rows' is not a widely available baseline feature  css/use-baseline

৭. উপসংহার

আপনার প্রোজেক্টে ব্রাউজারলিস্ট (Browserslist) দ্বারা প্রদত্ত বেসলাইন কোয়েরি (Baseline queries) ব্যবহার করার জন্য অন্তর্নিহিত বিল্ড টুলস এবং ব্রাউজারলিস্ট সম্পর্কে কিছুটা ধারণা থাকা প্রয়োজন, কিন্তু প্রোজেক্টে এগুলো স্থাপন করার প্রক্রিয়াটি বেশ সংক্ষিপ্ত। এটি ব্যবহারের প্রধান সুবিধা হলো, আপনাকে আর ভার্সন নম্বরের ভিত্তিতে সমর্থিত ব্রাউজারগুলো নিয়ে ভাবতে হবে না, বরং একটি বেসলাইন টার্গেটই আপনার হয়ে এই কঠিন কাজটি করে দেবে।

এছাড়াও, এই ডেমোটির একটি সংস্করণ রয়েছে যা রোলআপ-এ চলে , এবং এই কোডল্যাবটি মূলত সেই ডেমোটি ব্যবহার করেও অনুসরণ করা যেতে পারে।

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

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