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

הפונקציה הבאה מקבלת מחרוזת טקסט ומחזירה את הטקסט בלי השורה הראשונה:

def remove_first_line(text):
    return '\n'.join(text.splitlines()[1:])

אבל אם בטעות נעביר ל None היא תזרוק Exception. בנוסף חיבור המחרוזות עם \n עלול להיות מבלבל כי מי שיגיע לקרוא את הקוד עלול לתהות מה קורה ב Windows שם תו סוף השורה הוא שונה. לפעמים זה רעיון טוב לעצור את התוכנית אם מקבלים None, אבל לפעמים אנחנו רוצים לבנות משהו יותר גמיש. דרך נוספת למחוק את השורה הראשונה היא הקלאס StringIO מתוך המחלקה io. הנה גירסה שנייה של אותה פונקציה:

def remove_first_line(text: str):
    f = StringIO(text)
    f.readline()
    return f.read()

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

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

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

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

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

2. בפרויקט בתשלום - מתחילים מבניית דף נחיתה לפרויקט שמסביר מה אנחנו רוצים לבנות, כולל "צילומי מסך" ו Use Cases למוצר, והכי חשוב תיבה לאיסוף מיילים של אנשים שמתעניינים בפרויקט.

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

לוקאל סטאק https://github.com/localstack/localstack הוא פרויקט שמטרתו הפעלת גירסה מקומית של AWS אצלכם על המחשב בתוך קונטיינר. הם מכסים עשרות סרביסים של AWS בחשבון החינמי, ויש גם חשבון בתשלום שכולל יותר יכולות לחלק מהסרביסים ויותר סרביסים. מה שאהבתי במיוחד בעבודה עם local stack זה שהקוד לא צריך להשתנות - הממשק שלהם זהה לממשק של AWS מלבד פקודת קונפיגורציה אחת שמגדירה את ה endpoint שלהם במקום של AWS.

בואו נראה איך להתקין ולעבוד עם סרביס S3 של לוקאל סטאק דרך שלושה סקריפטים.

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

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

בחזרה ל val town בשביל לשחק עם הבוט ביקשתי שיכתוב פונקציה לחיפוש פודקסטים ב podcast index. למרבה ההפתעה התוצאה עבדה בניסיון הראשון, כולל הטריק מה API שלהם עם ה sha1 למפתח. זה הקוד:

import crypto from "https://esm.sh/crypto-js";

export default async function searchPodcasts(query: string) {
  const apiKey = Deno.env.get("PODCAST_INDEX_API_KEY");
  const apiSecret = Deno.env.get("PODCAST_INDEX_API_SECRET");

  // Generate authentication headers as per Podcast Index API requirements
  const currentTime = Math.floor(Date.now() / 1000);
  const hashString = apiKey + apiSecret + currentTime;
  const hash = crypto.SHA1(hashString).toString();

  const headers = {
    "X-Auth-Key": apiKey,
    "X-Auth-Date": currentTime.toString(),
    "Authorization": hash,
    "User-Agent": "ValTownPodcastSearch/1.0",
  };

  try {
    const response = await fetch(`https://api.podcastindex.org/api/1.0/search/byterm?q=${encodeURIComponent(query)}`, {
      method: "GET",
      headers: headers,
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();

    return data.feeds.map(podcast => ({
      title: podcast.title,
      description: podcast.description,
      url: podcast.url,
      artwork: podcast.artwork,
    }));
  } catch (error) {
    console.error("Podcast search error:", error);
    return [];
  }
}

console.log(await searchPodcasts("syntax"));

ואם יש לכם 5 דקות תוכלו גם ליצור חשבון ב val town ולהריץ אותו ישר מהממשק שלהם בקישור:

https://www.val.town/v/ynonp/righteousLimeGalliform

רק שימו לב שצריך קודם ליצור את שני משתני הסביבה PODCAST_INDEX_API_KEY ו PODCAST_INDEX_API_SECRET דרך הממשק של val town לחשבון שלכם בקישור:

https://www.val.town/settings/environment-variables

ובשביל לקבל את המפתחות יש ליצור חשבון ב podcast index api:

https://api.podcastindex.org/

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

נכתוב את הקוד הבא בקומפוננטת App.vue:

<script setup>
import Child from './Child.vue';
</script>

<template>
  <p class="red">Hello World from App</p>
  <Child />
</template>

<style scoped>
.red {
  color: red;
}
</style>

וזה Child.vue:

<script setup></script>

<template>
  <button class="red">
    Hello World from Child
  </button>
</template>

אפשר לראות את הדוגמה לייב בקישור הזה: https://tinyurl.com/4nff62kp

עכשיו לשאלות - למה הטקסט בכפתור מופיע באדום? ואיך אפשר "לנתק" אותו מהעיצוב של App כדי שלא יקבל את הגדרת האדום משם?

שימו לב שהגדרות העיצוב הן בבלוק styled scoped ושזו לא הבעיה שמתוארת כאן: https://www.tocode.co.il/blog/2021-10-watch-out-inherited-css, למרות שגם הבעיה בפוסט ההוא מעניינת.

הקוד הבא ב Vue לא עובד, או לפחות לא עושה את מה שהתכוונתי. קומפוננטה עליונה:

<script setup>
import { ref } from 'vue'
import Child from './Child.vue';
const x = ref(10)
</script>

<template>
  <Child :x="x" />
</template>

וקומפוננטת Child:

<script setup lang="ts">
const {x} = defineProps<{x: any}>();

function inc() {
  x.value++;
}
</script>

<template>
  <p>x = {{x}}</p>
  <button @click="inc">+1</button>
</template>

נראה כאילו Child מקבל אוביקט ריאקטיבי x ומעלה את ערכו ב-1. בפועל העברת הפרמטר דרך props מעבירה את ה value של האוביקט הריאקטיבי, כלומר בתוך Child המשתנה x הוא מספר. למספר אין שדה .value ולכן הקוד נכשל.

אתמול פירסמתי פה תבנית לפרויקט React שמשתמש ב Next.js ומכיל קומפוננטות צד שרת, משיכת מידע מבסיס נתונים וניהול משתמשים עם auth0. היום נראה את החלק השני של הפוסט ונבנה את אותה תבנית עבור nuxt ליישומי vue. הקוד כאן:

https://github.com/ynonp/nuxt-drizzle-auth0-demo

בואו נראה מה יש בריפו.

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

https://github.com/ynonp/next-drizzle-demo

בואו נראה מה יש בפנים.

דילמה אמיתית. והיא תמיד היתה.

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

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

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

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

1. רגישות לטעויות או לפגיעה בנתוני פרודקשן.

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

לכן גם בפרויקט פרודקשן העתקת קוד בלי להבין מ Tutorial או מ Chat GPT פוגעת בפרודוקטיביות לטווח ארוך.

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

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