কীভাবে মডার্ন ওয়েব নির্দেশিকা রিভিউ বট MetaMask-কে অ্যাক্সেসযোগ্য, আধুনিক UI শিপ করতে সাহায্য করে

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

MetaMask হল একটি সেল্ফ-কাস্টোডিয়াল ফাইন্যান্সিয়াল প্ল্যাটফর্ম যা প্রায় ১৯০টি দেশ জুড়ে ১০০ মিলিয়নেরও বেশি ডাউনলোড করা হয়েছে। এর ব্রাউজার এক্সটেনশনটি ওপেন সোর্সে তৈরি করা হয়েছে, তাই কোম্পানির ভিতরে এবং বাইরে থেকে কন্ট্রিবিউটরদের কাছ থেকে পুল রিকোয়েস্টের একটি অবিচ্ছিন্ন স্ট্রিম আসে।

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

চ্যালেঞ্জ: আধুনিক ওয়েব ফিচারের সাথে তাল মিলিয়ে চলা

আধুনিক HTML ও CSS-এ এমন ফিচার যোগ করা হচ্ছে যা অ্যাক্সেসিবিলিটি ও ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং কোনগুলি বিভিন্ন ব্রাউজার জুড়ে কাজ করে তা ট্র্যাক করা কঠিন। অনেক কন্ট্রিবিউটর থাকলে, পুল রিকোয়েস্ট খোলা প্রত্যেক ব্যক্তির কাছে সেই তথ্য পৌঁছাতে হবে।

নিরাপত্তা যোগ করার আরও একটি কারণ আছে: MetaMask ডিফল্ট হিসেবে প্রতিটি থার্ড-পার্টি নির্ভরতা স্যান্ডবক্স করে, যা লাইব্রেরি বিকল্পের চেয়ে নেটিভ ব্রাউজার ফিচার গ্রহণ করা আরও সস্তা করে তোলে। নেপোমুসেনো যেমন বলেছেন, "জাভাস্ক্রিপ্ট ছাড়াই ডায়ালগ ও ড্রপডাউন ব্যবহার করার মতো আধুনিক API-তে অ্যাক্সেস পাওয়াটা ছিল একটা বড় সাফল্য।"

সমাধান: মডার্ন ওয়েব নির্দেশিকা প্রতিটি পুল রিকোয়েস্ট পর্যালোচনা করে

১৬ সেপ্টেম্বর, ২০২৬-এ, MetaMask/metamask-extension-এ একটি পুল রিকোয়েস্ট "এটি কীভাবে কাজ করে" পৃষ্ঠা যোগ করেছে, যেখানে বেশিরভাগ React FAQ যেভাবে তৈরি করা হয়, সেইভাবে তৈরি করা একটি FAQ আছে:

// Before: Custom React state (removes content from DOM)
const [expanded, setExpanded] = useState(false);
<button type="button" aria-expanded={expanded} onClick={() => setExpanded(c => !c)}>
  <Text>{question}</Text>
</button>
{expanded ? <Text>{answer}</Text> : null}

প্রায় পাঁচ মিনিট পরে, বট কমেন্ট করেছে। search-hidden-content গাইড উদ্ধৃত করে, এটি তিনটি পয়েন্ট উল্লেখ করেছে:

  • প্রতিটি উত্তর শর্তসাপেক্ষে রেন্ডার করলে তা DOM থেকে সরিয়ে দেওয়া হয়, তাই সংক্ষিপ্ত করা টেক্সট ব্রাউজারের পৃষ্ঠায়-খুঁজুন বিকল্পের মাধ্যমে খুঁজে পাওয়া যায় না এবং সহায়ক প্রযুক্তির পক্ষে তা খুঁজে পাওয়া আরও কঠিন হয়।
  • একটি নেটিভ <details>/<summary> ডিসক্লোজার (২০২০ থেকে বেসলাইন) সঠিক শব্দার্থ সহ DOM-এ কন্টেন্ট রাখে। পরস্পর স্বতন্ত্র প্যানেলের জন্য, একটি শেয়ার করা name অ্যাট্রিবিউট (২০২৪ থেকে বেসলাইন নতুনভাবে উপলভ্য) অন্যগুলিকে অটোমেটিক বন্ধ করে দেয়; একাধিকবার খোলা যায় এমন FAQ-এর জন্য, এটি বাদ দিন।
  • টিম যদি আগে থেকে থাকা ডিসক্লোজার কম্পোনেন্ট ব্যবহার করতে চায়, তাহলে অন্তত hidden="until-found" এবং beforematch লিসেনার সহ DOM-এ উত্তর রাখতে হবে যা aria-expanded এবং আইকন স্টেট সিঙ্ক করে।
