বেশিরভাগ ওয়েব ডেভেলপমেন্ট একদম শুরু থেকে করা হয় না। এটি আগে থেকে থাকা কোডবেসে ঘটে, যেখানে বছরের পর বছর ধরে লিগ্যাসি ওয়ার্কঅ্যারাউন্ড, পলিফিল এবং জাভাস্ক্রিপ্ট ইউটিলিটি (অটোসাইজ, কাস্টম চেকবক্স স্টাইলিং হ্যাক, scrollHeight লিসেনার) জমা হয়েছে, যা এখন ব্রাউজার নেটিভভাবে ম্যানেজ করে। কিন্তু সমস্যা হল:
পুরনো কোড কাজ করা বন্ধ করে না। এটি কাজ করে, তাই কেউ সমস্যার ব্যাপারে অভিযোগ জানায় না। এছাড়াও, কাজ করছে এমন কোড রিফ্যাক্টর করতে—এমনকি সেটি পুরনো হলেও—ভরসা লাগে, তাই ডেভেলপাররা স্বাভাবিকভাবেই
অনিচ্ছুক হন।
অন্যদিকে, আধুনিক ওয়েব ফিচার ব্যবহার করার জন্য পুরনো কোড রিফ্যাক্টর না করলে, আপনার বান্ডেলের সাইজ, পৃষ্ঠার প্রতিক্রিয়াশীলতা এবং অ্যাক্সেসিবিলিটির উপর প্রভাব পড়বে। আরও খারাপ হল, আপনি যখন এইসব প্রোজেক্টে কোডিং এজেন্ট ব্যবহার করেন, তখন সেগুলি ট্রেনিং ডেটা থেকে পুরনো প্যাটার্নের সাথে সাথে ২০১৫ সালের কনভেনশন কপি করে।
আপনি নতুন কিছু তৈরি করার সময়, মডার্ন ওয়েব নির্দেশিকা আপনার এজেন্টকে আধুনিক বেসলাইন ফিচারের দিকে পরিচালিত করে। আগে থেকে থাকা কোডের জন্য, মডার্ন ওয়েব নির্দেশিকা 1.0 একটি আধুনিকীকরণ ওয়ার্কফ্লো যোগ করে যা আপনার প্রোজেক্টকে পুরনো প্যাটার্নের জন্য স্ক্যান করে এবং আপনার এজেন্টকে সেগুলি আপগ্রেড করতে সাহায্য করে।
আধুনিকীকরণ ওয়ার্কফ্লো কী করে
আপনি যখন আপনার এজেন্টকে কোনও প্রোজেক্ট আধুনিকীকরণ করতে বলেন (অথবা সরাসরি legacy-scan
কমান্ড রান করে), তখন এটি কীভাবে কাজ করে তা এখানে দেওয়া হল:
- নির্ধারক লোকাল স্ক্যানিং: HTML, CSS, JavaScript/TypeScript,
ফ্রেমওয়ার্ক-নির্দিষ্ট কম্পোনেন্ট এবং
package.jsonফাইলগুলি অ্যাবস্ট্রাক্ট সিনট্যাক্স ট্রি (AST), DOM এবং CSS পার্সারের সাহায্যে লোকালি দ্রুত স্ক্যান করা হয়, যার জন্য কোনও LLM কল বা টোকেন খরচ হয় না। - লেগেসি রুল ক্যাটালগ: প্রতিবার স্ক্যান করার সময় অনেক বেশি জিনিস ফ্ল্যাগ করে এমন স্ক্যানার
এড়িয়ে যাওয়া হয়। আমরা প্রায় ৪৫,০০০ ওপেন-সোর্স রিপোজিটরি জুড়ে ক্যান্ডিডেট নিয়ম পরীক্ষা করেছি, যেগুলি অর্ধেক করে ভাগ করা হয়েছে: নিয়ম লেখার অর্ধেকের উপর নিয়ম লেখা ও টিউন করা হয়েছে
এবং অদেখা বাকি অর্ধেকের উপর গ্রেড করা হয়েছে। আমরা যতগুলি ক্যান্ডিডেট রুল রেখেছি, তার চেয়ে বেশি বাদ দিয়েছি। যেসব ফিচারের কোনও লিগ্যাসি কোড সমতুল্য নেই, সেগুলি বাদ দিয়েছি এবং সিনট্যাক্স-অনলি সোয়াপ, যেগুলি থেকে কোনও বাস্তব সুবিধা পাওয়া যায় না (যেমন, কাজ করছে এমন
+বা~সিবলিং সিলেক্টরকে:has()-এ রিরাইট করা), সেগুলি বাতিল করেছি। ডিফল্ট হিসেবে শিপ করতে হলে, কোনও রুলকে অদেখা কোডে অন্তত ৮০% স্ট্যাটিক ম্যাচিং প্রিসিশন এবং ৯০% পোস্ট-ভেরিফিকেশন প্রিসিশন অর্জন করতে হবে। - প্রসঙ্গ-সচেতন ফলস-পজিটিভ ফিল্টারিং: প্রতিটি নিয়ম ম্যাচ করার সাথে
সুনির্দিষ্ট
keepWhen/dropWhenরুব্রিক থাকে। এটি এজেন্টকে আশেপাশের কোড মূল্যায়ন করতে এবং ফলাফল উপস্থাপন করার আগে ইচ্ছাকৃত ফলব্যাক, CSS@supportsগার্ড বা লুক-অ্যালাইক বাতিল করতে বলে। - হাই-কনফিডেন্স লিগ্যাসি প্যাটার্নে স্কোপ করা (এবং বাড়ছে):
legacy-scanআমাদের প্রায় ২০০টি গাইডের সাবসেট (প্রায় ২০%) চেক করে যেখানে লিগ্যাসি কোড ফলস পজিটিভ ছাড়াই নির্ধারকভাবে স্পট করা যেতে পারে এবং আমরা সময়ের সাথে সাথে সেই কভারেজ বাড়াচ্ছি। ক্যাটালগের বাকি অংশের জন্য, আপনার এজেন্ট আপনি তৈরি করার সাথে সাথে গাইড সার্চ করে এবং ফিরিয়ে আনে।
কীভাবে আধুনিকীকরণ ওয়ার্কফ্লো চালু করবেন
মডার্ন ওয়েব নির্দেশিকার মাধ্যমে কোড আধুনিকীকরণ করতে হলে 1.0 বা তার পরবর্তী যেকোনও ভার্সন প্রয়োজন। npm বা আপনার এজেন্টের প্লাগ-ইন মার্কেটপ্লেস থেকে এটি ইনস্টল বা আপডেট করুন:
# Install Modern Web Guidance 1.0 in your project
npx modern-web-guidance@latest install
# Or update an existing installation
npx modern-web-guidance@latest update
যেহেতু আধুনিকীকরণ ওয়ার্কফ্লো কোর স্কিল সংজ্ঞার অংশ, তাই আপনি আপনার এজেন্টকে কোনও রিপোজিটরি বা ফোল্ডার জুড়ে "লিগ্যাসি প্যাটার্ন" বা "আধুনিকীকরণ" চেক করতে বলে ন্যাচারাল ল্যাঙ্গুয়েজের মাধ্যমে স্ক্যানার ট্রিগার করতে পারেন।
মনে রাখবেন: একটি কম্পোনেন্টের নাম দিলে, তার পরিবর্তে নিয়মিত গাইড লুকআপ পারফর্ম করা হবে।
দেখানোর জন্য, সম্পূর্ণ রিপোজিটরি স্ক্যান করার জন্য একটি উদাহরণ প্রম্পট নিচে দেওয়া হল:
Modernize this repository using Modern Web Guidance. Scan our frontend files for legacy patterns, verify the findings, and propose a modernization plan before making any code edits.
এছাড়াও, আপনি এটি নির্দিষ্ট কোনও ফোল্ডারে পয়েন্ট করতে পারেন:
Check src/components/forms for legacy web patterns that can be refactored to modern Baseline features.
বর্তমানে আপনি নিজের টার্মিনালে ম্যানুয়ালি legacy-scan চালাতে পারলেও, অটোমেটেড
CI/CD পাইপলাইন ইন্টিগ্রেশন বর্তমানে ডেভেলপ করা হচ্ছে।
এটি যেসব প্যাটার্ন শনাক্ত করে ও ঠিক করে তার উদাহরণ
যোগ্য নিয়মগুলি চারটি ডোমেন জুড়ে সাধারণ লিগ্যাসি অ্যান্টিপ্যাটার্নকে টার্গেট করে: ফর্ম এবং UI, ডায়ালগ এবং কন্ট্রোল, CSS লেআউট, টাইপোগ্রাফি এবং ভিজ্যুয়াল ডিজাইন এবং নিরাপত্তা। নিচের সারণিতে পুরনো প্যাটার্নের উদাহরণ এবং সেগুলির আধুনিক বিকল্প দেখানো হয়েছে:
কোড ট্রান্সফর্মেশনের উদাহরণ
প্রম্পট করা হলে, আপনার কোডিং এজেন্ট আধুনিকীকরণ ওয়ার্কফ্লোর মাধ্যমে পুরনো অ্যান্টিপ্যাটার্নকে আধুনিক প্যাটার্নে রূপান্তর করতে পারে। এখানে কিছু উদাহরণ দেওয়া হল:
অটো-গ্রোইং <textarea> এলিমেন্ট
পুরনো জাভাস্ক্রিপ্ট প্রতিটি input ইভেন্টে scrollHeight পরিমাপ করে লেআউট থ্র্যাশিং
বাধ্য করে। এর ফলে পারফর্ম্যান্স সংক্রান্ত সমস্যা হতে পারে—বিশেষ করে Interaction to
Next Paint (INP)-এর ক্ষেত্রে। আধুনিকীকরণ ওয়ার্কফ্লো ব্যবহার করে, আপনার এজেন্ট এটি ঠিক করতে পারবেন:
// Before: Imperative layout recalculation on every keystroke
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = `${textarea.scrollHeight}px`;
});
আজ এর জন্য আপনার জাভাস্ক্রিপ্টের প্রয়োজন নেই। আধুনিকীকরণ ওয়ার্কফ্লো আপনার এজেন্টকে CSS দিয়ে এটি পরিবর্তন করার জন্য নির্দেশ দেয়:
/* After: Native declarative field sizing */
textarea {
field-sizing: content;
min-block-size: 3lh;
max-block-size: 15lh;
}
ডিক্লারেটিভ পপওভার
JavaScript ইভেন্ট লিসনার ব্যবহার করে কাস্টম মোডাল ও পপ-আপ লজিক স্ট্যান্ডার্ড HTML অ্যাট্রিবিউট দিয়ে পরিবর্তন করা যেতে পারে:
<!-- Before: a click listener that only calls showPopover() -->
<button id="openBtn">Open Menu</button>
<div id="menu" popover>Menu Content</div>
<script>
openBtn.addEventListener('click', () => menu.showPopover());
</script>
<!-- After: declarative control, no JavaScript -->
<button popovertarget="menu">Open Menu</button>
<div id="menu" popover>Menu Content</div>
IME-safe enter জমা দেওয়া
ব্যবহারকারীরা জাপানি, চাইনিজ বা কোরিয়ান ইনপুট পদ্ধতি এডিটর (IME) টাইপ করার সময় সুরক্ষিত নয় এমন এন্টার-কী লিসেনার অকাল মেসেজ জমা দেওয়ার ট্রিগার করে।
আপনার এজেন্ট কম্পোজিশন স্টেট গার্ড যোগ করে:
// Before: Fires mid-composition when confirming kanji/hanzi characters
textarea.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
});
// After: Accurately checks IME composition state
textarea.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
if (e.isComposing || e.keyCode === 229) return;
sendMessage();
}
});
এটি কীভাবে কাজ করে: চার-ধাপের আধুনিকীকরণ ওয়ার্কফ্লো
আগে থেকে থাকা অ্যাপে কাজ করছে এমন কোড রিফ্যাক্টর করার জন্য ভরসা প্রয়োজন, কারণ কেউ
অটোমেটিক চূর্ণ বা সূক্ষ্ম রিগ্রেশন চায় না। সেই কারণেই কোনও --fix
ফ্ল্যাগ নেই: এমনকি আধুনিকীকরণ যা সহজ বলে মনে হয় তা প্রায়শই
ক্রস-লেয়ার রিফ্যাক্টর হিসাবে পরিণত হয়—যেমন একটি ইম্পারেটিভ JS লিসেনার বা npm প্যাকেজ মুছে ফেলা
এবং আচরণটিকে HTML এবং CSS-এ স্থানান্তরিত করা—সূক্ষ্ম আচরণ এবং
ব্রাউজার-সাপোর্ট চ্যালেঞ্জ সহ।
পরিবর্তে, আধুনিকীকরণ ওয়ার্কফ্লো আপনার কোডিং এজেন্টের সাথে চার-ধাপের লুপ চালায়:
- স্ক্যান (
legacy-scan): এজেন্টnpx modern-web-guidance legacy-scan <path> --jsonরান করে, যা প্রাসঙ্গিক সাবস্ট্রিংয়ের জন্য ফাইল প্রি-স্ক্রিন করে যাতে এটি শুধুমাত্র ক্যান্ডিডেট ফাইল এবং নিয়মে AST, CSS এবং HTML পার্সার স্পিন আপ করে। কোনও ফলাফল এই পর্যন্ত পৌঁছালে, এটি যে ফলস পজিটিভ নয় তার সম্ভাবনা অনেক বেশি (প্রায় ৯২%)। প্রতিটি মিলের সাথে এজেন্টের জন্য একটি যাচাইকরণ চেকলিস্ট অন্তর্ভুক্ত থাকে। - প্রাসঙ্গিক যাচাইকরণ (
keepWhen/dropWhen): যেহেতু কোডিং এজেন্টের কাছে রিপোজিটরি খোলা আছে, তাই এটি সেই নিয়মের যাচাইকরণ রুব্রিকের বিপরীতে প্রতিটি মিলের আশেপাশের কোড পরীক্ষা করে।<textarea>হ্যাকের পরিবর্তেscrollHeightরিড যদি ভার্চুয়ালাইজড স্ক্রলিংয়ের অংশ হয় অথবা@supportsচেক যদি আগে থেকেই প্রপার্টিকে সুরক্ষিত রাখে, তাহলে ফলাফলটি নীরবে বাদ দেওয়া হয়। - রিপোর্ট: এজেন্ট যাচাই করা ফলাফলগুলির সারসংক্ষেপ করে (মনে রাখবেন যে
legacy-scanনির্ধারক নিয়ম সহ গাইডের সাবসেট কভার করে, সাথে আধুনিকীকরণ প্ল্যান যদি আপনি এডিট করার আগে একটি প্ল্যান পর্যালোচনা করতে বলেন)। - গাইড রিট্রিভাল, রিফ্যাক্টরিং ও টেস্ট যাচাইকরণ: আধুনিকীকরণ করতে বলা হলে,
এজেন্ট উপযুক্ত গাইড নিয়ে আসতে
npx modern-web-guidance retrieve <guide-id>রান করে। এটি গাইডের বেসলাইন কম্প্যাটিবিলিটি প্যাটার্ন অনুযায়ী কোড রিফ্যাক্টর এক্সিকিউট করে এবং সমস্যা সমাধান হয়েছে কিনা তা কনফার্ম করতে প্রোজেক্টের টেস্ট স্যুটের পাশাপাশি পরিবর্তিত ফাইলেlegacy-scan <path>আবার রান করে।
এটি ব্যবহার করে দেখুন
টার্মিনালে একবার legacy-scan চালানো হোক বা আপনার কোডিং এজেন্টকে কোনও পুরনো মডিউল আধুনিকীকরণ করতে বলা হোক, আধুনিকীকরণ ওয়ার্কফ্লো আপনাকে প্রথাগত লিন্টারের ঝামেলা ছাড়াই লিগ্যাসি ওয়েব প্ল্যাটফর্মের ঋণ পরিশোধ করতে সাহায্য করে।
আপনি স্ট্যাটিক কোড মডার্নাইজেশন থেকে লাইভ ব্রাউজার যাচাইকরণ, বেঞ্চমার্কিং ও ডিবাগিংয়ে যেতে চাইলে, এজেন্টের জন্য Chrome DevTools-এর সাথে মডার্ন ওয়েব নির্দেশিকা পেয়ার করুন।