רכיבי HowTo – סקירה כללית

רכיבי HowTo

אווה גספרוביץ'

HowTo: Components (איך-רכיבים): אוסף של רכיבי אינטרנט שמטמיעים תבניות נפוצות של ממשק משתמש. מטרת היישומים האלה היא להיות משאב חינוכי. תוכלו לקרוא על ההטמעה של הרכיבים השונים בהערות צפיפות, ובתקווה גם ללמוד מהם. חשוב לשים לב שבפירוש הן לא ספריית ממשק משתמש ואין להשתמש בהן בסביבת הייצור.

רכיבים

  • <howto-checkbox>: מייצג אפשרות בוליאנית בטופס. הסוג הנפוץ ביותר של תיבת סימון הוא סוג כפול שמאפשר למשתמש לעבור בין שתי אפשרויות – מסומנת ולא מסומנת.
  • <howto-tabs>: מגביל את התוכן הגלוי על ידי הפרדתו למספר חלוניות.
  • <howto-tooltip>: חלון קופץ שמציג מידע שקשור לרכיב מסוים כשהאלמנט מקבל מיקוד במקלדת או כשמעבירים מעליו את העכבר.

שערים

המטרה שלנו היא להדגים שיטות מומלצות לכתיבת רכיבים חזקים שאפשר לגשת אליהם, לבצע ביצועים טובים, לתחזק אותם ולעצב אותם בקלות. כל רכיב עומד בפני עצמו לחלוטין, כך שהוא יכול לשמש כהטמעה של קובץ עזר.

נגישות

הרכיבים תואמים מאוד לנוהלי כתיבת WAI ARIA, שמדריך את התהליך להסבר ולהצגה של ARIA, תקן הנגישות של אפליקציות אינטרנט עשירות נגישה. אם אתם לא מכירים את ARIA, כדאי לקרוא את מבוא ל-WebFundamentals. כל רכיב מקשר לחלק הרלוונטי של שיטות הפרסום. זה אמנם לא הכרחי לגמרי, אבל מומלץ לקרוא את הקטע ב-Authoring Practices לפני שממשיכים לקוד.

ביצועים

בפיתוח אתרים אפשר להחיל את המונח 'ביצועים' על מגוון רחב של דברים. בהקשר של <howto>, הביצועים מתייחסים בעיקר לאנימציות שפועלות באופן עקבי בקצב של 60fps, גם במכשירים ניידים.

גמישות ויזואלית

עד כמה שאפשר, הרכיבים לא מעוצבים, מלבד פריסה או כדי לציין מצב נבחר או פעיל. העיקרון הזה נועד להבטיח שההטמעה תהיה גמישה וממוקדת באופן חזותי. כשאנחנו לא מקדישים זמן לקישוט, אנחנו מגבילים את הקוד רק למה ההכרחי לביצוע פונקציית הרכיב. אם נדרש סגנון כלשהו כדי שהרכיב יפעל, הסגנון יסומן בהערה שתסביר את הסיבה לכך.

קוד שניתן לתחזוקה

בתור HowTo: Components הוא יישום של הפניות, השקענו זמן נוסף בכתיבת קוד קריא שקל להבין אותו, עם תגובות צפיפות.

לא מטרות עסקיות

שימוש בספרייה / מסגרת / ערכת כלים

רכיבי <howto> לא מתפרסמים ב-Npm, בבאולר או בכל פלטפורמה אחרת, כי הם לא מיועדים לשימוש בסביבת ייצור. כדי לשמור על קוד קריא, אנחנו משתמשים בממשקי JavaScript מודרניים ותומכים בדפדפנים מודרניים שמטמיעים את התקנים של רכיבי האינטרנט. אחרי שתקראו את ההטמעות האלה, תוכלו להתאים את הקוד לצרכים שלכם.

תאימות לאחור

אין להסתמך על הקוד באופן ישיר. אנחנו עשויים, וסביר מאוד להניח, שנבצע שינויים מהותיים בהטמעה וב-API של רכיב כלשהו אם נזהה הטמעה טובה יותר. זהו משאב חי שבו אנחנו יכולים לשתף, לחקור ולדון בשיטות מומלצות לבניית ממשקי משתמש באינטרנט.

שלמים

בשלב הזה אנחנו לא (וככל הנראה לא) מטמיעים את *כל *הרכיבים שאפשר למצוא במסגרת WAI ARIA Authoring Practices. עם זאת, שימוש חוזר בעקרונות שבהם נעשה שימוש ברכיבי <howto> אחרים אמור לאפשר לקוראים ליישם את הרכיבים החסרים.