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

אתר עם רשימה נרחבת של פונטים לעורכי קוד
https://devfonts.gafi.dev/

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

קטנות וקצרות שנובעות בד"כ מחוסר הנסיון שלי

שאלות יהיו כל הזמן גם אחרי 10 שנות ניסיון...

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

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

@davidnead, אני מרגיש שיש פה בלבול ומרמור מיותר...

Vue 3 אינה מסלקת את ה-API הישן ("Options API"), אלא רק מוסיפה עוד API חדש בשם "Composition API".

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

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

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

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

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

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

@חוקר אמר בהתקנה ושימוש עם bootstrap-vue:

עם התחביר template וסקריפט export default
איפה אוכל למצוא מידע מדוייק לחלק הזה?

הם 2 דרכים שונים לכתיבת קומפוננטס (רכיבים) ב-Vue.

חלק חשוב שפריימוורק כמו Vue וכדו' נותן הוא היכולת לחלק את הקוד לקומפוננטס, כאמור ל-Vue יש באופן כללי 2 דרכים לכתוב קומפוננטס:

1. אפשר להמשיך בסגנון הנ"ל ולהצהיר על קומפוננט בצורה הזאת:

Vue.component('my-btn', {
  template: `
    <button class="btn-primary" @click.prevent="handleClick">
      <slot></slot>(clicked - {{count}})
    </button>
  `,
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleClick() {
      this.count++;
      console.log('clicked', this.count);
    },
  },
});

וב-HTML קוריאים לקומפוננט:

<my-button></my-button>

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

2. אבל Vue גם מציע יותר מזה: Single File Components (SFC), שנכתבת בצורה שונה קצת:

<template>
  <p class="demo">
    <button class="btn-primary" @click.prevent="handleClick">
      <slot></slot>(clicked - {{count}})
    </button>
  </p>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleClick() {
      this.count++;
      console.log('clicked', this.count);
    },
  },
};
</script>

<style scoped>
.btn-primary {
  display: inline-block;
  font-size: 1.2rem;
  color: #fff;
  background-color: #3eaf7c;
  padding: 0.8rem 1.6rem;
  border-radius: 4px;
  transition: background-color 0.1s ease;
  box-sizing: border-box;
  border-bottom: 1px solid #389d70;
}
</style>

כפי שאפשר להבין מהשם "single file componets", בגישה הזאת כותבים את כל רכיבי הקומפוננט (HTML, CSS, Javascript) בקובץ אחד.
יש בזה הרבה יתרונות:

• כל קומפוננט חי ב-scope נפרד
• אפשר להשתמש עם מודולים
• הדגשת תחביר
• אפשרות ל-Scoped CSS
  ועוד

בגישה הזאת צריכים כמובן build step, אבל אין צורך להיבהל
Vue CLI הופך את כל התהליך לפשוט ביותר.

על SFC ראה יותר בתיעוד.
דוגמאות הקוד הנ"ל לקחתי מכאן.

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

בהצלחה!!

@מוטי-מן הנה קטע קוד שיעשה את מה שאתה רוצה (אם הבנתי נכון), ואידך זיל גמור:

let INDEX = 0;

setInterval(() => {
  if (INDEX === images.length - 1) {
    INDEX = 0;
  }

  document.getElementById('img_rnd').src = images[INDEX];

  INDEX++;
}, 5000);

דוגמה

@yossiz אמר בnetlify.com מה זה?:

@chagold ממה שאני מבין, זה במה לאתרי serverless. שזה אומר: איחסון, CI/CD, אפשרות להרצת פונקציות בענן שלהם, API-ים שימושיים ועוד.

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

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

השירות החינמי שלהם כולל אחסון של עד 100GB אחסון ו-300 דקות CI CD. הם מציעים עוד הרבה שירותים בתשלום (כמו שירות analytics מבוסס CDN ב-10$ /חודש, ועוד)
יש להם כמה מתחרים שמציעים פחות יותר אותו שירות, הידוע שביניהם: Vercel.

@מעלה-ומוריד, וואו, איזה טקסט יפה... מעניין אותי מאוד מה המקור? (זה נשמע יידיש קצת עתיקה וגם עסיסית...)

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

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

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

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

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

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

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

כל אחד יכול
רואים את הקולות
יהודים כמה טוב זה
עם משה רבינו
הכנה ישרה
עם כוונה גבוהה
התורה עם המתנה
ע"י משה רבינו
-ויאמינו בה' ובמשה עבדו

הרי אנחנו מחכים תמיד
אלף(/פי) שנים לדאבוננו
איפה החדר ("חיידער")
של משה רבינו
כבר אין מועקות
הכל לקחו
משה עבד נאמן
איפה משה רבינו
-ויאמינו בה’ ובמשה עבדו

בקרוב כבר נחיה (כמו "נחיה ונראה")
אורה, תורה כבר לא מורא
מעול הגלות
ומשה ייתן לנו שיעור
תורה סחורה גם הבורא
גם לומד את השיעור שעה אחרי שעה
אף אחד לא מגושם
פירושים מאירים
חידושים מרוממים
אומר משה רבינו
וכל מי שטרח
גמרא שולחן ערוך
יבוא ויתברך
מברך משה רבינו
-ויאמינו בה' ובמשה עבדו

כמה יפה זה
העתידות שלנו
הכל חסידות אחת
רבי אחד - רבינו
מנהיג "טיש" ברינה
ב"מזרח" השכינה
כל אחד עם אמונה
מאמין במשה רבינו
-ויאמינו בה' ובמשה עבדו

