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

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

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

הגילוי של היום היה לגמרי במקרה. כתבתי את הקוד הזה מתוך הרגל והרצתי ב Firefox:

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

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

הסקריפט הבא למשל הוא סקריפט אנסיבלי שמתחבר לשרת מרוחק ויוצר עליו קובץ עם תוכן מסוים:

---
- name: This is a hello-world example
  hosts: ansibleclient01.local
  tasks:
    - name: Create a file called '/tmp/testfile.txt' with the content 'hello world'.
      copy:
        content: hello world
        dest: /tmp/testfile.txt

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

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

cat << 'END' > /tmp/testfile.txt
hello world
END

בשביל לשנות הרשאות הפעלתי chmod ובשביל להפעיל סרביס כתבתי פשוט systemctl start postgresql. בשביל להריץ פקודה בתור משתמש מסוים אפשר להשתמש ב sudo למשל:

sudo -u ynon -H -i /bin/bash -c "rvm install 2.6.5"

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

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

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

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

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

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

שנים הייתי בטוח שהפקודה ll היא פקודה רגילה לגמרי ביוניקס בדיוק כמו ls, עד שיום אחד הגעתי למחשב שלא הוגדר בו ה Alias הזה ולא הבנתי מה קורה. או ב CSS ידעתי שחייבים לציין overflow: auto על אלמנטים שיש בתוכם אלמנטים אחרים, פשוט כי זה עזר למנוע באגים במצבים מסוימים.

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

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

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

לינוד ו Digital Ocean ישמחו למכור לכם שרת VPS במחיר של 10$ לחודש שיכול להריץ את הפרויקט שלכם בלי למצמץ. אם אתם לא בקטע של התקנות תוכלו להעלות קצת את הסכום ולקבל מכונה מותקנת מ Heroku. הם גם יוכלו להוסיף לכם אוטומטית מכונות כשהפרויקט יתחיל לצבור תאוצה.

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

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

האינטרנט מציע את כל הידע שצריך בשביל הצד הטכני של בניית פרויקט צד, ואם אתם מעדיפים משהו יותר מסודר מנוי לטוקוד יעלה לכם 117 ש"ח לחודש, והקורסים כאן ילמדו אתכם את כל מה שצריך: לינוקס בשביל להתקין את השרת, נוד ומונגו בשביל ה Backend וכמובן HTML, CSS ו React בשביל הפרונט.

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

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

שנים אחר כך כש Webmasters עברו לקרוא לעצמם Front End Developers אנשים לא הבינו בהתחלה מה המקצוע הזה בכלל אומר. לאט לאט ביססו הפרונטאנדיסטים את מעמדם בתור המתכנתים שכותבים בעיקר JavaScript ולא נוגעים ב PHP, בניגוד לוובמאסטרים של פעם שעשו הכל. השם איפשר לאנשים להגיד "אני מתכנת Front End" בצורה שאחרים יבינו על מה אתה מדבר, וכך נוצר תפקיד חדש בתעשיה.

או בואו ניזכר רגע באחד הספרים הכי משפיעים על פרדיגמת ה Object Oriented Programming - הספר Design Patterns של הרביעיה, שבסך הכל נתן שמות לתבניות שכולם השתמשו בהן גם לפני. אבל בזה שהוא נתן להם שמות הוא הפך אותן ללגיטימיות והפך את השיח סביבן לאפשרי.

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

הי חברים,

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

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

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

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

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

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

nthice = [lambda x: x * n for n in range(1, 10)]
print(nthice[2](3))

בראש שלי דמיינתי שהקוד ייצור מערך של תשע פונקציות - מה שאכן קרה:

>>> [lambda x: x * n for n in range(1,10)]
[<function <listcomp>.<lambda> at 0x10124a0d0>, <function <listcomp>.<lambda> at 0x10124a160>, <function <listcomp>.<lambda> at 0x10124a1f0>, <function <listcomp>.<lambda> at 0x10124a280>, <function <listcomp>.<lambda> at 0x10124a310>, <function <listcomp>.<lambda> at 0x10124a3a0>, <function <listcomp>.<lambda> at 0x10124a430>, <function <listcomp>.<lambda> at 0x10124a4c0>, <function <listcomp>.<lambda> at 0x10124a550>]

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

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

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

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

הראשון הוא CSS Grid. גריד יצא קצת אחרי פלקסבוקס ותפס פחות תשומת לב. הוא נתמך היום בכל הדפדפנים, חוסך הרבה עבודה ומאפשר הרבה עיצובים חדשים. האתר learncssgrid.com מציע מדריך טוב ו gridbyexample מראה הרבה דוגמאות לדברים פשוטים שאפשר לבנות עם גריד.

