کامپوننت های HowTo
«HowTo: Components» مجموعه‌ای از مؤلفه‌های وب هستند که الگوهای مشترک رابط کاربری را پیاده‌سازی می‌کنند. هدف از این پیاده سازی ها تبدیل شدن به یک منبع آموزشی است. شما می‌توانید از طریق اجرای کامپوننت‌های مختلف با نظرات فشرده مطالعه کنید و امیدواریم از آنها بیاموزید. توجه داشته باشید که آنها به صراحت یک کتابخانه UI نیستند و نباید در تولید استفاده شوند.
اجزاء
-
<howto-checkbox>: یک گزینه بولی را در یک فرم نشان می دهد. رایج ترین نوع چک باکس یک نوع دوگانه است که به کاربر اجازه می دهد بین دو گزینه تیک دار و بدون علامت جابجا شود. -
<howto-tabs>: محتوای قابل مشاهده را با جدا کردن آن در چند پانل محدود می کند. -
<howto-tooltip>: یک پنجره بازشو که اطلاعات مربوط به یک عنصر را هنگامی که عنصر فوکوس صفحه کلید را دریافت می کند یا ماوس روی آن قرار می گیرد، نمایش می دهد.
اهداف
هدف ما نشان دادن بهترین روش‌ها برای نوشتن اجزای قوی است که در دسترس، کارآمد، قابل نگهداری و سبک‌دهی آسان هستند. هر جزء کاملاً مستقل است بنابراین می تواند به عنوان یک پیاده سازی مرجع عمل کند.
دسترسی
مؤلفه‌ها به‌خوبی از شیوه‌های تألیف WAI ARIA پیروی می‌کنند، که راهنمایی برای توضیح و نشان دادن ARIA، استاندارد برنامه کاربردی اینترنت غنی قابل دسترسی است. اگر با ARIA آشنا نیستید، مقدمه ما را در WebFundamentals بررسی کنید . هر جزء به بخش مربوطه از شیوه های نگارش پیوند دارد. اگرچه کاملاً ضروری نیست، توصیه می‌کنیم قبل از ورود به کد، بخش شیوه‌های نگارش را بخوانید.
کارایی
در توسعه وب، اصطلاح "عملکرد" را می توان برای چیزهای زیادی به کار برد. در زمینه <howto> ، عملکرد بیشتر به انیمیشن هایی اشاره دارد که به طور مداوم با سرعت 60 فریم در ثانیه اجرا می شوند، حتی در دستگاه های تلفن همراه.
انعطاف بصری
تا آنجا که ممکن است، اجزاء به جز برای چیدمان یا برای نشان دادن حالت انتخابی یا فعال، استایل داده نمی شوند. این کار برای این است که پیاده سازی از نظر بصری انعطاف پذیر و متمرکز باشد. با صرف نکردن زمان برای دکوراسیون، کد را فقط به آنچه برای ایجاد عملکرد جزء ضروری است محدود می کنیم. اگر هر سبکی برای عملکرد مؤلفه لازم باشد، استایل با یک نظر مشخص می شود که دلیل آن را توضیح می دهد.
کد قابل نگهداری
از آنجایی که HowTo: Components یک پیاده سازی مرجع است، ما زمان بیشتری را صرف نوشتن کدهای خوانا و به راحتی قابل درک کردیم که به صورت فشرده در آنها توضیح داده می شود.
غیر هدف
یک کتابخانه / چارچوب / جعبه ابزار باشید
اجزای <howto> در npm، bower یا هر پلتفرم دیگری منتشر نمی شوند زیرا قرار نیست در تولید استفاده شوند. به خاطر کد مختصر و قابل خواندن، ما از APIهای جاوا اسکریپت مدرن استفاده می کنیم و از مرورگرهای مدرنی که استانداردهای Web Components را پیاده سازی می کنند، پشتیبانی می کنیم. شما می توانید پس از خواندن این پیاده سازی ها، کد را مطابق با نیازهای خود تطبیق دهید.
با عقب سازگار باشید
به این کد نباید مستقیماً اعتماد کرد. اگر پیاده سازی بهتری کشف شود، ممکن است، و به احتمال زیاد، پیاده سازی و API هر عنصر را به شدت تغییر خواهیم داد. این یک منبع زنده است که در آن می‌توانیم بهترین شیوه‌ها را برای ایجاد رابط‌های کاربری وب به اشتراک بگذاریم، کاوش کنیم و درباره آن بحث کنیم.
کامل باش
ما در حال حاضر همه * مؤلفه‌هایی را که می‌توان در شیوه‌های تألیف WAI ARIA یافت، پیاده‌سازی نمی‌کنیم (و احتمالاً نخواهیم کرد). با این حال، استفاده مجدد از اصول مورد استفاده در سایر مؤلفه‌های <howto> باید خوانندگان را قادر سازد تا هر مؤلفه‌ای را که گم شده است پیاده‌سازی کنند.