הבלוג של ינון פרק

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

1. מדביקים קישור לשיר ביוטיוב.

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

3. דרך הממשק אפשר להקשיב לשיר בחלקים וכל פעם לתרגל חלק אחר.

אפשר לראות כאן דוגמה לשיר בערבית עם תרגום לאנגלית

https://langlets.app/courses/BsvhDWS5voU

ואחד בספרדית עם תרגום לאנגלית

https://langlets.app/courses/5R0TtX-gVHA

אם תרשמו לאתר תוכלו גם להדביק קישורים שלכם ולפעמים זה עובד.

אז React 19.2 הוסיפו אלמנט חדש שהרבה אנשים אוהבים בשם Activity. האם באמת צריך אותו? בואו נראה מה הוא עושה ואתן לכם להחליט עד סוף הפוסט.

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

הכח השני של Activity, והוא הדבר החדש שבגללו נכנסה קומפוננטה חדשה לריאקט הוא מחיקה של האפקטים והרצת פונקציות הניקוי של כל האפקטים וה Cleanup Refs. מצד אחד מנגנון זה עוזר אם יש לנו בתוך עץ הקומפוננטות של אחד הטאבים אפקטים שאין בהם צורך ביציאה מהטאב - לדוגמה אולי יש אלמנט שמשתמש במצלמה אז הגיוני לסגור את המצלמה כשעוברים טאב. בדוגמאות בתיעוד הם מדברים על נגן וידאו שכדאי לעצור לפני שיוצאים מהטאב. מצד שני אם האפקט שלכם מקשיב לאירועים מ Web Socket ומעדכן את ה UI אז כיבוי האפקט מפסיק את ההאזנה לאירועים וכך כשנחזור לטאב נצטרך לבצע עדכון יזום.

הנה דוגמה קטנה ל Activity בפעולה עם כמה הודעות debug כדי להבין איך זה עובד. אפשר להדביק אותה בכל יישום next 16:

'use client';

import { useState, useRef, useEffect, Activity } from "react";

function refChanged(el: any) {
  console.log(`set ref`);
  return () => {
    console.log(`unset ref`)
  }
}

function ActivityDemo() {
  useEffect(() => {
    console.log(`start effect`)
    return () => {
      console.log(`stop effect`)
    }
  }, [])

  return (
    <p ref={refChanged}>hello world</p>
  )
}

export default function Home() {
  const [visible, setVisible] = useState(true);

  return (
    <div>
      <input type="checkbox" checked={visible} onChange={() => setVisible(v => !v)} />
      <Activity mode={visible ? "visible" : "hidden"}>
        <ActivityDemo />
      </Activity>
    </div>
  );
}

הקומפוננטה ActivityDemo מציגה הודעה אחת כשנוצר האפקט והודעה נוספת כשה ref מתעדכן. כשמכבים את תיבת הבחירה הקומפוננטה הופכת בלתי נראית ואנחנו מקבלים את ההודעות unset ref ו stop effect כתוצאה מכיבוי האפקט וה Ref Cleanup Callback.

אז מה דעתכם? זו הקומפוננטה שהיתה חסרה לריאקט? אני חושב שלא. הסתרה של טאבים עשינו גם קודם עם הגדרת display: none ב CSS. מי שרצה לכבות אפקטים ספציפיים ביציאה מהטאב הגדיר את ה"נראות" בתור prop והשתמש בה במערך התלויות של האפקט. כיבוי כל האפקטים כברירת מחדל כנראה רק תבלבל.

למידע נוסף ועוד המון דוגמאות עם הקומפוננטה החדשה שווה להעיף מבט בדף התיעוד שלהם:

https://react.dev/reference/react/Activity

הי חברים,

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

אתם יכולים למצוא את הרשימה המלאה וגם קישור להצטרפות בחינם בדף מדברים AI בקישור הזה:

https://www.tocode.co.il/talking_ai

המפגש הראשון יהיה על פיתוח אפליקציות ל Chat GPT ומיועד לחברים היותר טכניים בקבוצה. בגדול אפליקציה ל ChatGPT זה בסך הכל שרת MCP עם כמה תוספות ואנחנו נראה איך לבנות כזאת ואיך זה מתחבר לחלון הצ'ט. אחרי זה יהיה מפגש פחות טכני על כלי AI לפיתוח מערכות בלי קידוד או עם מעט מאוד קידוד. עשינו אחד כזה בסבב הקודם אבל הכלים השתנו ואנחנו השתנינו ויהיה מעניין לראות מה קורה היום. כלי AI לפיתוח מערכות זה מסוג הדברים שמתכנתים הכי אוהבים לבנות לכן יש המון מהם וזה תחום שזז מאוד מהר.

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

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

