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

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

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

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

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

ריאקט (React) הינה ספריית צד-לקוח לבניית ממשקי Web מורכבים. הספריה מקבלת הרבה תשומת לב בחודשים האחרונים מאחר והיא מציעה גישה חדשנית לפיתוח יישומי צד-לקוח מורכבים ונמצאת כבר כיום בשימוש אתרים גדולים ביניהם פייסבוק, Instagram ו Khan Academy. בפוסט זה אציג את הספריה ונפתח באמצעותה משחק פשוט כדי להבין איך נראה קוד ריאקט ובמה היא דומה או שונה לספריות צד-לקוח אחרות.

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

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

נניח שאתם רוצים לבנות גלריית תמונות מבוססת HTML מתוך תיקיית תמונות על המחשב. עבור כל תמונה תצטרכו לרשום אלמנט img מתאים עם src ו alt, עטוף בכמה אלמנטי div כדי שיהיה קל לעצב אותו. עכשיו נניח ויש לכם כמה עשרות תמונות כאלו בתיקייה. בואו נפתח וים ונראה כיצד עורך טקסט טוב יכול לחסוך לנו הקלדה.

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

זה זמן רב שהקוד שאנו כותבים לא נשלח ישירות לדפדפן. אנו משתמשים בספריות איחוד וצמצום (Minification) כדי לשלב מספר קבצי קוד לקובץ אחד לצורך שיפור ביצועים. אנו משתמשים ב CSS Precompilers כדי לכתוב פחות CSS ולהגיע לקוד קל יותר לתחזוקה. אז למה בעצם אנחנו נרתעים מ ES6 ?