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

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

ראה את הפוסט הזה.

[לכן כנראה לעולם לא מומלץ להשתמש עם זה כי לך תדע איך ייראה האובייקט בעתיד].

לא להאמין אבל עושים את זה...

אולי לזה התכוונת?

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

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

נראה לי שבמקרים כאלה (שהדף מרונדר בצד שרת ויש רק צורך לזרוק קצת פונקציונליות ואינטראקטיביות בצד לקוח) יש פתרונות יותר אופטימליים, ראה למשל את Alpine.js, או Stimulus (האחרון הוא מהחבר'ה של Rails, אבל מלמעלה זה נראה יותר מסובך).

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

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

@חוקר אמר בהתקנה ושימוש עם 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 הוא מאוד מצוין נראה לי שזה המקום הכי טוב להתחיל.

בהצלחה!!

@חוקר

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

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

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

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

let INDEX = 0;

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

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

  INDEX++;
}, 5000);

דוגמה

@chv אמר בהיתכן שאין מחשב טוב בכל העולם?:

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

ממה שאפשר להתרשם בתקופה האחרונה (בכל רחבי הרשת) נראה שדווקא המחשב הזה הוא התמורה הכי טובה שאפשר לקבל לכסף.
אבל מכיוון שזה במילא לא רלוונטי ל@ chocolate כי הוא "אינו סובל מאק" בא לא נסטה את נושא האשכול...

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

@nigun ראה זה וזה.

@nigun אמר בהקמת בלוג שיתופי:

אני רוצה שזה יהיה מבוסס git

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

זה אומר (כמעט) אפס זמן, אפס כסף.

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

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

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

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

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

isNaN(0/0) // true

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

if(number < 0)

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

ראה כאן.

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

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

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

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

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

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

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

@shaya איפה הDB נמצא?

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

זה במה לאתרי serverless.

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

ראה את הפוסט הזה.

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

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

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

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

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

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

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

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