שאלות לראיון עבודה לפיתוח צד לקוח

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

שאלות כלליות

• מה למדת לאחרונה ומה מרגש אותך בתכנות.
• תאר אתגר טכני וכיצד פתרת אותו.
• באילו שיטות שיפרת ביצועים בתהליך בנייה ותחזוקה של אתר.
• עקרונות SEO בהם השתמשת לאחרונה.
• טכניקות להתמודדות עם אתגרי אבטחה בפיתוח צד-לקוח.
• פעולות לשיפור ניהול ותחזוקת קוד בפרויקטים.
• תאר את סביבת הפיתוח המועדפת עליך.
• מערכת ניהול גרסאות בה אתה משתמש.
• תאר את תהליך העבודה שלך בבניית אתר.
• הדרך הטובה ביותר להטמיע 5 גיליונות סגנונות שונים באתר.
• הסבר על "Progressive Enhancement" לעומת "Graceful Degradation".
• כיצד תבצע אופטימיזציה לרשימת המשאבים של האתר.
• כמה משאבים הדפדפן מוריד מדומיין נתון בכל פעם, ובאילו מקרים יש יוצאי דופן.
• שלוש דרכים להפחתת זמן טעינת דף.
• מה תעשה אם הצטרפת לפרויקט שמשתמש בטאבים כשאתה מעדיף רווחים.
• תאר כיצד תיצור דף מצגת פשוט.
• איזו טכנולוגיה היית לומד לעומק בשנה הקרובה.
• הסבר את החשיבות של standards ושל standards bodies.
• מהו "Flash" או תוכן בלתי מעוצב (FOUC), וכיצד תימנע ממנו.
• מהם "ARIA" וקוראי מסך, וכיצד תיצור אתר נגיש.
• נקודות בעד ונגד אנימציית CSS ואנימציית JavaScript.
• מהן ראשי התיבות "CORS" ובאיזה תחום הן עוסקות.

שאלות בנושא HTML

• מה עושה doctype.
• כיצד תספק דף/אתר במספר שפות.
• דברים שחשוב לשים לב אליהם בבניית אתרים מרובי שפות.
• מה התועלת של התואר (attribute) בשם "-data".
• מהן אבני היסוד של HTML5.
• הבדלים בין "cookie", "sessionStorage", ו"localStorage".
• הבדלים בין , , ו``.
• מדוע מומלץ למקם תגיות CSS מסוג בין תגיות, וקוד JS לפני `` תגית, ובאילו מקרים יש יוצאי דופן.
• מהו progressive rendering.
• לשם מה משתמשים בתכונה (attribute) בשם srcset בתגית image ואיך הדפדפן מעריך אותה.
• האם השתמשת ב-HTML templating languages אחרות בעבר.

שאלות בנושא CSS

• מהי selector specificity וכיצד זה עובד.
• מה ההבדל בין resetting לבין normalizing הגדרות CSS, ובאילו מהן תבחר ומדוע.
• תאר מהם Floats וכיצד הם עובדים.
• תאר מהו z-index וכיצד stacking context נוצר.
• תאר מהו BFC או Block Formatting Context, וכיצד הוא עובד.
• מהן צורות ה-clearing השונות, ובאילו מהן כדאי להשתמש ולשם מה.
• כיצד תטפל בבעיות עיצוב המאפיינות דפדפן מסוים.
• כיצד תתאים את האתר שלך לדפדפנים בעלי מגבלת מאפיינים (feature-constrained), באילו טכניקות תשתמש.
• מהן הדרכים השונות להסתיר תוכן ולאפשר תצוגה שלו באמצעות קוראי מסך.
• האם השתמשת בשיטת העיצוב grid, ואם כן - איזו שיטה אתה מעדיף.
• האם השתמשת ב-media queries או בעיצוב מיוחד למובייל.
• האם אתה מכיר את המונח styling SVG.
• תוכל לתת דוגמה לסוג נוסף של '@media' פרט ל-'screen'.
• מהם כמה עקרונות של כתיבת CSS אפקטיבי.
• מה היתרונות/ חסרונות בשימוש במעבדי CSS, ומה אהבת/ אהבת פחות במעבדי CSS שבהם השתמשת.
• כיצד תטמיע עיצוב לווב שמשתמש בפונטים לא סטנדרטיים.
• הסבר כיצד הדפדפן קובע אילו אלמנטים מתאימים לאיזה סלקטור.
• הסבר מהם pseudo-elements ולמה הם משמשים.
• הסבר את הבנתך בנושא box model, וכיצד תאמר לדפדפן לרנדר את העיצוב במודל box model אחר.
• מה עושה { ;box-sizing: border-box } *, ומה יתרונותיו.
• על מה אחראי התואר display, ותן דוגמה למספר שימושים שלו.
• מה ההבדל בין inline לבין inline-block.
• מה ההבדל בין relative, fixed, absolute ו-statically positioned.
• באילו CSS frameworks השתמשת באופן מקומי, או בפרודקשן, וכיצד תשנה/ תשפר אותם.
• האם יצא לך להתנסות ב-CSS Flexbox או Grid specs.
• הסבר את ההבדל בין לבנות אתר ריספונסיבי לבין לבנות אתר בגישת mobile first.
• האם עבדת עם גרפיקת רטינה, ואם כן, מתי ובאילו טכניקות השתמשת.
• האם ישנה סיבה שבה תשתמש ב-()translate במקום absolute positioning, ולהיפך, ומדוע.

שאלות בנושא JavaScript

• הסבר את המונח event delegation.

• הסבר כיצד this עובד בג׳אווהסקריפט.

• הסבר כיצד prototypal inheritance עובדת.

• מה דעתך על AMD לעומת CommonJS.

• הסבר מדוע הקוד function foo(){ }(); לא יעבוד כ-IIFE, ומה יש לשנות על מנת שהקוד יעבוד.

• מה ההבדל בין null, undefined, ומשתנה שלא הוגדר, וכיצד תבדוק את מצבם של משתנים מסוג זה.

• מהו closure וכיצד תשתמש בו.

• הסבר את ההבדל בין לולאת forEach לבין לולאת.map(), ומה הסיבה לבחור אחד על פני האחר.

• לשם מה משתמשים על פי רוב בפונקציה אנונימית.

• כיצד את/ה מארגן/ת את הקוד שלך (תבנית מודולים, תורשת קלאסית).

• מה ההבדל בין host objects לבין native objects.

• מה ההבדלים בין שלוש הדוגמאות הבאות:

• function Person(){}

• var person = Person()

• var person = new Person()

• מה ההבדל בין.call לבין.apply.

• הסבר מהו Function.prototype.bind.

• מה ההבדל בין feature detection, feature inference לבין שימוש ב-UA string.

• הסבר מהו Ajax כמה שיותר לעומק.

• מהם היתרונות והחסרונות של שימוש ב-Ajax.

• הסבר כיצד JSONP עובד, ובמה הוא שונה מ-Ajax.

• האם השתמשת בעבר ב-JavaScript templating, ואם כן, באילו ספריות השתמשת.

• מהו hoisting.

• מהו event bubbling.

• מה ההבדל בין attribute לבין property.

• מדוע הרחבה של אוביקטים מסוג built-in בג׳אווהסקריפט אינו רעיון טוב.

• מה ההבדל בין document load event לבין document DOMContentLoaded event.

• מה ההבדל בין == לבין ===.

• הסבר את מדיניות ה-same-origin בהקשר של ג׳אווהסקריפט.

• כיצד תגרום לקוד duplicate([1,2,3,4,5]); לפעול כך: [1,2,3,4,5,1,2,3,4,5].

• מה משמעות השם Ternary operator, ומה מרמזת המילה Ternary.

• מהו "use strict";, מה היתרונות והחסרות של שימוש בכלי זה.

• צור לולאה שמבצעת עד 100 איטרציות תוך כדי שהיא מדפיסה "fizz" במכפלה של 3, "buzz" במכפלות של 5, ו-"fizzbuzz" במכפלות של 3 ו-5.

• מדוע זה בדרך כלל רעיון טוב לא להשתמש ב-global scope של אתר.

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

• הסבר מהי אפליקציית עמוד יחיד (single page app), וכיצד תיצור כזו שתהיה SEO-friendly.

• כמה ניסיון יש לך בשימוש ב-Promises ו/או ה-polyfills שלהן.

• מהם היתרונות והחסרונות של שימוש ב-Promises לעומת שימוש ב-callbacks.

