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

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

1. אני משתמש בדרך כלל ב chat GPT במודל 4o של openAI, וכשנגמר לי הטוקנים אני עובר ל claude 3.7 sonnet, אלו המודלים החינמיים שיש לי ניסיון חיובי איתם, הם בדרך כלל עונים לענין.
   אם יש מודלים אחרים טובים אשמח לשמוע.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בברכה מרובה
ידידכם הדוש"ט

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

להבנתי הקלושה, להערות יש 2 מטרות:

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

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

// calculate distance
// a = begin
// b = end
function dis(a, b){
    return b - a
}

היא עבירה, וההערה שמסבירה מה היא אמורה לעשות לא מתקנת אותה

פונקציה תקינה אמורה להראות כך:

function calculateDistance(begin, end){
    return end - begin
}

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

/**
 * 
 * @param begin {number}
 * @param end {number}
 * @returns {number}
 */
function calculateDistance(begin, end){
    return end - begin
}

---

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

המשך אולי יבוא. כל המוסיף מוסיפים לו.
הערות יתקבלו בברכה, כולל כל סוגי ההערות

ולקינוח
https://stackoverflow.com/questions/184618/what-is-the-best-comment-in-source-code-you-have-ever-encountered

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

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

לדוגמא, עבור שאלה בנוד, צריך להקדים לפני השאילתה nodejs create some action ולכאורה זה עדיף מאשר create some action in nodejs
אם זו פלטפורמה שמתארחת בפלטפורמה ראשית, לדוגמא שאלה ב request בנוד, אכתוב nodejs request ... ולא אסתפק ב request כי זה עלול להביא תוצאות מrequest אחר
אבל אם זה שם שבא לידי שימוש רק תחת הפלטפורמה הראשית, לדוגמא express.js אז זה מיותר להקדים nodejs ויתכן שאפילו גורע, כי גוגל עלול להביא תוצאות ששייכות רק לנוד ולא לאקספרס.

בכל שאלה צריך להבחין האם זו שאלה של תחביר שפה, או שאלה ספציפית לטכנולוגיה, לדוגמא שאלה כמו nodejs create random string אמורה להיות פחות יעילה מאשר JS create random string

בחיפוש עבור שפה GO, המילה GO בעייתית ולא תמיד תהיה ממוקדת כי זו מילה רחבה ששייכת להמון מקומות חוץ מהשפה, צריך לחפש golang כדי למקד את החיפוש.

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

מה הכוונה "חלק של אתר"?
אם זה מתממשק לאתר שלו, אני חושב שזה ברור שהוא אמור לקבל את זה, לא יתכן שאתה תבנה עבורו רכיבים מסויימים וזה יאלץ אותו להיות כבול אליך כל החיים.

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

@yits אמר במי עוד משתגע מהתנהגות כרום לגבי טקסט bidi?:

@dovid אמר במי עוד משתגע מהתנהגות כרום לגבי טקסט bidi?:

@yossiz העלית קובץ HTML והוא נפתח בדפדפן, זה חור אבטחה של ממש!
אני רץ לטפל בזה.

ואגב מה החור אבטחה בזה?

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

נהוג להוציא עלוני סיכומה של שנה, אז חשבתי לכתוב איזו ברכה מליצית ל @yossiz על העובדה שהוא אף פעם לא מרפה, וגם אחרי שהוא עונה בפורום הוא ממשיך להיות זמין בפרטי ולהמשיך את שרשרת התקלות עד לסיום המוצלח
אבל מעיינות המליצות יבשו כנחל אכזב וכנהר אשר יכזבו מימיו
פניתי למכונה האדישה, וגם היא איכזבה כמובן...
https://chatgpt.com/share/66f9af49-a850-800d-a6ce-e74f6f607a79

אמרתי אין הדבר תלוי אלא בי, הנחתי ראשי בין ברכי ובירכתי את @yossiz בברכת הדיוט שיזכה לשנה טובה ומבורכת, שיתמלאו כל משאלות ליבו לטובה וימשיך להועיל לקהילה מהידע העצום שלו והלב הענק שלו!

@katz
לא חייבים nginx אם יש לך רק אפליקציה אחת על השרת שמאזינה לפורט 80, רק אם אתה רוצה לנהל כמה אפליקציות במקביל על אותה מכונה, צריך שרת קדמי שיקבל את כל הבקשות ויפנה אותם למקום הנכון.
ואם כבר שרת קדמי, לך על CADDY, די פשוט להגדרה, וזה דואג לך בברירת מחדל לתעודת אבטחה לכל דומיין שתרצה בלי שתצטרך לנקוף אצבע

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

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

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

מהי אם כן הדרך הנכונה להיעזר?

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

אקווה שעזרתי בהצלחה

@yossiz אמר באפשר לעשות קישור למלל מסויים בדף, הידעתם?:

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

