שלום אורח התחבר

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

טיפים קצרים וחדשות למתכנתים

הזינו את כתובת המייל וקבלו את הפוסט היומי בכל בוקר אליכם לתיבה:

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

המשך קריאה...

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

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

המשך קריאה...

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

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

המערכת לא באוויר אבל הקוד זמין בגיטהאב בקישור הזה:

https://github.com/ynonp/secure-code-livedemo-loby

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

זה דף הוובינר לפרטים והרשמה:

https://www.tocode.co.il/workshops/61

נתראה בחמישי, ינון

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

המשך קריאה...

קטע הקוד הבא עובד טוב ב Chrome, Firefox ו Edge וגם על מובייל לא עשה לי עדיין בעיות. רק IE צריך להיות מיוחד:

var form = document.querySelector('#myform');
var fd = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit');
xhr.send(fd);

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

וכך נראה טופס שעבורו הקוד הזה נכשל:

<form id="theform" action="/people" method="post">
  Name: <input type="text" name="person[name]" value="John Appleseed">

  <input type="radio" name="person[sex]" value="male"> Male
  <input type="radio" name="person[sex]" value="female"> Female
  <input type="radio" name="person[sex]" value="not_specified"> (Not Specified)

  <input type="submit" name="commit" value="Create Person">
</form>

מה שמיוחד כאן זה שיש Radio Button בתור האלמנט האחרון בטופס. וברגע שהבנתם את זה ה"תיקון" קל מאוד - פשוט תוסיפו לטופס שדה input נוסף אחרי ה Radio Button. הטופס הזה למשל עובר בכל הדפדפנים:

<form id="theform" action="/people" method="post">
  Name: <input type="text" name="person[name]" value="John Appleseed">

  <input type="radio" name="person[sex]" value="male"> Male
  <input type="radio" name="person[sex]" value="female"> Female
  <input type="radio" name="person[sex]" value="not_specified"> (Not Specified)
  <input type="hidden" name="dontcare" value="dontcare" />

  <input type="submit" name="commit" value="Create Person">
</form>

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

שימוש ב jQuery.serialize היה מונע את הבאג וחוסך לי את המחקר, הגילוי העצוב וה Work Around שלא בטוח שמכסה את כל המקרים. אז כן, גם ב 2018, אם אתם יכולים להרשות לעצמכם - שימו jQuery.

אגב תיעוד של הבאג קיים ברשת כבר מ 2014 למשל בקישור הזה: https://blog.yorkxin.org/2014/02/06/ajax-with-formdata-is-broken-on-ie10-ie11.html

הספריה Express של Node.js היא הדרך האהובה על מתכנתי Front End רבים לכתוב קוד צד שרת, וזה לא סתם. בהיותה ספריית Node אקספרס מאפשרת לשתף המון קוד בין צד השרת לצד הלקוח, כולל שילוב מאוד קל של Server Side Rendering בפריימוורקס שתומכות בזה.

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

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

ביום חמישי אני הולך להעביר שעה בשידור חי על פיתוח קוד צד-שרת באמצעות Express ו Node.JS. הוובינר מתאים גם למתכנתי Front End שאף פעם לא כתבו קוד צד שרת, גם למתכנתים שכתבו בסביבות אחרות מ Express, ואני חושב שגם אם כתבתם קצת באקספרס עדיין שווה לכם לבוא כי תוכלו לחזק את הידע. התוכנית להתחיל מההתחלה של אקספרס ולבנות פרויקט יחד אתכם מאפס ודרכו לדבר על:

  1. מבנה פרויקט, כולל הפרדה בין לוגיקה עסקית לקוד ממשק Web.

  2. איך לפתח נכון קוד אסינכרוני באמצעות Promises.

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

השתתפות בחינם אבל דורשת רישום מראש בקישור: https://www.tocode.co.il/workshops/56

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

נתראה בחמישי, ינון

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

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

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

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

  1. האם כותבים טסטים? האם משתמשים במערכת CI/CD כלשהי?

  2. האם משתמשים בכלי ניהול גירסאות (רצוי git) ?

  3. האם יש תרבות של Code Reviews ? מי מבצע Code Reviews? ולמי? ובאיזו תדירות?

  4. מה מדיניות החברה בנוגע להשתלמויות מקצועיות? האם יקנו עבורך קורס אונליין?

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

  6. מה היחס לנושא נגישות?

  7. מה היחס לאבטחת מידע? יש מי שבודק את הקוד לחולשות? איך התקשורת בין המתכנתים לאותם Pen Testers ? איך נושא אבטחת מידע משתלב בתהליך הפיתוח?

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

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

ספריית jQuery נוצרה כדי לתת לנו ממשק עבודה טוב יותר עם ה DOM. בתקופה ש jQuery התחילה כל דפדפן סיפק פונקציות שונות כדי לחבר בין קוד JavaScript לבין התוכן שאתם רואים על הדף. ג'ון רסיג כתב את jQuery ב 2005 בזמן שלמד בקולג' במטרה לתת למתכנתים (ולעצמו) כלים טובים יותר לגשת ל DOM ולחבר קוד טיפול באירועים בצורה שעובדת טוב בכל הדפדפנים.

בשנה הראשונה של jQuery היא היתה הספריה היחידה שהגיעה עם תיעוד מלא. כל שאר הספריות שלחו אתכם להסתכל בקוד המקור שלהן או להבין דברים לבד. מאפיין זה יחד עם ארכיטקטורת פלאגינים שבנויה לתוך הספריה הפכו אותה מ"עוד ספריה לגישה ל DOM" לספריה המרכזית שאנשים בוחרים בה ב 2006, ב-2012 וכן גם ב 2018.

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

המשך קריאה...

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

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

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

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

מתכנתים רבים מגיעים ללמוד גיט ומחפשים איך לבצע בגיט את ה-3 פקודות שהם מכירים ממערכת ניהול הגירסאות הקודמת שלהם או דרך Tutorials של "למד את עצמך גיט בעשרים דקות". זה עובד אבל רק חלקית. כשאתם לומדים תוך כדי עבודה ומדלגים על הבסיס התיאורטי וה Best Practices יהיו דברים חשובים שתחמיצו ויהיו דברים שוליים שתקחו יותר מדי ללב.

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

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

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

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

https://www.tocode.co.il/bundles/git

נתראה שם, ינון

הי חברים,

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

ביום חמישי (עוד יומיים) בשעה עשר בבוקר אעביר וובינר חינמי בו אציג פיתוח Web Application מלא מאפס באמצעות HTML/CSS/JavaScript בצד הלקוח שמתממשק עם שרת Firebase.

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

  1. מהו המבנה המומלץ לפרויקט Web.

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

  3. מהו Firebase ואיך הוא יכול לעזור לנו לבנות יישומים מהר יותר.

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

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

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

הוובינר יתקיים בשני חלקים וביום חמישי הקרוב יהיה החלק הראשון בו נכתוב את צד הלקוח ואת החיבור הבסיסי לשרת Firebase.

פרטים והרשמה בקישור: https://www.tocode.co.il/workshops/38

נתראה, ינון