HowTo Components - ওভারভিউ

কিভাবে কম্পোনেন্টস

"HowTo: Components" হল ওয়েব কম্পোনেন্টের একটি সংগ্রহ যা সাধারণ UI প্যাটার্ন বাস্তবায়ন করে। এই বাস্তবায়নের উদ্দেশ্য হল একটি শিক্ষামূলক সম্পদ। আপনি বিভিন্ন উপাদানের ঘনত্বপূর্ণ মন্তব্য বাস্তবায়নের মাধ্যমে পড়তে পারেন এবং আশা করি সেগুলি থেকে শিখতে পারেন। মনে রাখবেন যে তারা স্পষ্টভাবে একটি UI লাইব্রেরি নয় এবং উৎপাদনে ব্যবহার করা উচিত নয়

উপাদান

  • <howto-checkbox> : একটি ফর্মে একটি বুলিয়ান বিকল্প উপস্থাপন করে। চেকবক্সের সবচেয়ে সাধারণ ধরনের হল একটি ডুয়াল-টাইপ যা ব্যবহারকারীকে দুটি পছন্দের মধ্যে টগল করতে দেয়—চেক করা এবং আনচেক করা।
  • <howto-tabs> : দৃশ্যমান বিষয়বস্তুকে একাধিক প্যানেলে বিভক্ত করে সীমিত করে।
  • <howto-tooltip> : একটি পপআপ যা একটি উপাদানের সাথে সম্পর্কিত তথ্য প্রদর্শন করে যখন উপাদানটি কীবোর্ড ফোকাস গ্রহণ করে বা মাউস তার উপর ঘোরায়।

গোল

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

অ্যাক্সেসযোগ্যতা

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

কর্মক্ষমতা

ওয়েব ডেভেলপমেন্টে "পারফরম্যান্স" শব্দটি অনেক কিছুতে প্রয়োগ করা যেতে পারে। <howto> এর পরিপ্রেক্ষিতে, কর্মক্ষমতা বেশিরভাগই 60fps-এ ধারাবাহিকভাবে চলমান অ্যানিমেশনকে বোঝায়, এমনকি মোবাইল ডিভাইসেও।

ভিজ্যুয়াল নমনীয়তা

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

রক্ষণাবেক্ষণযোগ্য কোড

HowTo: Components হল একটি রেফারেন্স বাস্তবায়ন, আমরা পঠনযোগ্য এবং সহজে বোধগম্য কোড লেখার জন্য অতিরিক্ত সময় ব্যয় করেছি যা ঘনভাবে মন্তব্য করা হয়।

অ-লক্ষ্য

একটি লাইব্রেরি / ফ্রেমওয়ার্ক / টুলকিট হন

<howto> উপাদানগুলি npm, bower বা অন্য কোনও প্ল্যাটফর্মে প্রকাশিত হয় না কারণ সেগুলি উৎপাদনে ব্যবহার করার জন্য নয়৷ সংক্ষেপে, পঠনযোগ্য কোডের জন্য, আমরা আধুনিক জাভাস্ক্রিপ্ট API ব্যবহার করছি এবং আধুনিক ব্রাউজারগুলিকে সমর্থন করছি যা ওয়েব কম্পোনেন্ট স্ট্যান্ডার্ডগুলি বাস্তবায়ন করে। এই বাস্তবায়নগুলি পড়ার পরে আপনি আপনার নিজের প্রয়োজন অনুসারে কোডটি মানিয়ে নিতে সক্ষম হবেন।

পিছনের দিকে সামঞ্জস্যপূর্ণ হন

কোড সরাসরি নির্ভর করা উচিত নয়. আমরা হয়তো, এবং খুব সম্ভবত, কোনো উপাদানের বাস্তবায়ন এবং APIকে আমূল পরিবর্তন করতে পারি যদি একটি ভাল বাস্তবায়ন আবিষ্কৃত হয়। এটি একটি জীবন্ত সংস্থান যেখানে আমরা ওয়েব UI তৈরির সেরা অনুশীলনগুলি ভাগ করতে, অন্বেষণ করতে এবং আলোচনা করতে পারি৷

সম্পূর্ণ হও

WAI ARIA অথরিং প্র্যাকটিস-এ পাওয়া যাবে এমন * সমস্ত *কম্পোনেন্ট আমরা বর্তমানে প্রয়োগ করি না (এবং সম্ভবত করবও না)। যাইহোক, অন্যান্য <howto> উপাদানগুলিতে ব্যবহৃত নীতিগুলিকে পুনরায় ব্যবহার করলে পাঠকদের অনুপস্থিত উপাদানগুলি বাস্তবায়ন করতে সক্ষম করা উচিত।