• מהם כמה מהיתרונות והחסרונות של כתיבת קוד ג׳אווהסקיפט בשפה שמתקמפלת (compiles to) ג׳אווהסקריפט.

• באילו כלים וטכניקות תשתמש/י כדי לדבג (debugging) קוד שנכתב בג׳אווהסקריפט.

• באילו constructions של השפה תשתמש/י כדי לבצע איטרציה על איברים של אוביקט ואיברים של מערך.

• הסבר את ההבדלים בין אוביקטים הניתנים לשינוי לבין כאלה שאינם ניתנים לשינוי (mutable/immutable).

• תן דוגמה לאוביקט שאינו ניתן לשינוי (immutable) בג׳אווהסקריפט.

• מהם היתרונות של immutability.

• כיצד תוכל להשיג immutability בקוד שלך.

• הסבר את ההבדל בין פונקציות סינכרוניות לא-סינכרוניות.

• מהו event loop, מה ההבדל בין call stack לבין task queue.

• הסבר את ההבדלים בשימוש ב-foo במקרים הבאים:

• function foo() {};

• var foo = function() {};

• מה ההבדלים בין משתנים שנוצרו באמצעות מילות המפתח let, var, ו-const.

• מה ההבדל בין constructors של מחלקה ב-ES6 לבין constructors של פונקציה ב-ES5.

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

• מה היתרון בשימוש של סינטקס החץ => עבור method בתוך constructor.

• מה ההגדרה של פונקציה מסוג higher-order.

• תן דוגמה ל-destructuring של מערך או של אוביקט.

• תן דוגמה לגמישות ביצירת strings שמציע שימוש ב-Template Literals הזמין ב-ES6.

• תן דוגמה לפונקציית curry, והסבר אילו יתרונות מציע סינטקס זה.

• מה היתרונות שבשימוש ב-spread syntax ומה ההבדל בינו לבין rest syntax.

• האם ניתן לשתף קוד בין קבצים.

• מה הסיבה שבגינה תרצה ליצור static class members.

שאלות בנושא בדיקות (Testing)

• מהם חלק מהיתרונות והחסרונות בביצוע בדיקות לקוד שלך.
• באילו כלים תשתמש כדי לבדוק את הפונקציונליות של הקוד שלך.
• מה ההבדל בין unit test לבין functional/integration test.
• מה היתרונות של כלי linting לקוד.

שאלות בנושא ביצועים (Performance)

• באילו כלים תשתמש כדי לאתר באג ביצועים בקוד שלך.
• באילו דרכים ניתן לשפר את ביצועי הגלילה באתר.
• הסבר את ההבדלים בין layout, painting ו-compositing.

שאלות בנושא רשתות (Networks)

• מדוע היה נהוג לספק את נכסי האתר (assets) מתוך מספר דומיינים שונים.

• הסבר את התהליך מרגע שהמשתמש מקליד URL עד לסיום טעינת האתר על המסך.

• מה ההבדלים בין Long-Polling, Websockets ואירועי Server-Sent.

• הסבר את ה-headers הבאים:

• Diff. between Expires, Date, Age and If-Modified-...

• Do Not Track

• Cache-Control

• Transfer-Encoding

• Transfer-Encoding

• ETag

• X-Frame-Options

• מהן HTTP methods, מנה את ה-HTTP methods שאתה מכיר, והסבר אותן.

שאלות תכנות

• הערך של foo כאשר var foo = 10 + '20'.

• מה יהיה ה-output של הקוד console.log(0.1 + 0.2 == 0.3).

• כיצד תגרום לקוד הבא לעבוד:

• add(2, 5); // 7

• add(2)(5); // 7

• מה יהיה הערך המוחזר מהקוד "i'm a lasagna hog".split("").reverse().join("").

• מה הערך של window.foo כאשר ( window.foo || ( window.foo = "bar" ) ).

• מה תהיה התוצאה של שתי הודעות ה-alert המופיעות בתרגיל.

• מה הערך של foo.length כאשר הקוד הוא כמו בתרגיל.

• מה הערך של foo.x כאשר הקוד הוא כמו בתרגיל.

• מה יעשה הקוד המובא בתרגיל.

• מה ההבדל בין ארבע ה-promises המובאות בתרגיל.

שאלות כיפיות

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