মডার্ন ওয়েব নির্দেশিকা ব্যবহার শুরু করা

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

ইনস্টল করা

মডার্ন ওয়েব নির্দেশিকা ইনস্টল করা এবং স্কিল সাপোর্ট করে এমন যেকোনও কোডিং এজেন্টের সাথে ব্যবহার করা যেতে পারে।

modern-web-guidance CLI (সাজেস্ট করা হয়েছে)

ইনস্টল করার জন্য Chrome টিমের তৈরি করা modern-web-guidance CLI ব্যবহার করার সাজেশন দেওয়া হয়। modern-web-guidance CLI-এর মাধ্যমে মডার্ন ওয়েব নির্দেশিকা ইনস্টল করলে অটোমেটিক আপডেট চালু হয়ে যাবে। আপনি modern-web-guidance CLI থেকে এইভাবে ইনস্টল করতে পারবেন:

npx modern-web-guidance@latest install

বিকল্প হিসেবে, আপনি Chrome এক্সটেনশন ডেভেলপ করলে, আমরা নিম্নলিখিত কমান্ড সাজেস্ট করি:

npx modern-web-guidance@latest install --choose

এটি আপনার পছন্দ অনুযায়ী স্কিল ইনস্টল করার জন্য একটি ইন্ট্যার‍্যাক্টিভ উইজার্ড চালায়।

আপনি যদি modern-web-guidance CLI ব্যবহার না করে মডার্ন ওয়েব নির্দেশিকা ইনস্টল করতে চান, তাহলে নিম্নলিখিত এজেন্ট-নির্দিষ্ট নির্দেশাবলী দেখুন। মনে রাখবেন, এইসব বিকল্পের বেশিরভাগই অটোমেটিক আপডেট করার সুবিধা দেয় না।

Antigravity

Antigravity ডাউনলোড করুন এবং ইনস্টলেশন ফ্লো চলাকালীন অথবা আপনার সেটিংস পৃষ্ঠায় কাস্টমাইজেশন বিকল্পের অধীনে Build with Google প্লাগ-ইন থেকে "modern-web-guidance" চালু করুন।

Antigravity CLI

agy plugin install https://github.com/GoogleChrome/modern-web-guidance

Gemini CLI

gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update

JetBrains WebStorm

আপনি স্কিল ম্যানেজার-এ মডার্ন ওয়েব নির্দেশিকা খুঁজে পাবেন, যা সেটিংস > AI Assistant > স্কিল-এর অধীনে উপলভ্য। কোনও স্কিলের বিবরণ পৃষ্ঠা খুলতে সেটি বেছে নিন। স্কিল ইনস্টল করতে, বর্তমান IDE ইনস্ট্যান্সে এটি প্রয়োগ করতে ইনস্টল করুন বোতামে ক্লিক করুন।

মনে রাখবেন: আপনি অন্য কোনও ইনস্টলেশন টার্গেট বেছে নিতে পারেন, যা ইনস্টল করুন মেনুর অধীনেও উপলভ্য।

GitHub CLI

gh skill install GoogleChrome/modern-web-guidance

npx skills

npx skills add GoogleChrome/modern-web-guidance

Claude Code

claude plugin install modern-web-guidance@claude-plugins-official

Claude Code CLI

Claude Code CLI-এর সাথে ব্যবহার করার জন্য মডার্ন ওয়েব নির্দেশিকা ইনস্টল করতে তিনটি ধাপ অনুসরণ করতে হয়:

১. মার্কেটপ্লেস যোগ করুন:

/plugin marketplace add GoogleChrome/modern-web-guidance

২. মার্কেটপ্লেস থেকে প্লাগ-ইন ইনস্টল করুন:

/plugin install modern-web-guidance@googlechrome

৩. প্লাগ-ইন আবার লোড করুন:

/reload-plugins

Codex

codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome

Copilot CLI

Copilot-এর সাথে ব্যবহার করার জন্য মডার্ন ওয়েব নির্দেশিকা ইনস্টল করতে দুটি ধাপ অনুসরণ করতে হয়:

১. মার্কেটপ্লেস যোগ করুন:

/plugin marketplace add GoogleChrome/modern-web-guidance

২. মার্কেটপ্লেস থেকে প্লাগ-ইন ইনস্টল করুন:

/plugin install modern-web-guidance@googlechrome

হাঁস

goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update

Grok

grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust

Kimi Code

/plugins install https://github.com/GoogleChrome/modern-web-guidance

ইনস্টল করার আগে এক্সপ্লোর করুন

কোনও কোয়েরি দিয়ে সার্চ করে বা আইডি দিয়ে আমাদের গাইড খুঁজে নিয়ে ইনস্টল করার আগে মডার্ন ওয়েব নির্দেশিকা গাইড লাইব্রেরি মূল্যায়ন করুন। এটি করতে, প্রম্পট ব্যবহার করে ইউজ কেস আইডি খুঁজতে CLI-এর search কমান্ড ব্যবহার করুন:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"

এটি আপনার টার্মিনালে একটি JSON অবজেক্ট আউটপুট করবে:

[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"ui-behaviors","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"ui-behaviors","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"ui-behaviors","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]

description ভ্যালু পড়ে, আপনি এমন id বেছে নিতে পারবেন যা আপনার লক্ষ্যকে সবচেয়ে ভালোভাবে প্রতিফলিত করে এবং retrieve কমান্ড ব্যবহার করুন:

npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

এই ক্ষেত্রে, animate-to-from-top-layer ব্যবহারের উদাহরণের জন্য গাইড মার্কডাউন টার্মিনালে দেখানো হবে। অন্যান্য গাইডের জন্য, animate-to-from-top-layer-এর পরিবর্তে যেকোনও সঠিক গাইড আইডি লিখুন।

মডার্ন ওয়েব নির্দেশিকা কেন ব্যবহার করবেন?

মডার্ন ওয়েব নির্দেশিকা তিনটি স্বতন্ত্র কারণে ওয়েব ডেভেলপারকে সহায়তা না করা AI মডেলের তুলনায় সুবিধা প্রদান করে:

1. AI কোডিং এজেন্ট সাধারণত আধুনিক ওয়েব ডেভেলপমেন্ট সমস্যার ক্ষেত্রে পুরনো, আউটডেটেড সমাধান ডিফল্ট হিসেবে ব্যবহার করে। এইসব সমাধানে প্রায়ই JavaScript থাকে যা এমন সমস্যার জন্য কার্যকারিতা প্রদান করে যেগুলি আধুনিক CSS এবং HTML API-এর মাধ্যমে আরও ভালোভাবে সমাধান করা যায়।
2. AI মডেলগুলি ঐতিহাসিকভাবে লেটেস্ট ওয়েব প্ল্যাটফর্ম ফিচার সম্পর্কে সচেতন নয়—বা ভুল তথ্য রয়েছে।
3. সবশেষে, AI মডেলগুলি প্রায়ই পুরনো সাজেশন দেয় যা প্রোজেক্টের প্রয়োজনীয়তা বা ব্রাউজার সাপোর্ট সংক্রান্ত মাপকাঠি বিবেচনা করে না—বরং কোনও নির্দিষ্ট প্রোজেক্টের বেসলাইন প্রয়োজনীয়তা অনুযায়ী নির্দেশিকা তৈরি করে।

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

মডার্ন ওয়েব নির্দেশিকায় কী আছে?

মডার্ন ওয়েব নির্দেশিকায় একাধিক মূল ডিসিপ্লিন জুড়ে ১০০টিরও বেশি ওয়েব ডেভেলপমেন্ট ব্যবহারের ক্ষেত্রে পেশাদার পদ্ধতি অন্তর্ভুক্ত রয়েছে। এটি আসলে একটি এজেন্ট স্কিল যা আপনার কোডিং এজেন্টকে নির্দেশ দেয় যে কীভাবে modern-web-guidance CLI কল করে আপনার ব্যবহারের ক্ষেত্রে সবচেয়ে ভালো নির্দেশিকা খুঁজে বের করে নিয়ে আসতে হবে।

• ব্যবহারকারীর অভিজ্ঞতা: ভিউ ট্রানজিশন, CSS scrollbar-color স্টাইলিং এবং এন্ট্রি ও এক্সিট অ্যানিমেশন।
• CSS: কন্টেনার কোয়েরি, আধুনিক কালার স্পেস যেমন oklch, CSS সাবগ্রিড লেআউট, text-wrap এবং টাইপোগ্রাফি লাইন-হাইট ট্রিমিং।
• পারফর্ম্যান্স: ইন্টার‍্যাকশন টু নেক্সট পেইন্ট (INP) ডায়াগনস্টিক, scheduler.yield বড় টাস্ক, ব্যাকগ্রাউন্ড টাস্ক শিডিউলিং ও ছবি লোড করার অগ্রাধিকারের জন্য।
• ফর্ম: অটো-সাইজিং ইনপুট ফিল্ড (field-sizing: content) এবং :user-invalid-এর সাথে সঠিক যাচাইকরণ স্টাইল।
• বিল্ট-ইন UI কম্পোনেন্ট: ডায়ালগের উপর সরাসরি কন্ট্রোল, টুলটিপের জন্য CSS অ্যাঙ্কর পজিশনিং এবং popover।
• অ্যাক্সেসিবিলিটি: অ্যাক্সেসযোগ্য ত্রুটি সংক্রান্ত ঘোষণা এবং কীবোর্ড ফোকাস ম্যানেজমেন্ট।
• বিল্ট-ইন AI: লোকাল, অন-ডিভাইস ক্লায়েন্ট মডেল (নেটিভ ভাষা শনাক্তকরণ, সারসংক্ষেপ ও অনুবাদ API) ব্যবহার করুন।
• পাসকী: পাসকী রেজিস্ট্রেশন, যাচাইকরণ ও ম্যানেজমেন্ট।

প্রতিটি বিভাগ থেকে কয়েকটি গাইড এখানে দেওয়া হল। সব গাইড দেখতে, আপনি গাইডের সম্পূর্ণ তালিকা দেখতে পারেন।

বেসলাইন

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

• সীমিত উপলভ্যতা মানে ফিচারটি ইন্টারঅপারেবল নয়।
• নতুন উপলভ্য মানে হল, ফিচারটি সম্প্রতি গত ৩০ মাসের মধ্যে ইন্টারঅপারেবল হয়েছে।
• ব্যাপকভাবে উপলভ্য মানে ফিচারটি অন্তত ৩০ মাস বা তার বেশি সময় ধরে ইন্টারঅপারেবল।

বেসলাইন হল ওয়েব ফিচার ইন্টারঅপারেবিলিটির সংজ্ঞা, এটি আপনার প্রোজেক্টের কনফিগার করা যায় এমন একটি দিক। আপনি বেসলাইন টার্গেট বেছে নিতে পারেন, তারপর আপনার AGENTS.md বা CLAUDE.md ফাইলে এটি যোগ করে এটি ব্যবহার করার জন্য আপনার প্রোজেক্ট কনফিগার করতে পারেন, যেমন:

This project's Baseline target is Baseline 2024.

<other project info...>

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

মডার্ন ওয়েব নির্দেশিকা ও ফিচার ফলব্যাক

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

কীভাবে নির্ভুলতা নিশ্চিত করা হয়?

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

এজেন্টের সঠিক আচরণ পরীক্ষা করার জন্য ইউজ কেস ইভ্যাল একটি অটোমেটেড QA হার্নেস রান করে, যেখানে Playwright একটি কেন্দ্রীয় ভূমিকা পালন করে:

1. প্রতিটি গাইডের জন্য, একটি Playwright স্ক্রিপ্ট তৈরি করা হয় যাতে গাইডটি প্রয়োগ করার বিবরণ অনুসরণ করা হয়েছে কিনা তা পরীক্ষা করা যায়—উদাহরণস্বরূপ, যেখানে প্রয়োজন সেখানে @media (prefers-reduced-motion: reduce) লক্ষ্য করা হয়েছে কিনা।
2. এইসব Playwright স্ক্রিপ্ট ক্রমাগত একটি "সঠিক" রেফারেন্স ডেমো ইমপ্লিমেন্টেশনের সাথে তুলনা করে, যা ১০০% পাস রেট আশা করে। অন্যদিকে, স্ক্রিপ্টগুলি ইচ্ছাকৃতভাবে ত্রুটিপূর্ণ বাস্তবায়নের বিরুদ্ধে চেক করে যা ০% পাসের হার আশা করে।
3. "সঠিক" এবং ইচ্ছাকৃতভাবে ত্রুটিপূর্ণ প্রয়োগের মধ্যে যেকোনও একটি বা উভয়ই যদি যথাক্রমে ১০০% এবং ০% পাস রেট তৈরি করতে ব্যর্থ হয়, তাহলে ১০০% ক্যালিব্রেশন অর্জন না হওয়া পর্যন্ত একটি জেনারেটর অটোমেটিক প্রসঙ্গ ব্যবহার করে আবার চেষ্টা করে।
4. সবশেষে, বেস অ্যাপ্লিকেশনে এন্ড-টু-এন্ড মূল্যায়ন প্রয়োগ করা হয়। এইসব মূল্যায়নের মধ্যে একটি হল আনগাইডেড, যা একটি কন্ট্রোল, কোনও টাস্ক সম্পূর্ণ করার জন্য মডার্ন ওয়েব নির্দেশিকা ব্যবহার না করে ডিফল্ট ট্রেনিং ডেটা ব্যবহার করে। অন্য একটি মূল্যায়ন (এক্সপেরিমেন্ট) মডার্ন ওয়েব নির্দেশিকা ব্যবহার করে একই টাস্ক সমাধান করে।

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

পরবর্তী ধাপ

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