// After: Native <details> / <summary> disclosure (findable with find-in-page)
<details>
  <summary>
    <Text>{question}</Text>
  </summary>
  <Text>{answer}</Text>
</details>

তেরো মিনিট পরে, লেখক একটি সমাধান পুশ করেছেন। কম্পোনেন্টটি নেটিভ <details>/<summary> ডিসক্লোজার হয়ে গেছে, লুকানো উত্তরগুলি পৃষ্ঠায়-খুঁজুন ফিচারের জন্য DOM-এ থেকে গেছে এবং দুটি নেভিগেশন বোতাম লিঙ্ক হয়ে গেছে।

সেই বটটি হল একটি কার্সর অটোমেশন যা মডার্ন ওয়েব নির্দেশিকা চালাচ্ছে এবং নেপোমুসেনো এটি একটি তিন লাইনের প্রম্পট দিয়ে সেট আপ করেছেন। ২১ অক্টোবর, ২০২৬-এর মধ্যে, পাঁচ সপ্তাহ:

  • বটটি প্রায় ৪৮০টি পুল রিকোয়েস্টে রান করেছে এবং তার মধ্যে ৬৪টিতে কমেন্ট করেছে (৫৭টি ফিচার ও ফিক্স পুল রিকোয়েস্ট, সাথে ২৬ জন লেখকের থেকে ৭টি অটোমেটেড রিলিজ ও সিঙ্ক পুল রিকোয়েস্ট)।
  • ফিচার ও ফিক্স পুল রিকোয়েস্টে, ইঞ্জিনিয়াররা এর ফাইন্ডিংয়ের ৪৩টি ফিক্স করেছেন, এবং ২২টি পুল রিকোয়েস্ট জুড়ে আরও ৩টি আংশিকভাবে ফিক্স করেছেন।
  • ইঞ্জিনিয়াররা দ্রুত ব্যবস্থা নিয়েছেন: শনাক্ত করা যায় এমন কমিট সহ ৩৮টি ফিক্সের মধ্যে ১৯টি ১৫ মিনিটের মধ্যে এবং ২৬টি এক ঘণ্টার মধ্যে করা হয়েছে, কমেন্ট থেকে ফিক্স করার জন্য মিডিয়ান সময় হল ১৫.২ মিনিট।

MetaMask কীভাবে বট কনফিগার করেছে, এটি কী ধরেছে এবং কোথায় এটি গোলমাল করেছে তা এখানে রয়েছে।

সেট-আপে তিন লাইনের প্রম্পট আছে

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

- Run /modern-web-guidance for any client-facing changes
- Run /chrome-extensions for any relevant extension changes
- Comment on the PR only when there are issues to address. Keep the comment focused on actionable items

