ICYMI: মডার্ন ওয়েব নির্দেশিকা এখন স্টেবল ভার্সনে উপলভ্য

Matthias Rohmer

Alexandra Klepper

প্রকাশিত: ১৩ নভেম্বর, ২০২৬

আপনি যদি এই সাইটের নিয়মিত পাঠক হন, X, LinkedIn বা Bluesky-তে Chrome for Developers ফলো করেন অথবা এই সপ্তাহে DevTools-এ নতুন কী আছে প্যানেল খুলে থাকেন, তাহলে আপনি প্রায় নিশ্চিতভাবেই খবরটি শুনেছেন। তবে যারা শিপিংয়ের জন্য মাথা নিচু করে ছিলেন: মডার্ন ওয়েব নির্দেশিকা এখন স্টেবল ভার্সন ১.০ হিসেবে উপলভ্য।

Google I/O-তে আগাম প্রিভিউ শেয়ার করার পর থেকে, আমরা অনেক উন্নতি করেছি এবং Firefox ও Edge-এর সাথে ক্রস-ব্রাউজার সহযোগিতার মাধ্যমে মডার্ন ওয়েব নির্দেশিকাকে আরও উন্নত করেছি। এই সপ্তাহে আমরা নিবন্ধ, কেস স্টাডি, ভিডিও এবং ডকুমেন্ট জুড়ে সেগুলি আনপ্যাক করেছি।

সংক্ষেপে

ফ্রন্টিয়ার মডেলগুলি প্রায়শই ওয়েব ডেভেলপমেন্টের জন্য ডিফল্ট হিসেবে পুরনো প্যাটার্ন ব্যবহার করে। যেমন, তারা CSS স্ক্রল-চালিত অ্যানিমেশনের চেয়ে জাভাস্ক্রিপ্ট অ্যানিমেশন লাইব্রেরি পছন্দ করে, অথবা কাস্টমাইজযোগ্য ড্রপডাউনের জন্য appearance: base-select ব্যবহার করার পরিবর্তে জটিল নেস্টেড div মনস্টার তৈরি করে।

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

• বিশেষজ্ঞদের দ্বারা যাচাই করা আরও গাইড: পারফর্ম্যান্স, স্টাইল, অ্যাক্সেসিবিলিটি, সুরক্ষা, গোপনীয়তা, ফর্ম এবং আরও অনেক কিছু। প্রতিটি স্কিল একজন টেকনিক্যাল ডোমেন বিশেষজ্ঞ দ্বারা পর্যালোচনা এবং পরীক্ষা করা হয়েছে। গাইড ক্যাটালগ-এর মধ্যে দক্ষতা ব্রাউজ করা যায়।
• ডিফল্ট হিসেবে ক্রস-ব্রাউজার: Mozilla Firefox, Microsoft Edge ও Google Chrome তৈরি করে এমন টিমের কোলাবরেশন। প্রতিটি গাইড বেসলাইন কম্প্যাটিবিলিটি ডেটা এবং ফলব্যাক সহ উন্নত করা হয়েছে।
• পাবলিক ইভাল স্যুট: হাজার হাজার ইভাল রান, পাবলিক ইভাল ড্যাশবোর্ডে পরীক্ষা করা যায়, পাস রেটে লিফ্ট হাইলাইট করা।

AI-এর নলেজ গ্যাপের সমস্যা সমাধান করার জন্য নির্দিষ্ট উদাহরণ, এজেন্টের জন্য Chrome DevTools-এর সাথে এন্ড-টু-এন্ড ওয়ার্কফ্লো এবং I/O প্রিভিউ থেকে আপডেট করার নির্দেশাবলীর জন্য মডার্ন ওয়েব নির্দেশিকা ১.০-এর ঘোষণা সংক্রান্ত পোস্ট পড়ুন।

আমাদের কথার চেয়েও বেশি কিছু পান

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

• Policybazaar এবং Pensionbazaar: বিল্ড-অ্যান্ড-ভেরিফাই লুপ বন্ধ করে নতুন পৃষ্ঠার টার্নঅ্যারাউন্ড এবং UI বাগ ৯০%-এর বেশি কমিয়েছে, যেখানে Policybazaar প্রায় ৩০টি ল্যান্ডিং পৃষ্ঠা জুড়ে ম্যানুয়াল Core Web Vitals অডিটিংয়ের প্রচেষ্টা ৯২% কমিয়েছে।
• MetaMask: ~৪৮০টি পুল রিকোয়েস্ট জুড়ে তিন-লাইনের অ্যাডভাইজরি PR রিভিউ বটের মধ্যে মডার্ন ওয়েব নির্দেশিকা ওয়্যার করা হয়েছে, ১৫-মিনিটের মিডিয়ান টার্নঅ্যারাউন্ড সহ ৪৩টি অ্যাক্সেসিবিলিটি ও সিম্যান্টিক HTML ফিক্স ড্রাইভ করা হয়েছে।
• WeTV: বারবার হওয়া CLS রিগ্রেশনের ৯০% অটোমেটিক ডায়াগনসিস ও সমাধান করতে এজেন্টের জন্য Chrome DevTools এবং মডার্ন ওয়েব নির্দেশিকা CI/CD-তে যোগ করা হয়েছে, যার ফলে ডিবাগিংয়ের সময় ৮৭% কমে গেছে।
• note inc.: ইন্টার্নাল ডিজাইন সিস্টেমের জন্য নিয়মের সাথে মডার্ন ওয়েব নির্দেশিকা একত্রিত করা হয়েছে, যার ফলে মডার্ন ওয়েব চেক পাস রেট ৬১% থেকে ৯৪% পর্যন্ত বৃদ্ধি পেয়েছে এবং সঠিক LCP ছবির প্রায়োরিটাইজেশন ২৮% পর্যন্ত বুস্ট হয়েছে।

