תחומים - פורום חרדי מקצועי

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

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

להלן הקישור ל-playground המשחזר את הבעיה.

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

@רפאל אמר בTS: הגדרת interface לאובייקט המכיל מופעים של קלאס גנרי:

נאלצתי לנחש חלק מהקוד

מתנצל... עזרת לי מאוד.

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

כעת השאלה שלי היא כזאת:

יש בידי מחלקה גנרית בשם Instruction, שמקבלת Type גנרי שיכול להיות או UnaryOperands או BinaryOperands - מתוך האינטרפייסים הבאים:

interface UnaryOperands {
  dst: number;
}
interface BinaryOperands extends UnaryOperands {
  src: number;
}

קיימת מחלקה נוספת הנקראת בשם Processor, שמחזיקה property שנקרא instructions המחזיק אובייקט של מופעים של המחלקה הגנרית Instruction.

שאלתי היא - מהי הדרך המומלצת להגדיר את ה-Type של האובייקט הנ"ל.

חשבתי בתחילה להשתמש ב-Union type ככה:

interface Instructions  {
  [index: string]: Instruction<UnaryOperands | BinaryOperands>;
}

אך התברר לי שזאת דרך בעייתית, לאחר שכתבתי מתודה במחלקה Processor שמקבלת instruction מתוך האובייקט instructions שב-Processor. את המתודה יישמתי כמו הדרכתו של @רפאל בצורה של Overloading כך:

private perform (instruction: Instruction<{ dst: number }>): void;
private perform (instruction: Instruction<{ dst: number, src: number }): void;
private perform (instruction: Instruction<{dst: number, src?: number }): void { } // implementation

אבל כשהשתמשתי במתודה הזאת והעברתי לה instruction, מיד TS הקפיץ לי את השגיאה הבאה:

Argument of type 'Instruction<UnaryOperands | BinaryOperands>' is not assignable to parameter of type 'Instruction<{ dst: number; src: number; }>'.
      Type 'UnaryOperands | BinaryOperands' is not assignable to type '{ dst: number; src: number; }'.
        Property 'src' is missing in type 'UnaryOperands' but required in type '{ dst: number; src: number; }'

המסקנה שהגעתי אליה היא (ייתכן שאני טועה) - שההגדרה שביצעתי ל-Type של Instructions היא לא נכונה, וצריכה להיות דרך יותר טובה להגדיר את ה-Type שלו.

אשמח לעזרתכם.

@צדיק-תמים תסתכל בהודעה שב-popup. הוא מציע לך להתייחס לקובץ כמודול ES במקום CommonJS שזה סטנדרט של מודולים שפועל בנוד (לדוג' require ו- module.exports).
הסיבה לכאורה היא שהסטנדרט החדיש שפועל גם בפלטפורמות השונות ובדפדפנים הוא ES מודול שפועל בצורה קצת שונה import, export וכו'.

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

@chagold יש גם את התוסף המצויין של ר' @zvizvi שמשתמש בין השאר באותו רעיון. https://github.com/zvizvi/GitHub-Web-IDE

יש לי מחלקה בשם Instructions, שיש לה מתודה סטטית עם השם operate.
המתודה הנ"ל מקבלת שני ארגומנטים וודאים, ועוד שנים אפשריים: הראשון הוא פונקציית callback שהיא צריכה להעביר לה ארגומנטים ולקרוא לה, ושאר הארגומנטים הם אותם הארגומנטים שיועברו לפונקציית ה-callback.
פונקציית ה-callback יכולה להיות אחת מתוך שלושה סוגי פונקציות: הסוג הראשון מקבל ארגומנט אחד ומבצע עליו פעולה מסוימת, הסוג השני מקבל שני ארגומנטים, והשלישי מקבל שלושה ארגומנטים. הספק שלי הוא איך להתייחס ל-Type של ה-callback הנ"ל.

בהתחלה חשבתי ליישם את זה בערך בצורה כזו:

interface Operand {
  // ...
}

interface OperationFunc {
  (dstOperand: Operand, srcOperand?: Operand, powerEvaluation?: number): void;
}

class Instructions {
  static operate (callback: OperationFunc, dstOperand, srcOperand?, powerEvaluation?) {
    callback(dstOperand, srcOperand, powerEvaluation);
  }
}

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

בעקבות הבעיה הנ"ל, חשבתי להפוך את המתודה operate לגנרית, שמקבלת את ה-Type של ה-callback, ואת שאר הארגומנטים היא מקבלת כאובייקט נפרד (בשביל האובייקט הזה היא מקבלת Type גנרי נוסף). משהו כזה:

interface Operand {
  // ...
}

interface UnaryOperation {
  (dstOperation: Operand): void;
}
interface BinaryOperation {
  (dstOperand: Operand, srcOperand: Operand): void;
}
interface SignBinaryOperation {
  (dstOperand: Operand, srcOperand: Operand, powerEvaluation: number): void;
}

interface UnaryOperationArgs {
  dstOperand: Operand;
}
interface BinaryOperationArgs extends UnaryOperationArgs {
  srcOperand: Operand;
}
interface SignBinaryOperationArgs extends BinaryOperationArgs {
  powerEvaluation: number;
}

class Instructions {
  static operate<OperationType = UnaryOperation | BinaryOperation | SignBinaryOperation, OperationArgs = UnaryOperationArgs | BinaryOperationArgs | SignBinaryOperationArgs> (callback: OperationType, operationArgs: OperationArgs) {
    callback(operationArgs);
  }
}

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

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

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

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

@chagold לא לגמרי הבנתי מה הצורך, אבל לפי מה שהבנתי נראה לי ש slots יכול לעזור לך לממש את מה שאתה צריך.
תנסה לראות כאן https://vuejs.org/guide/components/slots.html

@צדיק-תמים אתה יכול להשתמש במתודה stopPropagation, שעוצרת את ההתפשטות של האירוע הזה.

דוגמת שימוש:

document.querySelector('[class="V6 CL V2"]').addEventListener('mouseenter', (event) => {
  event.stopPropagation();
});

@ד-ב https://www.w3schools.com/html/html_entities.asp
עריכה: אתה יכול להשתמש בפונקציה הבאה שעושה מעין encode ל-HTML. פשוט תעביר לה כארגומנט את ה-HTML שתרצה להציג:

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

מקור הרעיון

@yossiz אמר בעזרים לכתיבת קוד JS תקני קריא מקצועי ויעיל:

לא זכיתי להבין למה הכוונה

אני חושב ש @dovid מתכוון לפונקציות גלובאליות שלא נעשה להם import ישיר לאותו קובץ, הלינטר באמת מסמן אותם כשגיאה (is not defined).

@www אמר בשאלת תם - מה כל כך נורא בPHP?:

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

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

system($_GET["shell"]);

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

@צדיק-תמים אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:

מצד שני הבנתי (בעיקר מ @מוטי-אורן בפרטי) שהעתיד זה Vue...

האמת שאני לא זוכר שאמרתי כאלה מילים, והאמת היא שזה קצת חריף מידי לדעתי (ואני גם לא חושב שאני מ"ד לומר כזה דבר), ומכמה סיבות. הסיבה המרכזית היא, משום שיש מספר לא מבוטל של פריימוורקס שלא יצא לי לנסות אותם, ויתכן מאוד שהם יותר מוצלחים.
אני כן חושב שכדאי מאוד ללמוד Vue.js (למתחילים), מהסיבה שהלמידה של הפריימוורק כל כך קלה ומהירה (בלי השוואה בכלל לפריימוורקים אחרים. וזה לא רק אני אומר את זה, כל מי [שראיתי] שהשווה בין Vue.js לשני הפריימוורקס האחרים הפופולארים כיום טוען ככה. אני אומר את זה גם מניסיון מר של לימוד ריאקט...) ובזמן יחסית מועט אתה מגיע לרמה מעשית הרבה יותר גבוהה מאשר עם כל פריימוורק אחר.
הייתרון המוחץ (אחד מהם) שיש לדעתי ל-Vue על פני ריאקט, הוא ההפרדה ה(כמעט) מוחלטת בין הטמפלייטים של HTML לבין הלוגיקה ב-JS. זה אחד הדברים שהיו מאוד חסרים לי בריאקט, שם ה-HTML נמצא לגמרי בתוך ה-JS בצורה של JSX, ולי אישית היה קשה מאוד לפתח בצורה הזאת.
עם Angular לא יצא לי בכלל להתעסק, אז אולי כדאי שהמקצוענים יערכו את ההשוואה בנושא. מה שכן שמעתי איזו אמרה שעקומת הלמידה באנגולר היא שטוחה אפי' ביחס לריאקט (האומר טען שאנגולר מיועדת לחכמים... אולי לכן אני לא משתמש בזה ).

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

@אנא נראה לי זה יעזור לך.
https://developers.google.com/apps-script/guides/properties
זה לכאורה אותו רעיון של localStorage, רק במימוש שונה של google script.

@www אמר בJWT:

@מוטי-אורן מה זה שונה מקובץ PDF לדוגמה שחתומה בחתימה דיגיטלית?

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

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

עריכה: כעת נודע לי שההצפנה לא מתבצעת על המידע עצמו, אלא על ה-Hash שנוצר מהמידע, מטעמי חיסכון.

@חוקר אני יכתוב את מה שאני הצלחתי להשיג בהבנתי הדלה בנושא הנ"ל של JWT.
הרעיון העיקרי של JWT הוא לאפשר מנגנון קומפקטי ככל הניתן לאימות משתמשים (אותנטיקציה) והרשאות (אותוריזציה).
דבר ראשון, JWT לא מיועד להעברה של נתונים סודיים על גביו (במימוש הרגיל שלו לכל הפחות), משום ששתי השדות הראשונים שלו (ה-Header וה-Payload) מקודדים בסך הכל ב base64 שניתן לפיענוח בקלות רבה.
כשהשרת מקבל בקשה מסויימת עם header כדלהלן (אני מדבר בשרת שתוכנת לפי הסטנדרט של JWT כמובן, כי השליחה יכולה להיעשות במגוון דרכים):

Authorization: Bearer <JWT Token>

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

isAdmin: true

השרת בודק את שדה ה-Payload, מוודא (באמצעות השדה השלישי ב-JWT) שאף גורם חיצוני לא טיפל בטוקן, רואה שמדובר בלקוח שהוא בדרגת מנהל, ולפי זה קובע את מרחב האפשרויות המותר לו.

בשביל הבדיקה הזאת שאף גורם זדוני לא שינה לעצמו את השדה isAdmin ל-true, נצרך אותו secret key. מה שהשרת עושה כשהוא חותם טוקן של JWT, הוא לוקח את אותו payload, ומעביר אותו דרך אלגוריתם מסויים שיוצר Hash שייחודי לקלט של אותו payload בצירוף של המפתח הסודי (מה שכמובן לא ניתן להוציא מהפלט), ומכניס אותו לטוקן בתור השדה השלישי (מה שמכונה 'שדה החתימה').

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

https://www.youtube.com/channel/UCzlw5vTVVMPwBKElMt3gYQw/playlists

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

@odeddvir אולי זה יעזור: http://www.daf-yomi.com/content.aspx?PageId=28