טיפים קצרים וחדשות למתכנתים
אחד הטרנדים של ריילס היום הוא לוותר על ה Build Step ולהשתמש רק ב JavaScript. בניסוי היום כתבתי פרויקט ריילס שמשלב את vue כדי לראות איך זה עובד ובמה זה שונה מפרויקט צד-לקוח רגיל.
שתי מילים מאוד דומות בעברית עם משמעות שלפעמים נראית הפוכה. אנשים "פרודוקטיביים" מייצרים דברים וגורמים לחברה לפעול. אנשים "קריאייטיביים" ממציאים רעיונות חדשים, סיפורים, אומנות, שירים. בטח שכדאי להיות יצירתי אבל זה הפרודוקטיבי שמשלם את החשבון. או לפחות ככה חשבנו.
בעולם של היום אלה שתי מילים שהולכות יחד יד ביד. אנחנו לא צריכים עוד מכוניות, עוד טלוויזיות או עוד נייר טואלט, אפילו אם תצליחו לייצר אותו קצת יותר יעיל או קצת יותר זול. הפרודוקטיביות היום היא קודם כל היכולת לראות מה אנשים צריכים ולהמציא פיתרונות לבעיות שאחרים עוד לא ראו. קריאייטיביות היא הבסיס לפרודוקטיביות.
הקוד הזה עובד, אבל גורם לטייפסקריפט לכעוס:
<script setup lang="ts">
import { inject } from 'vue';
import { translations } from './InjectionKeys';
const texts = inject(translations);
</script>
<template>
<button>{{ texts['click-here'] }}</button>
</template>
הקומפוננטה לוקחת מהקונטקסט את הערך הכי קרוב של המשתנה translations ואז מושכת ממנו את התרגום של הטקסט click-here. אין שגיאות בקונסול ועל המסך הכל נראה תקין. יותר מזה, אם בטעות מישהו שכח לעשות provide ל texts מיד נראה את השגיאה בקונסול כי ננסה לקרוא מפתח מתוך null. אני בסדר עם ההתנהגות הזאת כי אין לי מה לעשות עם המערכת אם אפילו הטקסטים לא נטענו. הבעיה שטייפסקריפט לא יודע את כל מה שאני יודע ומסמן את שורת הכפתור ב template באדום. מה עושים? שתי הצעות-
דרך אחת היא להוסיף בדיקה בקוד הסקריפט אחרי inject:
<script setup lang="ts">
import { inject, ref } from 'vue';
import { translations } from './InjectionKeys';
const texts = inject(translations);
if (!texts) {
throw new Error("Missing texts in parent component");
}
</script>
<template>
<button>{{ texts['click-here'] }}</button>
</template>
קיבלנו הודעת שגיאה קצת יותר טובה וטייפסקריפט רגוע. דרך שניה היא להעביר פרמטר שני ל inject שהוא ערך ברירת המחדל:
<script setup lang="ts">
import { inject, ref } from 'vue';
import { translations } from './InjectionKeys';
const texts = inject(translations, ref<Record<string, string>>({}));
</script>
<template>
<button>{{ texts['click-here'] }}</button>
</template>
פה הקוד יותר קצר שזה נחמד, אבל החיסרון הוא שעכשיו אם מישהו שוכח להעביר את texts מקומפוננטה עליונה יותר לא נראה שגיאה בקונסול אלא רק טקסטים ריקים. כנראה שגם זה לא נורא כי זאת שגיאה שמאוד קל לזהות.
איזה משתי הגישות אתם מעדיפים? או שאולי יש לכם טכניקה אחרת? מוזמנים לספר בתגובות או בטלגרם.
הפוסט כאן נוגע בנקודה טובה לגבי SQL: https://www.depesz.com/2024/12/01/sql-best-practices-dont-compare-count-with-0/
בקצרה הוא מסביר למה לא כדאי לכתוב את זה:
SELECT u.* FROM users u
WHERE 0 = (SELECT COUNT(*) FROM addresses a WHERE a.user_id = u.id);
כשבעצם היה צריך לכתוב את זה:
SELECT u.* FROM users u
WHERE NOT EXISTS (SELECT FROM addresses a WHERE a.user_id = u.id);
אבל אני חושב שהנקודה פה יותר גדולה מ SQL ויותר גדולה מבעיית ביצועים אחת פחות:
קוד רע משתכפל - כשאני בודק אם count של משהו שווה 0, גם אם במקרה הספציפי שלי זה לא שבר את המערכת, מישהו אחר יעתיק את זה במקום אחר ושם אולי זה יישבר. מבט קדימה על עולם בו AI יכתוב קוד, תבניות רעות בקוד שלנו הולכות להשתכפל הרבה יותר.
קוד רע הוא מורה רע - מתכנתים צעירים שיעבדו על מערכת עם הרגלים רעים יאמצו את אותם הרגלים רעים ואפילו לא ידעו שקיימת דרך יותר טובה. וככה אנחנו מקבלים מפתחים עם 5 שנים ניסיון ב SQL שעדיין יהיו מופתעים לגלות שיש דבר כזה EXISTS, כי הם אף פעם לא ראו אותו בקוד שלהם.
ופה החשיבות של היכרות טובה עם השפה: ככל שאני מכיר טוב יותר את כל הפקודות בשפה קל לי יותר למצוא את הפקודה שפותרת לי את הבעיה בצורה מדויקת, יעילה ומעבירה את המסר הנכון לאלה שיקראו את הקוד.
לימוד יחד עם חברים יכול להיות הרבה יותר אפקטיבי מלימוד לבד: המחויבות החברתית מגבירה את המוטיבציה, חברים יכולים לעזור כשאנחנו נתקעים ולהעלות שאלות שלא חשבנו עליהן.
עכשיו עם ה AI אפילו לא צריך מורה שילווה אותנו. בהינתן נושא, חומרי לימוד ורשימת משימות מתכנתים בעלי מוטיבציה יכולים להגיע מאוד רחוק. והנה רעיון לפרויקט צד נחמד ולא קשה מדי, מערכת להקמה ותפעול קבוצות לימוד. בגדול:
משתמשים יכולים להיכנס ולהקים מסלולי לימוד. מסלולי הלימוד יוכלו להיות בתשלום או בחינם, והם כוללים סילבוס מסודר, משימות ואולי פיתרונות עם הסברים.
משתמשים אחרים יכולים להיכנס ולהקים קבוצות לימוד. כשאני מקים קבוצת לימוד אני בוחר את השעות והימים בהם מסתדר לי ללמוד, מספר על עצמי ומה הרמה שלי ועם איזה סוג מפתחים הייתי רוצה ללמוד. בהקמת קבוצת לימוד אני גם בוחר את מסלול הלימוד של הקבוצה.
משתמשים אחרים יכולים להיכנס, לחפש קבוצות לימוד ולהצטרף.
אני חושב שהמשחק של קבוצות לימוד יוצא מהתבנית של אתרי קורסים ומשנה את הפוקוס, במקום לבחור קורס לפי ביקורות או סילבוס, אני בוחר לפי האנשים איתם אני רוצה ללמוד. הרבה פעמים התוצאה תהיה לימוד יותר אפקטיבי.
חושבים לבנות את הפרויקט ורוצים להתייעץ על טכנולוגיה או ארכיטקטורה? אל תתביישו להשאיר הודעה. בניתם אותו או משהו דומה? ספרו לי על זה ואשמח להשתמש ולעזור לכם לקדם.
מישהו פרסם שאלת ראיונות עבודה טפשית על JavaScript ושאל מה יהיה הפלט של התוכנית הבאה:
function sayHi() {
console.log(name);
console.log(age);
var name = 'Lydia';
let age = 21;
}
sayHi();
זה לא חשוב עכשיו מה התשובה. אתם יכולים ללכת ל Chat GPT לברר. מה שיותר מעניין זה מבנה התשובה של אותו Chat GPT:
המשפט הראשון מסביר את המטרה של השאלה - זו שאלה שבודקת את ההיכרות שלך עם הרעיונות של Variable Hoisting ו Block Scoping ב JavaScript. וזאת בדיוק הדרך שכדאי להתחיל תשובה לשאלות גם בראיון אמיתי.
אחרי זה Chat GPT מסביר על הרעיונות ומספר מה ההבדל בין var ו let בהקשר של גישה למשתנה לפני שורת ההגדרה שלו.
לאחר מכן הוא עובר שורה שורה ומסביר מה היא עושה ולמה (זה קצת מיותר בעיניי).
ובסוף מראה את פלט התוכנית.
שמתי לב שהדבר שהכי הרשים אותי במנגנון היה כשהדבקתי את השאלה ו Chat GPT כתב את שמות הנושאים אותם השאלה באה לבחון. שימוש בשמות הנכונים מראה לי שהתשובה מתיחסת בדיוק לדברים שרציתי לבדוק ומניח את היסודות לתקשורת טובה על נושאים אלה.
לסיפור יש התחלה, אמצע וסוף. לפעמים גם עלילה וכשיש לנו מזל הוא מעורר מחשבה ומעביר מסר. את כל האלמנטים האלה סופרים בונים באמצעות משפטים המורכבים ממילים. סופרים שונים יכולים לכתוב עלילות דומות ומסרים דומים ולהשתמש במילים אחרות לגמרי - ולמרות העלילה הזהה ברור שזה לא יהיה אותו סיפור. הפרטים חשובים.
גם הקוד שלנו מספר סיפור, וגם את הקוד אנחנו בונים מחיבור של קטעי קוד קטנים יותר דרך תבניות. ואפילו אם Chat GPT מסוגל לקבל משימה ולהציע מימוש מסוים, הוא לעולם לא יחליף את המתכנתים שיכולים לכתוב מספר מימושים ולנווט ביניהם, כמו אותם סופרים מיומנים שיכולים לנסח בדרכים שונות את אותם רעיונות. וכן תכנות זו עבודה יצירתית, והיצירתיות דורשת היכרות מעולה עם תבניות כדי שאפשר יהיה לשלב אותן (ולשבור אותן) בדרכים שמתאימות למערכת עליה אנחנו עובדים.
מתכנתים משתפרים ככל שכותבים יותר פרויקטים ותוכניות, כשם שסופרים משתפרים ככל שיכתבו יותר סיפורים. אבל בעבודה רק על פרויקטים מלאים יש תמיד את הסכנה לדלג על דברים קטנים, לחזור שוב ושוב על טכניקות לא מספיק טובות, רק בגלל שאנחנו כבר רגילים אליהן. לכן בנוסף לעבודה על פרויקטים גדולים מתכנתים טובים משקיעים גם זמן בשיפור אותן תבניות קטנות שמרכיבות את הקוד שלנו - תוכניות של עשרות שורות לכל היותר שפותרות בעיה ספציפית, מעבר על מספר פיתרונות, השוואה ביניהם וחיפוש הפיתרון הפשוט והטוב ביותר. וכן גם ההבנה שלפעמים רעיון טוב נשבר כשהדרישות משתנות, וההימור איזה דרישות הולכות להשתנות.
את כל העבודה הזאת משלב בצורה מופלאה אריק ווסטל כל שנה בפרויקט Advent Of Code שלו, שם הוא משתף כל יום במהלך דצמבר חידת תכנות קטנה המורכבת משני חלקים, ורק אחרי פיתרון החלק הראשון מופיע החלק השני. החידות ממוקדות בכוונה ומאפשרות להתאמן על החלקים הקטנים והספציפיים ביותר בקוד: להבין את הדרישות, לפתור בעיות, לדמיין איזה שינויים בדרישות כנראה יגיעו ואז לראות את השינויים בדרישות של אריק ולהתאים את הפיתרון שלנו לדרישות החדשות.
היום הוא היום הראשון של דצמבר והחידה הראשונה של Advent Of Code בדיוק התפרסמה. בהצלחה.
עכשיו ש React Router עדכנו שוב את הגירסה, הפעם כדי להפוך לפריימוורק במיזוג עם Remix, אני חושב שהגיע הזמן לבחון אפשרויות אחרות, והאפשרות הפופולרית ביותר היום מלבד React Router היא Tanstack Router. בואו נראה קצת קוד לדוגמה כדי להבין איך זה עובד. קוד הדוגמה של הפוסט זמין בגיטהאב בקישור:
האתגר הכי גדול בבניית קורס הוא להחליט מה יהיה בקורס. באמת. אחרי שיש לכם רשימת נושאים טובה כל השאר זה טכני, אפילו Chat GPT יכול לכתוב את המצגת.
ההחלטה מה יהיה בקורס ועל מה לא מדברים היא קודם כל ההחלטה הכי חשובה שיש בבניית קורס. למדו דברים בסיסיים מדי ואנשים ישתעממו, למדו דברים מסובכים מדי ואנשים ילכו לאיבוד. ההחלטה על הנושאים היא חשובה כי היא בעצם המהות של מה אנחנו מלמדים. אבל מה שמאתגר זה שההחלטה הזאת ממשיכה להיות קשה ברקורסיה גם לתוך הנושאים עצמם, כי בתוך כל נושא צריך לבחור על איזה תתי נושאים מדברים וגם שם אפשר לצלול עמוק מדי ולהישאר לבד, או לדבר שטחי מדי ושוב להישאר לבד.
יש כל מיני רעיונות שלא עובדים, לדוגמה:
תגיד כל מה שאתה יודע על הנושא כדי לא להשמיט כלום (לא עובד. אם אתה צריך ללמד משהו אתה כנראה יודע עליו יותר ממה שהתלמידים שלך צריכים לדעת).
תגיד את מה שיגרום לכולם להרגיש שהם מבינים (עובד זמנית. הם אולי יתנו לך את הציון הכי גבוה במשוב בסוף הקורס, אבל מהר מאוד הם יבינו שלא הסברת את הדברים הקשים והם בעצם לא מוכנים לעולם האמיתי).
קח ממישהו מצגת ותגיד מה שכתוב בה (רוב המצגות שלקחתי מאחרים לא היו מספיק טובות).
מה שכן עובד הוא דווקא הכיוון הכי פשוט: להסתכל על האנשים שמגיעים לקורס. לשאול מה הם יודעים לעשות היום ומה הם צריכים לדעת לעשות בעתיד, ועכשיו לבנות את המסלול המהיר ביותר שיביא אותם לשם. אני אוהב להתחיל מהתרגולים ולבנות רשימה של משימות בדרגת קושי עולה, כאשר המשימות האחרונות הן הדברים שאנשים באמת צריכים לעשות בסוף הקורס. אחרי שיש לי את הרשימה אני מתחיל לעבות אותה בהסברים של "לפני" ו"אחרי" התרגיל. כשנגמרו ההסברים אני אוסיף עוד דוגמאות כדי לחזק את העקרונות שנלמדו בהסבר. בבנייה כזאת השאלה היא לא "מה לא ללמד" אלא מה כן - איך מגיעים מנקודה א ל-ב.
הקוד הבא ב Vue יכול להטעות:
<script setup lang="ts">
import {ref} from 'vue';
const data = ref('a');
function handleInput(e: any) {
if (Math.random() * 10 < 2) {
data.value = e.target.value;
}
}
</script>
<template>
<input type="text" @input="handleInput" :value="data" />
</template>
במיוחד אם משווים אותו לקוד מקביל בריאקט:
function App() {
const [data, setData] = useState('a');
function handleInput(e) {
if (Math.random() * 10 < 2) {
setData(e.target.value);
}
}
return <input type="text" value={data} onChange={handleInput} />
}
גירסת הריאקט תעדכן את הטקסט בתיבה רק ב 20% מהמקרים. בשאר המקרים גם המשתנה data וגם תיבת הטקסט שמופיעה על המסך יישארו מסונכרנים ויציגו את הטקסט הישן. ריאקט יתעלם מהלחיצות.
בגירסת ה vue ההתנהגות שונה: אנחנו עדיין נכנסים לפונקציה ועדיין רק ב 20% מהמקרים נכנסים לבלוק לביצוע של התנאי, אבל הטקסט בתיבה תמיד ישתנה - בלי קשר למצב של המשתנה data. נשים לב ששינוי של data ממקום אחר עדיין יגרום לעדכון של תיבת הטקסט, כלומר בגירסת ה vue אני יכול להוסיף כפתור:
<input type="text" @input="handleInput" :value="data" />
<button @click="data = ''">Reset</button>
ואז לחיצות על הכפתור יאפסו את המשתנה וגם את הטקסט בתיבה. המנגנון הריאקטיבי של Vue אומר שכשיש שינוי במשתנה גם תיבת הטקסט על המסך תעודכן, אבל כשאין שינוי במשתנה לתיבה לא יקרה כלום.
גם הגדרת v-model עם אפשרות לכתיבה תישאר עם אותה התנהגות מבלבלת:
<script setup lang="ts">
import {computed, ref} from 'vue';
const data = ref('a');
const dataModel = computed({
get() {
return data.value;
},
set(newValue) {
if (Math.random() * 10 < 2) {
data.value = newValue;
}
}
})
</script>
<template>
<Todos />
<input type="text" v-model="dataModel" />
<button @click="data = ''"></button>
</template>
גם במצב זה ב 20% מהמקרים תהיה כתיבה למשתנה אבל בשאר 80% לא תהיה כתיבה למשתנה והטקסט בתיבת הטקסט יצא מסינכרון, התיבה תציג את הטקסט שנכתב אבל המשתנה לא יכיל אותו.
מה בכל זאת אפשר לעשות? אם אתם רוצים את ההתנהגות של ריאקט תצטרכו לכתוב אותה בעצמכם:
function handleInput(e) {
if (Math.random() * 10 < 2) {
data.value = e.target.value;
} else {
e.target.value = data.value;
}
}