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

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

ইনস্টলেশন

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

modern-web-guidance CLI (প্রস্তাবিত)

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

npx modern-web-guidance@latest install

ঐচ্ছিকভাবে, আপনি যদি ক্রোম এক্সটেনশন তৈরি করেন, তাহলে আমরা নিম্নলিখিত কমান্ডটি ব্যবহারের পরামর্শ দিই:

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

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

আপনি যদি modern-web-guidance CLI ব্যবহার না করেই Modern Web Guidance স্কিলগুলো পেতে চান, তাহলে আপনার পছন্দের এজেন্টের জন্য সেগুলো কীভাবে ইনস্টল করবেন তা জানতে পড়তে থাকুন।

অ্যান্টিগ্র্যাভিটি

Antigravity ডাউনলোড করুন এবং ইনস্টলেশন চলাকালীন, অথবা আপনার সেটিংস পৃষ্ঠার কাস্টমাইজেশন বিভাগের অধীনে বিল্ড উইথ গুগল প্লাগইনস থেকে 'মডার্ন-ওয়েব-গাইডেন্স' সক্রিয় করুন।

অ্যান্টিগ্র্যাভিটি সিএলআই

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

জেমিনি সিএলআই

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

জেটব্রেইনস ওয়েবস্টর্ম

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

গিটহাব সিএলআই

gh skill install GoogleChrome/modern-web-guidance

npx skills

npx skills add GoogleChrome/modern-web-guidance

ক্লদ কোড

Claude Code-এর সাথে ব্যবহারের জন্য Modern Web Guidance ইনস্টল করতে তিনটি ধাপ অনুসরণ করতে হয়:

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

/plugin marketplace add GoogleChrome/modern-web-guidance

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

/plugin install modern-web-guidance@googlechrome

৩. প্লাগইনগুলো পুনরায় লোড করুন:

/reload-plugins

কোপাইলট সিএলআই

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

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

/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

ইনস্টলেশনের আগে যাচাই করে নিন

ইনস্টলেশনের আগে, একটি কোয়েরি দিয়ে অনুসন্ধান করে অথবা আইডি দ্বারা আমাদের গাইডগুলি পুনরুদ্ধার করে মডার্ন ওয়েব গাইডেন্স স্কিল গাইড লাইব্রেরিটি মূল্যায়ন করুন। এটি করার জন্য, একটি প্রম্পট ব্যবহার করে ইউজ কেস আইডি খুঁজে বের করতে 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":"user-experience","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":"user-experience","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":"user-experience","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 পরিবর্তে যেকোনো বৈধ ইউজ কেস আইডি ব্যবহার করুন।

কেন মডার্ন ওয়েব গাইডেন্স ব্যবহার করবেন?

তিনটি স্বতন্ত্র কারণে আধুনিক ওয়েব গাইডেন্স দক্ষতা, সহায়তাবিহীন এআই মডেলের তুলনায় ওয়েব ডেভেলপারকে সুবিধা প্রদান করে:

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

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

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

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

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

এগুলো প্রতিটি ক্ষেত্র থেকে কয়েকটি ব্যবহারের উদাহরণ। সমস্ত ব্যবহারের উদাহরণ দেখতে, আপনি ব্যবহারের উদাহরণগুলোর সম্পূর্ণ তালিকাটি দেখতে পারেন।

বেসলাইন

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

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

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

This project's Baseline target is Baseline 2024.

<other project info...>

আধুনিক ওয়েব নির্দেশিকা এবং বৈশিষ্ট্য ফলব্যাক

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

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

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

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

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

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

পরবর্তী পদক্ষেপ

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