javascript:(function () {
    let text = getSelection().toString().trim();
    let url = window.location.href.replace(/#[^#]+/, '') + `#:~:text=${encodeURIComponent(text)}`;
    let input = document.createElement('input');
    input.value = url;
    document.body.appendChild(input);
    input.select();
    document.execCommand("copy");
    input.remove();
})()

א.
קומפוננטה = רכיב. קבוצת קוד HTML שמקושרת לקוד JS ששולט עליה.
אפשר לעשות בקומפוננטה שימוש חוזר, כמו שבקוד JS אתה כותב כמה שורות בתוך פונקציה אחת, וקורא לפונקציה כמה פעמים, כך אתה עושה קומפוננטה אחת וקורא לה מאיפה שאתה רוצה כמה פעמים שאתה רוצה.
לכל קומפוננטה יש "מחזור חיים" הוי אומר כשאתה קורא לה אתה טוען אותה והיא מתחילה לחיות, כשהיא נעלמת אז היא מתה, יש לה כמה שלבים מהטעינה ועד המיתה.
כדי שתוכל לשלוט על האירועים במחזור החיים, אנגולר מספקת לך מתודות שנקראות בכל אירוע, כלומר כשהיא מתחילה את החיים, אנגולר קוראת למתודה ngOnInit, כשהיא מתה אנגולר קוראת למתודה ngOnDestroy, כשהתצוגה שלה משתנה נקראת המתודה ngAfterViewChecked, וכן על זה הדרך.
זה ההסבר למתודה ngOnInit, שם אתה קובע מה יקרה כשהמתודה תתחיל את מחזור החיים.
השורה implements OnInit זה שורה הצהרתית, אליבא דאמת היא מיותרת והקוד יפעל גם בלעדיה, היא נועדה להסביר לטייפסקריפט שהמחלקה הזו מממשת אינטרפייס שמכיל את המתודה ngOnInit.

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

<app-chlid-component></app-chlid-component>

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

<app-chlid-component [product]="someProduct" ></app-chlid-component>

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

@Input() product

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

@Ouptput() someData = new EventEmitter<any>()

...

this.someData.emit('data')

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

<app-chlid-component [product]="someProduct" (someData)="dataHandler"></app-chlid-component>

כאשר ה dataHandler היא מתודה של המחלקה שמטפלת באירוע שנשלח מהילד

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

    onDragStart(event: any, data: any) {
        event.dataTransfer.setData('id', data.id);
    }
    onDragLeave(event: any) {
        event.path[0].id = ""
    }
    onDragEnter(event: any) {
        event.path[0].id = "on-drag"
    }
    allowDrop(event: any) {
        event.preventDefault();
    }
    onDrop(event: any, target: any) {
        event.path[0].id = ""
        let movedId = event.dataTransfer.getData('id');
        event.preventDefault();
        let oldIndex = this.plstService.activeList?.items?.findIndex(item => item.id == movedId);
        let newIndex = this.plstService.activeList?.items?.findIndex(item => item.id == target.id);
        // console.log("newIndex", newIndex, "oldIndex", oldIndex)
        if (oldIndex! > newIndex!) ++newIndex!;
        console.log("newIndex", newIndex, "oldIndex", oldIndex)
        if (oldIndex == newIndex) return;
        this.arrayMove(this.plstService.activeList?.items, oldIndex, newIndex)
        this.plstService.storeLists()
    }
    arrayMove(arr: any, oldIndex: any, newIndex: any) {
        arr.splice(newIndex, 0, arr.splice(oldIndex, 1)[0]);
    };

.drag{
    cursor: move;
    /* height: 20px;
    background: #5f5f5f;
    width: 97%; */
}
.drop{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
    height: 78%;
    width: 10px;
}
.drop#on-drag{
    background-color: #ffffff;
    box-shadow: 0 0 10px 3px #fff;
}

        <div class="item-container">
            <div class="item" *ngFor="let item of plstService.activeList.items">
                <div class="drag" draggable="true" (dragstart)="onDragStart($event, item)">
                    <i class="fas fa-arrows-alt"></i>
                </div>
                <a>{{item.title}}</a>
                <div class="drop" (drop)="onDrop($event, item)" (dragover)="allowDrop($event)" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)">
                </div>

            </div>
        </div>

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

javascript: function randomString(count, numbersOnly = false) {
    let randomStringChars = "abcdefghijklmnopqrstuvwxyz0123456789";
    if (numbersOnly) randomStringChars = '123456789';
    let out = '';
    while (count-- > 0) {
        out += randomStringChars[Math.floor(randomStringChars.length * Math.random())];
    }
    return out;
}
(function () {
    const length = prompt('אורך מחרוזת רצוי: ', 8);
    const input = document.createElement('input');
    input.value = randomString(Number(length));
    document.body.appendChild(input);
    input.select();
    document.execCommand("copy");
    input.remove();
})();

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

וןמי שלא מחזיק חוסם פרסומות יכול להוסיף את הסימניה הזו

javascript:document.querySelector('.YM.YN.Y5').remove()

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

window.getSelection().toString()

https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection