קורס Full stack development

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

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

נושאים מרכזיים: CSS anti-patterns, OOCSS, SMACSS, Tools

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

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

נושאים מרכזיים: SVG use cases and techniques, Font Icons, CSS3, Issues, Tools

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

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

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

נושאים מרכזיים: Flexible type, layout and media, Axes of Responsive design, Mobile viewport, Responsive images, Responsive patterns, JavaScript media queries, Tools and libraries

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

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

נושאים מרכזיים: Cross document/origin scripting, History, localStorage, Video/Audio, Geolocation, WebSockets, Device Access

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

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

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

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

חוק חדש מחייב את כל אתרי האינטרנט של חברות וארגונים להנגיש עצמם לבעלי מוגבלויות. במהלך השיעור נסקור ונלמד את משמעויות החוק החדש ומה זה אומר להנגיש היום אתר או אפליקציה לבעלי מוגבלויות. בשיעור נתרגל ונראה שהמאמץ הדרוש ברוב המקרים הוא מועט ומשתלב בצורה הרמונית עם מתודולוגיות פיתוח אחרות כמו Progressive Enhancement ואפילו Responsive Design. נגלה שהתמורה עבור כלל המשתמשים (לא רק בעלי מוגבלויות) ואף למפתחי האתר היא רבה במידה עד כדי כך שהחוק עצמו חדל מלשמש מוטיבציה בלעדית להנגשה.

נושאים מרכזיים: Web accessibility guidelines, Forms, Tables, Images, Navigation, Sectioning and Outlining, Interaction, JavaScript and Ajax

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

בכדי להוציא לשוק אנשי מקצוע עם ראיה רחבה וכישורי עבודה בצוות החלטנו שלא ניתן לפסוח על לימוד ותרגול מינימליים של הנושא. בבחירת הטכנולוגיה בחרנו ב-Node.js, שהיא למעשה JavaScript בצד השרת. זהו אחד הכיוונים ה"חמים" והמעניינים היום בתחום, המאפשר למפתח אחד ליצור מערכת שלמה בעזרת אותו Eco-system טכנולוגי (JavaScript).

נושאים מרכזיים:
Setting-up a Node server, Modules, Requests, responses, callbacks and events, Streams, Files, Working with data, Express framework, Working with data using MongoDB

הדרישות מאתר או אפליקציית Web היום הן עצומות: עיצוב מרשים, חוויית משתמש (UX) מצוינת, שמישות (Usability) גבוהה, כמויות רבות של תוכן ונתונים ותמונות ופיצ'רים מתוחכמים ומתקדמים.

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

בקורס נלמד לעומק את המדדים, הכלים וה -Best-practices  טיפים וטריקים מתקדמים שיעזרו לנו להגיע לרמה האופטימלית, כולל Network, Computing ו-Rendering Performance, כדי לספק למשתמשים שלנו מוצרים חלקים ואף לתרום לאיכות הסביבה על-ידי צמצום שימוש במשאבים כמו תעבורה ברשת וזמן סוללה.

נושאים נוספים: History, stats and Response time limits, Chrome DevTools Timeline and other Tools, Avoiding/Finding memory leaks and JavaScript profiling, Script loading and deferring, Browser rendering and Performance anti-patterns

אחד השינויים המשפיעים ביותר על תהליך העבודה של מפתחי Front-end .
הוא הופעתם של CSS Preprocessors. SASS  הוא המוביל מביניהם. כלים אלה יצרו מהפכה באיך שאנחנו כותבים היום CSS ונתנו לנו את היכולת להשתמש באלמנטים הקיימים בשפות תכנות שונות כגון משתנים, פונקציות, לולאות, מודולים ובאופן כללי יכולת לממש בצורה מיטבית את עקרונות ה-Object Oriented CSS. נלמד ונתרגל את הכלים הללו כך שהם יהפכו לטבע שני עבורנו, ויעזור לכם להשתמש בהם בהמשך הקורס ובעתידכם המקצועי.

נושאים מרכזיים: Structure, Partials, Nesting, Variables, Mixins, Functions, Loops,, Sprites, Best-practices.

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

נושאים מרכזיים:
Chrome DevTools, The Command Line Interface, Grunt, gulp, Webpack FED setup, Hot Module Reloading, VS Code, Cloud deployments.

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

גיט היא מערכת ניהול גרסאות לא-טריוויאלית ומסובכת יחסית, אך כשמכירים אותה לעומק מתחילים להבין מדוע אחת החברות המובילות בעולם היום היא Github – שירות ענן המספק שירותי Git לרוב פרויקטי ה-Open Source בעולם של ארגונים כמו jQuery, Twitter, Facebook ו-Adobe.

נושאים מרכזיים: SVN/Git overview and comparison, Git basics, Branching, Git workflow, Configuration

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

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

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

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

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

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

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

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

מקורות המידע והדרכים הכי טובות להיות עם האצבע על הדופק בתחום

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

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

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

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