প্রকাশিত: ১১ নভেম্বর, ২০২৬
এই সপ্তাহে, আমরা Modern Web Guidance-এর ভার্সন 1.0 রিলিজ করেছি, এটি হল এমন এক সেট দক্ষতা যা আপনার কোডিং এজেন্টে সরাসরি ওয়েব প্ল্যাটফর্মের দক্ষতা, পেশাদার পদ্ধতি এবং ব্রাউজার কম্প্যাটিবিলিটি ডেটা এম্বেড করে। মডার্ন ওয়েব নির্দেশিকার মাধ্যমে আমাদের লক্ষ্য হল AI কোডিং এজেন্ট ব্যবহারকারী ডেভেলপারদের মডার্ন ওয়েব প্ল্যাটফর্মের ক্ষমতা ও কার্যকারিতার সম্পূর্ণ সুবিধা নিতে সাহায্য করা এবং শেষ পর্যন্ত ব্যবহারকারীদের জন্য ওয়েব অভিজ্ঞতা উন্নত করা।
মে মাসে আমরা প্রথমবার মডার্ন ওয়েব নির্দেশিকার আগাম প্রিভিউ লঞ্চ করার পর থেকে কোডিং এজেন্ট আরও উন্নত হয়েছে এবং অনেক নতুন ফ্রন্টিয়ার মডেল রিলিজ করা হয়েছে। আমাদের প্রায়শই এই প্রশ্নটি করা হয়: এইসব নতুন ফ্রন্টিয়ার মডেল কি আগে থেকেই ওয়েব ডেভেলপমেন্টের পেশাদার পদ্ধতি অনুসরণ করে না?
দুর্ভাগ্যবশত, উত্তর হল "না"—এবং আমরা জানি যে উত্তর হল "না" কারণ আমরা এটি পরীক্ষা করেছি।
মডার্ন ওয়েব নির্দেশিকার প্রতিটি নির্দেশিকায় এক সেট প্রত্যাশা সংজ্ঞায়িত করা থাকে, নির্দেশিকায় উল্লেখ করা পেশাদার পদ্ধতি সঠিকভাবে অনুসরণ করা হলে যা অবশ্যই সত্য হতে হবে। আমাদের মূল্যায়ন স্যুট তারপর সেইসব নির্দেশিকা পরীক্ষা করে দেখে। এর জন্য, মডার্ন ওয়েব নির্দেশিকা ইনস্টল করা আছে এমন একটি এজেন্ট (নির্দেশিত এজেন্ট) এবং মডার্ন ওয়েব নির্দেশিকা ইনস্টল করা নেই এমন আরেকটি এজেন্টকে (নির্দেশিত নয় এজেন্ট) একই প্রম্পট দেওয়া হয়। উভয় রান থেকে পাওয়া আউটপুট, গাইডে উল্লেখ করা প্রত্যাশার সাথে মিলিয়ে দেখা হয়।
আপনি যখন গাইডেড ও আনগাইডেড পাস রেটের তুলনা করবেন, তখন দেখতে পাবেন যে AI মডেলগুলি—এমনকি লেটেস্ট ফ্রন্টিয়ার মডেলগুলিও—নিজে থেকে আধুনিক ওয়েব ডেভেলপমেন্টের পেশাদার পদ্ধতি নির্ভরযোগ্যভাবে অনুসরণ করে না।
গড়ে, নির্দেশিকা ছাড়া কোডিং এজেন্ট আমাদের মূল্যায়ন স্যুটে মাত্র ৫০% চেক পাস করে, যেখানে মডার্ন ওয়েব নির্দেশিকা ব্যবহার করলে প্রায় ৯০% চেক পাস করে।
প্রতিটি গাইডের জন্য আমরা যে নির্দিষ্ট চেকগুলি চালাই এবং প্রতিটি মডেল সেগুলিতে কীভাবে স্কোর করে তার সম্পূর্ণ তালিকা দেখতে আপনি আমাদের eval ড্যাশবোর্ড দেখতে পারেন।
তবে, হাই-লেভেল ওভারভিউয়ের জন্য, এই পোস্টে ১০টি সবচেয়ে সমস্যাজনক ক্ষেত্র কভার করা হয়েছে যেখানে আমরা AI মডেলকে ধারাবাহিকভাবে ভুল করতে দেখি। এগুলি এমন মূল বিষয় যা ওয়েব ডেভেলপাররা তাদের দৈনন্দিন কাজে সবচেয়ে বেশি সম্মুখীন হতে পারেন, যেমন অ্যাক্সেসিবিলিটি, ব্যবহারকারীর অভিজ্ঞতা, পারফর্ম্যান্স এবং নিরাপত্তা।
১. অ্যাক্সেসিবিলিটি: কীবোর্ড ফোকাস ও inert ম্যানেজমেন্ট
কীবোর্ড বা স্ক্রিন রিডার ব্যবহার করে নেভিগেট করা ব্যক্তিদের জন্য, অনুমানযোগ্য ফোকাস অর্ডারই ইন্টার্যাক্টিভ UI-কে ব্যবহারযোগ্য করে তোলে। এটি না থাকলে, ফোকাস ব্যাকগ্রাউন্ডের লুকানো কন্টেন্টে চলে যেতে পারে অথবা ডজন ডজন অতিরিক্ত ট্যাব স্টপে আটকে যেতে পারে।
ফোকাস ও inert ম্যানেজমেন্ট হল আমাদের মূল্যায়নে অ্যাক্সেসিবিলিটির সবচেয়ে বড় ফাঁকগুলির মধ্যে একটি এবং এমন একটি ক্ষেত্র যা মডার্ন ওয়েব নির্দেশিকার মাধ্যমে সবচেয়ে বেশি উন্নত হয়। সবচেয়ে সাধারণ ভুলগুলির মধ্যে রয়েছে:
- নতুন খোলা ভিউতে ফোকাস সরাতে না পারা এবং ফিরে আসার সময় ট্রিগার করা এলিমেন্টে ফোকাস ফিরিয়ে আনতে ভুলে যাওয়া।
- মডেল
<dialog>ব্যবহার করা বা ব্যাকগ্রাউন্ড কন্টেন্টinertচিহ্নিত করার পরিবর্তে, ম্যানুয়াল জাভাস্ক্রিপ্ট ট্যাব ট্র্যাপ এবং কাস্টম মডেলেaria-modal="true"-এর উপর নির্ভর করা। - রোভিং
tabindexসহ একটি ট্যাব স্টপ ব্যবহার করার পরিবর্তে টুলবার বা ডিরেকশনাল গ্রিডের প্রতিটি আইটেমকে আলাদা ট্যাব স্টপ হিসেবে দেখানো। - কাস্টম
:focus-visibleআউটলাইন তৈরি করা, যেগুলির সংলগ্ন ব্যাকগ্রাউন্ডের সাথে ৩:১ কনট্রাস্ট রেশিও নেই।
২. অ্যাক্সেসিবিলিটি: রিডিউসড-মোশন সাপোর্ট
অপ্রত্যাশিত পৃষ্ঠা মুভমেন্ট এবং বড়-স্কেল অ্যানিমেশন শুধু বিভ্রান্তিকরই নয়—ভেস্টিবুলার ডিসঅর্ডার বা মোশন সেনসিটিভিটি আছে এমন ব্যবহারকারীদের জন্য, এগুলি মাথা ঘোরা, বমি বমি ভাব বা মাথাব্যথার কারণ হতে পারে।
স্ট্যান্ডার্ড CSS ট্রানজিশন বা কীফ্রেম অ্যানিমেশন যোগ করার সময় AI মডেল সাধারণত prefers-reduced-motion চেক করতে মনে রাখে। তবে, স্মুথ স্ক্রলিং, ভিউ ট্রানজিশন বা স্ক্রল-চালিত অ্যানিমেশনের মতো নতুন ফিচার ব্যবহার করার সময়, তারা প্রায়ই রিডিউসড মোশনের কথা ভুলে যান অথবা এটি প্রয়োগ করার সময় ভুল করেন:
- রুট এলিমেন্টে বিশ্বব্যাপী এবং শর্তহীনভাবে
scroll-behavior:smoothসেট করা। - স্ক্রল-চালিত CSS অ্যানিমেশন ব্যবহার করা হচ্ছে, তবে রিডিউসড মোশন চেক করা হচ্ছে না।
- স্ক্রল করার সময় মোশন কমানোর জন্য ক্যারোজেল আইটেমে
transitionডিউরেশন সরিয়ে দেওয়া, কিন্তু তারপরে ট্রান্সফর্ম প্রপার্টি সরাতে ভুলে যাওয়া, যার ফলে স্ক্রল করার সময় আইটেমের সাইজ হঠাৎ করে বদলে যায়। - রিডিউসড মোশন অ্যাক্টিভ থাকলে,
*,*::beforeও*::after-এ ব্ল্যাঙ্কেট0.01msডিউরেশন রিসেট প্রয়োগ করা, যার ফলে সব প্রয়োজনীয় নন-মোশন ট্রানজিশনও মুছে যায় (UI স্টেট পরিবর্তন কমিউনিকেট করার জন্য প্রয়োজন)। - রিডিউসড মোশন অ্যাক্টিভ থাকলে,
@view-transitionনিয়মকে রিডিউসড মোশন চেকের পিছনে গেট করার পরিবর্তে, শর্তহীনভাবে ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন চালু করা এবং::view-transition-*অ্যানিমেশন ওভাররাইড করা।
৩. অ্যাক্সেসিবিলিটি: ফর্ম যাচাইকরণ, ফর্ম্যাট সংক্রান্ত ইঙ্গিত ও অটোফিল স্ট্যাটাস
ওয়েবে সবচেয়ে গুরুত্বপূর্ণ ইউজার জার্নির ক্ষেত্রে ফর্ম হল একটি ভিত্তিপ্রস্তর। চেক-আউট ফর্মে সামান্য ত্রুটি থাকলে, তা ব্যবসার মোট আয়ের উপর বড় প্রভাব ফেলতে পারে।
ফর্ম তৈরি করার সময়, AI মডেল অনেক প্রাথমিক বিষয় ঠিক করে নেয়। তবে, তারা প্রায়ই ছোট কিন্তু গুরুত্বপূর্ণ বিবরণ, যেমন যাচাইকরণ সংক্রান্ত সমস্যা, প্লেসহোল্ডার ও ফর্ম্যাট সংক্রান্ত হিন্টের সঠিক প্লেসমেন্ট এবং পাসওয়ার্ড ম্যানেজার ও অটোফিল ফিচারের সাথে সঠিকভাবে ইন্টিগ্রেট করার মতো বিষয়ে ব্যর্থ হয়:
- কাস্টম জাভাস্ক্রিপ্ট
blurযাচাইকরণের মাধ্যমে CSS:user-invalidপুনরায় প্রয়োগ করা, যা প্রায়শই ব্যবহারকারীরা ট্যাব করার সাথে সাথেই অস্পর্শিতrequiredফিল্ডগুলিকে ফ্ল্যাগ করে। - দৃশ্যমান সমস্যার সাথে
aria-invalidসিঙ্ক না করা,blur-এaria-invalid="true"অকালে সেট করা অথবা JavaScript-এaria-invalidসিঙ্ক না করে CSS-এ:user-invalidস্টাইল করা। aria-describedby-এর সাথে লিঙ্ক করা স্থায়ী ইঙ্গিত দেখানোর পরিবর্তে প্রয়োজনীয় ফর্ম্যাট (যেমন, কার্ডের মেয়াদ শেষ হওয়ার ইনপুটেMM/YY) দেখানোর জন্য অদৃশ্য হয়ে যাওয়াplaceholderটেক্সটের উপর নির্ভর করা।<input>-এর নিচে (উপরে নয়) ফর্ম্যাট সংক্রান্ত ইঙ্গিত ও পাসওয়ার্ড সংক্রান্ত নিয়ম দেখানো, যেখানে ব্যবহারকারীর সেগুলি পড়ার প্রয়োজন হলে মোবাইল কীবোর্ড ও অটোফিল পপওভারের কারণে সেগুলি ঢাকা পড়ে যেতে পারে।- লেআউট পরিবর্তন করে না এমন নন-কালার কিউয়ের (যেমন, ইনসেট
box-shadow) সাথে কালার পেয়ার করার পরিবর্তে শুধু বর্ডার কালার পরিবর্তন করে:autofillইনপুট হাইলাইট করা।
৪. ব্যবহারকারীর অভিজ্ঞতা: সোয়াইপ ও টাচ জেসচার
এজেন্টরা ইম্পারেটিভ জাভাস্ক্রিপ্ট ব্যবহার করে টাচ জেসচার প্রয়োগ করতে এবং তাদের নিজস্ব কাস্টম ফিজিক্স লজিক লিখতে পারদর্শী। এইসব প্রয়োগ কাজ করে; তবে, জাভাস্ক্রিপ্ট-পরিচালিত টাচ ইন্টার্যাকশন খুব কমই মসৃণ বলে মনে হয়, যেমনটি ব্যবহারকারীরা তাদের নেটিভ অ্যাপের সমকক্ষদের কাছ থেকে আশা করেন।
এইসব ইন্টার্যাকশনের মধ্যে অনেকগুলি CSS ও নেটিভ স্ক্রল API-এর মাধ্যমে প্রয়োগ করা যেতে পারে, যার ফলে ব্রাউজার মূল থ্রেড থেকে জেসচার ফিজিক্স রান করতে পারে। তবে, আমাদের মূল্যায়নে দেখা গেছে যে AI মডেল প্রায়শই এইসব ফিচার উপেক্ষা করে:
- CSS স্ক্রল স্ন্যাপ ব্যবহার করার পরিবর্তে
pointermoveবাtouchmoveলিসনারের সাহায্যে সোয়াইপ-টু-ডিসমিস বা সোয়াইপ-টু-রিভিল জেসচার প্রয়োগ করা। - ট্যাব-সোয়াইপ ইন্টারফেসে
overscroll-behavior-x:noneবাদ দেওয়া, যা ওভার-সোয়াইপের সময় ভুলবশত ব্রাউজার ব্যাক বা ফরওয়ার্ড নেভিগেশন ট্রিগার করতে পারে। - স্ক্রল-চালিত অ্যানিমেশন ব্যবহার করার পরিবর্তে জাভাস্ক্রিপ্ট কলব্যাকে মূল থ্রেডে সোয়াইপ প্রগ্রেস এফেক্ট চালানো।
- স্ক্রল-ভিত্তিক সোয়াইপ-অ্যাকশন প্যানেলে কীবোর্ড ফোকাস সঠিকভাবে কাজ করছে না।
৫. ব্যবহারকারীর অভিজ্ঞতা: ডায়ালগ, পপওভার ও টপ-লেয়ার ট্রানজিশন
আমাদের মূল্যায়নে, মডেলগুলি প্রায়শই মোডাল ডায়ালগ এবং পপওভারের চারপাশে স্ক্রল অ্যানিমেট, খারিজ বা ধারণ করার সময় ইম্পারেটিভ জাভাস্ক্রিপ্ট ওয়ার্কঅ্যারাউন্ডে ফিরে যায়।
টপ-লেয়ার ওভারলের জন্য তৈরি আধুনিক HTML ও CSS ফিচারের উপর নির্ভর করার পরিবর্তে, এজেন্টরা প্রায়শই এন্ট্রি ও এক্সিট স্টেট মেশিন, ইতিহাস হুক ও বডি স্ক্রল লক হ্যান্ড-রোল করে, যা বজায় রাখা কঠিন এবং সূক্ষ্ম UI বাগ হওয়ার সম্ভাবনা থাকে।
এইসব ইন্টার্যাকশন সঠিকভাবে করতে পারলে, তা ব্যবহারকারীর কাছে একটি ভঙ্গুর-অনুভূতি অভিজ্ঞতাকে একটি পালিশ করা অভিজ্ঞতায় রূপান্তর করতে পারে যা ব্যবহারকারীরা বিশ্বাস করেন। সবচেয়ে সাধারণ যেসব ভুল আমরা দেখতে পাই সেগুলি এখানে দেওয়া হল:
- শুধু
popoverব্যবহার করার পরিবর্তে, লাইট ডিসমিসের জন্য ম্যানুয়াল ক্লিক-আউটসাইড হ্যান্ডলার সহ কাস্টমposition:fixedওভারলে তৈরি করা। @starting-styleএবংtransition-behavior-এর মাধ্যমে শুধু CSS-এ করার পরিবর্তে, CSS ট্রানজিশন ক্লাস টগল করে এবংrequestAnimationFrame()ওtransitionendলিসনারের (setTimeout()ফলব্যাক সহ) সাথে সমন্বয় করে এন্ট্রি ও এক্সিট অ্যানিমেশন তৈরি করা।- ওভারস্ক্রল কন্টেন করার জন্য
<dialog>এলিমেন্ট ব্যবহার করার পরিবর্তে<html>-এoverflow:hiddenসেট করে খোলা মোডালের পিছনে পৃষ্ঠা স্ক্রল লক করা। - Android ব্যাক জেসচার শনাক্ত করতে এবং খোলা মোডাল বন্ধ করতে
popstateলিসেনার যোগ করা হচ্ছে, মোডাল<dialog>এলিমেন্টের নেটিভ ব্যাক-বাটন বন্ধ করার কার্যকারিতা ব্যবহার করার পরিবর্তে।
৬. ব্যবহারকারীর অভিজ্ঞতা: ডার্ক মোড এবং থিম-অ্যাডাপ্টিভ কন্ট্রোল
চোখের উপর চাপ ও তীব্র আলো কমাতে ব্যবহারকারীরা ডার্ক মোড চালু করেন, তাই পৃষ্ঠা লোড হওয়ার সময় উজ্জ্বল সাদা ফ্ল্যাশ, থিম ছাড়া ফর্ম কন্ট্রোল বা OS-এর পছন্দের সাথে সিঙ্ক না হওয়া টগল ব্যবহারকারীর অভিজ্ঞতাকে সাথে সাথে খারাপ করে দেয়।
ডার্ক মোড টগল করা সহজ মনে হতে পারে, তবে আমাদের মূল্যায়নে গাইড না করা মডেলগুলি ক্রমাগত থিম পরিবর্তন এবং নেটিভ ফর্ম কন্ট্রোল সঠিকভাবে পেতে প্রয়োজনীয় প্ল্যাটফর্মের বিবরণ মিস করে:
<head>-এ<meta name="color-scheme" content="light dark">নেই, যার ফলে এক্সটার্নাল স্টাইলশিট লোড হওয়ার সময় ডার্ক-মোড ব্যবহারকারীরা একটি সাদা ক্যানভাস ফ্ল্যাশ দেখতে পান।color-schemeসেট না করে কাস্টম রঙের সাহায্যে ডার্ক থিম বা ডার্ক-সারফেস কম্পোনেন্ট স্টাইল করা, নেটিভ স্ক্রলবার ও ফর্ম কন্ট্রোল লাইট মোডে আটকে রাখা।- থিম-অ্যাডাপ্টিভ কালার টোকেন সংজ্ঞায়িত করার সময় CSS
light-dark()ফাংশন উপেক্ষা করা যা অটোমেটিক অ্যাক্টিভcolor-schemeঅনুসরণ করে। - শুধুমাত্র একটি বাইনারি লাইট বা ডার্ক টগল প্রদান করা যা OS ডিফল্টে ফিরে যাওয়ার কোনও বিকল্প ছাড়াই
localStorage-এ একটি স্পষ্ট ওভাররাইড সেট করে। storageইভেন্ট লিসেনার যোগ করতে ভুলে যাওয়া, ব্যবহারকারী থিম পরিবর্তন করলে অন্যান্য খোলা ট্যাব সিঙ্ক না করা।
৭. পারফর্ম্যান্স: রানটাইম রেসপন্সিভনেস ও স্মুথনেস
ব্যবহারকারীরা কোনও ওয়েব পেজ লোড হওয়ার পরে সেখানে বেশিরভাগ সময় কাটান, তাই ধীরগতির ইন্টার্যাকশন ও ট্রানজিশন ব্যবহারকারীর অভিজ্ঞতাকে ঠিক ততটাই খারাপ করতে পারে যতটা ধীরগতির প্রাথমিক লোড করে।
আমাদের মূল্যায়নে, মডেলগুলি সাধারণত ক্লাসিক লোড-টাইম সংক্রান্ত পেশাদার পদ্ধতি অনুসরণ করে যা Lighthouse-এর মতো টুলে বছরের পর বছর ধরে প্রচার করা হয়েছে এবং তারা সাধারণত জানে যে কীভাবে একটি ওয়েব ওয়ার্কারের কাছে স্পষ্ট ভারী লুপগুলি অফলোড করতে হয়। যেখানে তারা ক্রমাগত লড়াই করে তা হল মেইন-থ্রেড রেসপন্সিভনেস, যা INP অপ্টিমাইজ করার জন্য অপরিহার্য: লেআউট কাজ আলাদা করা, অগ্রাধিকার অনুসারে টাস্ক শিডিউল করা এবং নতুন HTML এবং CSS ফিচারের সুবিধা নেওয়া যা মেইন থ্রেড থেকে রেন্ডারিং কাজ করে।
যেমন, আমরা প্রায়ই দেখি যে এজেন্টরা:
scheduler.postTask()-এর মাধ্যমে ব্যবহারকারীর কাছে দৃশ্যমান টাস্ককে অগ্রাধিকার দেওয়ার পরিবর্তে ব্যাকগ্রাউন্ড বা কম অগ্রাধিকারের কাজের জন্য কাস্টমsetTimeout()কিউ রোল করা অথবা ব্রাউজার সাপোর্ট করলেscheduler.yield()-এর মাধ্যমে টাস্ক কন্টিনিউয়েশনের সুবিধা নেওয়া।content-visibility:autoএবংcontain-intrinsic-sizeপ্রয়োগ না করে জটিল লেআউট (যেমন ঘন ডেটা গ্রিড) তৈরি করা, যার অর্থ ব্যবহারকারীর ইন্টার্যাকশনের পরে আপডেটগুলি একটি ফুল-পেজ রিফ্লো ট্রিগার করে।content-visibility:hidden(inert-এর সাথে পেয়ার করা) ব্যবহার করার পরিবর্তেdisplay:none-এর মাধ্যমে ইনঅ্যাক্টিভ SPA ভিউ লুকানো (বা সেগুলি সরিয়ে দেওয়া)। প্রথমটি ক্যাশে করা রেন্ডারিং স্টেট নষ্ট করে দেয়, তাই আগের অবস্থায় ফিরে গেলে সম্পূর্ণ লেআউট ও পেইন্ট ট্রিগার হয়।contentvisibilityautostatechangeইভেন্টের (যেখানে উপলভ্য) সাথেcontent-visibility:autoপেয়ার করার পরিবর্তে ইন্টারসেকশন অবজারভার কলব্যাকের মাধ্যমে অফস্ক্রিন<canvas>অ্যানিমেশন এবং ব্যাকগ্রাউন্ড লুপ পজ করা, এলিমেন্ট স্ক্রল করে ভিউতে আসার আগে ব্রাউজারের প্রি-রেন্ডার মার্জিন মিস করা।- CSS স্ক্রল-স্টেট কোয়েরি উপলভ্য থাকলে (Intersection Observer ফলব্যাক সহ) তা ব্যবহার করার পরিবর্তে
scrollইভেন্ট লিসেনার ব্যবহার করে স্ক্রল অ্যাফর্ডেন্স UI ইঙ্গিত তৈরি করা যা ক্রমাগত লেআউট গণনা করতে বাধ্য করে।
৮. পারফর্ম্যান্স: লেআউট শিফ্ট ও ভিজ্যুয়াল ফ্লিকার
অপ্রত্যাশিত লেআউট শিফট পাঠকের মনোযোগ নষ্ট করে এবং ব্যবহারকারীকে অপ্রত্যাশিত বোতামে ক্লিক করতে বাধ্য করতে পারে—কখনও কখনও এর ফলে এমন কিছু ঘটে যা আর আগের অবস্থায় ফিরিয়ে আনা যায় না!
লেআউট শিফ্ট থেকে রক্ষা করার জন্য মডেলগুলি নির্ভরযোগ্যভাবে স্ট্যান্ডার্ড <img> এলিমেন্টে width এবং height অ্যাট্রিবিউট যোগ করে, তবে তারা ক্রমাগত লেআউট শিফ্টের অন্যান্য সাধারণ সোর্স এবং <video> এলিমেন্ট, ওয়েব ফন্ট সোয়্যাপ, মোবাইল ব্রাউজার টুলবার এবং ক্লায়েন্ট-সাইড এক্সপেরিমেন্ট থেকে প্রি-পেইন্ট ফ্ল্যাশ মিস করে—যার সবকটিই CLS-কে প্রভাবিত করতে পারে।
<video>এলিমেন্টে নির্দিষ্টwidthএবংheightঅ্যাট্রিবিউট বাদ দেওয়া (যাতে আনলোড করা প্লেয়ার ডিফল্ট হিসেবে300×150-এ সেট হয় এবং মেটাডেটা লোড হলে লেআউট শিফট করে) অথবা মিডিয়া এলিমেন্টে সরাসরিaspect-ratioএবংobject-fitসেট করার পরিবর্তে মিডিয়া র্যাপার এলিমেন্ট স্টাইল করা।font-size-adjustছাড়াই সিস্টেম ফলব্যাক ফন্টের সাথে ওয়েব ফন্ট পেয়ার করা, যার ফলে ওয়েব ফন্ট সোয়্যাপ করার সময় অনুচ্ছেদ এবং শিরোনাম দৃশ্যত রিফ্লো হয়।- ডায়নামিক বা ছোট ভিউপোর্ট ইউনিটের (
dvh,svh) পরিবর্তে স্ট্যাটিকvhইউনিট সহ হিরো সেকশন ও ফুল-স্ক্রিন লেআউটের সাইজ নির্ধারণ করা, যার ফলে মোবাইল ব্রাউজার টুলবার বড় ও ছোট হওয়ার সাথে সাথে কন্টেন্ট জাম্প করে। - ক্লায়েন্ট-সাইড A/B টেস্টের জন্য (LCP-তে দেরি করা এবং অদৃশ্য এলিমেন্ট ক্লিকযোগ্য হিসেবে রেখে দেওয়া) লিগ্যাসি
opacity:0বাvisibility:hiddenঅ্যান্টি-ফ্লিকার স্নিপেট এবং মাল্টি-সেকেন্ড টাইমআউট সহ কন্টেন্ট লুকানো, পরিবর্তে উপলভ্য থাকলেblocking="render"সহ স্ক্রিপ্ট ব্যবহার করা। rel="expect"ওblocking="render"-এর মাধ্যমে প্রথম রেন্ডার হোল্ড করার পরিবর্তে, ক্রিটিক্যাল অ্যাবাভ-দ্য-ফোল্ড মার্কআপ পার্স করার আগে ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন ট্রিগার করা হচ্ছে, যার ফলে ট্রানজিশনের মাঝখানে হাফ-পার্সড এলিমেন্ট পপ-ইন হচ্ছে।
৯. নিরাপত্তা: DOM XSS প্রতিরোধ ও HTML স্যানিটাইজেশন
একটি ক্রস-সাইট স্ক্রিপ্টিং (XSS) ত্রুটি থাকলে, আক্রমণকারী আপনার ব্যবহারকারীর ব্রাউজারে ইচ্ছামতো কোড চালাতে, সেশন ডেটা চুরি করতে বা তাদের হয়ে অ্যাকশন নিতে পারে। এই কারণেই নিরাপদ HTML স্যানিটাইজেশন, বিশ্বস্ত ধরন এবং কঠোর CSP-এর মতো ব্রাউজার-এনফোর্সড ডিফেন্স এত গুরুত্বপূর্ণ।
মডেলগুলি খুব কমই এই নিরাপত্তা সংক্রান্ত সমস্যাগুলি প্রোঅ্যাক্টিভভাবে সমাধান করে। যেমন, আমাদের সম্পূর্ণ মূল্যায়ন সুইটের সব টাস্ক জুড়ে, মডেলগুলি স্পষ্ট প্রম্পট ছাড়াই কন্টেন্ট নিরাপত্তা নীতি (CSP) বা ক্রস-অরিজিন আইসোলেশন হেডার যোগ করেনি।
এমনকি প্রম্পট সরাসরি নিরাপত্তার অনুরোধ করলেও, আনগাইডেড মডেল আমাদের নিরাপত্তা চেকের অর্ধেকেরও বেশি ক্ষেত্রে ব্যর্থ হতে থাকে, যার ফলে ভঙ্গুর কাস্টম ফলব্যাক বা অসম্পূর্ণ নীতিতে পৌঁছায়। DOM XSS-এর বিরুদ্ধে প্রতিরোধ করার সময় এটি স্পষ্টভাবে দেখা যায়:
- নেটিভ স্যানিটাইজেশন উপলভ্য না থাকলে, DOMPurify-এর মতো যাচাই করা লাইব্রেরি ব্যবহার করার পরিবর্তে, হ্যান্ড-রোল্ড
DOMParserঅনুমোদিত তালিকা স্যানিটাইজার লেখা—হয়setHTML()ফলব্যাক হিসেবে অথবা বিশ্বস্ত প্রকার নীতির মধ্যে। - প্রতিটি পৃষ্ঠা লোড করার সময় নেটিভ
setHTML()ব্যবহার করার পরিবর্তে DOMPurify বান্ডেল করা এবং শুধুমাত্র ফলব্যাক হিসেবে DOMPurify ধীরে ধীরে লোড করা। - অনুমতিমূলক
(input) => inputপাসথ্রু বিশ্বস্ত ধরনের নীতি রেজিস্টার করা যা সিঙ্ক এনফোর্সমেন্টকে দুর্বল করে। - SHA-256 হ্যাশ দিয়ে ইনলাইন স্ক্রিপ্ট লক করার পরিবর্তে হোস্ট-অ্যালাউলিস্ট
script-src 'self'CSP-এর সাথে স্ট্যাটিক পৃষ্ঠায় বিশ্বস্ত প্রকার পেয়ার করা। - ননস-ভিত্তিক
script-srcকন্টেন্ট নিরাপত্তা নীতি কনফিগার করার সময়'strict-dynamic'এবং'report-sample'বাদ দেওয়া হচ্ছে।
১০. নিরাপত্তা: পাসকী সাইন-ইন, আবার যাচাইকরণ ও ক্রেডেনশিয়াল লাইফসাইকেল
পাসকী ব্যবহারকারীদের জন্য নিরাপত্তা এবং ব্যবসার জন্য সাইন-ইন কনভার্সন উন্নত করে, কিন্তু সেগুলি বাস্তবায়ন করা (এমনকি এজেন্টের সাহায্যেও) কঠিন।
WebAuthn-এর নির্দিষ্ট সিরিয়ালাইজেশন, ক্ষমতা-শনাক্তকরণ এবং সিগন্যালিং API আছে যা আমাদের মূল্যায়নে গাইড না করা মডেলগুলি প্রায় সম্পূর্ণভাবে মিস করে। আপনি যদি কোনও AI মডেলকে পাসকী সাইন-ইন, ম্যানেজমেন্ট বা স্টেপ-আপ রি-অথেন্টিকেশন যোগ করতে বলেন, তাহলে এটি প্রায়শই ম্যানুয়াল বাইট-এনকোডিং হেল্পার লেখে, ম্যানেজমেন্ট UI-তে ক্ষমতা চেক করা এড়িয়ে যায় বা পাসওয়ার্ড ম্যানেজারের সাথে ক্রেডেনশিয়াল সিঙ্ক করে না:
parseCreationOptionsFromJSON(),parseRequestOptionsFromJSON()এবংcredential.toJSON()-এর মতো বিল্ট-ইন সিরিয়ালাইজেশন পদ্ধতির উপর নির্ভর করার পরিবর্তে, হ্যান্ড-রোলিংatob()এবংbtoa()Base64URL কনভার্সন হেল্পার—প্রাথমিক পাথ বা রিডানড্যান্ট ফলব্যাক বয়লারপ্লেট হিসেবে।- সার্ভার কোনও অজানা ক্রেডেনশিয়াল আইডি রিপোর্ট করলে, সাইন-ইন করার সময়
PublicKeyCredential.signalUnknownCredential()বাদ দেওয়া, ব্যবহারকারীর পাসওয়ার্ড ম্যানেজারে মুছে ফেলা বা তুলে নেওয়া পাসকী রেখে দেওয়া। - পাসকী তৈরি ও ম্যানেজমেন্ট UI রেন্ডার করার আগে
PublicKeyCredential.getClientCapabilities()এড়িয়ে যাওয়া হচ্ছে। - স্টেপ-আপ পাসকী রি-অথেন্টিকেশন অনুরোধ শুরু করার সময়
AbortControllerএবংAbortSignalবাদ দেওয়া। - স্ট্রীমলাইন করা সাইন-ইন প্রম্পটের জন্য
uiMode:"immediate"-এর পরিবর্তে অরিজিন-ট্রায়ালmediation:"immediate"বিকল্প পাস করা হচ্ছে।
এই ফাঁকগুলি পূরণ করুন
এই ১০টি ক্ষেত্র ছাড়াও আরও অনেক ক্ষেত্র আছে এবং আমরা আশা করি যে নির্দিষ্ট জ্ঞানের ঘাটতি সময়ের সাথে সাথে পরিবর্তিত হবে। মডেলগুলি আরও উন্নত হবে এবং ওয়েব প্ল্যাটফর্মের বিবর্তন চলতে থাকবে।
সুখবর হল, মডার্ন ওয়েব নির্দেশিকা এই সব ফাঁক পূরণ করে এবং প্ল্যাটফর্মের সাথে সাথে এটিও উন্নত হতে থাকবে।
মডার্ন ওয়েব নির্দেশিকা ব্যবহার করা শুরু করতে, নিম্নলিখিত কমান্ড রান করুন অথবা আপনার এজেন্টের প্লাগ-ইন মার্কেটপ্লেসে এটি সার্চ করুন:
npx modern-web-guidance@latest install
আপনি কি দেখেছেন যে মডেল অন্যান্য ওয়েব ডেভেলপমেন্ট টাস্ক ভুল করেছে? আমরা এই বিষয়ে জানতে চাই। Modern Web Guidance GitHub রিপোজিটরিতে কোনও সমস্যা খুলুন অথবা প্রোজেক্টে কন্ট্রিবিউট করে অন্যান্য ডেভেলপারদের জন্য সেইসব ফাঁক পূরণ করতে আমাদের সাহায্য করুন।