বাস্তবে এটি কীভাবে কাজ করে:

  • এটি পরামর্শমূলক: প্রথম দুই দিনে বট "পরিবর্তনের অনুরোধ" রিভিউ (এবং একটি অনুমোদন) পোস্ট করেছে, যা লেখক একবার সমাধান করার পরে খারিজ করে দিয়েছেন; ১৮ সেপ্টেম্বর থেকে প্রতিটি রিভিউ একটি কমেন্ট হিসেবে পোস্ট করা হয়েছে। এটি মার্জ করা ব্লক করে না, তাই প্রতিটি সাজেশন গ্রহণ করা হবে কিনা সেই ব্যাপারে লেখকই চূড়ান্ত সিদ্ধান্ত নেন।
  • এটি রিপোজিটরিতে নির্দিষ্ট গাইড এবং ফাইলের উল্লেখ করে: এটি যে ৬৪টি পুল রিকোয়েস্টে কমেন্ট করেছে, সেগুলির মধ্যে বটটি ১২২টি ফাইন্ডিং উত্থাপন করেছে। ফিচার ও ফিক্স পুল রিকোয়েস্টের ১০২টির মধ্যে ৬৩টি, তারা যে নির্দিষ্ট মডার্ন ওয়েব নির্দেশিকা গাইড প্রয়োগ করছে তার নাম উল্লেখ করে, যেমন search-hidden-content, state-aware-sticky-headers, বা sms-otp-form, এবং এটি যখন আগে থেকেই সাজেস্ট করা প্যাটার্ন ব্যবহার করে তখন রিপোজিটরিতে একটি বিদ্যমান ফাইলকে নির্দেশ করে।
  • পুল রিকোয়েস্ট UI-কে স্পর্শ না করা পর্যন্ত এটি শান্ত থাকে: সেই পাঁচ সপ্তাহে প্রায় ৪৮০টি পুল রিকোয়েস্টের মধ্যে অন্তত ১০০টি UI বা ক্লায়েন্ট কোডকে স্পর্শ করেছে এবং বটটি গড়ে প্রতিটি পুল রিকোয়েস্টে দুটি করে ফলাফল খুঁজে পেয়েছে, যেগুলিতে এটি কমেন্ট করেছে। যেসব টিমের বেশিরভাগ ফ্রন্টএন্ড রিপোজিটরি আছে তারা আশা করতে পারে যে এটি আরও বেশি শেয়ারে কমেন্ট করবে।

প্রম্পটটি যেকোনও এজেন্ট রানারের সাথে কাজ করে; মডার্ন ওয়েব নির্দেশিকা Cursor, Claude Code, Codex, GitHub Copilot, Antigravity এবং অন্যান্য কোডিং এজেন্টের জন্য একটি স্কিল বা প্লাগ-ইন হিসেবে ইনস্টল হয়। কোনও এজেন্ট স্কিল রান করলে, এটি কোনও API কী ছাড়াই লোকাল ইন্ডেক্সে ম্যাচিং গাইড খোঁজে এবং টিমের এজেন্ট রানার আগে থেকে যে মডেল প্রদান করে সেটি ব্যবহার করে সেগুলির সাথে পার্থক্য চেক করে।

মডার্ন ওয়েব নির্দেশিকা এমন কী ধরেছে যা লিন্টার ধরতে পারেনি

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

ট্রানজ্যাকশন ফি ফিল্ড যা এডিট করা যায় বলে মনে হলেও ইনপুটকে উপেক্ষা করে

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

ফর্ম গাইড উল্লেখ করে, বট তিনটি সমস্যা চিহ্নিত করেছে:

  • কোনও অনুমান উপলভ্য না থাকলে গ্যাস লিমিট ফিল্ড বন্ধ করুন এবং ফিল্ডে এর দৃশ্যমান স্ট্যাটাস টেক্সট কানেক্ট করুন যাতে সহায়ক প্রযুক্তি ব্যাখ্যাটি পড়তে পারে।
  • বন্ধ হয়ে যাওয়া 'সেভ করুন' বোতামটি একই স্ট্যাটাস টেক্সটের সাথে কানেক্ট করুন যাতে স্ক্রিন রিডার বুঝতে পারে যে এটি কেন বন্ধ হয়ে গেছে।
  • ফিল্ডটি সংখ্যাসূচক ইনপুট মোডে পরিবর্তন করুন যাতে মোবাইল ব্যবহারকারীরা একটি সংখ্যাসূচক কীপ্যাড পান।