בשלושת הוובינרים הבאים בסדרה נדבר על חיבור סוכן הקידוד לדפדפן עם MCP כדי לכתוב בדיקות, נלמד איך לפתח Claude Skills ונדבר על הטרנד של Spec Driven Development.

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

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

https://tocode.ravpage.co.il/tocodeai

נתראה בוובינרים, מתחילים ב 6.11.

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

1. שקיפות - כולם רואים את הענפים והעבודה של כולם.

2. גיבוי - אפשר לעשות push אחרי כל קומיט וכך הנתונים מגובים לשרת.

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

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

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

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

fatal: The current branch test has no upstream branch.
To push the current branch and set the remote as upstream, use

    git push --set-upstream origin test

To have this happen automatically for branches without a tracking
upstream, see 'push.autoSetupRemote' in 'git help config'.

אפשר להמשיך לעבוד על ענף מקומי בלי להגדיר את ה upstream ובלי לעשות push ולהיעזר בהודעה הזאת כדי לא לעשות push בטעות. מתי כן לדחוף? אחרי ה rebase כשכל הקומיטים עודכנו עם ההודעות הנכונות.

שלוש רמות של לימוד מחומר כתוב או AI:

1. השלמה אוטומטית - זה כשאני מבקש מה AI לכתוב את הקוד בשבילי ישר בתוך ה IDE ולהסביר מה הוא כתב, או כשאני מתחיל לכתוב ומשתמש בטאב כדי להשלים את המימושים.

2. העתקה - זה כשאני מבקש מה AI לכתוב את הקוד בתוך מסך הצ'ט או כשאני קורא מדריך כתוב בחלון אחד וכותב את אותו הקוד לבד מאפס בחלון ה IDE שלי (לא העתק-הדבק, ממש מקליד). פה כבר לקחתי צעד משמעותי קדימה מבחינת רמת הלימוד. אני לא בטוח למה אבל ההקלדה עצמה דורשת רמת הבנה יותר מעמיקה מ Copy/Paste.

3. שינויים קטנים - מדרגה שלישית זה כשאני משנה דברים קטנים בקוד או בהנחות היסוד שלו. לדוגמה אני מבקש מ AI לכתוב דוגמה לקומפוננטה בריאקט ואז הולך ל IDE ובונה את הקומפוננטה ב next.js או מחליף שפת תכנות וכותב את הקומפוננטה לבד ב Reagent שזה הריאקט ל ClojureScript. או אם אני לומד Machine Learning אני יכול לקרוא מדריך ב pytorch ולכתוב את דוגמת הקוד בעצמי ב C++ ב libtorch או ב torch-rb ברובי. כתיבת הקוד מחדש בסביבה קצת שונה דורשת רמה יותר גבוהה של הבנה ומכריחה אותנו לחזור ל AI ולשאול שאלות הבהרה על חלקים בטקסט, מה שעוד ממשיך ומחזק את ההבנה.

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

יש מפתחי ריילס שממש לא אוהבים FrontEnd ויעשו הכל כדי לוותר על כתיבת JavaScript, ויש אחרים שהסיבה שלהם לקום בבוקר היא הפרונט אנד ו Rails אצלם נבחר פשוט כי הוא נותן פיתרון נוח לצד השרת. אם אתם שייכים למחנה השני סיכוי טוב שמאוד תאהבו את ספריית inertia. זו ספריה שמחברת בצורה טובה את קוד הפרונט אנד לאפליקציית Rails. אינרציה היא מתחרה של React On Rails ומתמקדת בניווט בתוך היישום ובהעברת מידע מצד השרת לצד הלקוח. בפוסט זה נראה את עקרונות העבודה המרכזיים של אינרציה.

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

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

ממה כן כדאי לחשוש? זאת הרשימה שלי:

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

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

3. מוטיבציה הולכת להיות אתגר עצום. כש AI יכול לפתור בשבילך את שיעורי הבית אתה מפתח הרגלי עבודה גרועים וזה משהו שקשה להתגבר עליו.

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

מה מפחיד אתכם בעידן ה AI? ואיך אתם חושבים נצליח להתמודד עם האתגרים? אשמח לשמוע בתגובות פה או בטלגרם.

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

אני רוצה לסיים את סדרת 21 ימים עם OpenAI Agents עם דוגמה לפיתוח סוכן קולי. הספריה OpenAI Agents תומכת בשני סוגים של סוכנים קוליים.

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

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

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

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

https://github.com/ynonp/tictactoe-with-ai

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