মডার্ন ওয়েব নির্দেশিকা সংক্রান্ত গাইড

যেসব ব্যবহারকারী হাই-কনট্রাস্ট ইন্টারফেস পছন্দ করেন তাদের জন্য স্ক্রলবারের দৃশ্যমানতা উন্নত করুন

HTML কন্টেন্টে WebGL শেডারের মাধ্যমে কাস্টম ভিজ্যুয়াল এফেক্ট প্রয়োগ করুন।

ওয়েবের জন্য কালার সংক্রান্ত নির্দেশিকা, যার মধ্যে কন্ট্রাস্ট সংক্রান্ত প্রয়োজনীয়তা, হালকা ও গাঢ় রঙের স্কিম, ফোর্সড কালার মোড এবং বেস কালার থেকে টিন্ট ও শেড তৈরি করা অন্তর্ভুক্ত।

আরও বেশি অভিব্যক্তিপূর্ণ ডিজাইনের জন্য, যেকোনও ফ্রি-ফর্ম শেপে এলিমেন্ট ও তাদের কন্টেন্ট ক্লিপ করুন, যেমন কোনও প্রতীক, ব্রাশ স্ট্রোক বা অর্গানিক টেক্সচার।

আন্ডারলাইন, ওভারলাইন, স্ট্রাইকথ্রু বা সম্পূর্ণ কাস্টম আকারের মতো টেক্সট ডেকোরেশন যোগ করুন, সাথে রিভিল অ্যানিমেশন, কাস্টম অফসেট এবং এন্ড ইনসেট এবং ফ্লেক্সিবল ইঙ্ক স্কিপিং।

স্ক্রলবারের রঙ বা ঘনত্ব কাস্টমাইজ করা

ডার্ক মোড সাপোর্ট এমনভাবে প্রয়োগ করুন যাতে ব্যবহারকারীর লাইট/ডার্ক থিম সংক্রান্ত পছন্দকে সম্মান করা হয় এবং ব্রাউজার UI (যেমন, স্ক্রলবার, ফর্ম কন্ট্রোল ইত্যাদি) অ্যাডাপ্ট করা হয়

3D দৃশ্যে ইন্টার‍্যাক্টিভ HTML এলিমেন্ট ইন্টিগ্রেট করুন।

ডায়নামিক ব্যাকগ্রাউন্ড কালারে পর্যাপ্ত কনট্রাস্ট সহ একটি পাঠযোগ্য টেক্সট কালার বেছে নিন।

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

ক্যানভাস থেকে ছবি বা ভিডিও ফ্রেম হিসেবে ডায়নামিক HTML কন্টেন্ট ক্যাপচার ও এক্সপোর্ট করুন।

ক্যানভাসে রেন্ডার করা কন্টেন্ট ব্রাউজার ফিচারে দেখান, যেমন সহায়ক প্রযুক্তি, অনুবাদ বা রিডিং মোড।

টেক্সট র‍্যাপ করার সময় ব্রাউজারকে সমানভাবে ব্যালেন্স করা লাইন ব্রেক প্রয়োগ করার অনুমতি দিয়ে, ছোট স্ট্যান্ডঅ্যালোন টেক্সট কন্টেন্টের লেআউট ও সুস্পষ্টতা উন্নত করুন, যেমন কয়েক লাইনের বেশি নয় এমন শিরোনাম।

যেকোনও ফন্টের টেক্সটের সাথে নিখুঁত উল্লম্ব অ্যালাইনমেন্ট অর্জন করুন। যেমন, টেক্সটের উপরে ও নিচে একদম সমান ভিজ্যুয়াল প্যাডিং অথবা টেক্সটকে তার ঠিক পাশে থাকা আইকন বা ছবির সাথে একদম সমানভাবে অ্যালাইন করা।

একাধিক আকার একত্রিত করে জটিল কাটআউট বা এলিমেন্টে 'নকআউট' এফেক্ট তৈরি করুন, যেমন কোনও এলিমেন্টে নচ যোগ করা।

আরও স্ক্রল করা যাবে এমন জায়গা নির্দেশ করতে বা পেমেন্ট-ওয়াল করা টেক্সট অস্পষ্ট করতে কন্টেন্টের প্রান্তে ট্রান্সপারেন্সি গ্রেডিয়েন্ট প্রয়োগ করুন।

কাস্টম এলিমেন্ট দিয়ে আবার তৈরি করার পরিবর্তে CSS দিয়ে টেক্সট বেছে নেওয়া, স্ক্রলবার, ফর্ম কন্ট্রোল ও পিকারের মতো ব্রাউজার-জেনারেটেড UI থিম করুন।

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

CSS-এর মাধ্যমে ভিজ্যুয়াল এফেক্ট যেমন লেয়ার করা শ্যাডো, ব্লেন্ড মোড, অনুমানযোগ্য কালার ইন্টারপোলেশন সহ গ্রেডিয়েন্ট এবং স্ট্রাইপ, চেকারবোর্ড, ডট ও পাই চার্টের মতো প্যাটার্ন যা শুধুমাত্র গ্রেডিয়েন্ট থেকে তৈরি করা হয়।

ফন্ট স্টাইল এমনভাবে নির্ধারণ করুন যাতে পছন্দের ফন্ট এবং ফলব্যাক ফন্টের মধ্যে অদলবদল (বা এর উল্টোটা) হলেও টেক্সট যেন পাঠযোগ্য এবং দৃশ্যত সামঞ্জস্যপূর্ণ থাকে।

ফন্ট স্টাইল এমনভাবে নির্ধারণ করুন যাতে টেক্সট পড়া যায় এবং টেক্সটের একটি ব্লকে একাধিক ফন্ট ব্যবহার করা হলেও তা যেন দেখতে একই রকম লাগে।

এলিমেন্টে বাস্তবসম্মত আবহাওয়া এবং টেক্সচার প্যাটার্ন প্রয়োগ করো যাতে সেগুলিকে জৈব, পুরনো বা ফিজিক্যাল মেটেরিয়ালের মতো দেখায়।

স্ক্রল প্রোগ্রেস বার, ধাপে ধাপে প্রোগ্রেস ট্র্যাকার বা যেকোনও ভিজ্যুয়াল অ্যাফর্ডেন্স তৈরি করুন যা ব্যবহারকারী কোনও পৃষ্ঠা বা বিভাগ কতটা স্ক্রল করেছেন তা দেখায়।

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

পৃষ্ঠার রঙের স্কিম নির্বিশেষে নির্দিষ্ট কিছু এলিমেন্টকে (যেমন, কোড ব্লক, মিডিয়া প্লেয়ার ইত্যাদি) লাইট মোড বা ডার্ক মোডে দেখানোর জন্য বাধ্য করুন।

দিকনির্দেশক তীর (বা অন্যান্য ভিজ্যুয়াল স্টাইলিং) সহ টুলটিপ এবং পপওভার তৈরি করুন যা এলিমেন্টটি ফলব্যাক পজিশনে ফ্লিপ করার সময় অটোমেটিক সঠিক উপায়ে নির্দেশ করে।

'পুল-টু-রিভিল' ফিচার তৈরি করুন যা ব্যবহারকারীকে স্ক্রিনে নিচের দিকে টেনে আরও কন্টেন্ট দেখতে সাহায্য করবে, যেমন সার্চ বার।

এমন একটি ডেটা টেবিল তৈরি করুন যা সঠিক হেডার সিম্যান্টিক্স সহ সারণীবদ্ধ ডেটা উপস্থাপন করে এবং ছোট স্ক্রিনে ও সহায়ক প্রযুক্তির সাহায্যে পাঠযোগ্য ও নেভিগেবল থাকে।