লেখক দুটি সেটিংস মডাল জুড়ে তিনটি সমাধানই প্রয়োগ করেছেন এবং সেগুলিকে একটি একক কম্পোনেন্টে একত্রিত করেছেন।

MetaMask-এর ট্রেডিং ফিচারের স্ট্যাটাস ব্যানারে, ইনলাইন "FAQ" এবং "MetaMask সহায়তা টিমের সাথে যোগাযোগ করুন" অ্যাকশনগুলি বোতাম হিসেবে তৈরি করা হয়েছিল যা লিঙ্কের পরিবর্তে জাভাস্ক্রিপ্ট ব্যবহার করে নতুন ট্যাব খুলেছিল। তিন মিনিটের মধ্যে, বট— HTML এবং অ্যাক্সেসিবিলিটি গাইড উল্লেখ করে—ফ্ল্যাগ করেছে যে স্ক্রিন রিডার সেগুলিকে বোতাম হিসেবে ঘোষণা করে এবং ব্যবহারকারীরা লিঙ্ক অ্যাফর্ডেন্স হারান, যেমন URL কপি করা বা প্রসঙ্গ মেনু থেকে একটি নতুন ট্যাবে এটি খোলা। এটি MetaMask-এর কোডবেসে আগে থেকে থাকা ব্যানার কম্পোনেন্টকেও নির্দেশ করেছে যা আগে থেকেই এইসব অ্যাকশনকে আসল লিঙ্ক হিসেবে দেখায়।

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

যাচাইকরণ ইনপুট যার লেবেল অন্য কোথাও ছিল

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

বট আরও কিছু জিনিস ধরেছে

একই পাঁচ সপ্তাহের রান থেকে আরও পাঁচটি ফলাফল:

  • বটের পিছনে থাকা ইঞ্জিনিয়ার CSS-এর যে বিবরণ মিস করেছেন: নেপোমুসেনোর নিজস্ব পুল স্টিকি হোম ট্যাবের জন্য অনুরোধ নেস্টেড CSS স্ক্রল-স্টেট কোয়েরি তাদের কন্টেনারের নাম না দিয়ে এবং এমনভাবে একটি বর্ডার টগল করেছে যা লেআউটকে মিড-স্ক্রলে শিফট করেছে। বটটি স্টেট-অ্যাওয়ার স্টিকি হেডার গাইড উল্লেখ করেছে, এবং সে দুটিই ঠিক করেছে। তিনি দেখেছেন যে অ্যাঙ্কর পজিশনিং ও স্ক্রল-স্টেট কোয়েরির জন্য রিভিউগুলি সহায়ক।
  • মিড-কীস্ট্রোকে স্লিপেজ ক্যাপ করা হয়েছে: কাস্টম স্লিপেজ ইনপুট (ট্রেডে ব্যবহারকারী যে দামের ওঠানামা সহ্য করবেন) প্রতিটি কীস্ট্রোকে ১০০%-এর বেশি ভ্যালু ক্ল্যাম্প করেছে, ব্যবহারকারী টাইপ করার সময় ১০১-কে ১০০-তে পরিবর্তন করেছে। ফর্মের নির্দেশিকা অনুসরণ করে, সমাধান ফিল্ড থেকে ফোকাস সরে গেলে যাচাইকরণে চলে যায় এবং একটি দৃশ্যমান সতর্কতা ব্যানার যোগ করে।
  • একটি লোডিং ইন্ডিকেটর যা স্ক্রিন রিডার ব্যবহার করতে পারেনি: একটি টোকেন-লিস্ট লোডিং স্কেলিটন তার "লোডিং" লেবেলটি কোনও ভূমিকা ছাড়াই একটি জেনেরিক এলিমেন্টে রাখে, যা ARIA নিষিদ্ধ করে। বটটি কোডবেসে দুটি কম্পোনেন্ট দেখিয়েছে যা ইতিমধ্যে MetaMask-এর স্ক্রিন-রিডার-অনলি প্যাটার্ন ব্যবহার করেছে (উভয়ই ছয় দিন আগে মডার্ন ওয়েব নির্দেশিকা পর্যালোচনার পরে আপডেট করা হয়েছে) এবং লেখক আট মিনিট পরে স্কেলিটনকে সেই প্যাটার্নের সাথে অ্যালাইন করেছেন।
  • অসুরক্ষিত অ্যাসিঙ্ক অ্যাকশন: একটি অ্যাসিঙ্ক্রোনাস "প্রোভাইডারে দেখুন" বোতামে কোনও ইন-ফ্লাইট গার্ড ছিল না, তাই ডবল-ক্লিক করলে ডুপ্লিকেট ট্যাব এবং ব্যাকগ্রাউন্ড ওয়াচার খুলতে পারে। কমেন্ট করার চার মিনিটেরও কম সময়ের মধ্যে লেখক একটি গার্ড যোগ করেছেন।
  • ফর্ম ছাড়াই কিস্ট্রোক যাচাইকরণ: একটি ইমপোর্ট NFT পৃষ্ঠা প্রতিটি কিস্ট্রোকে যাচাই করা হয়েছে এবং জমা দেওয়ার শব্দার্থবিদ্যার জন্য একটি <form> এলিমেন্টের অভাব ছিল। পর্যালোচনার ১৯ মিনিট পরে দুটি সমস্যারই সমাধান করা হয়েছে।

