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

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

היום למדתי: ארכיטקטורות ו Docker Images

12/11/2021

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

  1. בבניית Docker Image אנחנו בונים אימג' ספציפי לארכיטקטורת המעבד ולמערכת ההפעלה עליה אנחנו מריצים את תהליך הבניה.

  2. המנוע שמריץ את ה build לא חייב להיות זהה למערכת ההפעלה שיש לכם על המחשב, וזה החלק המבלבל. ב Windows אנחנו בדרך כלל מריצים את ה build ממנוע שרץ ב WSL כלומר במכונת לינוקס וירטואלית. דוקר על המק משתמש במכונה וירטואלית אחרת כדי להריץ את המנוע, אבל גם היא מריצה לינוקס. לכן אם לא עשיתם משהו מוזר תהליך ה build יבנה אימג' ל Linux.

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

  4. כל פעם שאתם כותבים docker run או docker pul המנוע של דוקר מחפש אימג' שמתאים לארכיטקטורה ולמערכת הפעלה שהוא רץ בה כרגע. זה אומר שכשאני אכתוב docker run python על מערכת לינוקס ועל מערכת Windows, אני אקבל אימג' שונה בכל מערכת. אפשר לראות את זה אם תפעילו docker image ls בכל אחת משתי המכונות ותראו את ה Digest השונה.

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

  6. קלאסטרים וקוברנטס כן רצים על ארכיטקטורת מעבד ספציפית ושם יש לנו בחירה כשמקימים את הקלאסטר. ל AWS יש לדוגמה מעבד שנקרא Graviton2 המבוסס ARM ולפי טענתם יכול לחסוך בעלות הקלאסטר בהשוואה למעבד אינטל. אבל, אם האימג' שלי בנוי רק בארכיטקטורת amd64 אני לא יכול להשתמש בקלאסטר כזה. אמזון אפילו מסבירים איך לבנות אימג' לארכיטקטורת ARM למי שכן רוצה לחסוך.

  7. אפשר לבדוק מה הארכיטקטורה שה Docker Engine שלכם כרגע מריץ עם docker version. חפשו את המפתח OS/Arch.

  8. משתנה הסביבה DOCKER_DEFAULT_PLATFORM קובע לאיזה ארכיטקטורת יעד אנחנו בונים את האימג'ים כשמריצים docker build. בשביל לבנות למעבדי אינטל כשאני רץ על מכונת ARM אני קובע את הערך ל linux/amd64. בשביל לבנות סכימות יותר מתוחכמות יש מנגנון שנקרא buildx.

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

מדריך: איך לבנות שתי תיבות בחירה מתואמות ב Vue

11/11/2021

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

המשך קריאה

תרגיל רקורסיה ב JavaScript

10/11/2021

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

והתרגיל-

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

{
    a: [
        { a1: 10, a2: 20 },
        { a3: 40, a4: 50 },
        { a1: 20, a2: 20 },
    ],
    b: {
        b1: 'yay',
        b2: 'jaj',
        b3: [
            { b33: 'yay' },
            { b33: 'jaj' },
            { b44: 'zaz' },
        ]
    },
}

כתבו פונקציה בשם groupByDepth שמקבלת את האוביקט מחזירה את כל המפתחות שלו מסודרים לפי העומק. בחישוב העומק אנחנו בודקים כמה אוביקטים ללא מערכים יש מעל המפתח. באוביקט הדוגמה a הוא בעומק 1 וכך גם b, אבל a1 הוא כבר בעומק 2 ו b33 הוא בעומק 3. סך הכל אם נפעיל את הפונקציה על אוביקט הדוגמה נרצה לקבל:

{
    1: [ 'a', 'b' ],
    2: [ 'a1', 'a2', 'a3', 'a4', 'b1', 'b2', 'b3' ],
    3: ['b33', 'b44'],
}

פיתרונות אפשר לכתוב למגירה או לשתף פה בתגובות. תהנו ובהצלחה.

במפגש בין הפרויקט למשתמשים

09/11/2021

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

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

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

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

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

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

חידת ריאקט: פרידה מקומפוננטה

08/11/2021

נתון הקוד הבא שכולל שתי קומפוננטות:

import React from 'react';

function Yo() {
  React.useEffect(function() {
    alert('bye bye');
  }, []);

  return <p>Yo</p>;
}

export default function App() {
  function handleClick() {
  }

  return (
    <div className="App">
      <Yo />
      <button onClick={handleClick} >Say bye bye</button>
    </div>
  );
}

עדכנו את קוד הקומפוננטה App כך שלחיצה על הכפתור תגרום להצגת ה alert שמוגדר ב Yo.

אין צורך לשנות את הקוד של Yo ואין לבצע כל שינוי ויזואלי בממשק.

שיקולי תקציב

07/11/2021

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

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

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

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

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

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

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

חמש תוכניות coconut כדי להכיר שפה חדשה

06/11/2021

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

$ pip install coconut

ואחרי ההתקנה אפשר ליצור תוכניות קוקונאט בתוך קבצים עם סיומת coco או להפעיל את ה interpreter עם הפקודה coconut ולהריץ ביטויי קוקאנט. ויש גם סביבת הרצה נוחה בענן בקישור: https://cs121-team-panda.github.io/coconut-interpreter/.

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

המשך קריאה

איך זה נשבר

05/11/2021

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

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

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

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

שתי דוגמאות ל Vue Hooks כדי להבין איך זה עובד

04/11/2021

אחד הקונספטים שעבר כמעט בשלמותו מ React ל Vue היה ה Hooks, ובפרט הרעיון שאפשר לקחת לוגיקה שמשפיעה על State של קומפוננטה, להוציא החוצה את הלוגיקה ואת ה State שמחובר אליה לפונקציה חיצונית ואז להשתמש במנגנון מכל מיני קומפוננטות. בפוסט זה אני רוצה להראות שתי דוגמאות לכתיבת פונקציות חיצוניות כאלה ב Vue ודרכן את היכולות הריאקטיביות של הספריה. בדוגמה הראשונה נראה פונקציה שמחברת בין קומפוננטה לגודל החלון ובדוגמה השניה פונקציה ששומרת משתנה ב Local Storage כדי שהערך שלו תמיד ימשיך מאותה נקודה.

המשך קריאה

רעיונות שלא עזרו לי להצליח כפרילאנסר

03/11/2021

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

המשך קריאה