הבלוג של ינון פרק

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

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

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

בקורס החדש תמצאו קצת מעל 4 שעות של וידאו המכסים המון סוגים של פרויקטים ופרדיגמות תכנות ווב כמו: React, TypeScript, CSS Modules, Mocha, Scss ועוד.

בנוסף אנחנו צוללים להגדרות ולמנגנונים הבסיסיים של וובפאק עצמו כדי להבין איך עובד Lazy Loading, תמיכה ב Browser Cache, כיווץ קוד JS ו CSS, החלפת מודולים (HMR), מחיקת קוד מת (Tree Shaking) ועוד.

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

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

תהנו מהקורס, ינון

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

כי כשאנחנו באים ללמוד שפת תכנות חדשה כבר יש לנו בראש את ה if מ Java ואת ה class מ Python ובעצם כמעט כל מילה בשפה החדשה טעונה בכל מיני משמעויות מפעם, ולכן הפיתרון הראשון שאני חושב עליו לבעיה הוא פשוט יישום של הדברים שאני רגיל לכתוב משפה אחרת לתוך השפה החדשה.

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

כשרק התחלתי לכתוב ריילס שמחתי לגלות את ה ORM שלו והשתמשתי במחלקות שחזרו מבסיס הנתונים כאילו היו מחלקות רגילות מ Java. זה היה מאוד נפוץ לראות בקוד שלי לולאות מהסוג הזה:

users.map do |user|
    puts user.profile.nickname
end

כשהיום עם הניסיון שיש לי בריילס עומס הנקודות בשורה מיד מכניס אותי למתח.

בלימוד שפה חדשה האתגר הוא לא לכתוב קוד שעובד. הרבה יותר חשוב לכתוב קוד שמתאים ל Ecosystem שאת באה ללמוד.

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

המטרה היתה לבנות משהו לא מסובך מדי (בכל זאת שעה ראשונה עם קלוז'ר) אבל גם לא סתם Hello World. בסוף הלכתי על המשימה הראשונה מ AoC של שנה שעברה. תיאור המשימה המלא בקישור הזה.

ניגש לקוד?

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

https://ynonp.github.io/ynonlearnsrussian/

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

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

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

המשחק של תיאום ציפיות בתור פרילאנסרים אינו שונה בהרבה:

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

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

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

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

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

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

ההבדל בין שתי הפונקציות הבאות הוא תהומי, למרות ששתיהן כתובות באותה שפה ועושות בדיוק את אותו דבר:

function ReturnFirstElement(array) {  
  if (array.length > 0) {
    var result = array[0];
  }
  else {
    var result = undefined;
  }
  return result;
}

const returnFirstElement = (arr) => arr[0];

ואני לא רוצה להתחיל בכלל לדבר על ההבדל בין שתי הפונקציות האלה:

function fib1(n) {
  let [x, y] = [0, 1];
  for (let i=0; i < n; i++) {
    [x, y] = [y, x + y];
  }

  return x;
}

function fib2(n) {
  let [x, y] = [0, 1]
  for (let i=0; i < n; i++) {
    [x, y] = [y, x + y]
  }

  return x
}

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

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

בלוג מקצועי (לפחות בשבילי) מספק שלושה כיווני התפתחות בריאים לקריירה:

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

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

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

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

https://www.tocode.co.il/workshops/88

נ.ב. אם יש לכם כבר בלוג ורוצים לשתף ממש אשמח לקישור בתגובות (עדיף אחד שאפשר לקרוא ברסס).

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

מה שיותר מפתיע היה תוכן התיקיה: היא מכילה את כל החבילות שאי פעם התקנתי ובכל הגירסאות שלהן. זה כאילו מישהו לקח את כל תיקיות ה node_modules של העולם והדביק את הכל יחד לתוך תיקיה אחת. אז הלכתי לתיעוד ומסתבר שזה בדיוק מה ש npm עושה כל פעם שאנחנו מתקינים חבילה. עוד קצת חיטוט בתיעוד ומסתבר שאפשר להשתמש ב cache הזה כדי להפוך את ההתקנות שלכם להרבה יותר מהירות. העברת הדגל --offline ל npm install גורמת ל npm להתקין את הספריה מהמטמון המקומי בלי לבקר באינטרנט כלל.

הנה השוואת זמנים קטנה בשביל לעשות גם לכם חשק:

$ time npm install --save express
real    0m3.625s

$ time npm install --offline --save express
real    0m1.646s

עכשיו רק נשאר למצוא איך להגביל את גודל ספריית ~/.npm כדי שלא תתפוס לי את כל הדיסק.