טיפים קצרים וחדשות למתכנתים
לרוב אני לא נכנס לקרוא עדכונים מקבוצות פייסבוק ומעדיף להסתפק בתמונות של החתולים בפיד הראשי. אבל מדי פעם הנורה של ה Notifications מושכת את תשומת לבי. זה קרה השבוע כשחבר העלה את הפוסט הבא לקבוצת "נגישות באינטרנט שאלות ותשובות".
כשאני רוצה לכתוב קוד מכוער (למשל כדי להספיק להכניס עוד פיצ'ר אחד לפני הדד-ליין) יש לי שיטה, או מספר כללים שעוזרים. לא תמיד זה יוצא מזעזע אבל אם מבצעים את כל הסעיפים האלה בצורה שיטתית אפשר להשחית כמעט כל מערכת.
לאורך שנים של עבודה עם ES5 הספקתי לעשות כמעט כל טעות אפשרית ולבזבז הרבה יותר מדי זמן בזיהוי התקלות ולבסוף בעצבים על בלבול של שורה שבזבז יום עבודה שלם. לפחות עכשיו עם ES6 חלק מהשטויות האלה יהפכו לזכרון רחוק.
לאחרונה הוספתי קוד אנימציה לפרויקט שלא השתמש ב Frameworks כלשהן, והדבר נתן לי הזדמנות להזכר ולחפש דרכים קלות לשלב בין JavaScript לאנימציות CSS. תקציר החוויה ואתגר בהמשך הפוסט.
קודפן הוסיפו אפשרות לעדכון מיידי של קטעי הקוד, מה שאומר שאנחנו יכולים להתחיל להטמיע חידות ואתם יכולים לנסות לפתור בלי לצאת מהאתר. הנה חידת JavaScript ראשונה בשביל לחגוג את המאורע.
למרות כל הקיטורים, CSS היא בבסיסה טכנולוגיה מאוד פשוטה. ברוב המקרים מספיקות מספר דקות כדי להבין כל אחת מה Keywords בשפה (לפחות עד שהגיע Flexbox), ואיכשהו צריך מעט מאוד קוד בשביל לכתוב דברים יפים.
הדוגמא הקטנה בפוסט הפעם הזכירה לי למה למרות הכל אני די אוהב CSS.
בעקבות עיון זריז ברשימת היכולות החדשות של Firefox 45 קפצה לי לעין התמיכה ב ES6 Classes. בדיקה זריזה בכרום הראתה שאכן שני הדפדפנים מיושרים והפיצ'ר עובד בשניהם ללא טרנספילציה.
ספריית jQuery מפורסמת בפשטות שלה וביכולת להפוך עשרות שורות של קוד JavaScript קלאסי לשורה וחצי של ביטוי jQuery. אבל בינינו פשטות לא מתבטאת רק בכמה קל לקצר קוד, אלא גם בכמה קל להכנס ולהבין קוד שלא ראיתם לפני, ואולי זוהי נקודת המשיכה העיקרית של ריאקט.
מתכנתי jQuery רבים מעדיפים לבנות את הקוד בתוך jQuery Plugins, רכיבים שקל להשתמש בהם שוב ושוב בכל יישום. ספריית jQuery לא אוכפת שום מבנה על פלאגינים אלו ולכן כל מתכנת מפתח לעצמו הרגלי קידוד שונים.
קחו למשל את הקוד הבא עבור פלאגין למונה לחיצות.
רוב הדוגמאות לניתוב צד-לקוח באמצעות react-router מציגות הגדרת טבלת ניתוב שנראית כמו JSX. היתרון שזה מרגיש יותר ריאקטי אבל האמת שמדובר במסיכה בלבד: ריאקט ראוטר עצמה מתרגמת את כתיב ה JSX לטבלת ניתוב הבנויה כהיררכיה של אוביקטי JavaScript, בדיוק כמו הראוטר של אנגולר או ספריות ניתוב אחרות.
להלן דוגמא פשוטה לטבלת ניתוב בשני התחבירים לצורך השוואה ביניהם.
הספריה react-router היא ספריית ניתוב צד-לקוח המובילה (וכמעט היחידה) בריאקט. יש אף שיחשיבו אותה חלק אינטגרלי מיישום ריאקט בדומה לתפקיד של angular-router באנגולר. כמו הרבה ספריות אחרות באקו-סיסטם של ריאקט, גם react-router נראית במבט ראשון מאוד מבטיחה, עם הזמן מתחילים להתגלות החסרונות שלה ובסוף לומדים לעקוף אותם או לחיות עם מה שיש.