"HowTo: Components" هي مجموعة من مكوّنات الويب التي تنفّذ أنماط واجهة المستخدم الشائعة. الغرض من عمليات التنفيذ هذه هو أن تكون مصدرًا تعليميًا. يمكنك قراءة التنفيذ الذي تم التعليق عليه بكثافة للمكونات المختلفة ونأمل أن تتعلم منها. يُرجى العِلم أنّها ليست مكتبة واجهة مستخدم، ويجب عدم استخدامها في مرحلة الإنتاج.
المكونات
-
<howto-checkbox>: تمثّل خيارًا منطقيًا في نموذج. النوع الأكثر شيوعًا من مربّعات الاختيار هو النوع المزدوج الذي يتيح للمستخدم التبديل بين خيارَين: محدّد وغير محدّد. -
<howto-tabs>: يحدّ من المحتوى المرئي من خلال فصله إلى لوحات متعددة. -
<howto-tooltip>: نافذة منبثقة تعرض معلومات ذات صلة بعنصر معيّن عندما يتم التركيز على العنصر باستخدام لوحة المفاتيح أو عند تمرير مؤشر الماوس فوقه.
الأهداف
هدفنا هو توضيح أفضل الممارسات لكتابة مكوّنات فعّالة يسهل الوصول إليها وتتميّز بأداء عالٍ وقابلية للصيانة وسهولة في التنسيق. كل مكوّن مستقل تمامًا، لذا يمكن استخدامه كمرجع للتنفيذ.
تسهيل الاستخدام
تتبع المكوّنات عن كثب ممارسات تأليف WAI ARIA، وهو دليل لشرح وعرض ARIA، وهو معيار تطبيقات الإنترنت الغنية التي يمكن الوصول إليها. إذا لم تكن على دراية بـ ARIA، يمكنك الاطّلاع على مقدمتنا حول WebFundamentals. يرتبط كل مكوّن بالقسم ذي الصلة من ممارسات التأليف. على الرغم من أنّ ذلك ليس ضروريًا، ننصحك بقراءة قسم "ممارسات التأليف" قبل البدء في كتابة الرمز البرمجي.
الأداء
في مجال تطوير الويب، يمكن تطبيق مصطلح "الأداء" على العديد من
الأشياء. في سياق <howto>، يشير الأداء في الغالب إلى الصور المتحركة
التي تعمل باستمرار بمعدل 60 إطارًا في الثانية، حتى على الأجهزة الجوّالة.
المرونة المرئية
As much as possible, components are not styled, except for layout or to indicate a selected or active state. هذا للحفاظ على التنفيذ مرنًا ومركزًا بصريًا. من خلال عدم قضاء الوقت في الزخرفة، فإننا نقتصر على الكود فقط على ما هو ضروري للغاية لجعل المكون يعمل. إذا كان هناك نمط مطلوب لكي يعمل المكوّن، سيتم وضع علامة على النمط مع تعليق يشرح السبب.
رمز برمجي قابل للصيانة
بما أنّ HowTo: Components هو تطبيق مرجعي، فقد قضينا وقتًا إضافيًا في كتابة رمز برمجي قابل للقراءة وسهل الفهم ومزوّد بتعليقات كثيرة.
الأهداف غير المحددة
أن تكون مكتبة أو إطار عمل أو مجموعة أدوات
لا يتم نشر مكوّنات <howto> على npm أو bower أو أي منصة أخرى لأنّها غير مخصّصة للاستخدام في الإنتاج. من أجل الحصول على رمز برمجي موجز ومقروء، نستخدم واجهات برمجة تطبيقات JavaScript حديثة وندعم المتصفحات الحديثة التي تطبق معايير مكونات الويب. ستتمكن من تكييف الكود ليناسب احتياجاتك الخاصة بعد قراءة هذه التطبيقات.
أن تكون متوافقة مع الأنظمة القديمة
ولا يجب الاعتماد على الرمز مباشرةً. قد نغيّر، ومن المرجّح جدًا أن نغيّر، تنفيذ أي عنصر وواجهة برمجة التطبيقات الخاصة به بشكل جذري إذا تم اكتشاف تنفيذ أفضل. هذا مرجع حيوي يمكننا من خلاله مشاركة واستكشاف ومناقشة أفضل الممارسات لإنشاء واجهات مستخدم الويب.
تقديم معلومات كاملة
لا ننفّذ (وربما لن ننفّذ) *جميع *المكوّنات التي يمكن العثور عليها في ممارسات تأليف WAI ARIA. ومع ذلك، فإنّ إعادة استخدام المبادئ المتّبعة في مكوّنات <howto> الأخرى من شأنها أن تتيح للقرّاء تنفيذ أي مكوّنات غير متوفّرة.