প্রতিটি রিভিউ সর্বজনীন। বটের সম্পূর্ণ কমেন্ট প্রতিটি লিঙ্ক করা পুল অনুরোধে রয়েছে, এবং আপনি GitHub-এ সেগুলির সব ব্রাউজ করতে পারবেন।

এটি কী ঠিক করেনি এবং এটি কতটা কোলাহলপূর্ণ

সব তথ্যই যে কাজে লেগেছে তা নয়। নিচের সারণীতে দেখানো হয়েছে যে কীভাবে MetaMask ফিচার ও ফিক্স পুল রিকোয়েস্টে ১০২টি ফলাফল ট্যালি করেছে (আরও ২০টি ৭টি রিলিজ ও সিঙ্ক পুল রিকোয়েস্টে এসেছে, যেখানে রিভিউতে কোড পরিবর্তন হবে বলে আশা করা হয় না):

ফলাফল ফাইন্ডিং নোট
স্থায়ী ৪৩ ২৩টি লেখক কনফার্ম করেছেন, ২০টি পরে করা কমিটে দেখা যাবে
আংশিকভাবে সমাধান করা হয়েছে 3 আংশিকভাবে প্রয়োগ করা হয়েছে অথবা প্রয়োগ করার পরে আগের অবস্থায় ফিরিয়ে আনা হয়েছে
প্রত্যাখ্যান করা হয়েছে বা ভুল পজিটিভ 16 স্কোপের বাইরে, ডিজাইন অনুযায়ী বা আগেই করা হয়েছে
সমাধান করা হয়নি 20 কোনও পরিবর্তন নেই (এর মধ্যে একটির সাথে লেখক একমত হয়েছেন)
অজানা 20 কোনও উত্তর ছাড়াই পুল রিকোয়েস্ট বা ডেটা লিমিট খুলুন
মোট ১০২ ৫৭টি ফিচার ও ফিক্স পুল রিকোয়েস্ট জুড়ে

১২২টি ফাইন্ডিং (রিলিজ ও সিঙ্ক পুল অনুরোধে ২০টি সহ) জুড়ে থিম অনুযায়ী ভাগ করা হয়েছে:

