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