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

טיפים קצרים וחדשות למתכנתים

לא מאמין שפספסתי את זה 3 פעמים כבר

21/05/2021

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

מאז חזרתי לפחות עוד פעמיים לתיעוד, כל פעם כשהייתי צריך לבנות משהו אחר. פעם אחת בשביל להבין בדיוק איך Image עובד או למה האימג'ים שלי יוצאים כל כך גדולים ופעם נוספת כדי ללמוד על Volumes ואיך לנהל Persistency בתוך docker-compose.

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

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

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

שתי תוכניות פעולה

20/05/2021

"אני רוצה להיות בן אדם שלומד חצי שעה ביום כי זה מה שמתכנתים מקצועיים עושים"

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

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

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

מה זה Serverless ולמה שיהיה לכם אכפת

19/05/2021

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

הנה הקוד רק בשביל שיהיה לנו קל לדבר:

const AWS = require("aws-sdk");

const dynamo = new AWS.DynamoDB.DocumentClient();

exports.handler = async (event, context) => {
  let body;
  let statusCode = 200;
  const headers = {
    "Content-Type": "application/json"
  };

  try {
    switch (event.routeKey) {
      case "GET /items":
        body = await dynamo.scan({ TableName: "Leads" }).promise();
        break;
      case "PUT /items":
        let requestJSON = JSON.parse(event.body);
        await dynamo
          .put({
            TableName: "Leads",
            Item: {
              id: requestJSON.email,
              name: requestJSON.name,
              email: requestJSON.email,
            }
          })
          .promise();
        body = `Put item ${requestJSON.email}`;
        break;
      default:
        throw new Error(`Unsupported route: "${event.routeKey}"`);
    }
  } catch (err) {
    statusCode = 400;
    body = err.message;
  } finally {
    body = JSON.stringify(body);
  }

  return {
    statusCode,
    body,
    headers
  };
};

יש פה פחות מ-50 שורות. הלידים נשמרים בתוך טבלה בבסיס נתונים ואפשר למשוך את כל הלידים באמצעות בקשת HTTP GET פשוטה, או פשוט דרך ממשק הניהול של AWS.

הנה כמה דברים שהפכו את גישת ה Serverless למדליקה עבור הפרויקט הזה:

  1. הכל היה באוויר תוך חצי שעה. בלי Deployment, בלי לבנות Database, בלי להגדיר משתמשים ומה מותר למי ומה אסור. חמישים שורות ולדרך.

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

  3. יש לוג די מפורט של הבקשות הנכנסות מנוהל אוטומטית על ידי AWS.

  4. לא צריך לדאוג לסקיילינג. אז נכון אני כנראה לא בונה את הטיק טוק הבא אבל בכל זאת טוב להיות רגועים בגיזרה הזו.

  5. לא צריך לכתוב Dockerfile ו docker-compose.yml. שתיים-שלוש לחיצות ב GUI או מספר פקודות מה CLI מספיקות כדי לחבר את כל החוטים.

בצד החסרונות שווה לשים לב ש:

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

  2. צריך לעמוד בפיתוי ולא להדביק את הקוד לתוך הממשק הגרפי אלא ליצור Pipeline מסודר של גיטהאב לבניה ו Deployment.

  3. התיעוד של AWS ארוך מדי וכולל המון מידע לא רלוונטי.

  4. אין לי מושג כמה זה יעלה בסוף.

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

טיפ באש: איך לחפש קובץ JSON עם ערך במפתח מסוים

18/05/2021

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

בשביל ש jq תוציא ערך מתוך JSON אנחנו צריכים להעביר לה את הנתיב לאותו ערך. עבור קובץ JSON שטוח הנתיב הוא פשוט סימן נקודה ואחריו שם המפתח. לדוגמה אם ה JSON שלי כולל רק מפתח אחד בשם success והערך הוא בוליאני true או false אז הפקודה:

$ jq '.success' file.json

תדפיס את הערך של המפתח success.

ומה קורה כשיש לנו ערימה של קבצי JSON שצריך לחפש בהם? מסתבר שבעזרת find ו jq אפשר להגיע רחוק. הפקודה הבאה תחפש ותדפיס את כמות קבצי ה JSON בתיקיה בהם ערך המפתח success הוא true:

find . -name '*.json' -exec jq '"{}: " + (.success|tostring)' {} \;|grep true

מעניין לשים לב:

  1. סימן {} יוחלף על ידי find בשם קובץ או תיקיה לכל קובץ שמסתיים בסיומת json
  2. פקודת ה + של jq מחברת שני דברים. הראשון הוא שם הקובץ (כפי שמגיע מ find).
  3. הסימן השני שהעברתי ל + הוא סימן קו אנכי וזאת הדרך של jq להפעיל פונקציות. בעברית נתרגם את המשפט שם ל"קח את הערך במפתח success והעבר אותו דרך הפונקציה tostring".
  4. עד לפה נקבל בכל שורה שם קובץ ואחריו הערך שבמפתח success. את זה אפשר להעביר דרך grep כדי לקבל רק את הקבצים בהם הערך הוא true.

שלושה חלומות

17/05/2021

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

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

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

שמונה השנים הבאות

16/05/2021

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

אז מה בכל זאת קורה ב-8 השנים הבאות? שני דברים:

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

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

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

בואו נכתוב משחק איקס עיגול ב React עם Hooks

15/05/2021

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

המשך קריאה

טיפים לכתיבת פרויקט צד

14/05/2021

הפרויקט Pirate Weather שעלה לאחרונה לאוויר הספיק לקבל כבר מעל 500 לייקים ברדיט. כתב אותו דוקטורנט בשם אלכסנדר ריי והמטרה שלו פשוטה: להחזיר נתוני מזג אוויר באותו פורמט JSON כמו אתר Dark Sky, אחרי שאפל קנו את דארקסקיי וסגרו את השירות.

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

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

  1. הוא בחר פרויקט שפותר לאנשים אמיתיים בעיה אמיתית: אנשים היו רגילים להשתמש ב Dark Sky API או שהיה להם קוד קיים שקורא JSON-ים מ Dark Sky, דארק סקיי נסגר ועכשיו יהיה להם פיתרון חלופי בלי עלות מעבר.

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

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

  4. הוא בנה דף Front End שמשתמש ב API ומראה את התחזית במקום מגוריכם.

  5. הוא כתב פוסט מפורט שמסביר טכנית איך בנוי הפרויקט ובאיזה תשתיות הוא משתמש.

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

אבל איך ידעת בדיוק מה לעשות?

13/05/2021

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

ובגלל זה כל כך חשוב לשאול "איך יודעים מה צריך לעשות?" ו"איך משתפרים בזה?"

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

  1. הגעתי לבעיה כשהיתה לי היכרות טובה מאוד עם הקוד.

  2. הגעתי לבעיה כשהיתה לי היכרות טובה מאוד עם עולם התוכן.

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

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

וזה מביא אותנו לשאלה היותר מעניינת - "איך משתפרים בזה?". חיבור שלושת התנאים והיפוך הסדר ילמד אותי ש:

  1. כדאי לפתור כמה שיותר בעיות

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

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

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