המלצה שניה היא Service Worker. נושא מאוד מעניין שעוזר לבנות עמודי Offline, לשלוח נוטיפיקציות ולשפר ביצועים בעמוד. אפשר להתחיל עם דף ההסבר של MDN בקישור https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerAPI/UsingServiceWorkers, להמשיך עם זה של גוגל ולסיים בטוטוריאל בקישור https://github.com/Itera/learn-service-worker שכולל משימות לימודיות לכתיבת Service Workers. זה ייקח לכם יום-יומיים יחד עם כל המשימות אבל לדעתי שווה את ההשקעה.

מספר שלוש הוא SVG. עם כל ההתלהבות מ CSS וכל האנימציות ודברים מדליקים שאפשר לעשות, אנחנו שוכחים ש SVG מציע הרבה מאוד יכולות שלפעמים יהיה קשה לייצר באמצעות CSS. הוא נתמך בכל הדפדפנים ויכול להיות הפיתרון הטוב ביותר שאתם לא מכירים. המדריך בקישור https://flaviocopes.com/svg/ מאוד מפורט.

הרביעי שלי הוא נגישות אתרים. אני יודע אתם אומרים לעצמכם למי באמצע משבר הקורונה אכפת מ WCAG2. אבל באמת שחוקי הנגישות הולכים להישאר איתנו הרבה אחרי משבר הקורונה. הבעיה הכי גדולה כאן היא שזה הנושא שהכי פחות כיף ללמוד אותו, יש המון חומר לקרוא, וגם אחרי שקוראים את הכל עדיין צריך לשחק עם התוכנות כדי להבין יותר טוב איך ליישם את מה שלמדתם. מצד שני אתם תקועים בבית, קורונה מסביב - לא יהיה זמן טוב מזה לקרוא את ההנחיות. מתחילים כאן https://www.w3.org/TR/WCAG/ ואחרי שסיימתם ממשיכים לפירוט כאן https://www.w3.org/WAI/WCAG21/Understanding/.

מספר חמש הוא ביצועים. היה על זה באזז מטורף לפני כמה שנים אבל אם במקרה פספסתם אז הקורס של איליה גריגוריק עדיין זמין ביודסיטי והוא מעולה. זה הקישור https://www.udacity.com/course/website-performance-optimization--ud884. לאיליה יש גם ספר על הנושא ששווה לקרוא אחרי הצפיה בוידאו בקישור הזה https://hpbn.co/.

השישי הוא קל ונקרא Content Security Policy. משום מה המון אנשים שדיברתי איתם עוד כשהיה מותר לפגוש אנשים מחוץ למסך לא הכירו את זה ולא הבינו עד הסוף את הסכנות ב XSS. אם גם אתם נופלים לקטגוריה הזאת לא צריך להסס ותוכלו לנצל את הסגר כדי לרוץ לסגור את הפער. הייתי מתחיל מהמאמר הזה מ phpguide.co.il שמסביר מה זה XSS, ואחרי זה הולך לבלות איזה חצי יום עם משחק ה XSS.

משם ממשיכים לדף ההסבר ב MDN בקישור https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP, ויש גם תקציר בעברית של רן בר זיק.

בסוף אחרי אחרי שהבנתם איך CSP עובד המאמר Postcards from the post-XSS world מדמיין קווים כלליים לאיך אנשים יעקפו את ההגנות שלו בעתיד (הוא נכתב ב 2011). יותר מעניינת היא המצגת בקישור https://www.blackhat.com/docs/us-17/thursday/us-17-Lekies-Dont-Trust-The-DOM-Bypassing-XSS-Mitigations-Via-Script-Gadgets.pdf שמסבירה טכניקות מודרניות לעקוף CSP באתרים שמשתמשים בפריימוורקס פופולריים.

ואחרון לרשימה זו הוא נושא שמתכנתי JavaScript רבים מתבלבלים בו ואני מדבר על Promises ו Async/Await. הטקסט בקישור https://blog.bitsrc.io/understanding-javascript-async-and-await-with-examples-a010b03926ea מציע הסבר מפורט, עדכני ומלא דוגמאות לכל מה שקשור לתכנות אסינכרוני ב JavaScript ושווה לקרוא אותו ולנסות להריץ בעצמכם את כל הדוגמאות שם.

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