থিম সব ফাইন্ডিং ফিচার ও সমস্যা সমাধানের পুল রিকোয়েস্টের উপর স্থায়ী আংশিকভাবে সমাধান করা হয়েছে
অ্যাক্সেসিবিলিটি ৪৭ ৩৮ 12 1
HTML সেমানটিকস ও CSS 18 16 9 2
ফর্ম ও ইনপুট 15 15 10 0
পারফর্ম্যান্স 15 11 6 0
ব্রাউজার ফিচার ও কম্প্যাটিবিলিটি 11 6 3 0
অন্যান্য 16 16 3 0
মোট ১২২ ১০২ ৪৩ ৩

এইসব নম্বরে কয়েকটি প্যাটার্ন:

  • ক্রস-কাটিং অ্যাক্সেসিবিলিটি পরিবর্তনের চেয়ে একটি কম্পোনেন্টের মধ্যে থাকা সমস্যার সমাধান অনেক বেশি ঘন ঘন ল্যান্ড করে। ফর্ম ও HTML সংক্রান্ত সমস্যার সমাধান, পর্যালোচনার অধীনে থাকা কম্পোনেন্টের মধ্যে থাকে, তাই লেখক সাধারণত সেগুলি সাথে সাথেই প্রয়োগ করেন (৩১টির মধ্যে ১৯টি সমাধান করা হয়েছে)। অ্যাক্সেসিবিলিটিতে সবচেয়ে বেশি সমস্যা (৩৮) পাওয়া গেছে, তবে মাত্র ১২টি সমস্যার সমাধান করা হয়েছে, সাধারণত কারণ হল সমাধানটি পুল রিকোয়েস্টের আওতার বাইরে ছিল অথবা এমন একটি শেয়ার করা ডিজাইন-সিস্টেম কম্পোনেন্টের প্রয়োজন ছিল যা এখনও নেই।
  • "অন্যান্য" হল সেইসব জায়গা যেখানে এটি ওয়েব-প্ল্যাটফর্মের নির্দেশিকার বাইরে ঘুরে বেড়ায়। ষোলটি ফলাফলে ডিজাইন-সিস্টেমের ধারাবাহিকতা, লজিক বাগ, কপি, টেস্ট কোয়ালিটি, ডার্ক মোড এবং কোড হাইজিন কভার করা হয়েছে; ৩টির উপর কাজ করা হয়েছে, যার মধ্যে একটি হল আসল রিগ্রেশন (একটি নেটওয়ার্ক লিস্ট পরিবর্তন যা ফর্ম প্রিফিল ভেঙে দিয়েছে)। ওই ১৬টির মধ্যে বেশিরভাগই সহজেই এড়িয়ে যাওয়া যেত, কিন্তু রিগ্রেশনটি ধরা পড়ার ফলে সেগুলি দ্রুত দেখে নেওয়া সার্থক হয়েছে।
  • এজেন্ট কীভাবে নির্দেশিকা প্রয়োগ করেছে তার থেকে ফলস পজিটিভ এসেছে এবং বেশিরভাগ নয়েজ সেট-আপে ঠিক করা যায়। রিভিউ বট হল একটি এজেন্ট যা স্ট্যাটিক লিন্টারের পরিবর্তে ডিফারেন্সিয়াল রিডিং করে, তাই এর ফলস পজিটিভগুলি আশেপাশের কোড ভুলভাবে পড়ার কারণে বা লিঙ্ক করা গাইডের চেয়ে আরও কঠোরভাবে নিয়ম প্রয়োগ করার কারণে আসে। রিলিজ ও সিঙ্ক ব্রাঞ্চ এড়িয়ে যাওয়া এবং প্রম্পট আরও কঠোর করা যাতে এজেন্ট গাইডে স্পষ্টভাবে উল্লেখ করা নিয়ম মেনে চলে, এগুলি হল পরবর্তী অ্যাডজাস্টমেন্ট।