শুরু করুন

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

npx modern-web-guidance@latest install

এছাড়াও, আপনি GitHub-এ ইনস্টল করার বিকল্প উপায় এক্সপ্লোর করতে পারবেন।

সেট-আপ হয়ে গেলে, আপনি নতুন ব্যবহারের কেস এবং Modern Web Guidance 1.0 কীভাবে কাজ করে তা গভীরভাবে জানতে পারবেন:

• আগে থেকে থাকা কোডবেস আধুনিক করা: কীভাবে npx modern-web-guidance@latest legacy-scan দ্রুত লোকাল সিনট্যাক্স চেক করে এবং কনটেক্সচুয়াল এজেন্ট রিভিউ করে যাতে কোনও সমস্যা ছাড়াই টেকনিক্যাল ডেট কমানো যায়।
• কোড জেনারেশনের বাইরে: ডেভেলপারদের ক্রমাগত শেখা: AI এজেন্টের সাথে কোডিং করার সময় আধুনিক HTML, CSS এবং ওয়েব API ফিচারের সাথে আপ-টু-ডেট থাকার জন্য একটি ইন্টার‍্যাক্টিভ লার্নিং এবং ডিসকভারি টুল হিসেবে কীভাবে মডার্ন ওয়েব নির্দেশিকা ব্যবহার করবেন তা জানুন।
• ডিফল্ট হিসেবে ক্রস-ব্রাউজার: বেসলাইন ফলব্যাক কীভাবে কাজ করে: আপনার ব্রাউজার টার্গেটের সাথে প্রোগ্রেসিভ এনহ্যান্সমেন্ট, @supports কোয়েরি ও পলিফিল ম্যাচ করতে, গাইড কীভাবে লাইভ ওয়েব-ফিচার ডেটা ব্যবহার করে।
• ওয়েব ডেভেলপমেন্টের ক্ষেত্রে AI যে ১০টি ভুল করে: অ্যাক্সেসিবিলিটি, UX, পারফর্ম্যান্স ও নিরাপত্তা সংক্রান্ত ১০টি সাধারণ ফাঁক এক্সপ্লোর করুন, যেখানে এমনকি লেটেস্ট ফ্রন্টিয়ার মডেলও আমাদের আধুনিক ওয়েব চেকের প্রায় অর্ধেক ক্ষেত্রে ব্যর্থ হয়।
• কোডিং এজেন্টের জন্য লোকাল ভেক্টর সার্চ: ৫০৭ এমবি থেকে ৭-লাইনের লুপ: আপনার এজেন্টের কন্টেক্সট উইন্ডো ভর্তি না করেই, কীভাবে মডার্ন ওয়েব নির্দেশিকা তার ২০০টির বেশি নির্দেশিকা নলেজ বেস থেকে মিলিসেকেন্ডের মধ্যে প্রাসঙ্গিক নির্দেশিকা খুঁজে বের করে তা দেখুন।

Chrome-এর সাথে এজেন্টিক ওয়েব ডেভেলপমেন্টের জন্য পরবর্তী পদক্ষেপ কী

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

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

আগামী কয়েক সপ্তাহ ধরে, আমরা এজেন্টের জন্য Chrome DevTools-এর পরবর্তী মাইলস্টোন উদযাপন করছি। Chrome থেকে আপনার এজেন্টের কাছে সঠিক প্রসঙ্গ পাস করা আরও সহজ হতে চলেছে।

Modern Web Guidance 1.0 ব্যবহার করে দেখুন এবং আপনার মতামত আমাদের জানান। মডার্ন ওয়েব নির্দেশিকা এবং এজেন্টের জন্য Chrome DevTools দুটিই GitHub-এ ওপেন সোর্স হিসেবে তৈরি করা হয়েছে। আপনার এজেন্ট এখনও ভুল করছে এমন কোনও ওয়েব প্ল্যাটফর্ম টাস্ক আপনি দেখতে পেলে অথবা আমাদের পরবর্তীকালে কী করা উচিত সেই বিষয়ে আপনার কোনও আইডিয়া থাকলে, একটি সমস্যা খুলুন এবং আমাদের জানান।