ফ্লোটিং বোতাম বা উইজেট (ব্যাক-টু-টপ, স্ক্রল-টু-বটম, চ্যাট লঞ্চার ইত্যাদি) তৈরি করুন যা ব্যবহারকারী স্ক্রল করেছেন কিনা তার উপর ভিত্তি করে দেখা যায় এবং অদৃশ্য হয়ে যায়।

স্ক্রল-শ্যাডো ওভারলে, গ্রেডিয়েন্ট ফেড বা দিকনির্দেশক তীরচিহ্ন তৈরি করুন যা শুধুমাত্র তখনই দেখা যাবে যখন সেই দিকে স্ক্রল করার জন্য আরও কন্টেন্ট থাকবে।

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

স্টিকি বিভাগ হেডার বা নেভিগেশন বার তৈরি করুন যা আসলে উপরে "আটকে" গেলে, তাদের রঙের স্কিম পরিবর্তন করে বা ছায়া অর্জন করে দৃশ্যত রূপান্তরিত হয়।

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

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

এমন একটি কার্ড কম্পোনেন্ট তৈরি করুন যা উপলভ্য স্পেস ও কন্টেন্ট অনুযায়ী নিজের প্রেজেন্টেশনকে মানিয়ে নেয়।

নেস্টেড সাবমেনুর জন্য সহায়তা সহ বিকল্প বা অ্যাকশনের তালিকা দেখায় এমন একটি মেনু কম্পোনেন্ট তৈরি করুন।

নেভিগেশন মেনুতে কোনও পৃষ্ঠার বর্তমানে দৃশ্যমান বিভাগ হাইলাইট করুন

একটি স্টাইল করা প্রোগ্রেস বার তৈরি করুন যা নির্দিষ্ট এবং অনির্দিষ্ট উভয় অবস্থাতেই কোনও টাস্ক বা প্রসেস সম্পূর্ণ হওয়ার বিষয়টি জানায়।

একটি হোভারকার্ড কম্পোনেন্ট তৈরি করুন যা কোনও নির্দিষ্ট ধরনের লিঙ্কের (যেমন, ব্যবহারকারীর প্রোফাইল) পৃষ্ঠার একটি ইন্টার‍্যাক্টিভ স্ট্রাকচার্ড প্রিভিউ দেখায়, যার উপর মাউস নিয়ে গেলে নেভিগেট করা যাবে।

ব্যবহারকারীর ইন্টার‍্যাকশনের সময় খোলা থাকে এমন টিথার করা নেটিভ ওভারলে ব্যবহার করে পারসিস্টেন্ট অনবোর্ডিং ওয়াকথ্রু তৈরি করুন।

ধারাবাহিক, স্ট্যাক করা যায় এমন মেসেজিং ও স্টেট কমিউনিকেশনের জন্য নন-ইনট্রুসিভ টোস্ট ও ওভারলে বিজ্ঞপ্তি তৈরি করুন।

একটি ডার্ক মোড টগল কম্পোনেন্ট তৈরি করুন যা ব্যবহারকারীদের বর্তমান সাইটের জন্য তাদের সিস্টেম কালার স্কিম পছন্দ ওভাররাইড করতে দেয়।

একটি মোডাল বা নন-মোডাল ডায়ালগ কম্পোনেন্ট তৈরি করুন যা অ্যাক্সেসযোগ্য, ফোকাস যথাযথভাবে ম্যানেজ করে এবং প্রতিটি প্ল্যাটফর্মে ব্যবহারকারীদের প্রত্যাশা অনুযায়ী বাতিল করা যেতে পারে।

একটি লোডিং স্পিনার তৈরি করুন যা সমস্ত ব্যবহারকারীর কাছে ব্যস্ত অবস্থা দেখায়, কম-মোশন পছন্দকে সম্মান করে এবং দক্ষতার সাথে অ্যানিমেট করে।

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

একটি প্রোগ্রেস রিং কম্পোনেন্ট তৈরি করুন যা কোনও টাস্ক বা প্রসেস সম্পূর্ণ হওয়ার স্ট্যাটাস ভিজ্যুয়ালি দেখায়, যার মধ্যে সেন্টারে কন্টেন্ট ও ব্র্যান্ড-কনসিস্টেন্ট স্টাইলিংয়ের জন্য সাপোর্ট থাকে।

ফুল-স্ক্রিন হায়ারার্কিক্যাল নেভিগেশন তৈরি করুন যা ব্যবহারকারীদের নেস্টেড ভিউতে ড্রিল ডাউন করতে এবং ব্রাউজার ইতিহাস সিঙ্ক রেখে ফিরে আসার জন্য সোয়াইপ বা নেভিগেট করতে দেয়।

নেটিভ কার্যকারিতা এবং অ্যাক্সেসিবিলিটি বজায় রেখে কাস্টম আইকন, লেআউট, রঙ, চেক/আনচেক অ্যানিমেশন সহ স্টাইল চেকবক্স।

ব্যবহারকারী স্ক্রল করার সময় এলিমেন্ট স্ক্রলপোর্টে (বা ভিউপোর্টে) প্রবেশ ও প্রস্থান করার সময় ফেড-ইন, স্কেল-আপ বা অন্যান্য জটিল রিভিল-টাইপ এফেক্ট তৈরি করুন।

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

DOM থেকে এলিমেন্ট যোগ/সরানো হলে বা তাদের ডিসপ্লে ভ্যালু টগল করা হলে, মসৃণভাবে এলিমেন্ট লুকান/দেখান।

ডায়ালগ, পপওভার ও টুলটিপের মতো এলিমেন্ট অ্যানিমেট করুন, কারণ সেগুলি টপ লেয়ারে প্রবেশ করছে/বেরিয়ে যাচ্ছে।

পৃষ্ঠার চারপাশে ফ্লোটিং এলিমেন্ট সরাতে টেনে আনার সুবিধা।

স্ক্রল-ভিত্তিক এফেক্ট (যেমন প্যারালাক্স) তৈরি করুন যেখানে ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ড লেয়ার বিভিন্ন গতিতে চলে, ব্যবহারকারী স্ক্রল করার সাথে সাথে গভীরতার অনুভূতি তৈরি করে।

স্ক্রল-স্ন্যাপিং ক্যারোজেল, গ্যালারি বা ফুল-পেজ সোয়াইপ অভিজ্ঞতায় বর্তমানে স্ন্যাপ করা নন-ইন্টার‍্যাক্টিভ আইটেম ভিজ্যুয়ালি হাইলাইট করুন। যেমন, স্ন্যাপ করার সময় কার্ড বড় করা বা লুকানো কন্টেন্ট দেখানো।

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

সিবলিং এলিমেন্ট জুড়ে অ্যানিমেশন বা ট্রানজিশন টাইমিং স্ট্যাগার করুন যাতে প্রতিটি এলিমেন্ট সিবলিং তালিকায় তার পজিশনের উপর ভিত্তি করে গণনা করা বিলম্বের পরে শুরু হয়।

পুরো পৃষ্ঠা নেভিগেশনের মধ্যে মসৃণ, নির্বিঘ্ন ট্রানজিশন তৈরি করুন, যেমন ক্রস-ফেড, কাস্টম রিভিল এফেক্ট বা এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় কন্টেন্টের মর্ফিং।

ডিক্লেরেটিভ বোতাম কমান্ড, ইনভোকার কমান্ড, বোতাম কমান্ড, কাস্টম কমান্ড বা ডিক্লেরেটিভ টগল অ্যাকশন ব্যবহার করে কাস্টম, অ্যাপ্লিকেশন-নির্দিষ্ট অ্যাকশন ট্রিগার করতে, ডিক্লেরেটিভভাবে কোনও বোতামকে যেকোনও এলিমেন্টের সাথে কানেক্ট করুন।

জাভাস্ক্রিপ্ট না লিখে কোনও বোতাম থেকে ডায়ালগ বা পপওভারের দৃশ্যমানতা টগল করুন।

ব্যবহারকারীর নেভিগেশনাল ফ্লোর দিকনির্দেশ দেখানোর জন্য ভিজ্যুয়াল স্টেট পরিবর্তন অ্যানিমেট করুন, যেমন, এগিয়ে যাওয়ার সময় ডানদিক থেকে নতুন কন্টেন্ট স্লাইড করে দেখানো বা আগের স্ক্রিনে ফিরে যাওয়ার সময় বাঁদিক থেকে নতুন কন্টেন্ট স্লাইড করে দেখানো।

একই ট্রানজিশন লজিক ব্যবহার করে একই সাথে একই ধরনের এলিমেন্টের একটি গ্রুপ ট্রানজিশন করুন, যেমন শপিং কার্ট থেকে কোনও প্রোডাক্ট সরানো এবং অন্যান্য সব প্রোডাক্টকে তাদের নতুন পজিশনে অ্যানিমেট করা।

সার্চ ফলাফল, বানান ভুল বা কোলাবরেটিভ এডিটিং কার্সারের মতো কোনও পৃষ্ঠায় ইচ্ছামতো টেক্সট রেঞ্জ হাইলাইট করুন।

ইন্টার‍্যাক্টিভ রিভিল এফেক্ট তৈরি করুন, যেমন স্পটলাইট যা ব্যবহারকারীর পয়েন্টারকে অনুসরণ করে কোনও ছবি বা UI বিভাগের মধ্যে বিবরণ প্রকাশ করে।

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

একটি মোডাল ডায়ালগ তৈরি করুন যা লাইট ডিসমিস (অর্থাৎ ডায়ালগের বাইরে ক্লিক বা ট্যাপ করা) করার মাধ্যমে বন্ধ করা যায়

কম্পোজিটরে মোশন বজায় রেখে এবং কম-মোশন সংক্রান্ত পছন্দকে সম্মান জানিয়ে CSS ট্রানজিশন, অ্যানিমেশন, স্ক্রল-চালিত অ্যানিমেশন এবং ভিউ ট্রানজিশনের মাধ্যমে UI অ্যানিমেট করুন।

ইন্টার‍্যাক্টিভিটি স্টেট (:focus/:active), <iframe> লোডিং স্টেট, অ্যানিমেশন/ট্রানজিশন স্টেট ইত্যাদির মতো গুরুত্বপূর্ণ এলিমেন্ট স্টেট না হারিয়ে DOM এলিমেন্ট সরানো বা রিপ্যারেন্ট করা

কোনও মোডাল ডায়ালগ, ফুলস্ক্রিন এলিমেন্ট বা নেটিভ পপওভারের অন্তর্নিহিত DOM নোড সরানো বা DOM-এ রিপ্যারেন্ট করা হলে, সেটিকে দৃশ্যত খোলা এবং কার্যগতভাবে অ্যাক্টিভ রাখুন।

কাস্টম, পদার্থবিদ্যা-ভিত্তিক অ্যানিমেশন এবং ট্রানজিশন এফেক্ট তৈরি করুন, যেমন বাউন্স এবং স্প্রিং, যা ঐতিহ্যগত ইজিং কার্ভের চেয়ে আরও স্বাভাবিক এবং আকর্ষক মনে হয়।

একটি মোডাল ডায়ালগ তৈরি করুন যা প্ল্যাটফর্ম-নির্দিষ্ট স্ট্যান্ডার্ড ব্যবহারকারী অ্যাকশনের মাধ্যমে বন্ধ করা যেতে পারে, যেমন ডেস্কটপ প্ল্যাটফর্মে Esc কী প্রেস করা অথবা মোবাইল প্ল্যাটফর্মে "ফিরে যান" বা "বাতিল করুন" জেসচার ব্যবহার করা

মডেল ডায়ালগ খোলা থাকাকালীন নিচের পৃষ্ঠা স্ক্রল করা আটকান।

সিঙ্গেল পেজ অ্যাপ্লিকেশনে (SPA) বিভিন্ন পৃষ্ঠার অবস্থা বা নেভিগেশন জুড়ে থাকা এলিমেন্টগুলিকে ভিজ্যুয়ালি কানেক্ট করুন (যেমন, প্রোডাক্টের থাম্বনেলকে ফুল-ব্লিড অনেক বড় ছবিতে বড় করা) তাদের সাইজ, পজিশন বা অন্যান্য স্টাইলিং প্রপার্টি মসৃণভাবে পরিবর্তন করে।

পৃষ্ঠার বাকি অংশ ইন্টার‍্যাক্টিভ থাকাকালীন এবং অন্যান্য ট্রানজিশন একই সাথে চলার সময়, একটি কম্পোনেন্টের (কার্ড, তালিকা, প্যানেল বা অন্য সাবট্রি) মধ্যে অ্যানিমেট স্টেট পরিবর্তন করুন।

স্ক্রল জেসচার সম্পূর্ণ হওয়ার আগে, ব্যবহারকারী স্ন্যাপ-অ্যালাইন করা কন্টেন্ট স্ক্রল করার সময় লিঙ্ক করা UI এলিমেন্টে রিয়েল-টাইম ভিজ্যুয়াল ফিডব্যাক প্রদান করুন।

স্ক্রল করা যায় এমন কন্টেনারে অ্যাক্টিভভাবে স্ন্যাপ করা আইটেমের সাথে নেভিগেশন ইন্ডিকেটর, লিঙ্ক করা কন্টেন্ট প্যানেল ও অ্যানালিটিক্স ট্র্যাকিং সিঙ্ক করুন।

টার্গেট এলিমেন্টে ভিজ্যুয়াল প্রপার্টি অ্যানিমেট করুন — যেমন ব্যাকড্রপ ফেড করা, ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করা অথবা স্ক্রলিটেলিং অভিজ্ঞতা তৈরি করা — যা সম্পূর্ণ আলাদা এলিমেন্টের স্ক্রলপোর্ট পজিশন দ্বারা সম্পূর্ণভাবে পরিচালিত হয়।

অ্যাকর্ডিয়ন, ট্যাব এবং "আরও পড়ুন" বিভাগের মতো প্যাটার্ন ব্যবহার করে ভিউ থেকে কন্টেন্ট লুকান, তবে এটি নিশ্চিত করুন যে নেটিভ "পৃষ্ঠায় খুঁজুন" সার্চের সময় লুকানো টেক্সট যেন দেখা যায়, সার্চ ইঞ্জিন ইন্ডেক্সিংয়ের অনুমতি দেয়, URL ফ্র্যাগমেন্ট ডিপ লিঙ্কে কাজ করে এবং ARIA অ্যাক্সেসিবিলিটি বজায় রাখে।

এলিমেন্টের স্ক্রল করা যায় এমন তালিকা তৈরি করুন (যেমন, ছবির ক্যারোজেল বা চ্যাট কথোপকথন থ্রেড) যা প্রাথমিক রেন্ডারে স্ক্রল করে ভিউতে আনা নির্দিষ্ট এলিমেন্টের সাথে দেখানো যেতে পারে।

ব্যবহারকারী কোনও ইন্টার‍্যাক্টিভ এলিমেন্টের উপরে মাউস নিয়ে গেলে, ফোকাস করলে বা বেশিক্ষণ প্রেস করে রাখলে, ক্লিক করার প্রয়োজন ছাড়াই টুলটিপ বা সাপ্লিমেন্টাল তথ্য দেখান।

তীরচিহ্ন 'কী' ব্যবহার করে অ্যাক্সেসযোগ্য স্পেশিয়াল নেভিগেশন প্রয়োগ করুন যা বিভিন্ন লেআউট মোডে (গ্রিড ইত্যাদি) সঠিকভাবে কাজ করে

ব্যবহারকারীদের একটি তালিকার আইটেমগুলিতে (সরান, আর্কাইভ করুন, পঠিত হিসাবে চিহ্নিত করুন ইত্যাদি) অনুভূমিক সোয়াইপ জেসচার দিয়ে কাজ করতে দিন, যাতে তারা আলাদা কন্ট্রোল ট্যাপ না করেই দ্রুত এন্ট্রিগুলি প্রসেস করতে পারে।

ব্যবহারকারীদের কোনও তালিকা আইটেম বা কন্টেন্ট প্যানে অনুভূমিকভাবে সোয়াইপ করতে দিন যাতে কোনও অ্যাকশন অটোমেটিক ট্রিগার না করেই প্রাসঙ্গিক অ্যাকশন বোতাম বা সাইড মেনু দেখা যায়।

কোনও টার্গেট এলিমেন্টে ভিজ্যুয়াল এফেক্ট, অ্যানিমেশন বা ফোকাস পরিবর্তন ট্রিগার করুন, তবে সেটি যেন সেই এলিমেন্টে স্মুথ প্রোগ্রাম্যাটিক স্ক্রল শেষ হওয়ার পরেই হয়।

ব্যবহারকারীদের অবাধে প্যান বা স্ক্রল করার অনুমতি দিন, যেমন ম্যাপ, জুম করা ছবি, অসীম ক্যানভাস বা বড় ডেটা গ্রিড—উভয় দিকে (কোণাকুণি বা মিড-জেসচার দিক পরিবর্তন করা) জেসচারটি একটি অনুভূমিক বা উল্লম্ব অক্ষে লক না করে।

একটি কাস্টম সিলেক্ট কম্পোনেন্ট তৈরি করুন যার ড্রপডাউন অ্যানিমেটেড। যেমন, মেনু ফেড হয়ে বা স্লাইড করে ভিউতে আসে অথবা বিকল্প বেছে নিলে অ্যানিমেশন হয়।

কাস্টম কম্পোনেন্ট দিয়ে প্রতিস্থাপন না করেই আপনার সাইটের কালার প্যালেটের সাথে চেকবক্স, রেডিও বোতাম, রেঞ্জ স্লাইডার এবং প্রোগ্রেস বার ম্যাচ করুন।

নেটিভ কার্যকারিতা এবং অ্যাক্সেসিবিলিটি বজায় রেখে কাস্টম ট্র্যাক, থাম্ব, ফিল এবং ফোকাস স্টেট সহ নেটিভ রেঞ্জ স্লাইডার স্টাইল করুন।

কাস্টম বেছে নেওয়ার এলিমেন্ট তৈরি করুন যার বোতাম, পিকার, তীরচিহ্ন আইকন এবং টিকচিহ্ন সবই আপনার ব্র্যান্ড বা ডিজাইন সিস্টেমের টাইপোগ্রাফি, রঙ, স্পেসিং এবং বর্ডার ট্রিটমেন্টের সাথে নির্বিঘ্নে মেলে।

এমন একটি পেমেন্ট ফর্ম তৈরি করুন যা সঠিক অটো-কমপ্লিট ভ্যালু ও অটোফিল সহায়তা সহ কার্ডের বিবরণ সংগ্রহ করে।

সঠিক অটোফিল ভ্যালু ও অটোফিল সাপোর্ট সহ সাইন-ইন ফর্ম তৈরি করুন।

সঠিক অটোফিল ভ্যালু ও অটোফিল সাপোর্ট সহ সাইন-আপ ফর্ম তৈরি করুন।

নেটিভ HTML সুইচ অ্যাট্রিবিউট ব্যবহার করে অ্যাক্সেসিবল সুইচ তৈরি করুন, কাজ না করলে স্টাইল করা চেকবক্সে ফিরে যান।

সঠিক অটোকমপ্লিট অ্যাট্রিবিউট ও অটোফিল সাপোর্ট সহ একটি ঠিকানা ফর্ম তৈরি করুন।

কাস্টম সিলেক্ট পিকার তৈরি করুন যার বিকল্পগুলি প্রথাগত স্ট্যাক করা বিকল্পের তালিকার পরিবর্তে অনন্য বা আকর্ষণীয় উপায়ে সাজানো থাকে।

ব্যবহারকারীর ইনপুট অনুযায়ী ফর্ম ফিল্ড বড় বা ছোট করার অনুমতি দিন, যেমন ব্যবহারকারী টাইপ করলে বা অন্য কোনও বিকল্প বেছে নিলে। পৃষ্ঠার ডিজাইনের সাথে মানানসই ডায়নামিক ও রেসপন্সিভ ফর্ম ফিল্ড তৈরি করতে, সর্বাধিক ও সর্বনিম্ন সাইজের সীমা প্রয়োগ করুন।

অ্যাক্সেসযোগ্য, সুরক্ষিত এবং ব্যবহার করা সহজ এমন ওয়েব ফর্ম তৈরি করার পেশাদার পদ্ধতি। ফর্ম, ইনপুট ও জমা দেওয়ার ফ্লো তৈরি বা পরিবর্তন করার সময় এই নির্দেশিকা ব্যবহার করুন।

ব্রাউজার অটোফিল করেছে এবং ব্যবহারকারী এডিট করেননি এমন ফর্ম ফিল্ড হাইলাইট করতে CSS ব্যবহার করুন।

IME (ইনপুট মেথড এডিটর) ব্যবহারকারীদের জন্য টেক্সট এরিয়া এবং সিঙ্গেল-লাইন ইনপুটে (চ্যাট, সার্চ, ইনলাইন রিনেম) 'জমা দিতে Enter প্রেস করুন' ফিচারটি নিরাপদে প্রয়োগ করুন যাতে অসম্পূর্ণ টেক্সট জমা দেওয়া আটকানো যায়।

ব্যবহারকারীর ইন্টার‍্যাকশনের পরেই, ফর্মের যেসব ফিল্ড পূরণ করা আবশ্যক কিন্তু ব্যবহারকারী তা এড়িয়ে গেছেন বা খালি রেখেছেন, সেগুলির জন্য ত্রুটি মেসেজ দেখান। এর ফলে, আগাম ত্রুটি এড়ানো যায় এবং ব্যবহারকারীর ফ্লো অনুযায়ী সময়মতো ও প্রাসঙ্গিক ফিডব্যাক দেওয়া নিশ্চিত করা যায়।

একটি কাস্টম বেছে নেওয়ার কম্পোনেন্ট তৈরি করুন যার বিকল্পগুলিতে শুধু প্লেন টেক্সটের পরিবর্তে জটিল HTML ফর্ম্যাটিং (যেমন, ছবি, আইকন এবং অন্যান্য রিচ ফর্ম্যাটিং) থাকতে পারে।

ব্যবহারকারী কন্ট্রোলের সাথে ইন্টার‍্যাক্ট করার পরেই শুধু যাচাই করুন যে বেছে নেওয়া মেনুতে ডিফল্ট নয় এমন বিকল্প বেছে নেওয়া হয়েছে।

অটোমেটিক কোড এক্সট্র্যাকশন ও অ্যাক্সেসযোগ্য ফর্ম ইনপুটের মাধ্যমে এসএমএসে পাঠানো ব্যবহারকারীর ফোন নম্বর ও ওয়ান-টাইম পাসকোড যাচাই করুন।

ব্যবহারকারী প্রাথমিক ইন্টার‍্যাকশন শেষ করার পরেই ফর্ম ফিল্ড যাচাইকরণ সংক্রান্ত মতামত (যেমন, পাসওয়ার্ডের জটিলতা বা ইমেল ফর্ম্যাটের প্রয়োজনীয়তা) দেখান, যাতে পৃষ্ঠা লোড হওয়ার সময় বা ব্যবহারকারী টাইপ করার সময় অকাল ত্রুটি এড়ানো যায়।

ElementInternals ARIA মিক্সিনের মাধ্যমে ভূমিকা এবং ARIA স্ট্যাটাস সেট করে, delegatesFocus-এর মাধ্যমে ফোকাস ম্যানেজ করে এবং ARIA সম্পর্কগুলিকে একটি শ্যাডো রুটের মধ্যে রেখে ডিফল্টভাবে কাস্টম এলিমেন্ট অ্যাক্সেসযোগ্য করুন।

কনস্ট্রাক্টর রুল, লাইফসাইকেল কলব্যাক, আপগ্রেড করার সময়, অ্যাট্রিবিউট/প্রপার্টি রিফ্লেকশন ও নামকরণের কনভেনশন কভার করে, অটোনমাস কাস্টম এলিমেন্টের লাইফসাইকেল নির্ধারণ, রেজিস্টার ও ম্যানেজ করুন।

formAssociated এবং ElementInternals-এর সাহায্যে ফর্মে নেটিভভাবে অংশগ্রহণ করার জন্য একটি কাস্টম কন্ট্রোল তৈরি করুন, এর নিজস্ব ভ্যালু জমা দিন, সীমাবদ্ধতা যাচাইকরণের সাথে ইন্টিগ্রেট করুন এবং রিসেট, বন্ধ এবং স্টেট-রিস্টোরে প্রতিক্রিয়া জানান।

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

সার্ভার-রেন্ডার করা কাস্টম এলিমেন্ট, তারপর এটিকে আবার রেন্ডার না করে বা আনস্টাইল করা কন্টেন্টের ফ্ল্যাশ ছাড়াই হাইড্রেট করুন।

Shadow DOM-এর মাধ্যমে কম্পোনেন্টের DOM ও স্টাইল এনক্যাপসুলেট করুন, HTML টেমপ্লেটের মাধ্যমে দক্ষতার সাথে ট্রি তৈরি করুন এবং স্লটের মাধ্যমে কনজিউমার কন্টেন্ট প্রোজেক্ট করুন।

:host সিলেক্টর, থিমিংয়ের জন্য ইনহেরিট করা ও কাস্টম প্রপার্টি, ::slotted ও ::part এবং কম্পোনেন্টের মধ্যে ক্যাসকেড লেয়ার ও কন্টেনার কোয়েরি সহ শ্যাডো বাউন্ডারি জুড়ে স্টাইল।

ওয়েব কম্পোনেন্ট তৈরি ও ব্যবহার করার জন্য ওরিয়েন্টেশন ও ক্রস-কাটিং নীতি, যার মধ্যে কাস্টম এলিমেন্ট, Shadow DOM, টেমপ্লেট ও স্লট, ডিক্লারেটিভ Shadow DOM, শ্যাডো বাউন্ডারি জুড়ে স্টাইলিং, ফর্ম-অ্যাসোসিয়েটেড কাস্টম এলিমেন্ট ও অ্যাক্সেসিবিলিটি সংক্রান্ত প্রয়োজনীয়তা কভার করা হয়। আবার ব্যবহার করা যায় এমন UI কম্পোনেন্ট, ডিজাইন সিস্টেম বা সার্ভার-রেন্ডার করা কাস্টম এলিমেন্ট তৈরি করার সময় এই নির্দেশিকা ব্যবহার করুন।

ইন্টার‍্যাক্টিভ কম্পোনেন্ট (যেমন, অ্যাকর্ডিয়ন, মেনু ও এক্সপ্যান্ডিং কার্ড) তাদের স্বাভাবিক ডাইমেনশনে এবং সেখান থেকে মসৃণভাবে অ্যানিমেট করুন।

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

এমন একটি কম্পোনেন্ট তৈরি করুন যা তার চাইল্ড এলিমেন্টের স্ট্যাটাসের উপর ভিত্তি করে তার স্টাইলিং পরিবর্তন করে। যেমন, কোনও কম্পোনেন্ট যা থিম টগল চেক করা আছে (বা নেই) তার উপর ভিত্তি করে লাইট বা ডার্ক মোডে রেন্ডার করে।

ব্রাউজার নির্দিষ্ট at-রুল সমর্থন করলে তবেই শর্তসাপেক্ষে নির্দিষ্ট CSS রুল বা ঘোষণা প্রয়োগ করুন।

এমন একটি কম্পোনেন্ট তৈরি করুন যা নির্দিষ্ট চাইল্ড এলিমেন্ট (বা না) ধারণ করে কিনা তার উপর ভিত্তি করে এর লেআউট পরিবর্তন করে। যেমন, কম্পোনেন্টে কোনও ছবি থাকলে, মাল্টি-কলম লেআউট ব্যবহার করুন, অন্যথায় ডিফল্ট হিসেবে সিঙ্গেল কলাম লেআউট ব্যবহার করুন।

ফ্লেক্সবক্স, গ্রিড, সাবগ্রিড, কন্টেনার কোয়েরি, অ্যাঙ্কর পজিশনিং ও ইন্ট্রিনসিক সাইজিংয়ের মতো আধুনিক CSS লেআউট। রেসপন্সিভ UI কম্পোনেন্ট বা পৃষ্ঠা লেআউট আর্কিটেক্ট করার সময় এই দক্ষতা ব্যবহার করুন।

ক্যাসকেড, সিলেক্টর, স্কোপিং, নেস্টিং ও ডিজাইন টোকেন সহ আধুনিক CSS আর্কিটেকচারের জন্য অ্যাকশন-ওরিয়েন্টেড নির্দেশিকা। স্টাইল তৈরি বা ডিজাইন সিস্টেম ম্যানেজ করার সময় এই গাইড ব্যবহার করুন।

উচ্চ-ক্রমের ডিজাইন টোকেন সংজ্ঞায়িত করুন, যেমন ডেনসিটি মোড (কমপ্যাক্ট, আরামদায়ক, প্রশস্ত) বা থিম এবং ডিসেন্ডেন্ট কম্পোনেন্টগুলি সরাসরি এবং কম্পোনেন্ট-উপযুক্ত উপায়ে পরিবর্তনের প্রতিক্রিয়া দেখায়।

নির্দিষ্ট ব্রেকপয়েন্ট ব্যবহার করার পরিবর্তে পেরেন্ট কন্টেনারের সাইজের উপর ভিত্তি করে ফন্ট সাইজ, স্পেসিং এবং মিডিয়া সাইজের মতো আইটেমগুলি মসৃণভাবে স্কেল করুন

একটি এলিমেন্টে অন্যান্য ট্রান্সফর্ম প্রপার্টি থেকে স্বতন্ত্রভাবে, স্বতন্ত্র CSS ট্রান্সফর্ম প্রপার্টি (যেমন, ট্রান্সলেট, রোটেট, স্কেল) অ্যানিমেট বা ওভাররাইড করুন।

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

জটিল বা ডাইনামিক স্টাইলিং লজিককে আবার ব্যবহার করা যায় এমন ফাংশনে (যেমন, ইনপুট প্যারামিটারের সেটের উপর ভিত্তি করে গ্রেডিয়েন্ট গণনা করে এমন ফাংশন) এনক্যাপসুলেট করে স্টাইলের অতিরিক্ত পুনরাবৃত্তি কমান।

কন্টেনার কোয়েরি, ডায়নামিক ভিউপোর্ট ইউনিট, অ্যাস্পেক্ট রেশিও ও রেসপন্সিভ টাইপোগ্রাফি সহ কন্টেনার ও ভিউপোর্ট সাইজের সাথে মানানসই UI তৈরি করুন।

পুনরাবৃত্তি কম করার সাথে সাথে সিলেক্টর এবং শর্তসাপেক্ষ @-নিয়মের ইন্টারসেকশন বা ইউনিয়নের উপর ভিত্তি করে এলিমেন্ট টার্গেট করুন।

CSS কন্টেনার স্টাইল কোয়েরি ব্যবহার করে সিম্যান্টিক কন্টেক্সটের উপর ভিত্তি করে ভিজ্যুয়াল লজিক অ্যাডাপ্ট করে এমন কম্পোনেন্ট তৈরি করুন।

এমন একটি কম্পোনেন্ট তৈরি করুন যার স্টাইল ভিউপোর্টের প্রস্থ বা উচ্চতার পরিবর্তে নিজের প্রস্থ বা উচ্চতার উপর শর্তসাপেক্ষে নির্ভর করতে পারে। যেমন, একটি কার্ড কম্পোনেন্ট যা কতটা বড় তার উপর নির্ভর করে তার লেআউট পরিবর্তন করতে পারে, অথবা একটি কল-টু-অ্যাকশন বোতাম যা তার প্রস্থের উপর ভিত্তি করে শর্তসাপেক্ষে সহায়ক টেক্সট দেখাতে পারে।

ফিল্ডটি ভুল হলে, ফর্ম ফিল্ডের পেরেন্ট এলিমেন্ট (যেমন, লেবেল বা ফিল্ডসেট) স্টাইল করুন।

ডায়নামিক ভিজ্যুয়াল স্পেকট্রাম বা লেআউট অ্যারেঞ্জমেন্ট তৈরি করুন যা কোনও গ্রুপের এলিমেন্টের সংখ্যা অনুযায়ী অটোমেটিক মানিয়ে নেয়।

Temporal.Duration এবং Intl.DurationFormat ব্যবহার করে তারিখ ও সময়ের মধ্যে অতিবাহিত বা বাকি থাকা সময়, ব্যালেন্সের সময়সীমার ইউনিট এবং মানুষের-পঠনযোগ্য স্থানীয় সময়সীমা গণনা করুন।

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

ভবিষ্যতের মিটিং বা ইভেন্ট শিডিউল করার সময় ভৌগোলিক IANA টাইম জোনের সাথে স্পষ্টভাবে যুক্ত করুন যাতে ডেলাইট সেভিং টাইম (DST) ট্রানজিশন, ঘড়ির সময় পরিবর্তনের সময় "বাদ দেওয়া" বা "রিপিট করা" ঘণ্টা নির্বিশেষে ইভেন্টের সময় সঠিক থাকে।

Temporal.Instant ব্যবহার করে তারিখ ট্রাঙ্কেশন সংঘর্ষ ছাড়াই সাব-মিলিসেকেন্ড বা ন্যানোসেকেন্ড ISO 8601 টাইমস্ট্যাম্পের মধ্যে ব্যবধান পার্স, সাজানো এবং পরিমাপ করুন।

আন্তর্জাতিক ব্যবহারকারীদের জন্য নন-গ্রেগরিয়ান ক্যালেন্ডার সিস্টেমে (যেমন, ইসলামিক, হিব্রু বা চাইনিজ) তারিখ সঠিকভাবে দেখানো এবং গণনা করা।

Emscripten ব্যবহার করে WebAssembly-তে C/C++ কম্পাইল করা

ব্রাউজারকে ব্যবহারকারীর ইনপুট ম্যানেজ করতে এবং স্ক্রিন রিপেইন্ট করতে দেওয়ার জন্য, ভারী সিনক্রোনাস প্রসেসিং (জটিল গণনা এবং/অথবা দীর্ঘ লুপ) বা DOM আপডেটগুলি ভেঙে দিন।

কোনও ব্যবহারকারী কোনও পৃষ্ঠা দেখার জন্য আসলে মোট কত সময় ব্যয় করেছেন তা গণনা করুন, ট্যাবটি ব্যাকগ্রাউন্ডে থাকার সময়কাল বাদ দিয়ে।

কোনও পৃষ্ঠার সমস্ত স্ক্রিপ্ট ডিপেন্ডেন্সি জুড়ে জটিল অর্কেস্ট্রেশনের প্রয়োজন ছাড়াই শর্তসাপেক্ষে অ্যাসিঙ্ক ডিপেন্ডেন্সি লোড বা শুরু করুন (যেমন অনুপস্থিত ওয়েব ফিচারের জন্য পলিফিল ইমপোর্ট করা)।

নেটওয়ার্কের প্রতিযোগিতা ও সার্ভারের লোড কমানোর জন্য, একাধিক অ্যানালিটিক্স, টেলিমেট্রি ও Core Web Vitals ইভেন্টকে একসাথে ডিবাউন্স ও ব্যাচ করে একটি বিকনে পরিণত করুন, যাতে রিয়েল-টাইম আপডেটও পাওয়া যায়।

কন্টেন্ট-ভারী ওয়েব পেজে (যেমন, দীর্ঘ ফিড, প্রচুর নিবন্ধ বা জটিল ড্যাশবোর্ড সহ পৃষ্ঠা) রেন্ডারিংয়ের সময় কম করুন, ব্যবহারকারীর কাছে অবিলম্বে দৃশ্যমান নয় এমন কোনও কন্টেন্টের জন্য রেন্ডারিং পিছিয়ে দিয়ে।

স্মুথ স্ক্রল পারফর্ম্যান্স বজায় রাখতে, স্ক্রলিং সম্পূর্ণ না হওয়া পর্যন্ত DOM আপডেট, ডেটা ফেচিং, অ্যানালিটিক্স ট্র্যাকিং বা লেআউট রিক্যালকুলেশনের মতো ব্যয়বহুল অপারেশনগুলি স্থগিত করুন।

একাধিক পিক্সেল ডেনসিটির (যেমন, 1x এবং 2x) পাশাপাশি নেক্সট-জেনারেশন ছবির ফর্ম্যাট (যেমন, AVIF বা WebP) প্রদান করে অপ্টিমাইজ করা আলঙ্কারিক ছবি (যেমন, ব্যাকগ্রাউন্ড, UI আইকন বা জটিল মাস্ক) ডেলিভার করুন যাতে ব্রাউজার ব্যবহারকারীর ডিভাইসের ক্ষমতার জন্য ফাইল সাইজ এবং ভিজ্যুয়াল কোয়ালিটির সেরা কম্বিনেশন ডাইনামিকভাবে নেগোশিয়েট করতে পারে।

ব্যবহারকারীর শুরু করা অনুরোধের সাথে নেটওয়ার্ক সংক্রান্ত বিরোধ এড়াতে, Fetch API-এর মাধ্যমে করা ব্যাকগ্রাউন্ড ডেটা ফেচ করার প্রক্রিয়াকে কম অগ্রাধিকার দিন।

কোনও পৃষ্ঠা প্রাথমিকভাবে ব্যাকগ্রাউন্ডে লোড করা হয়েছে কিনা তা নির্ভরযোগ্যভাবে নির্ধারণ করুন, এমনকি ব্যবহারকারী পৃষ্ঠাটি ফোরগ্রাউন্ডে আনার পরে স্ক্রিপ্টটি অ্যাসিঙ্ক্রোনাসভাবে লোড করা হলেও।

