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

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

---

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

---

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

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

$(window).on("action:composer.posts.reply", function (event, data) {
  app.alertSuccess("hook 'action:composer.posts.reply' run."); //הודעה
  console.log(data); //כאן מדפיסים את המידע המפורט יותר שמתקבל מההוק, פירוט בהמשך.
});

ניתן כמובן להדפיס גם את התוכן של ה-event.
וכמובן שניתן גם לבצע פעולות שונות על סמך המידע שמתקבל מההוק;
לא לכל פעולה יש הוק נפרד.
לדוגמה עבור מערכת המוניטין, יש רק הוק אחד - action:post.toggleVote, שמתבצע בכל שינוי בלייקים - מתן/הסרת לייק או מתן/הסרת דיסלייק.
מה קורה אם רוצים לבצע פעולה מסוימת רק במקרה מסוים? כגון רק אם נתנו דיסלייק - להקפיץ הודעה "שימו לב, מתן דיסלייקים ללא הצדקה נוגד את חוקי הפורום ועלול להביא להרחקה"?
בשביל זה צריך לקבל את המידע מההוק, ולהכניס משפט תנאי שיבדוק מה התבצע בדיוק;
הנה דוגמה:

$(window).on("action:post.toggleVote", (ev, hookData) => {
  // כאן נכנס התנאי שבודקים
  if (hookData.delta === -1 && hookData.unvote === false) { //כפתור 1 = לייק, מצב חדש: כפתור פעיל
    alert("התווסף דיסלייק"); //הודעה מובנית של הדפדפן - אפשר כמובן להפעיל כל קוד/פונקציה שרוצים.
  }
});

הקוד הזה, לדוגמה, מקפיץ alert פשוט של הדפדפן, כאשר מתרחש אירוע של toggleVote, כאשר ערך ה"delta" - כלומר באיזה כפתור התבצע האירוע, הוא 1-, כלומר לחצן הדיסלייק, והמצב שאליו האירוע הביא את הכפתור, זה false, שזה אומר מצב פעיל. (ההיגיון אומר שזה אמור להיות להיפך, אבל ככה זה עובד...)
וכך ניתן לבודד בדיוק את האירוע שהתרחש באמצעות משפט תנאי פשוט:

hookData.delta === 1 && hookData.unvote === false //נתינת לייק
hookData.delta === 1 && hookData.unvote === true //הסרת לייק
hookData.delta === -1 && hookData.unvote === false //נתינת דיסלייק
hookData.delta === -1 && hookData.unvote === true //הסרת דיסלייק

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

---

בעז"ה בפוסט הבא:

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

@ארכיטקט אמר בחשיבת מפתחים לטווח רחוק..:

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

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

וכמו ש @יוסף-בן-שמעון אמר בחשיבת מפתחים לטווח רחוק..:

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

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

@מעלה-ומוריד אמר בהורדת אשכול שלם מפורום:

הוא בעצם נותן לגלול את העמודים הבאים בלי לעבור דף [גם בחיפוש גוגל ועוד].

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

@searchnicks https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl
הוא בעצם "גולל" את הדף ומצלם אותו
ואז יש לך אפשרות לשמור כתמונה או PDF

@אורי לענ"ד כדי להטמיע דבר כזה באתר שלך [או סתם לקבל את המידע] (ושיעבוד בנטפרי) תצטרך לפנות אליהם, שכן מבדיקה שעשיתי כעת - האתר ש @dovid הביא מקבל את הנתונים בתיווך של https://rss2json.com, ואם תנסה לעשות דרך שם כזה דבר (בנטפרי) - לא תצליח לקבל את הנתונים (אפילו ברגע שמשנים את הapi_key זה לא עובד בנטפרי), וככל הנראה צריך לשלוח להם לבדיקה את הנתיב של הפיד הספציפי שרוצים לקבל - כולל הapi_key שלך...

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

התוסף Tampermonkey
נותן אפשרויות של עריכת דפי אינטרנט

לייתר דיוק
נותן אפשרות להריץ סקריפטים

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

אבל צריך ידע ב-HTML
כדי לדעת איך לחלץ נכון את השורות הנכונות

יותר נכון JavaScript

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

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

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

אם אתה זקוק להדפסה מרובה של מאמרים באתר הזה

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

@אנא אמר במחיקת מילים בגוגל דרייב מסויים:

ולא שייך לעשות עם התוכנה של גוגל כי זה יגמור את כל הג'יגות במחשב

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

@שוהם307 אם מדובר באתר ספציפי תוכל להשתמש בתוסף הזה:
https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl
שמאפשר לשמור את הדף כ-pdf, וכיוון שזה עותק אופליין של הדף כפי שהוא מופיע בדפדפן כרגיל, לא אמורה להיות בעיה עם ההדפסה (בהנחה שבאמת זה בעיה באתר)

