"HowTo: Components" হল ওয়েব কম্পোনেন্টের একটি সংগ্রহ যা সাধারণ UI প্যাটার্ন প্রয়োগ করে। এইসব প্রয়োগের উদ্দেশ্য হল শিক্ষামূলক রিসোর্স হিসেবে কাজ করা। আপনি বিভিন্ন কম্পোনেন্টের ঘনভাবে মন্তব্য করা বাস্তবায়ন পড়তে পারেন এবং আশা করি সেগুলি থেকে শিখতে পারবেন। মনে রাখবেন, এগুলি স্পষ্টভাবে UI লাইব্রেরি নয় এবং প্রোডাকশনে ব্যবহার করা উচিত নয়।
উপাদানগুলি
<howto-checkbox>: ফর্মে বুলিয়ান বিকল্প দেখায়। চেকবক্সের সবচেয়ে সাধারণ ধরন হল ডুয়াল-টাইপ যা ব্যবহারকারীকে দুটি বিকল্পের মধ্যে টগল করার সুবিধা দেয়—টিকচিহ্ন দেওয়া ও টিকচিহ্ন সরানো।<howto-tabs>: দৃশ্যমান কন্টেন্টকে একাধিক প্যানেলে ভাগ করে সীমিত করে।<howto-tooltip>: একটি পপ-আপ যা কোনও এলিমেন্ট সম্পর্কিত তথ্য দেখায় যখন এলিমেন্টটি কীবোর্ড ফোকাস পায় বা মাউস সেটির উপর ঘোরাফেরা করে।
লক্ষ্য
আমাদের লক্ষ্য হল এমন শক্তিশালী কম্পোনেন্ট লেখার জন্য পেশাদার পদ্ধতি প্রদর্শন করা যা অ্যাক্সেসযোগ্য, পারফর্ম্যান্ট, রক্ষণাবেক্ষণযোগ্য এবং স্টাইল করা সহজ। প্রতিটি কম্পোনেন্ট সম্পূর্ণরূপে স্বয়ংসম্পূর্ণ, তাই এটি রেফারেন্স ইমপ্লিমেন্টেশন হিসেবে কাজ করতে পারে।
অ্যাক্সেসিবিলিটি
কম্পোনেন্টগুলি WAI ARIA Authoring Practices-কে ঘনিষ্ঠভাবে অনুসরণ করে, যা ARIA, অ্যাক্সেসযোগ্য রিচ ইন্টারনেট অ্যাপ্লিকেশন স্ট্যান্ডার্ড ব্যাখ্যা এবং দেখানোর জন্য একটি নির্দেশিকা। ARIA সম্পর্কে আপনার কোনও ধারণা না থাকলে, WebFundamentals-এ আমাদের ভূমিকা চেক করে দেখুন। প্রতিটি কম্পোনেন্ট অথরিং প্র্যাকটিসের প্রাসঙ্গিক বিভাগের সাথে লিঙ্ক করা থাকে। যদিও এটি কঠোরভাবে প্রয়োজনীয় নয়, তবে আমরা কোডটি দেখার আগে অথরিং প্র্যাক্টিস বিভাগটি পড়ার সাজেশন দিই।
পারফর্ম্যান্স
ওয়েব ডেভেলপমেন্টের ক্ষেত্রে "পারফর্ম্যান্স" শব্দটি অনেক কিছুর ক্ষেত্রে
প্রযোজ্য হতে পারে। <howto>-এর ক্ষেত্রে, পারফর্ম্যান্স বলতে মূলত অ্যানিমেশনকে বোঝায়
যা মোবাইল ডিভাইসেও একটানা ৬০fps-এ চলে।
ভিজ্যুয়াল ফ্লেক্সিবিলিটি
যতটা সম্ভব, লেআউট বা কোনও নির্বাচিত বা অ্যাক্টিভ অবস্থা নির্দেশ করা ছাড়া, কম্পোনেন্ট স্টাইল করা হয় না। এটি প্রয়োগ করার উদ্দেশ্য হল, ভিজ্যুয়াল ফ্লেক্সিবিলিটি বজায় রাখা এবং ফোকাস করা। সাজসজ্জায় সময় ব্যয় না করে, আমরা কোডকে শুধুমাত্র সেইটুকুতেই সীমাবদ্ধ রাখি যা কম্পোনেন্ট ফাংশন তৈরি করার জন্য একেবারে প্রয়োজনীয়। কম্পোনেন্ট কাজ করার জন্য কোনও স্টাইলের প্রয়োজন হলে, স্টাইলটি একটি কমেন্ট দিয়ে চিহ্নিত করা হবে যেখানে ব্যাখ্যা করা থাকবে যে কেন এটি প্রয়োজন।
কোড যা সহজে ম্যানেজ করা যায়
HowTo: Components হল একটি রেফারেন্স ইমপ্লিমেন্টেশন, তাই আমরা সহজে পড়া ও বোঝা যায় এমন কোড লেখার জন্য অতিরিক্ত সময় ব্যয় করেছি যেখানে প্রচুর কমেন্ট রয়েছে।
লক্ষ্য নয়
লাইব্রেরি / ফ্রেমওয়ার্ক / টুলকিট হতে হবে
<howto> কম্পোনেন্ট npm, bower বা অন্য কোনও প্ল্যাটফর্মে প্রকাশ করা হয় না
কারণ এগুলি প্রোডাকশনে ব্যবহার করার জন্য নয়। সংক্ষিপ্ত,
পঠনযোগ্য কোডের জন্য, আমরা আধুনিক জাভাস্ক্রিপ্ট API ব্যবহার করছি এবং আধুনিক
ব্রাউজারগুলিকে সমর্থন করছি যা ওয়েব কম্পোনেন্ট স্ট্যান্ডার্ড প্রয়োগ করে। এইসব
প্রয়োগের পদ্ধতি পড়ার পরে আপনি নিজের প্রয়োজন অনুযায়ী কোডটি ব্যবহার করতে পারবেন।
ব্যাকওয়ার্ড কম্প্যাটিবল হতে হবে
কোডের উপর সরাসরি নির্ভর করা উচিত নয়। আরও ভাল ইমপ্লিমেন্টেশন খুঁজে পেলে, আমরা যেকোনও এলিমেন্টের ইমপ্লিমেন্টেশন এবং API-তে আমূল পরিবর্তন করতে পারি এবং খুব সম্ভবত করব। এটি একটি জীবন্ত রিসোর্স যেখানে আমরা ওয়েব UI তৈরির জন্য পেশাদার পদ্ধতি শেয়ার, এক্সপ্লোর এবং আলোচনা করতে পারি।
সম্পূর্ণ হতে হবে
WAI ARIA অথরিং প্র্যাকটিসে পাওয়া যায় এমন *সব *কম্পোনেন্ট আমরা প্রয়োগ করি না (এবং সম্ভবত করবও না)। তবে, অন্যান্য <howto> কম্পোনেন্টে ব্যবহৃত নীতিগুলি পুনরায় ব্যবহার করলে
পাঠকদের অনুপস্থিত যেকোনও কম্পোনেন্ট
বাস্তবায়ন করতে সক্ষম করবে।