প্রকাশিত: ১০ নভেম্বর, ২০২৬
এজেন্টিক ওয়েব ডেভেলপমেন্টের এই নতুন যুগে, ডেভেলপাররা তাদের কোডিং এজেন্টদের থেকে আশা করেন যে তারা ওয়েব ডেভেলপমেন্টের ক্ষেত্রে বিশেষজ্ঞ হবে। লেটেস্ট ফ্রন্টিয়ার কোডিং মডেলগুলি বেশ দক্ষ এবং সাধারণত এমন কিছু তৈরি করতে পারে যা কাজ করে, তবে আপনি যদি কোনও ওয়েব ডেভেলপমেন্ট এক্সপার্টকে AI-জেনারেটেড কোড পর্যালোচনা করতে বলেন, তাহলে তারা প্রায় সবসময়ই কোডটিকে আরও দ্রুত, আরও অ্যাক্সেসযোগ্য বা আরও সুরক্ষিত করার উপায় খুঁজে পাবেন।
এজেন্টিক ওয়েব ডেভেলপমেন্টের ভবিষ্যতে Chrome প্রচুর বিনিয়োগ করছে এবং এই চ্যালেঞ্জের সমাধান করতে, মে মাসে Google I/O-তে আমরা মডার্ন ওয়েব নির্দেশিকার আগাম প্রিভিউ নিয়ে এসেছি। মডার্ন ওয়েব নির্দেশিকা হল এমন কিছু দক্ষতার সেট যা ওয়েব প্ল্যাটফর্মের দক্ষতা, পেশাদার পদ্ধতি এবং ব্রাউজার কম্প্যাটিবিলিটি ডেটা সরাসরি আপনার কোডিং এজেন্টে এম্বেড করে।
আজ আমরা অত্যন্ত আনন্দের সাথে মডার্ন ওয়েব নির্দেশিকা ভার্সন ১.০-এর স্টেবল রিলিজ ঘোষণা করছি, যার মধ্যে রয়েছে:
- নতুন আধুনিকীকরণ ওয়ার্কফ্লো যা আপনার বর্তমান কোডবেস স্ক্যান করে আপনার এজেন্টকে নিরাপদে আধুনিকীকরণের সুযোগ খুঁজে পেতে সাহায্য করে।
- গাইড ডেটাবেস আরও বড় করা হয়েছে যাতে বিশেষজ্ঞদের দ্বারা যাচাই করা, ক্রস-ব্রাউজার সমাধানের মাধ্যমে AI-এর জ্ঞানের অভাব পূরণ করা যায়।
- প্রতিটি গাইডের জন্য আরও গভীর হিউম্যান এক্সপার্ট রিভিউ, যার মধ্যে রয়েছে কন্টেন্ট এরিয়া টেক লিডের থেকে সাইন-অফ এবং আমাদের ব্যবহারকারী নিজে ইন্টার্যাক্ট করতে পারেন এমন গাইডের উপর একটি ডেডিকেটেড অ্যাক্সেসিবিলিটি রিভিউ।
- পাবলিক ইভাল ড্যাশবোর্ড সহ আমাদের সব গাইডের সম্পূর্ণ মূল্যায়ন কভারেজ, যা মডার্ন ওয়েব নির্দেশিকা ছাড়া এজেন্টদের তুলনায় পরিমাপযোগ্য উন্নতি দেখায়।
ভার্সন ১.০-এর সাথে, আমরা এটি শেয়ার করতে পেরেও আনন্দিত যে মডার্ন ওয়েব নির্দেশিকা একটি ক্রস-ব্রাউজার প্রচেষ্টা হয়ে উঠছে, যেখানে Firefox এবং Edge, Chrome-এর সাথে যোগ দিচ্ছে যাতে ক্রস-ব্রাউজার মানানসই করার ব্যাপারে সাহায্য করা, উন্নত করা এবং প্রোজেক্টে অবদান রাখা যায়। Baseline-এর সাথে আমাদের শেয়ার করা কাজের উপর ভিত্তি করে, আমাদের লক্ষ্য হল এজেন্টের সাথে কোডিং করা যেকোনও ব্যক্তি যাতে আধুনিক ওয়েব প্ল্যাটফর্মের ক্ষমতা এবং দক্ষতার সম্পূর্ণ সুবিধা নিতে পারেন তা নিশ্চিত করা।
আপনি যে মডেল বা এজেন্ট হারনেসই ব্যবহার করুন না কেন, আপনি যদি ওয়েবের জন্য তৈরি করেন, তাহলে মডার্ন ওয়েব নির্দেশিকা আপনার এজেন্টিক ওয়ার্কফ্লোতে অন্তর্ভুক্ত।
মডার্ন ওয়েব নির্দেশিকা ইনস্টল করতে, আপনার প্রোজেক্ট ডিরেক্টরি থেকে এই কমান্ড রান করুন:
npx modern-web-guidance@latest install
অথবা আপনি আগে থেকেই কোনও পুরনো ভার্সন ইনস্টল করে থাকলে, এটি রান করে 1.0 ভার্সনে আপডেট করতে পারবেন:
npx modern-web-guidance@latest update
ইনস্টলেশন সংক্রান্ত অতিরিক্ত নির্দেশাবলী পেতে বা আরও জানতে, মডার্ন ওয়েব নির্দেশিকা ডকুমেন্টেশন চেক করুন অথবা সংক্ষেপে ওভারভিউ পেতে এই ভিডিওটি দেখুন:
ডেভেলপার ও ব্যবসার ক্ষেত্রে কেন মডার্ন ওয়েব নির্দেশিকা ব্যবহার করা উচিত
কোডিং এজেন্ট যে ডেভেলপারদের আগের চেয়ে অনেক দ্রুত কোড লিখতে সাহায্য করেছে, তা অস্বীকার করার উপায় নেই। কিন্তু এমন একটি বিশ্বে যেখানে সবাই কোডিং এজেন্ট ব্যবহার করছে, সেখানে স্পিড আর প্রতিযোগিতামূলক সুবিধা নয়।
আজকাল, ব্যবহারযোগ্যতা এবং অভিজ্ঞতার কোয়ালিটির মতো মৌলিক বিষয়গুলির উপর ভিত্তি করে পার্থক্য করা আগের চেয়ে অনেক বেশি গুরুত্বপূর্ণ। মডার্ন ওয়েব নির্দেশিকা যেভাবে সাহায্য করতে পারে তার কয়েকটি উদাহরণ এখানে দেওয়া হল:
মডেল প্রায়ই মিস করে যায় এমন পেশাদার পদ্ধতি আরও শক্তিশালী করুন
ফ্রন্টিয়ার কোডিং মডেলের অনেক পেশাদার পদ্ধতি সম্পর্কে ভালো ধারণা থাকলেও, আমাদের মূল্যায়ন থেকে দেখা যায় যে এখনও অনেক গুরুত্বপূর্ণ ক্ষেত্রে সেগুলি পিছিয়ে আছে, যেমন:
- অ্যাক্সেসিবিলিটি: কীবোর্ড ফোকাস ও ইনার্ট ম্যানেজমেন্ট, রিডিউসড-মোশন সাপোর্ট ও অ্যাক্সেসিবল ফর্ম যাচাইকরণ।
- ব্যবহারকারীর অভিজ্ঞতা: সোয়াইপ ও টাচ জেসচার, ডায়ালগ ও পপওভার ট্রানজিশন এবং লাইট/ডার্ক থিম প্রয়োগ করা।
- পারফর্ম্যান্স: মেন-থ্রেড টাস্ক শিডিউলিং, অফস্ক্রিন রেন্ডারিং আইসোলেশন এবং লেআউট শিফ্ট প্রতিরোধ।
- সুরক্ষা: নিরাপদ HTML স্যানিটাইজেশন, কঠোর কন্টেন্ট নিরাপত্তা নীতি এবং পাসকী ক্রেডেনশিয়াল ম্যানেজমেন্ট।
অ্যাক্সেসিবিলিটি সংক্রান্ত পেশাদার পদ্ধতি সঠিকভাবে অনুসরণ করা বিশেষভাবে গুরুত্বপূর্ণ কারণ খারাপ ARIA-এর মতো ভুল কোনও পৃষ্ঠাকে ARIA না থাকার চেয়েও কম অ্যাক্সেসযোগ্য করে তুলতে পারে। ভার্সন ১.০-এর জন্য, আমাদের ব্যবহারকারী নিজে ইন্টার্যাক্ট করতে পারেন এমন গাইড পর্যালোচনা করা হয়েছে এবং অ্যাক্সেসিবিলিটি বিশেষজ্ঞদের দ্বারা আসল সহায়ক প্রযুক্তির মাধ্যমে পরীক্ষা করা হয়েছে যারা প্রতিদিন এগুলির উপর নির্ভর করেন।
কাজের জন্য সেরা ওয়েব ফিচার ব্যবহার করুন
জাভাস্ক্রিপ্টের সাহায্যে কীভাবে কোনও কিছু কাজ করানো যায় তা বোঝার ক্ষেত্রে AI মডেলগুলি খুব ভাল, তবে অনেক ক্ষেত্রে, HTML বা CSS ফিচারগুলি অনেক কম কোড দিয়ে একই কাজ করতে পারে। এবং যেহেতু সেগুলি ব্রাউজার দ্বারা ম্যানেজ করা হয়, তাই সাধারণত সেগুলি আরও ভাল পারফর্ম করে এবং অ্যাক্সেসিবিলিটি অ্যাফর্ডেন্সের সাথে আসে। যেমন:
- পপওভার ও ডায়ালগ অ্যানিমেট করার ফিচার
- স্ক্রল ও সোয়াইপ-ভিত্তিক ইন্টার্যাকশন উন্নত করার ফিচার
- স্মুথ ও ফ্লুইড পৃষ্ঠা ট্রানজিশনের জন্য আরও ভালো API
এছাড়াও, নতুন ফিচার ব্যবহারকারীদের কাছে গুরুত্বপূর্ণ এমন উপায়ে সাইটের অভিজ্ঞতা উন্নত করতে পারে। যেমন:
- পাসকী ও WebAuthn: আরও দ্রুত ও সুরক্ষিত লগ-ইন অভিজ্ঞতার জন্য
- অটোফিল: চেক-আউট ফ্লো (বিশেষত মোবাইলে) উন্নত করতে, যা কাস্টম জাভাস্ক্রিপ্ট-ভিত্তিক ফর্ম কন্ট্রোল ব্যবহার করার সময় প্রায়শই ব্যর্থ হয়
আপনার ব্রাউজার সাপোর্ট সংক্রান্ত প্রয়োজনীয়তার উপর ভিত্তি করে, কাজের জন্য সেরা ফিচার সাজেস্ট করার জন্য মডার্ন ওয়েব নির্দেশিকা ডিজাইন করা হয়েছে। এর গাইডে বেসলাইন এবং ব্রাউজার কম্প্যাটিবিলিটি ডেটা এম্বেড করা আছে, তাই এটি আপনার প্রোজেক্টের প্রয়োজন অনুসারে সাজেশন দিতে পারে।
আপনার কোডবেস স্ক্যান করুন এবং আধুনিকীকরণের সুযোগ খুঁজুন
বেশিরভাগ ওয়েব ডেভেলপমেন্ট একদম নতুন প্রোজেক্টে হয় না। এটি আগে থেকে থাকা কোডবেসে ঘটে যা বছরের পর বছর ধরে পুরনো ওয়ার্কঅ্যারাউন্ড, অপ্রয়োজনীয় ডিপেন্ডেন্সি এবং পলিফিল জমা করে, যেগুলির আর প্রয়োজন নেই।
ভার্সন ১.০-এ একটি নতুন আধুনিকীকরণ ওয়ার্কফ্লো যোগ করা হয়েছে যা আপনার আগে থেকে থাকা HTML, CSS, JavaScript ও package.json বিশ্লেষণ করতে পারে যাতে নিরাপদে আপগ্রেড করার সুযোগ খুঁজে পাওয়া যায় এবং তারপর আপনার এজেন্টকে পরিবর্তনের মাধ্যমে গাইড করে।
/modern-web-guidance Modernize the code in this directory
এই প্রথম রিলিজে, আধুনিকীকরণ ওয়ার্কফ্লো সীমিত সংখ্যক প্যাটার্ন চেক করার জন্য স্ট্যাটিক বিশ্লেষণ ব্যবহার করে। আমরা প্রথমে সীমিত পরিসরে শুরু করার সিদ্ধান্ত নিয়েছি যাতে ফলাফল অনুমান করা যায় এবং তারপর সেখান থেকে পরিসর বাড়ানো যায়। সময়ের সাথে সাথে, আমরা আরও অনেক ক্ষেত্র কভার করার পরিকল্পনা করছি, যার মধ্যে রয়েছে এজেন্টিক অডিট যেখানে আপনার এজেন্ট শুধু পরিচিত প্যাটার্ন ম্যাচ করার পরিবর্তে সরাসরি আপনার কোড সম্পর্কে যুক্তি দেয়।
ওয়েব প্ল্যাটফর্মের উন্নতির সাথে সাথে আপ-টু-ডেট থাকুন
ওয়েব প্ল্যাটফর্ম হল একটি চলমান টার্গেট। প্রতিটি মাইলস্টোনে ব্রাউজারে নতুন ফিচার যোগ করা হয় এবং প্রতিটি নতুন ব্রাউজার রিলিজের সাথে সাথে আগে ব্যবহার করতে না পারা ফিচারগুলি বেসলাইন হয়ে যায়।
যেহেতু মডার্ন ওয়েব নির্দেশিকা বেসলাইন কম্প্যাটিবিলিটি ডেটার উপর ভিত্তি করে তৈরি করা হয়েছে এবং এর সাজেশনগুলি ব্রাউজার ইঞ্জিনিয়ার, ওয়েব স্ট্যান্ডার্ড বিশেষজ্ঞ এবং অ্যাক্সেসিবিলিটি বিশেষজ্ঞদের দ্বারা রক্ষণাবেক্ষণ করা হয়, তাই এই সাজেশনগুলি প্ল্যাটফর্মের সাথে সাথে বিকশিত হয় এবং এখন আপনার প্রোজেক্টও তা করতে পারে।
নতুন ওয়েব ফিচার ও পেশাদার পদ্ধতি সম্পর্কে জানুন
যদিও মডার্ন ওয়েব নির্দেশিকা মূলত এজেন্টদের জন্য একটি টুল হিসেবে তৈরি করা হয়েছে, তবে আমরা অনেক ডেভেলপারের কাছ থেকে শুনেছি যে তারা আসলে নির্দেশিকাকে নিজস্বভাবে বেশ উপযোগী বলে মনে করেছেন—একটি শেখার রিসোর্স হিসেবে।
এজেন্টিক কোডিংয়ের এই যুগেও ডোমেন এক্সপার্টাইজ গড়ে তোলার গুরুত্ব এখনও আছে। এবং মডার্ন ওয়েব নির্দেশিকা আপনাকে এটি করতে সাহায্য করতে পারে: হয় নির্দেশিকাগুলি নিজে পড়ে, অথবা CLI ব্যবহার করে ব্যবহারের কেস সার্চ করে এবং আপনার প্রোজেক্টের জন্য প্রাসঙ্গিক হতে পারে এমন নতুন কৌশল আবিষ্কার করে।
এজেন্টের জন্য Chrome DevTools-এর সাথে মডার্ন ওয়েব নির্দেশিকা পেয়ার করুন
এজেন্টিক ওয়েব ডেভেলপমেন্টে, কোড লেখা ওয়ার্কফ্লোয়ের একটি অংশ মাত্র। এছাড়াও, কোডটি প্রত্যাশা অনুযায়ী কাজ করছে কিনা তা নিশ্চিত করতে আপনাকে সেটি রান করতে হবে। এই কারণে আমরা ডেভেলপারদের এজেন্টের জন্য Chrome DevTools-এর সাথে মডার্ন ওয়েব নির্দেশিকা ব্যবহার করার পরামর্শ দিই।
- মডার্ন ওয়েব নির্দেশিকা আপনার এজেন্টকে আধুনিক পেশাদার পদ্ধতি অনুসরণ করে কোড লেখার জন্য প্রয়োজনীয় আপ-ফ্রন্ট দক্ষতা প্রদান করে।
- এজেন্টের জন্য Chrome DevTools আপনার এজেন্টকে রানটাইম ভিজিবিলিটি প্রদান করে যাতে এটি বিভিন্ন ধরনের ডিভাইসের ক্ষমতা, ব্যবহারকারীর পছন্দ এবং নেটওয়ার্ক পরিস্থিতি জুড়ে সেই কোড যাচাই, ডিবাগ এবং অপ্টিমাইজ করতে পারে।
একসাথে এগুলি আপনার এজেন্টকে কম টার্নে আরও ভাল সমাধানে পৌঁছাতে সাহায্য করে। কার্যকারিতা বাড়াতে আপনি কীভাবে এইসব টুল একসাথে ব্যবহার করতে পারেন তার কয়েকটি উদাহরণ নিচে দেওয়া হল:
আপনার পারফর্ম্যান্স টার্গেটে না পৌঁছানো পর্যন্ত অপ্টিমাইজ করুন
মডার্ন ওয়েব নির্দেশিকা আপনার এজেন্টকে শেখাতে পারে যে কীভাবে দীর্ঘ সময় ধরে চলা জাভাস্ক্রিপ্ট টাস্ককে কার্যকরভাবে ভেঙে ফেলা যায়, যা মূল থ্রেডকে ব্লক করে, কিন্তু এটি আপনার কোড পরীক্ষা করে দেখতে পারে না যে সেই জাভাস্ক্রিপ্ট টাস্কগুলি আসলে কতক্ষণ মূল থ্রেডকে ব্লক করে রাখে।
এজেন্টের জন্য Chrome DevTools-এর সাহায্যে, আপনি কোনও সমস্যা আছে কিনা তা দেখতে সিমুলেটেড লো-এন্ড সিপিইউতে পারফর্ম্যান্স ট্রেস চালাতে পারেন এবং তারপরে আপনার কোড যাতে মূল থ্রেডকে ৫০ মিলিসেকেন্ডের বেশি ব্লক না করে (যাতে এটি খারাপ INP-তে অবদান না রাখে) সেই জন্য মডার্ন ওয়েব নির্দেশিকা থেকে পারফর্ম্যান্স সংক্রান্ত পরামর্শ ব্যবহার করতে পারেন।
আপনার অ্যানিমেশন পরীক্ষা ও রিফাইন করুন
মডার্ন ওয়েব নির্দেশিকা আপনার এজেন্টকে দেখাতে পারে যে কীভাবে মডেল ডায়ালগ, টুলটিপ এবং পপওভার মেনুর মতো ফিচার সঠিকভাবে এবং পারফর্ম্যান্সের সাথে অ্যানিমেট করা যায়, তবে এই নির্দেশিকা থাকলেও আপনাকে এখনও যাচাই করতে হবে যে অ্যানিমেশনগুলি আসলে কাজ করে এবং আপনার সম্পূর্ণ অ্যাপ্লিকেশনের প্রসঙ্গে ব্যবহার করার সময় ভাল দেখায়।
এজেন্টের জন্য Chrome DevTools আপনার কোড রান করতে, পৃষ্ঠার সাথে ইন্টার্যাক্ট করতে এবং অ্যানিমেশন অ্যাকশনে থাকলে স্ক্রিন রেকর্ডিং করতে পারে। তারপর, অ্যানিমেশনটি যাতে চলে এবং সাইটের বাকি অংশের স্টাইল ও অনুভূতির সাথে মানানসই হয় তা নিশ্চিত করতে এটি রেকর্ডিংটি স্টাডি করতে পারে।
এছাড়াও, prefers-reduced-motion সেট করা থাকলে, কম্পোনেন্ট ব্যবহারকারীর পছন্দকে সম্মান করে কিনা তা যাচাই করতে আপনি এজেন্টের জন্য Chrome DevTools ব্যবহার করতে পারেন।
মেমরি লিক ছাড়াই ক্যাশে ভিউ
মডার্ন ওয়েব নির্দেশিকা আপনার এজেন্টকে শেখাতে পারে যে কীভাবে মেমরিতে ভিউ রেন্ডার ও ক্যাশে করার মাধ্যমে SPA ট্রানজিশন ইনস্ট্যান্ট করা যায় এবং একই সাথে অ্যাক্সেসিবিলিটি ট্রি থেকে সেগুলি সঠিকভাবে লুকানো যায়।
তবে, এটি করার সময়, ব্যবহারকারী দীর্ঘ সময় ধরে পৃষ্ঠায় থাকলে মেমরি লিক না করার জন্য আপনি অব্যবহৃত ভিউ সঠিকভাবে মুছে ফেলেছেন কিনা তা নিশ্চিত করা গুরুত্বপূর্ণ। এজেন্টের জন্য Chrome DevTools-এ মেমরি ডিবাগিং টুল আছে, তাই আপনার এজেন্ট নিশ্চিত করতে পারে যে মেমরির ব্যবহার সীমাহীনভাবে বাড়ছে না।
এজেন্টের জন্য মডার্ন ওয়েব নির্দেশিকা এবং Chrome DevTools একসাথে কীভাবে ব্যবহার করবেন তা আরও ভালোভাবে জানতে, এই ভিডিওটি দেখুন:
সাফল্যের কাহিনী
সারা বিশ্বের ইঞ্জিনিয়ারিং টিম ইতিমধ্যেই কোডের কোয়ালিটি উন্নত করতে, ডেলিভারি দ্রুত করতে এবং ম্যানুয়াল ডিবাগিংয়ের বাধা দূর করতে মডার্ন ওয়েব নির্দেশিকা এবং এজেন্টের জন্য Chrome DevTools ব্যবহার করছে:
Pensionbazaar ও Policybazaar
Pensionbazaar হল ভারতীয় ফিনটেক কোম্পানি Paisabazaar-এর লঞ্চ করা একটি নতুন রিটায়ারমেন্ট প্ল্যানিং প্ল্যাটফর্ম। নতুন পৃষ্ঠা তৈরি ও যাচাই করার জন্য এটি এজেন্টের জন্য Chrome DevTools-এর সাথে মডার্ন ওয়েব নির্দেশিকা পেয়ার করেছে। এর ফলে, টার্নঅ্যারাউন্ড টাইম ৯০%-এর বেশি (প্রায় চার দিন থেকে কয়েক ঘণ্টা) এবং নতুন স্ক্রিনে UI বাগ ৯০%-এর বেশি কমে গেছে। এর সিস্টার প্ল্যাটফর্ম Policybazaar, ভারতের অন্যতম প্রধান বীমা প্ল্যাটফর্ম যার ৯৭ মিলিয়নেরও বেশি রেজিস্টার করা গ্রাহক রয়েছে, এজেন্টের জন্য Chrome DevTools ব্যবহার করে প্রায় ৩০টি হাই-ট্রাফিক ল্যান্ডিং পৃষ্ঠা জুড়ে পারফর্ম্যান্স অডিট অটোমেট করেছে, যার ফলে ম্যানুয়াল অডিটিংয়ের প্রচেষ্টা ৯২% কমেছে:
"Pensionbazaar-এর জন্য, আমাদের অগ্রাধিকার ছিল প্রথম দিন থেকেই কোয়ালিটি কোড তৈরি করা যাতে পরে প্রযুক্তিগত ঋণ এড়ানো যায়। মডার্ন ওয়েব নির্দেশিকা আমাদের কোডিং এজেন্টকে নির্দিষ্ট ব্রাউজার কম্প্যাটিবিলিটি টার্গেট মেনে চলার পাশাপাশি আধুনিক ওয়েব স্ট্যান্ডার্ড ও পারফর্ম্যান্সের পেশাদার পদ্ধতি গ্রহণ করতে সাহায্য করেছে। এর ফলে আমাদের ফ্রন্টএন্ড কোড রিভিউ অনেক সহজ ও দ্রুত হয়েছে, যার ফলে আমাদের ডেভেলপমেন্ট টার্নঅ্যারাউন্ড টাইম উন্নত হয়েছে।"
—আমন সোনি, ইঞ্জিনিয়ারিং ম্যানেজার, Policybazaar
WeTV
Tencent-এর আন্তর্জাতিক ভিডিও স্ট্রিমিং প্ল্যাটফর্ম WeTV, তার CI/CD পাইপলাইনে একটি AI কোডিং এজেন্ট যোগ করেছে যা পারফর্ম্যান্স রিগ্রেশন ডায়াগনসিস করার জন্য এজেন্টের জন্য Chrome DevTools এবং আধুনিক ওয়েব প্ল্যাটফর্ম ফিচার ব্যবহার করে সেগুলি ঠিক করার জন্য মডার্ন ওয়েব নির্দেশিকা ব্যবহার করে। এজেন্ট এখন অটোমেটিক ব্যর্থ হওয়া পারফর্ম্যান্স চেকের ৯০% ডায়াগনসিস ও সমাধান করে, যার ফলে ডিবাগিং ও সমাধানের সময় ৮৭% কমে যায় (ম্যানুয়াল মূল্যায়ন সহ চার ঘণ্টা থেকে ৩০ মিনিট):
"গতি ও কোয়ালিটি, দুটির ক্ষেত্রেই ফলাফল খুব কার্যকর হয়েছে। এজেন্টের জন্য Chrome DevTools এবং মডার্ন ওয়েব নির্দেশিকা দ্বারা প্রদত্ত ডায়াগনস্টিক ইনসাইট জটিল লেআউট সংক্রান্ত সমস্যা সমাধানের জন্য আমাদের নির্ভরযোগ্য রেফারেন্স প্রদান করেছে। আমরা প্রতিটি সমস্যার সমাধান করার পরে কঠোরভাবে যাচাই করি এবং বর্তমান সাফল্যের হার ও স্থিতিশীলতা আমাদের রিলিজের আত্মবিশ্বাসকে উল্লেখযোগ্যভাবে উন্নত করেছে।"
—Yangjie Zheng, হেড অফ ইঞ্জিনিয়ারিং, WeTV (Tencent)
note inc.
note inc. হল জাপানের অন্যতম বৃহত্তম ক্রিয়েটর ও মিডিয়া প্ল্যাটফর্ম যার ৯০ মিলিয়নেরও বেশি মাসিক অ্যাক্টিভ ব্যবহারকারী রয়েছে। এটি Next.js ফ্রন্টএন্ডকে আধুনিক করার চলমান প্রচেষ্টার অংশ হিসেবে ইন-হাউস ডিজাইন সিস্টেমের পাশাপাশি মডার্ন ওয়েব নির্দেশিকা ব্যবহার করেছে। প্রোডাকশন কোডবেসে ১৮০-রান মূল্যায়নের মাধ্যমে, মডার্ন ওয়েব নির্দেশিকা স্ক্রল অ্যানিমেশন, টুলটিপ ও অ্যাকর্ডিয়ানের জন্য কাস্টম জাভাস্ক্রিপ্টের পরিবর্তে নেটিভ HTML ও CSS ফিচার ব্যবহার করার জন্য এজেন্টদের নির্দেশ দিয়ে মডার্ন ওয়েব চেকের পাস রেট ৬১% থেকে ৯৪% পর্যন্ত বাড়িয়েছে। এছাড়াও, এটি ৪৩১টি মার্জ করা PR জুড়ে ২৮% LCP ইমেজের সঠিক অগ্রাধিকার বাড়িয়েছে:
"note-এ আমাদের মিশন হল 'শুরু করুন এবং তৈরি করতে থাকুন', তাই আমাদের প্ল্যাটফর্মকে প্রত্যেক ক্রিয়েটর ও পাঠকের জন্য দ্রুত ও অ্যাক্সেসযোগ্য থাকতে হবে। আমাদের আরও বেশি কোড AI কোডিং এজেন্টের মাধ্যমে লেখা হয়, তাই মডার্ন ওয়েব নির্দেশিকা তাদের পুরনো জাভাস্ক্রিপ্ট প্যাটার্নে ফিরে যাওয়ার পরিবর্তে আধুনিক, স্ট্যান্ডার্ড-ভিত্তিক সমাধান পেতে সাহায্য করে। এছাড়াও, এটি এমন বিবরণ উল্লেখ করে যা সহজেই মিস হয়ে যেতে পারে, যেমন ছবি লোড করার অগ্রাধিকার এবং ফর্ম অ্যাক্সেসিবিলিটি। আমাদের ডিজাইন সিস্টেমের সাথে একত্রিত হয়ে, এটি আমাদের UI সামঞ্জস্যপূর্ণ রেখে নোট উন্নত করতে দেয়।"
—তাকেহিকো ইতাবেশি, টেকনোলজি বিভাগের ভিপি, note inc.
MetaMask
MetaMask হল একটি সেল্ফ-কাস্টোডিয়াল ফাইন্যান্সিয়াল প্ল্যাটফর্ম যা প্রায় ১৯০টি দেশ জুড়ে ১০০ মিলিয়নেরও বেশি ডাউনলোড করা হয়েছে। এটি এর ওপেন সোর্স ব্রাউজার এক্সটেনশনের প্রতিটি পুল রিকোয়েস্টে অটোমেটেড রিভিউ বট হিসেবে মডার্ন ওয়েব নির্দেশিকা রান করে, যা মাত্র তিন লাইনের প্রম্পট দিয়ে কনফিগার করা হয়েছে। প্রথম পাঁচ সপ্তাহে, বটটি প্রায় ৪৮০টি পুল রিকোয়েস্ট পর্যালোচনা করেছে এবং তার মধ্যে ৬৪টিতে কমেন্ট করেছে, যার ফলে ইঞ্জিনিয়াররা ৪৩টি সমস্যা (বেশিরভাগই অ্যাক্সেসিবিলিটি, HTML সিম্যান্টিক্স এবং ফর্ম সংক্রান্ত সমস্যা যা লিন্টার ধরতে পারে না) সমাধান করেছেন, কমেন্ট থেকে সমাধান করার জন্য মিডিয়ান সময় ১৫ মিনিট লেগেছে:
"রিভিউগুলি সত্যিই সহায়ক। তারা আমাদের ইঞ্জিনিয়ারদের ইন্টারেস্ট ইনভোকার এবং পপওভার API-এর মতো আধুনিক API-এর সাথে পরিচিত হতে সাহায্য করেছে। এটি PR রিভিউয়ের সময় বাড়ায়নি, বরং কমিয়েছে। MWG যেসব সমস্যা খুঁজে পেয়েছে, সেগুলি খুঁজে পেতে হলে এমন একজন হিউম্যান রিভিউয়ারের প্রয়োজন হত, যিনি এইসব আধুনিক ওয়েব টেকনিক সম্পর্কে জানেন।"
—ফ্রান্সিস নেপোমুসেনো, UX ইঞ্জিনিয়ার, MetaMask
ইকোসিস্টেম ও কমিউনিটি সহায়তা
Chrome-এর মধ্যে একটি উদ্যোগ হিসেবে মডার্ন ওয়েব নির্দেশিকা শুরু হয়েছিল, কিন্তু এই ১.০ মাইলস্টোনে পৌঁছানো ছিল ওয়েব কমিউনিটি জুড়ে অসংখ্য বিশেষজ্ঞদের সাথে একটি সহযোগিতামূলক প্রচেষ্টা।
প্রতিটি ওয়েব প্ল্যাটফর্মের এলাকা তত্ত্বাবধানকারী কন্টেন্ট এলাকার টেক লিড, Firefox ও Edge-এ আমাদের ব্রাউজার পার্টনার, স্বাধীন ওয়েব স্ট্যান্ডার্ড ও অ্যাক্সেসিবিলিটি বিশেষজ্ঞ যারা গাইড লিখেছেন ও পরীক্ষা করেছেন এবং GitHub-এ ওপেন সোর্স কন্ট্রিবিউটর যারা এই রিলিজকে আকার দিতে সাহায্য করেছেন, তাদের সকলকে ধন্যবাদ!
কোডিং এজেন্টরা ওয়েব সম্পর্কে যা জানে তার মধ্যে যদি আপনি কোনও ফাঁক খুঁজে পান বা কোনও বিদ্যমান গাইড উন্নত করতে সাহায্য করতে চান, তাহলে অংশগ্রহণ করতে কন্ট্রিবিউশন গাইড দেখুন।
মডার্ন ওয়েব নির্দেশিকা ব্যবহার শুরু করা
আপনার প্রোজেক্টে মডার্ন ওয়েব নির্দেশিকা যোগ করতে, প্রোজেক্ট ডিরেক্টরি থেকে CLI ইনস্টলার রান করুন:
npx modern-web-guidance@latest install
অথবা আপনি আগে থেকেই কোনও পুরনো ভার্সন ইনস্টল করে থাকলে, এটি রান করে 1.0 ভার্সনে আপডেট করতে পারবেন:
npx modern-web-guidance@latest update
CLI ছাড়াও, আপনি Claude Code, Codex, Cursor, Antigravity, Copilot, WebStorm, Kimi Code এবং Grok Build সহ সবচেয়ে জনপ্রিয় কোডিং এজেন্ট প্লাগ-ইন মার্কেটপ্লেসের মাধ্যমে সরাসরি মডার্ন ওয়েব নির্দেশিকা ইনস্টল এবং আপডেট করতে পারেন।
আরও জানতে, এইসব রিসোর্স চেক করে দেখুন: