בכנס מפתחי המפתחים של Chrome 2014 התקיימו הרבה נושאים לדיון, בהצגה של ממשקי API חדשים ומגוונים, אבל לא הכול על הממשק החדש והנוצץ.
אם אתם מפתחי אתרים חדשים או אפילו מפתחים מנוסים שעומדים להתחיל לחקור ממשקי API חדשים, סביר להניח שתבצעו את שלושת השלבים הבאים: למידה, פיתוח ואיטרציה.
Matt Gaunt מכסה את המאמצים המתמשכים לפתרון הבעיות האלה מאת צוות Chrome Developer Platform.
למידה
Web Fundamentals הוא אוסף של מסמכי תיעוד שמבוססים על תרחישים לדוגמה, שעוסקים במגוון נושאים. המטרה העיקרית היא לעזור למפתחים לקבל ידע מועט, אם בכלל, וליישם שיטות מומלצות במהירות האפשרית.
אחת המטרות העיקריות של יסודות Web Fundamentals היא לוודא שאם אתם חדשים בנושא, ההנחיות יפחיתו ככל האפשר את 'שיתוק הבחירה'. Addy Osmani מכסה את זה בצורה מושלמת ב-Pastry Box.
אם נתקלתם בבעיות באתר או בתוכן שלו, או שאתם רוצים שהעקרונות של האינטרנט יכסו נושא מסוים, תוכלו לשלוח לנו משוב ב-GitHub כדי להודיע לנו על כך.
פיתוח פתרונות
כדי לעזור לכם להתחיל פרויקט אינטרנט חדש, יצרנו את Web Starter Kit. יש בו את כל מה שצריך:
- תהליך build יציב
- Boilerplate HTML
- מדריך סגנון
תהליך ה-build
הדרך הקלה ביותר לחשוב על תהליך פיתוח בשביל משתמשים חדשים היא להתייחס אליו בתור תוכנה שלוקחת קבוצת קבצים ומבצעת בהם משימות מסוימות ומפיקה פלט של גרסאות חדשות במיקום אחר. המשימות מבצעות אופטימיזציה של הקבצים כדי לשפר את זמני הטעינה, לבדוק אם יש שגיאות אפשריות או לטפל במשימות שאפשר לבצע באופן אוטומטי.
בערכת האתרים למתחילים משתמשים התהליכים הבאים:
אנחנו מזעורים ומשרשרים את CSS ו-JavaScript כדי שהדפדפן יוכל לאחזר את הקובץ במהירות, וה-JavaScript מופעל גם באמצעות JSHint כדי לבדוק אם יש שיטות מומלצות של JavaScript או שגיאות תכנות נפוצות. התמונות מוקטנות באמצעות imagemin, ובעזרתה אפשר להקטין עצום את גודל הקובץ. יש לנו גם תהליך ליצירת מדריכי סגנון CSS.
בסיס סטנדרטי ל-HTML במכשירים מרובים
קבוצת ה-HTML הראשונה שאתם כותבים לדף חדש היא סטנדרטית, ורוב הסיכויים שתהיה לכם דרך להשיג במהירות קובץ HTML ממאגר, שעובד היטב במכשירים שונים ובגדלים שונים של מסכים.
ב-Web Starter Kit רצינו להוסיף תמיכה בתכונות שטשטשו את השורות בין הפלטפורמה לבין האתר שלכם. לכן הוספנו תמיכה בתכונות הוספה למסך הבית ומסכי פתיחה ל-Android, ל-Windows Phone, ל-iOS ול-Opera חוף.
מדריך סגנון
החלק האחרון בערכה למתחילים באינטרנט הוא מדריך סגנונות.
כך אפשר ליצור פרויקט חדש עם מבחר מעולה של סגנונות ורכיבים כברירת מחדל, כדי לעודד פיתוח מבוסס-סגנון. אפשר לשנות סגנונות קיימים לרכיבים ולהוסיף סגנון משלכם.
בגרסה הבאה של WSK, שתושק בתחילת השנה הבאה, אנחנו משקיעים מאמצים רבים כדי לפשט את ההתאמה של מדריך הסגנון ולעבור למראה ולחוויה של עיצוב חומרים. מאטהציגהערכה מוקדמת של האופן שבו זה עשוי להיראות בכנס מפתחי Chrome, ותוכלו לראות דוגמה למטה.
מעבר חוזר
אחרי שתתחילו ליישם את הידע החדש, מומלץ להשתמש בכלי הפיתוח כדי לנפות באגים, לשפר ולתחזק את העבודה.
בכלי הפיתוח יש כמה פיצ'רים חדשים ענקיים, ומאט בוחן את התכונות החדשות הבאות.
מצב המכשיר (Device Mode)
מצב מכשיר הוא קטע חדש בכלי הפיתוח, שמאפשר לראות במהירות איך האתר פועל במכשירים ניידים שונים, תוך צפייה בשאילתות המדיה ב-CSS.
אחת התכונות הנהדרות של מצב המכשיר היא היכולת לווסת את מהירויות הרשת וכך לדמות את חוויית המשתמש בחיבור GPRS, EDGE, 3G, DSL או Wi-Fi.
הכלי לניתוח צבעים
אם אי פעם פתחתם את כרטיסיית ציר הזמן ולחצתם על לחצן ההקלטה, בטח ראיתם כמה אירועי צבע מתרחשים במפל. בדרך כלל מדובר בתיבה שחורה שאי אפשר לדעת למה הדפדפן עשה, או מה הוא עשה.
באמצעות Paintr No, אפשר לקבל מידע נוסף על הפעולות המדויקות של הדפדפן במהלך הצגת הסרטון.
מעקב אחר ביטול תוקף
מעכשיו, כלי הפיתוח מספקים סיבה לכך שנוצרו צבעים או פריסה, מתי שאפשר. הם שימושיים לכל מי שלומד על ציר הזמן או על התנהגויות הדפדפן, ומאפשרים לבצע אופטימיזציה של הקוד כדי למנוע בעיות בביצועים.
תצוגה של תרשים להבה
זו דרך שונה מאוד לראות את המידע שזמין בציר הזמן. כך הרבה יותר קל לראות את חפיפה בין משימות ואת התנהגות הדפדפן כתוצאה ממשימות אחרות.
מציג הפריימים
בתצוגה Flame Chart אפשר לבחור פריים ספציפי ובתוך כך תוכלו לראות אילו רכיבים בדף קודמו לשכבה מורכבת ולהסביר למה הם קידמו.
למידה. פיתוח פתרונות. מעבר חוזר
אלה כמה מהמאמצים של צוות Chrome לעזור למפתחים להתעדכן במהירות בפיתוח האתרים. מומלץ להכיר את Web Fundamentals, Web Starter Kit ואת התכונות החדשות בכלי הפיתוח ל-Chrome.