@צדיק-תמים התקשיתי להבין את הקוד שלך ומשום מה התחשק לי לארגן את זה מחדש (refactoring בלע"ז). זה מה שיצא לי (מקוה שיהיה לתועלת...):

const API_TOKEN = 'AIzaSyBUtCAp82VCsH5z3XmTMy1KMnLQ1g3Cqm0';
const YOUTUBE_SEARCH_ENDPOINT = 'https://www.googleapis.com/youtube/v3/search';

async function fetchVideoIds (channelId, pageToken = null) {
  const endPoint = getYouTubeEndpoint(channelId, pageToken);
  const response = await fetch(endPoint).then((res) => res.json());
  const videoList = response.items.filter((item) => item.id.kind === 'youtube#video');
  const videoIdList = videoList.map((item) => item.id.videoId);
  const nextPageToken = response.nextPageToken;
  return { videoIdList, nextPageToken };
}

function loop () {
  const list = [];
  // recursive function
  async function getVideoIdList (pageToken) {
    const CHANNEL_ID = 'UCzlw5vTVVMPwBKElMt3gYQw';
    console.log('Fetching...');
    const { videoIdList, nextPageToken } = await fetchVideoIds(CHANNEL_ID, pageToken);
    list.push(...videoIdList);

    if (!nextPageToken) {
      return list;
    }

    return getVideoIdList(nextPageToken);
  }
  return getVideoIdList();
}

// trigger the function
loop().then((result) => console.log(result));

// helper function
function getYouTubeEndpoint (channelId, nextPageToken) {
  const endPoint = `${YOUTUBE_SEARCH_ENDPOINT}?key=${API_TOKEN}&channelId=${channelId}&part=id&order=date&maxResults=50`;
  if (nextPageToken) {
    return `${endPoint}&pageToken=${nextPageToken}`;
  }
  return endPoint;
}

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

---

מראה מקומות:

• Destructuring assignment
• Array.filter
• Array.map
• רקורסיה
• Functional programming

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

@חוקר

1. יש לעשות initialize ל-Vue.
2. יש להעביר מצביע לאלמנט ב-dom ל-property בשם el, (צריך להגיד ל-Vue איפה ב-dom להתקין את האפליקציה, מקובל להשתמש עם app#), ראה כאן.

<script>
	const app = new Vue ({
	  el: '#app',
	    data() {
	      return {
	        items: [  ...  ]
            },
	  })
</script>

הנה דוגמא שעובד.

@חוקר אני יכול להמליץ על עצמי?

אתה מוזמן ליצור איתי קשר: shaya.netfree@gmail.com

@dovid אמר בGithub Copilto:

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

זה מה שהם כותבים כאן בין השאר:

Code Snippets Data
Depending on your preferred telemetry settings, GitHub Copilot may also collect and retain the following, collectively referred to as “code snippets”: source code that you are editing, related files and other files open in the same IDE or editor, URLs of repositories and files paths.

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

---

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

@yossiz אמר בGithub Copilto:

לדעתי זה יותר משעשע מעוזר, אבל מחכים לשמוע דעתך

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

יש לי כמה תוספים מוצלחים להוסיף לכל הנ"ל:

• Color Highlight - צובע ערכים של צבעים (כמו #efefef וכו') עם הצבע המתאים בתוך העורך קוד.

• Material Icon Theme - נותן את האייקון המתאים לכל קובץ לפי הסיומת.

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

---

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

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

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

@chagold אמר בניקוי אובייקט js:

בשביל ההפניה המעגלית, צריך בפוקנציה שבקומפוננט שקורא (למוטציה), לשכפל את האובייקט

                                                                                                                            selectaccount:function (payload) {                                                                                                                                                                            	const { account } = payload;                                                                                                                                                                            	this.$store.commit("selectaccount",account);                                                                                                                                                                            }

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

selectaccount:function ({ account }) {
  this.$store.commit("selectaccount",account);
}

יש להם גם גירסה יותר חדשנית מבוסס מודולים (ES6):
https://github.com/hebcal/hebcal-es6

מה דעתכם על זה?

.page-topic-category-תכנות-אקסקלוסיבי .navbar::before {
  background: #d97b29;
}

.page-topic-category-תכנות-אקסקלוסיבי .container a {
  background: #d9aa5d;
}

@liy770
בתוך main.js:

Vue.prototype.$value = value;

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

@yossiz אמר בלהפחית מס' שלא ידוע סוגו - js:

                                                                                                                            function subTyped (number, toSub) {                                                                                                                                                                                return number - (toSub * (number / Math.abs(number)));                                                                                                                                                                            }

שים לב שתקבל NaN כשהערך של number הוא 0.

isNaN(0/0) // true

@nigun
Serverless נותן את האפשרות למפתח להשתמש עם שרת בלי שיהיה לו לדאוג לכל התשתיות. זה יכול להיות להרבה דברים שונים.

באתר הזה למשל אני משתמש עם serverless לשלושה דברים:

1. שרת סטטי ששולח את הדפים למשתמשים.
2. שירות CI CD (שכולל את כל ה-build step שבין השאר מריץ את ה-SSG, במקרה הזה).
3. שירות המאפשר לי לקבל טפסים ממשתמשים ישירות למייל.

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

1. לא כל כך נוח להוסיף חומר למאגר (כי האתר אינו מחובר ל-DB כלשהו שאפשר לעדכן באופן תכנותי).
2. אי אפשר לבנות מערכת חיפוש וסינון.

יש לי כמה רעיונות איך לפתור אותם (ולו בצורה חלקית) עם שירותי serverless, אבל אולי זה כבר נושא לאשכול אחר...