নেপোমুসেনো টিমের উপর আরও ব্যাপক প্রভাব এবং রিভিউ টার্নঅ্যারাউন্ডের বর্ণনা করেছেন:

"রিভিউগুলি সত্যিই সহায়ক। তারা আমাদের ইঞ্জিনিয়ারদের ইন্টারেস্ট ইনভোকার এবং পপওভার API-এর মতো আধুনিক API-এর সাথে পরিচিত হতে সাহায্য করেছে।"

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

— ফ্রান্সিস নেপোমুসেনো, UX ইঞ্জিনিয়ার, MetaMask

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

MetaMask-এর ব্যাপারে কোনও টিম বিবেচনা করলে, MetaMask তাদের কী বলবে

  • কিছু লেখার আগে নির্দেশিকা পড়ে নিন। কোনও টাস্কের জন্য এজেন্ট কোন গাইড উদ্ধার করবে তা দেখতে npx modern-web-guidance@latest search "accordion find in page" রান করুন। এছাড়াও, আপনি মডার্ন ওয়েব নির্দেশিকা সংক্রান্ত গাইডের সম্পূর্ণ সেট ব্রাউজ করতে পারবেন।
  • তিন লাইনের প্রম্পট এবং আপনি আগে থেকেই যে এজেন্ট রান করছেন তা দিয়ে শুরু করুন। স্কিল (npx modern-web-guidance@latest install, বা এজেন্টের প্লাগ-ইন কমান্ড) ইনস্টল করুন, পুল রিকোয়েস্টে যা কিছু রান করতে পারে তা এতে পয়েন্ট করুন এবং শুধুমাত্র অ্যাকশনেবল কিছু থাকলে এবং গাইডে স্পষ্টভাবে উল্লেখ করা নিয়ম মেনে চলার জন্য কমেন্ট করতে বলুন। কোনও সমস্যা না থাকলে বটকে চুপ করিয়ে রাখা হয়, তাই MetaMask-এর ইঞ্জিনিয়াররা এখনও এর কমেন্ট পড়েন।
  • কিছু ফলাফল সমাধান করা নাও হতে পারে। ফিচার ও পুল রিকোয়েস্ট সংক্রান্ত সমস্যা সমাধানের ক্ষেত্রে ১০২টি ফলাফলের মধ্যে ৪৩টি সমাধান করা হয়েছে এবং ৩৬টি প্রত্যাখ্যান করা হয়েছে বা সমাধান করা হয়নি। এই অনুপাতটি একটি পরামর্শমূলক পর্যালোচনা বটের জন্য ভাল কাজ করে, তবে এটি একটি ব্লকিং চেক হিসাবে বিঘ্নিত হবে।
  • হিউম্যান রিভিউ চালু রাখুন। বটটি ওয়েব-প্ল্যাটফর্ম সিম্যান্টিক্স, আধুনিক CSS এবং ইন্টার‍্যাকশন প্যাটার্ন সম্পর্কে ভালো জানে, কিন্তু প্রোডাক্ট সম্পর্কে জানে না।

এছাড়াও, MetaMask এখনও যা পরিমাপ করেনি: পাঁচ সপ্তাহ ধরে, টিম প্রতি-পুল-অনুরোধ খরচ, রানটাইম, মডেল তুলনা বা রিভিউ বট কীভাবে React কোডবেসের বাইরে আচরণ করে তা ট্র্যাক করেনি।

তিন লাইনের কনফিগারেশন সহ, MetaMask একটি রিভিউ বট পেয়েছে যা বেশিরভাগ ফলাফলের জন্য একটি নির্দিষ্ট নির্দেশিকা উল্লেখ করে (এবং একটি বিদ্যমান ইন-রেপো উদাহরণ যখন একটি বিদ্যমান থাকে)। এটির গ্রহণ করা সাজেশন সাধারণত এক ঘণ্টার মধ্যে ঠিক করা হয়।