কম্পোনেন্ট অফ-স্ক্রিন থাকলে ব্যাকগ্রাউন্ড জাভাস্ক্রিপ্ট এক্সিকিউশন (যেমন <canvas> অ্যানিমেশন, WebGL রেন্ডারিং বা হাই-ফ্রিকোয়েন্সি WebSocket ডেটা পোলিং) পজ করে সিস্টেম রিসোর্স ও ব্যাটারির আয়ু বাঁচান এবং স্ক্রল করে আবার ভিউতে এলে ঠিক সময়ে সেগুলি আবার চালু করুন।

প্রতিটি নেভিগেশনে ধ্বংস এবং পুনর্নির্মাণ করার পরিবর্তে তাদের স্ট্রাকচারাল DOM স্টেট সংরক্ষণ করে একটি সিঙ্গেল-পেজ অ্যাপ্লিকেশনে (SPA) আগে দেখা ভিউতে দ্রুত ট্রানজিশন চালু করুন।

A/B টেস্ট, মাল্টি-ভেরিয়েট টেস্ট বা অন্যান্য পরীক্ষা ডেলিভার ও রেন্ডার করা। এর জন্য ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট ব্যবহার করে HTML, CSS ও জাভাস্ক্রিপ্ট পরিবর্তন বা ইনজেক্ট করা হয়। এর ফলে, পরীক্ষার কন্টেন্ট দেখানোর জন্য ফ্লিকার বা ফ্ল্যাশ করার আগে আসল কন্টেন্ট প্রথমে দেখানো হয় না।

ধীরে চলা জাভাস্ক্রিপ্ট এবং ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) রেসপন্সিভনেস খারাপ হওয়ার অন্যান্য কারণ শনাক্ত করুন।

লং অ্যানিমেশন ফ্রেমের জন্য সবচেয়ে বেশি দায়ী স্ক্রিপ্ট শনাক্ত করুন

ব্যবহারকারী এর পরে যে পৃষ্ঠা দেখতে পারেন সেটি প্রিফেচ বা প্রিরেন্ডার করে পৃষ্ঠা লোড হওয়ার পারফর্ম্যান্স উন্নত করুন।

ব্যান্ডউইথ বাঁচাতে এবং প্রাথমিক পৃষ্ঠা লোড করার সময় নেটওয়ার্কের সমস্যা কমাতে, মিডিয়া প্লেয়ার ভিউপোর্টের কাছাকাছি না আসা পর্যন্ত ভিডিও পোস্টার ছবি এবং প্রিলোড করা মিডিয়া ডেটা সহ অফস্ক্রিন ভিডিও এবং অডিও অ্যাসেট ডাউনলোড করা পিছিয়ে দিন।

ব্যবহারকারীর ইন্টার‌্যাকশন এবং ক্লায়েন্ট-সাইড নেভিগেশনের মাধ্যমে স্ক্রিনে নতুন কন্টেন্টফুল আপডেট রেন্ডার করতে কত সময় লাগে তা পরিমাপ করুন।

গুরুত্বপূর্ণ রিসোর্স লোড হতে দেরি হওয়ার সমস্যা কমাতে, Largest Contentful Paint (LCP) ক্যান্ডিডেট ইমেজের লোডিং প্রায়োরিটি অপ্টিমাইজ করুন এবং কম গুরুত্বপূর্ণ ইমেজের প্রায়োরিটি কমিয়ে দিন।

গুরুত্বপূর্ণ রিসোর্স লোড হতে দেরি হওয়ার সমস্যা কমাতে, প্রিলোড করা কন্টেন্টের আপেক্ষিক অগ্রাধিকার অপ্টিমাইজ করুন।

গুরুত্বপূর্ণ অ্যাসিঙ্ক্রোনাস স্ক্রিপ্ট বুস্ট করে এবং অপ্রয়োজনীয় বা লেট-বডি স্ক্রিপ্টের প্রায়োরিটি কমিয়ে স্ক্রিপ্টের লোডিং প্রায়োরিটি অপ্টিমাইজ করুন যাতে সিকোয়েন্সিং উন্নত হয় এবং দেরি কমে।

জটিল লেআউটে (যেমন, ডেটা-ভারী ড্যাশবোর্ড বা স্প্রেডশিট-স্টাইল গ্রিড) লেআউট রি-ক্যালকুলেশন এড়িয়ে ইন্টারঅ্যাকশন আরও দ্রুত এবং আরও প্রতিক্রিয়াশীল (Interaction to Next Paint (INP) স্কোর কমিয়ে) করুন।

একই HTML ডকুমেন্টে পরে স্ট্রিম করা কন্টেন্ট বা ইম্পারেটিভ JavaScript API-এর মাধ্যমে কোনও পৃষ্ঠা ডিক্লেরেটিভভাবে আপডেট করুন।

আধুনিক ওয়েব অ্যাপ্লিকেশন অপ্টিমাইজ করার জন্য অ্যাকশনযোগ্য নির্দেশিকা। পারফর্ম্যান্স অডিট, লোডিং মেট্রিক্স অপ্টিমাইজ, স্লো ইন্টার‍্যাকশন ঠিক করা এবং Core Web Vitals (LCP, INP, CLS) অপ্টিমাইজ করার সময় এই গাইড ব্যবহার করুন

ব্যবহারকারীর সম্পূর্ণ পৃষ্ঠা ভিজিট জুড়ে অ্যানালিটিক্স, Core Web Vitals, ত্রুটি এবং টেলিমেট্রি ডেটা নির্ভরযোগ্যভাবে ট্র্যাক করুন এবং ব্যবহারকারী পৃষ্ঠাটি ছেড়ে না যাওয়া পর্যন্ত ডেটা পাঠানো বন্ধ রাখুন।

DOM নোডের সংখ্যা কমাতে CSS সিউডো-এলিমেন্টে (যেমন ::before এবং ::after) রেজোলিউশন-অপ্টিমাইজ করা ছবি ব্যবহার করুন।

ব্যাকগ্রাউন্ডে চলা কাজ স্থগিত রেখে গুরুত্বপূর্ণ কাজ যাতে প্রথমে করা হয় তা নিশ্চিত করতে বিভিন্ন অগ্রাধিকার সহ টাস্ক শিডিউল করুন।

অ্যাক্সেসযোগ্য ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য অ্যাকশনেবল কোডিং নির্দেশিকা, যার মধ্যে সেম্যান্টিক HTML, ফোকাস ম্যানেজমেন্ট, ফর্ম, মিডিয়া এবং টেস্টিং অন্তর্ভুক্ত। অ্যাক্সেসিবিলিটি ফিচার, কীবোর্ড নেভিগেশন বা ARIA অডিট বা প্রয়োগ করার সময় এই দক্ষতা ব্যবহার করুন।

স্ক্রিন রিডার ব্যবহারকারীরা যাতে শুধুমাত্র ইন্টার‍্যাকশনের পরে ত্রুটি সংক্রান্ত ফিডব্যাক পান তা নিশ্চিত করতে, ভিজ্যুয়াল :user-invalid অবস্থার সাথে প্রোগ্র্যামাটিক অ্যাক্সেসিবিলিটি অবস্থা (যেমন aria-invalid) সিঙ্ক করুন, যা ভিজ্যুয়াল অভিজ্ঞতাকে মিরর করে।

CSS-এর মাধ্যমে জেনারেট করা কন্টেন্ট (::before/::after) এমনভাবে ব্যবহার করুন যাতে তা অ্যাক্সেসযোগ্য থাকে, এর মধ্যে আলঙ্কারিক কন্টেন্টের জন্য বিকল্প টেক্সটও অন্তর্ভুক্ত।

