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

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

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

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

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

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

שפות שהתעסקתי איתם:

• HTML
• CSS
• JavaScript

פריימוורקים ב front-end:

• React
• Vue.js

פלטפורמות back-end:

• Node.js
• express.js

מסדי נתונים:

• mongodb עם mongoose

המייל שלי: motioren3@gmail.com

@חוקר אני יכתוב את מה שאני הצלחתי להשיג בהבנתי הדלה בנושא הנ"ל של 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 בצירוף של המפתח הסודי (מה שכמובן לא ניתן להוציא מהפלט), ומכניס אותו לטוקן בתור השדה השלישי (מה שמכונה 'שדה החתימה').

@צדיק-תמים אתה מעביר ל setTimeout פונקציית IIFE שמריצה את עצמה אוטומטית. שים לב ש setTimeout צריך לקבל ארגומנט של מה שנקרא 'פונקציית קולבאק'. ואילו אתה מעביר לו כארגומנט את הערך undefined שחוזר מפונקציית ה IIFE שהעברת לו. תסתכל על זה כאילו כתבת ככה:

function openLink(link, target) {
  open(link, target);
}

setTimeout(
  openLink(`https://tchumim.com/topic/${topicID}`,"_self"),
  3000
);

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

function openLink(link, target) {
  return function () {
    window.open(link, target);
  } 
}

setTimeout(
  openLink(`https://tchumim.com/topic/${topicID}`,"_self"),
  3000
);

ראה עוד על IIFE בקישור

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

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

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

@www אמר בJWT:

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

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

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

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

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

תנסה להבין שניה את ההבדל בין שני ה setTimeoute הבאים:

function sayHello() {
  console.log('Hi!');
}

setTimeout(sayHello, 1000); // תקין
setTimeout(sayHello(), 100); // לא תקין

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

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

ממליץ לך לקרוא עוד לגבי המנגנון של callbacks ב JS כאן.

@חייםיודלביץ ייתכן שה-RFC Header הספציפי של Sender לא נשלח בכל הודעה. כלומר, בחלק מההודעות אתה כן תקבל את השם של השולח, אבל בהרבה הודעות לא תקבל כלום.

@OdedDvir אני יסביר לך איך הגעתי למסקנה הזאת. זה התחיל בכך שהסתקרנתי מהנושא של ה-RFC Headers שהזכרת פה, ומכיון שאף פעם לא שמעתי על המושג הזה החלטתי לבדוק במה מדובר .. המסקנה שלי הייתה שמדובר בתקן מסויים להודעות מייל, שמכיל בתוכו הגדרה של Headers ותוכן (בתקווה שלא מדובר במסקנה שגויה שלי).

לאחר מכן החלטתי להריץ ב-GS לולאה מקוננת על כל ההודעות במייל, ולקבל את ה-Header שהזכרת ('Sender'), ככה:

function logSenderHeader() {
  GmailApp.getInboxThreads().forEach(function (t) {
    t.getMessages().forEach(function (m) {
      Logger.log(m.getHeader('Sender'))
    })
  })
}

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

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

@ivrtikshoret אמר בהזרקת כפתור ב gmail:

אבל למה לא נכון לעבוד עם setTimeout ?

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

@מעלה-ומוריד בסוף מצאתי דרך.

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

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

מעודכן גם ל - Tampermonkey.

נראה לי יותר טוב:

// ==UserScript==
// @name         imagesCreator - for agora.co.il site
// @version      1.0
// @author       moti-oren
// @description  מוסיף תמונות למוצרים באתר אגורה
// @include      https://www.agora.co.il/*
// @noframes
// ==/UserScript==

const objectGroupList = document.querySelectorAll('.objectGroup');

for (let objectGroup of objectGroupList) {
    const a = objectGroup.querySelector('a');
    const href = a.href;
    const words = href.substring(30).slice(0, -6).split('/');

    showImage(words[0], words[1], objectGroup);
}

function showImage(a, b, o) {
    e = - 1 != location.pathname.toLowerCase().indexOf('togetcheck.asp'),
    d = document.getElementById('objectDetails' + b),
        f = '/cache/' + a + '/' + b + '_o.asp?toGet=1' + (e ? '&toGetCheck=1' : '');
    switch (location.pathname.toLowerCase()) {
        case '/togetexperimenti.asp':
            f += '&ex=ExperimentI';
            break;
        case '/togetexperimentii.asp':
            f += '&ex=ExperimentII'
    }
    fetch(f, {
        method: 'GET',
        headers: {
            'Content-Type': 'text/html; charset=UTF-8',
            'Content-Language': 'he'
        }
    }).then((res) => {
        return res.text();
    }).then((val) => {
        const strIndex = val.indexOf('<span class="thumbnail" style="background-image:url');
        const start = val.indexOf('http', strIndex);
        const last = val.indexOf(')', strIndex);
        const url = val.slice(start, last);
        const objectName = o.querySelector('.objectName');
        objectName.innerHTML += '<img src="' + url + '" width="30">';
    })
}

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

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

req.body

Contains key-value pairs of data submitted in the request body. By default, it is undefined, and is populated when you use body-parsing middleware such as express.json() or express.urlencoded().

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

app.use(express.json()); // מפרסר application/json
app.use(express.urlencoded()); // מפרסר application/x-www-form-urlencoded

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

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

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

const homePageButton = document.getElementById('home-page-button');
const aboutButton = document.getElementById('about-button');

homePageButton.addEventListener('click', createHomePageElements)
aboutButton.addEventListener('click', createAboutPageElements)

function createHomePageElements() {
  // הקוד שמוסיף את האלמנטים הנצרכים לדף הבית
}

function createAboutePageElements() {
   //הקוד שמוסיף את האלמנטים הנצרכים לדף האודות 
}

@שרה-רחל בעיקרון אם יש להם name משותף אז את יכולה להשתמש ב-getElementsByName כמו שאמרת, ולא תצטרכי קלאס.

שימי לב שב - querySelectorAll לא שמים סולמית #, כי אין אפשרות לאפיין באותו ID יותר מאלמנט אחד במסמך (וסולמית שמים רק במקרה של ID). אלא את הסלקטור המתאים שזה במקרה של קלאס, נקודה ושם הקלאס ככה: 'className.'

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

אגב, גם ב querySelectorAll אפשר לתפוס את האלמנטים באמצעות ה - name שלהם, בערך כך:

document.querySelectorAll('[name="nameOfElements"]')

כמו שכבר הזכרתי, המתודה הזאת מקבלת סלקטור של CSS. וזאת הדרך לתפוס אלמנטים ב CSS על ידי ה - name שלהם (מה שידוע לי זאת הדרך היחידה. אולי יש עוד? אני לא מכיר).
אבל לדעתי אם את תופסת את האלמנטים באמצעות ה-name שלהם, עדיף כבר להשתמש ב-getElementsByName, כי זה יותר קריא ונורמלי. פשוט לשים את ה-name כארגומנט וזהו, בלי להסתבך.

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

const objectGroupList = document.querySelectorAll('.objectGroup');

for (let objectGroup of objectGroupList) {
    const a = objectGroup.querySelector('a');
    const href = a.href;
    const words = href.substring(30).slice(0, -6).split('/');

    showImage(words[0], words[1], objectGroup);
}

function showImage(a, b, o) {
    f = 'https://cdn.agora.co.il/deals_images/' + a + '/' + b + '.jpg';

    const objectName = o.querySelector('.objectName');
    objectName.innerHTML += '<img src="' + f + '" width="30">';
}

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

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