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

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

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

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

קטע הקוד הבא עובד טוב ב 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 כדי שתוכלו לכתוב יחד איתי את הקוד ולשאול שאלות רלוונטיות.

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

ספריית 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

נתראה, ינון

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

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

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

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

אחת הפונקציות האהובות עליי בפייתון נקראת namedtuple. היא מייצרת מעין מחלקה עם שדות קבועים, מה שנקרא Data Object. כתיבת משהו דומה ב JavaScript יכולה ללמד אותנו דבר או שניים על השפה.

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

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

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

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

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