কোনও পৃষ্ঠার জন্য অপারেটিং সিস্টেমের টেক্সট স্কেল সংক্রান্ত পছন্দকে সম্মান করুন যাতে ফন্ট সাইজ, লেআউট এবং rem-ভিত্তিক পরিমাপ ব্যবহারকারীর অ্যাক্সেসিবিলিটি সেটিংস অনুসরণ করে।

ক্রস-ডকুমেন্ট মেসেজ ও URL জুড়ে ওয়েব অরিজিন ও সাইট নিরাপদে তুলনা ও যাচাই করুন, যাতে ভুল হওয়ার সম্ভাবনা আছে এমন স্ট্রিং পার্সিংয়ের প্রয়োজন না হয়।

পাবলিক-কী এনক্যাপসুলেশন বা কী এগ্রিমেন্ট—হাইব্রিড ও পোস্ট-কোয়ান্টাম সুরক্ষা সহ—ব্যবহার করে শেয়ার্ড সিক্রেট তৈরি করুন এবং যাচাই করা এনক্রিপশন সহ ব্রাউজারে সংবেদনশীল ডেটা এনক্রিপ্ট করুন।

কোনও সর্বজনীন ওয়েব অ্যাপ্লিকেশন থেকে ব্যবহারকারীর স্থানীয় নেটওয়ার্ক বা লুপব্যাক ইন্টারফেসে রিসোর্স অ্যাক্সেস করুন।

প্রাইমারি সাইন-ইনের জন্য পাসকী ব্যবহার করে ফিরে আসা ব্যবহারকারীকে যাচাই করুন।

পাসওয়ার্ড দিয়ে লগ-ইন করার পরে, আগে থেকে থাকা ব্যবহারকারীর জন্য কোনও বিজ্ঞপ্তি না দেখিয়ে পাসকী রেজিস্টার করুন।

ব্যবহারকারীদের তাদের অ্যাকাউন্টে রেজিস্টার করা পাসকী দেখতে এবং ম্যানেজ করতে দিন।

কোনও সংবেদনশীল অ্যাকশন নেওয়ার আগে, সাইন-ইন করা ব্যবহারকারীর পরিচয় তার আগে থেকে থাকা পাসকী ব্যবহার করে যাচাই করুন।

আগে থেকে থাকা ব্যবহারকারীর অ্যাকাউন্টের জন্য পাসকী রেজিস্টার করুন।

ওয়েব অ্যাপ্লিকেশনে WebAuthn ও পাসকী প্রয়োগ করার জন্য বিস্তারিত ওরিয়েন্টেশন ও ক্রস-কাটিং নীতি। পাসকী রেজিস্ট্রেশন, যাচাইকরণ, ম্যানেজমেন্ট বা আবার যাচাইকরণ করার সময় এই নির্দেশিকা ব্যবহার করুন।

DOM-ভিত্তিক XSS অ্যাটাক প্রতিরোধ করতে, বিশ্বস্ত নয় এমন HTML স্যানিটাইজ করার জন্য একটি বিশ্বস্ত প্রকারের নীতি নির্ধারণ করুন, innerHTML-এর মতো DOM সিঙ্কে লেখার সময় নীতিটি ব্যবহার করুন এবং কন্টেন্ট নিরাপত্তা নীতির মাধ্যমে বিশ্বস্ত প্রকারগুলি প্রয়োগ করুন।

সাইন-ইন পৃষ্ঠায় নেভিগেট করার আগে বা ব্যবহারকারীর ওয়ার্কফ্লোতে বাধা দেওয়ার আগে, ফিরে আসা ব্যবহারকারীদের সেভ করা পাসকী বা পাসওয়ার্ডের মাধ্যমে যাচাই করুন।

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

অসুরক্ষিত এলিমেন্ট ও অ্যাট্রিবিউট সরিয়ে দিয়ে ব্যবহারকারীর ইনপুট থেকে পাওয়া বিশ্বস্ত নয় এমন HTML কন্টেন্ট নিরাপদে পার্স ও ডিসপ্লে করুন।

এক্সটার্নাল স্ক্রিপ্ট, স্টাইলশিট, ফন্ট ও থার্ড-পার্টি সোর্স থেকে লোড করা ছবির ক্রিপ্টোগ্রাফিক ইন্টিগ্রিটি যাচাই করুন এবং সেইসব অনুরোধ ক্রেডেনশিয়াল বা রেফারার URL পাঠায় কিনা তা নিয়ন্ত্রণ করুন।

ডেটার ইন্টিগ্রিটি ও সত্যতা নিশ্চিত করতে, ক্লাসিক্যাল বা কোয়ান্টাম-প্রতিরোধী (পোস্ট-কোয়ান্টাম) অ্যাসিমেট্রিক কী ব্যবহার করে ব্রাউজারে মেসেজ, টোকেন বা আর্টিফ্যাক্টে স্বাক্ষর করুন ও যাচাই করুন।

অ্যাকাউন্ট তৈরি, সাইন-ইন বা অ্যাকাউন্ট ফিরিয়ে আনার সময় ওয়ান-টাইম পাসকোড বা ম্যাজিক লিঙ্ক ইমেল না পাঠিয়েই ব্যবহারকারী কোনও ইমেল আইডির মালিক কিনা তা যাচাই করুন।

ওয়েব ডেভেলপারদের জন্য প্রতিরোধমূলক নিরাপত্তা নির্দেশিকা (XSS, CSP, কুকি, ক্রস-অরিজিন আইসোলেশন)। নিরাপত্তা নীতি নিরাপদে অডিট, পরীক্ষা ও ডিপ্লয় করার প্রসেসকে গাইড করতে এই স্কিল ব্যবহার করুন।

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

ব্যবহারকারীর কনফিগারেশন এবং OS-লেভেল শর্টকাট বজায় রেখে, ইনস্টল করা ওয়েব অ্যাপ নতুন অরিজিনে ট্রান্সফার করুন।

ব্যবহারকারীর তৈরি করা কন্টেন্ট বা সাইটে আগে থেকেই থাকা কন্টেন্টের ভাষা শনাক্ত করুন।

স্ট্রিমিং আউটপুট, স্ট্রাকচার্ড JSON রেসপন্স ও মাল্টি-টার্ন সেশন ম্যানেজমেন্ট সহ Prompt API ব্যবহার করে ব্রাউজারে অন-ডিভাইস ন্যাচারাল ল্যাঙ্গুয়েজ ইনফারেন্স রান করুন।

অন-ডিভাইস Summarizer API ব্যবহার করে টেক্সট কন্টেন্টের সারসংক্ষেপ তৈরি করুন।

অন-ডিভাইস Translator API ব্যবহার করে বিভিন্ন ভাষার মধ্যে টেক্সট অনুবাদ করুন।

WebMCP অ্যাট্রিবিউটের মাধ্যমে স্ট্যান্ডার্ড HTML ফর্ম অ্যানোটেট করে AI এজেন্টদের টুল হিসেবে ক্লায়েন্ট-সাইড কার্যকারিতা প্রকাশ করুন।

WebMCP ইম্পারেটিভ API ব্যবহার করে AI এজেন্টের টুল হিসেবে ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট ফাংশন প্রোগ্রাম্যাটিক্যালি রেজিস্টার করুন।

ব্রাউজার অ্যাপ্লিকেশনে WebMCP (Web Model Context Protocol) প্রয়োগ করতে এই গাইড ব্যবহার করুন। এটি ডিক্লারেটিভ বা ইম্পারেটিভ API-এর মাধ্যমে AI এজেন্টদের টুল হিসেবে ক্লায়েন্ট-সাইড কার্যকারিতা প্রকাশ করে।