אני משתמש בתוכנת VSC בעיקר לקבצי js, אבל כל פעם מחדש זה מזהה את זה כ'Plain Text', ולכן המתקן תחביר לא עובד, ולא מציע לי השלמות, וכו'
ואני צריך כל פעם מחדש להחליף ידנית את השפה לjs (או לשמור את הקוד בקובץ, עם סיומת js)
האם יש אפשרות להגדיר שהברירת מחדל תהיה ג'אוהסקריפט, ורק אם ארצה משהו אחר - אשנה ידנית לשפה הרצויה?
תודה

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

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

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

@odeddvir גם חיבור קבצים על ידי הסקריפט הזה עלול להיות בעייתי בדברים שהזכרת?

@a0533057932 מה שמובא שם זה רק לכתובת ip, לא?
פותח האשכול צריך לכאורה (וגם אני...) ניתוב של כתובות url לחיבור שונה...

@yossiz אמר במדריך: שורת הפקודה - תגובות:

משתמשים ב-& כאשר רוצים שהפודה השניה תרוץ רק אם הראשונה הסתיימה בהצלחה.

כמדומני שכזה דבר זה && ולא &, לא?
אני רואה גם שכתבת את זה כאן...

@יוסף-בן-שמעון ניסיתי את שני השינויים שהבאת, שניהם יחד וכל אחד לחוד, ולא עבד.
המבנה של ההטמ"ל (שעליו בדקתי) הוא כזה:

  <figure class="content-media content-media--video" id="featured-media"></figure>
  <div class='embed-wrapper'><div class='embed-container'><iframe class="content-media__object" id="featured-video" src='
?enablejsapi=1&rel=0&showinfo=0&controls=0' frameborder='0'></iframe></div></div>
  </figure>

כפול 4 פעמים (אחד אחרי השני), ואז סתם כ-20 תגי ירידת שורה (<br />) וכמה אותיות, כדי שאוכל לגלול למטה.
(כמובן כל הנ"ל בצירוף הCSS שהובא במדריך)

הצלחתי לבצע את זה, אלא שזה עובד רק על הסרטון הראשון שבדף - כלומר שאם יש בדף 4 סרטונים אחד אחרי השני, רק בסרטון הראשון יהיה נגן צף, וב3 האחרים לא.
כנראה צריך לגרום למחזוריות של חלק מסוים בקוד (באמצעות טיימר זמן/בדיקת כמות האלמנטי iframe שבדף ואז לולאת for, וכדו'), אבל אני לא יודע איזה חלק...
זה הקוד JS:

jQuery(function ($) {
  var $window = $(window); // 1. Window Object.
  var $featuredMedia = $("#featured-media"); // 1. The Video Container.
  var $featuredVideo = $("#featured-video"); // 2. The Youtube Video.

  var player; // 3. Youtube player object.
  var top = $featuredMedia.offset().top; // 4. The video position from the top of the document;
  var offset = Math.floor(top + $featuredMedia.outerHeight() / 2); //5. offset.
  // API של יוטיוב
  window.onYouTubeIframeAPIReady = function () {
    player = new YT.Player("featured-video", {
      playerVars: {
        fs: 1,
        controls: 1,
      },
      events: {
        onStateChange: onPlayerStateChange,
      },
    });
  };
  // שינויים כאשר מצב הסרטון משתנה
  /**
   * Run when the Youtube video state (play, pause, etc.) is changed.
   *
   * @param {Object} event The Youtube Object Event.
   * @return {Void}
   */
  function onPlayerStateChange(event) {
    var isPlay = 1 === event.data;
    var isPause = 2 === event.data;
    var isEnd = 0 === event.data;

    if (isPlay) {
      $featuredVideo.removeClass("is-paused");
      $featuredVideo.toggleClass("is-playing");
    }

    if (isPause) {
      $featuredVideo.removeClass("is-playing");
      $featuredVideo.toggleClass("is-paused");
    }

    if (isEnd) {
      $featuredVideo.removeClass("is-playing", "is-paused");
    }
  }
  //  מה שגורם לסרטון לצוף
  $window
    .on("resize", function () {
      top = $featuredMedia.offset().top;
      offset = Math.floor(top + $featuredMedia.outerHeight() / 2);
    })

    .on("scroll", function () {
      $featuredVideo.toggleClass(
        "is-sticky",
        $window.scrollTop() > offset && $featuredVideo.hasClass("is-playing")
      );
    });
});

@יוסף-בן-שמעון מקווה שזה בסדר לתייג אותך...