בוחרים מתוך רשימת הכישורים של Modern Web Guidance את אלה שמתאימים לשלב הנוכחי במחזור החיים של פיתוח אתרים, החל מסגנון ראשוני ועד להטמעה סופית של אבטחה.
תחומי ליבה באינטרנט
כלי תזמור שיעזרו לכם להתמקד בעבודה שלכם לפי תחום באינטרנט.
accessibility
/modern-web-guidance accessibility
המדריך הזה משמש כנקודת מוצא לביקורת, לתיקון ולהטמעה של דפוסי נגישות יעילים בכל האפליקציה.
צפייה במיומנות accessibility ב-GitHub
performance
/modern-web-guidance performance
הכלי עוזר לכם לבצע אופטימיזציה של Core Web Vitals, לקצר את זמן האחזור של זמן טעינה של דף ולשפר את הרספונסיביות לקלט של משתמשים.
צפייה במיומנות performance ב-GitHub
user-experience
/modern-web-guidance user-experience
הספרייה משמשת כערכת כלים לממשק משתמש (UI) כדי להטמיע במהירות רכיבים מותאמים אישית רספונסיביים, מעברים חלקים ודפוסי סגנון מודרניים.
צפייה במיומנות user-experience ב-GitHub
טכנולוגיות אינטרנט
הכישורים האלה מספקים אבני בניין חיוניות לכל אפליקציה מודרנית, ומבטיחים שהפרויקט יתחיל עם שיטות מומלצות מודרניות, תוך התחשבות ב-HTML סמנטי, במהירות ובפעולה הדדית.
html
/modern-web-guidance html
הנחיות פרקטיות לארכיטקטורת HTML מודרנית, סמנטיקה, ממשקי API אינטראקטיביים מקוריים (Dialog, Popover, Details), ניהול מיקוד ותעדוף משאבים. אפשר להשתמש במדריך הזה כשמבצעים אופטימיזציה של סדר טעינת המשאבים, כשמטמיעים שכבות-על מקוריות או כשמבצעים אופטימיזציה של סדר טעינת המשאבים.
css
/modern-web-guidance css
הנחיות פרקטיות לארכיטקטורה, לפריסות ולביצועים של CSS מודרני. אפשר להשתמש במדריך הזה כשיוצרים סגנונות, כשמנהלים מערכות עיצוב או כשמבצעים אופטימיזציה של עיבוד אתרים.
css-layout
/modern-web-guidance css-layout
פריסות CSS מודרניות כמו flexbox, grid, subgrid, container queries, anchor positioning ו-intrinsic sizing. אפשר להשתמש במיומנות הזו כשמתכננים רכיבי ממשק משתמש רספונסיביים או פריסות של דפים.
צפייה במיומנות css-layout ב-GitHub
forms
/modern-web-guidance forms
שיטות מומלצות ליצירת טפסים נגישים, מאובטחים וידידותיים למשתמשים. אפשר להשתמש במדריך הזה כשיוצרים או משנים טפסים, קלט וזרימות של שליחת טפסים.
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
קומפילציה של C ו-C++ לאינטרנט המודרני באמצעות WebAssembly. משתמשים במיומנות הזו כשצריך להעביר קוד C++, ליצור ספריות C++ באמצעות Emscripten או להגדיר רכיבי C++ עם ביצועים גבוהים בדפדפן.
צפייה במיומנות cpp-on-the-web ב-GitHub
יכולות הדפדפן (אופציונלי)
הכישורים האלה יעזרו לכם לפתח תוספים ל-Chrome שעומדים בתקנים מודרניים כמו Manifest V3, ולפרסם אותם בקלות בחנות האינטרנט של Chrome. הם גם יעזרו לכם להכין את המטא-נתונים, מדיניות הפרטיות וההצדקות להרשאות. הכישורים האלה הם אופציונליים ולא מופעלים כברירת מחדל.
chrome-extensions
/modern-web-guidance chrome-extensions
כדאי ליצור תוספי Chrome מאובטחים ותואמים ב-Manifest V3, כדי להימנע מבעיות נפוצות במחזור החיים של Service Worker ובארגז חול. כדי להצטרף, צריך לציין את היכולת chrome-extensions:
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
צפייה במיומנות chrome-extensions ב-GitHub
אבטחה, מהימנות וזהות
הכישורים האלה מתמקדים בביסוס אמון המשתמשים על ידי אבטחת אפליקציות מפני ניצול לרעה בצד הלקוח, כמו XSS, באמצעות כותרות HTTP הגנתיות ובידוד המקור. מפתחים יכולים גם לפתח תהליכי אימות באמצעות מפתחות גישה, למזער את המעקב על ידי צד שלישי ולהשתמש במיומנויות כדי להעביר ספריות C/C++ למודולים של WebAssembly.
security
/modern-web-guidance security
הנחיות לאבטחה מונעת למפתחי אתרים (XSS, CSP, קובצי Cookie, בידוד בין מקורות). השימוש במיומנות הזו יעזור לכם לבצע ביקורת, בדיקה ופריסה של מדיניות אבטחה בצורה בטוחה.
צפייה במיומנות security ב-GitHub
passkeys
/modern-web-guidance passkeys
הסברים מקיפים ועקרונות חוצי תחומים להטמעה של WebAuthn ומפתחות גישה באפליקציות אינטרנט. המדריך הזה יעזור לכם לרשום מפתחות גישה, לאמת אותם, לנהל אותם או לבצע אימות מחדש.
צפייה במיומנות passkeys ב-GitHub
privacy
/modern-web-guidance privacy
הנחיות פרקטיות למפתחי אתרים להטמעה של הפרטיות במרכז, הגבלה על איסוף המידע, ביקורות של צד שלישי וטיפול מאובטח בנתונים. כדאי להשתמש במיומנות הזו כשמעצבים אפליקציות, משלבים שירותים של צד שלישי, מטפלים בנתוני משתמשים או מגדירים כותרות אבטחה.
צפייה במיומנות privacy ב-GitHub
מערכות סוכניות
הכישורים האלה עוזרים לגשר על הפער בין אפליקציית האינטרנט לבין תהליכי עבודה של AI באמצעות WebMCP. חשיפת פונקציונליות של דפדפן בצד הלקוח ככלים אינטראקטיביים מאפשרת להנחות סוכני AI לקיים אינטראקציה ישירה עם תכונות של אפליקציות.
webmcp
/modern-web-guidance webmcp
הטמעה של WebMCP כדי לחשוף פונקציונליות של דפדפן בצד הלקוח ככלים אינטראקטיביים לסוכני AI.
צפייה במיומנות webmcp ב-GitHub
השלבים הבאים
עכשיו, אחרי שהבנתם את ההנחיות לגבי אתרים מודרניים, אתם יכולים לנסות אותן בעצמכם. כדי להתחיל, כדאי לעיין בתכונות ובתרחישי השימוש שנתמכים ב-Modern Web Guidance ולנסות כמה הנחיות לדוגמה.