אז בקורס front end זה יצא לנו לדבר על הרבה תיאוריות, והדחף לרשום קוד כבר בשיאו😆, כלומר, אני נוטה להאמין שספגתם קצת מהשיעורים האחרונים ודחף זה נרגע קצת, ואני יודע ומכיר את זה טוב, גם אני תמיד אומר לעצמי תוך קריאה של מדריכים "נו כמה חפירות איפה הקוד!" אבל תתנו לזה שניה לשקוע, כי לכתוב קוד זה באמת השלב האחרון, וכן כבר כיסינו הרבה מהשלבים הבסיסיים ביותר, כגון:
- עקרונות וחשיבות המקצוע שלנו
- אילו טכנולוגיות עלינו להכיר ובאילו רמות להכיר אותן
- סדר פעולות בעבודה (frontend workflow)
- תכנון לפני ביצוע
- שלבי סיום – שלבי בדיקות
והנה צעד נוסף בפוסט הזה, שיקנה לכם מיומנות חשובה מאד, שתייעל אתכם ותכין אתכם לכתוב קוד ברצף.
הכנת סביבת עבודה אולטימטיבית עבור מפתח front end
יש הרבה IDEs וכל אחד יבחר מה שנוח לו, כולם מאפשרים את המיומנויות שאציג פה, ספציפית אני אציג על VSCODE.
Formatting
חשיבות גבוהה לformatting בעיקר שעובדים בצוות, אנחנו רוצים קוד ישר ומיושר עם כל הצוות וזה בדיוק מה שפורמט עושה. אז בחרו סט של הגדרות שיתאים לכם ולצוות ושכולם יעבדו באופן זהה. למשל אני חברתי לעבוד עם תוסף שנראה Prettier , תוסף זה הוא מהמוכרים בשוק, ועושה עבודה טובה. אחרי שתורידו את התוסף הזה לVSCODE שלכם, תוכלו להגדיר הגדרות של התוסף בהתאם למה שנוח לכם, למשל:
בהתאם להגדרות שתבחרו כמובן , כמו כן חשוב לסמן את prettier כפורמנטר דיפולטי וגם לסמן שירוץ הפורמטר כל פעם שתשמרו:
אם אתם עובדים בצוות, אז או שתתאמו את הפורמט עם כולם או, בדרך יותר נוחה, הכינו קובץ prettierrc. ושימו אותו במקביל לpackage.json . ושימו את ההגדרות הרצויות עבור הפרויקט, כך כל מי שעובד את הפרויקט יהיה לו את הקובץ ההגדרות המעודכן. להלן דוגמה לקובץ הגדרות prettierrc:
{
"tabWidth": 4,
"useTabs": false,
"singleQuote": true,
"semi": true,
"bracketSpacing": true,
"arrowParens": "avoid",
"trailingComma": "es5",
"bracketSameLine": true,
"printWidth": 80
}
linter
דיברנו קצת על לינטר בפוסט על מתכנת פרונטאנד, סיימת את הפיצ’ר, בדקת כמו שצריך? , לינטר יעשה לכם סדר לאורך כל הדרך , התקינו לינטר בכל פרויקט (חפשו איך להתקין בהתאם לאופי הפרויקט, למשל אנגולר: @angular-eslint/schematics) והריצו פעם ביום או לפני כל קומיט או לפני כל פוש, כך גם שלא תגיעו לסיום הפרויקט ואז תריצו ותקבלו מלא שגיאות לינט, וייקח יותר זמן לטפל בבעיות.
ישנם פעמים נדירות שיהיה לכם קשה לעבור את הלינטר, מכוון שיהיו שורות קוד שמסיבות כאלו או אחרות לא תוכלו ליישר אותן בהתאם לבקשותיו של הלינטר. ישנו פתרון, הוא לא מומלץ אבל משתמשים בו במידת הצורך וזה בעזרת comment שמכבה את הלינטר עבור אותה שורה, לדוגמה: ( ללא הקומנט הלינטר היה נופל כי הגדרתנו לסטרינג טייפ ANY).
public title: any = 'frontend-course-ag'; // eslint-disable-line
gitblame
מומלץ להתקין תוסף לIDE שנקרא gitlens שנותן אינדיקציה מי כתב איזה שורה ומתי. חוסר זמן בניסיונות להבין מי כתב ולמה כתב, כך תוכלו ישר לראות של מי שייכת השורה וליצור קשר. רואים גם תאריכים כך שזה גם עוזר קצת כי אפשר לראות שהקוד נכתב לפני שנים וכנראה לא רלוונטי. אפשר גם לעבור עם העכבר על השורה האפורה ולקבל עוד אינפורמציה כמו מה היה השינוי ועוד הרבה מידע נוסף על השינויים בקוד בין הענפים.
Figma
כלי חדש של פיגמה שגם הוא מגיע בתוסף לIDE . מאוד נוח לעבודה ומייעל את העבודה פלאים. הורידו את התוסף והתחברו ליוזר שלכם בפיגמה וקבלו את כל העיצוב אצלכם בIDE בחלון נפרד, כמו כן תוכלו להוריד ישירות את הASSETS מהעיצוב ישירות לתיקיה הרצויה בפרויקט וכן תוכלו לקבל מאפיינים חשובים כמו פונטים, יחידות מידה, breakpoints, צבעים ועוד.. כמו כן תוכלו לאפשר לפיגמה להשלים לכם הגדרות עיצוביות כקוד, בהתאם לעיצוב שזה מאד נחמד ונותן רעיונות ולפעמים גם פגוע בול ואפשר פשוט להעתיק ולהדביק.
co-pilot labs
מי שכבר עובד עם copilot labs יודע שבלעדיו כבר קשה לעבוד, אם עד היום AI לא עשה לכם את זה, אז הורידו copilot labs לIDE שלכם ותנו לו להיות רקע, בלי שתרצו אתם תבינו את הכח שלו, למעשה התוסף הוא של github מבוסס AI עבור מפתחים, התוסף ילמד את הפרויקט שלכם וידע להשלים לכם פיסות נכבדות של קוד בהתאם לאופי הכתיבה שלכם, כמו כן תוכלו לרשום כprompt בתוך הIDE שלכם, למשל:
זה אחד מבין הדברים שתוכלו לעשות עם copilot labs , כמו כן תוכלו לרשום בcomment איזה פונקציה אתם תרצו ותקבלו השלמה של copilot labs , כמו שאתם יכולים לראות הוא גם מכיר את הספריות שיש לכם בפרויקט וגם יודע להשתמש בהם, סיכוי דיי גבוהה שזה לא יעבוד במכה הראשונה אבל את הרעיון הכללי הוא ידע לעשות כמעט מושלם וזה חוסך זמן רב גם בכתיבה וגם בהבנה שלכם של מה צריך לעשות וכמובן ככל שתרשמו יותר בבירור את ההערה שלכם כך יהיה לו קל יותר לממש:
עוד המון שימושים מעולים לcopilot labs ואדבר עליהם עוד בפוסט נפרד שיוקדש כולו לcopilot labs .
לסיכום קורס front end – סביבת עבודה אולטימטיבית
סביבת עבודה היא עניין של שינוי מחשבתי, במובן מסוים אני מכיר המון אנשים בתעשייה שהם מהמובחרים בשוק, אבל אם תקועים בתפיסה שלהם, ומאד קשה להם לשנות הרגלים, ודווקא אם תפתחו את הראש ותתנו הזדמנויות לכלים חדשים שמוצאים בשוק, יכול להיות שתשפרו מאד את היכולות שלכם ואת היעילות שלכם. יבואו ויגידו אנשים כי שימוש ב"כלי עזר" יפגעו ביכולת הכתיבה שלכם ויכולת החשיבה שלכם, אני מסכים עם זה חלקית, מצד שני, היכולת שלכם לרשום קוד טוב ביעילות וזריזות הוא האינטרס של החברות ועל זה אנחנו המפתחים גם נמדדים, ודבר נוסף, העולם מתקדם, ולשם אנחנו הולכים, למקום בו אין צורך בכתיבה אלא יותר בהבנה ויצירתיות לפתרון בעיות. כך שתוכלו גם לממש את החזון וגם אם יש בעיה תוכלו לאתר אותה ולטפל בה.
** רשימת הכלים בפוסט זה עשויה להתעדכן מפעם לפעם, כמו כן תרשמו בתגובות אם יש לכם כלים נוספים מגניבים שלא ציינתי ואשמח לסקר גם אותם ולתת את דעתי.
בהצלחה 🐊🤖😻
