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

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

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


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

תוכן העניינים:

  1. שאלות כלליות
  2. שאלות בנושא HTML
  3. שאלות בנושא CSS
  4. שאלות בנושא JavaScript
  5. שאלות בנושא נגישות (קישור לאתר חיצוני)
  6. שאלות בנושא בדיקות (Testing)
  7. שאלות בנושא ביצועים (Performance)
  8. שאלות בנושא רשתות (Networks)
  9. שאלות תכנות
  10. שאלות כיפיות

כיצד לסייע לפרויקט

  1. רשימת המשתתפים
  2. כיצד לתרום לפרויקט
  3. רשיונות

שאלות כלליות:

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

שאלות בנושא HTML:

  • מה עושה doctype?
  • כיצד תספק/י דף/אתר במספר שפות?
  • לאילו דברים חשוב להיזהר או לשים לב כשבונים אתרים במספר שפות?
  • מה התועלת של התואר (attribute) בשם "-data"?
  • מהן אבני היסוד של HTML5?
  • תאר את ההבדלים בין "cookie", "sessionStorage", ו"localStorage".
  • תאר את ההבדלים בין <script>, <script async>, ו"<script defer>".
  • מדוע זה בדרך כלל רעיון טוב למקם את תגיד ה-CSS מסוג <link> בין תגיות <head></head> וקוד JS בדיוק לפני התגית <body/>? האם ישנם מקרים יוצאי דופן?
  • מהו 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?
  • הסבר/י מדוע הקוד הבא לא יעבוד כ-IIFE:
    function foo(){ }();

    מה יש לשנות על מנת שהקוד יעבוד?
  • מה ההבדל בין 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 המופיעות למטה?

        var foo = "Hello";
    (function() {
      var bar = " World";
      alert(foo + bar);
    })();
    alert(foo + bar);

    מהו הערך של foo.length?

        var foo = [];
    foo.push(1);
    foo.push(2);

    מהו הערך של foo.x?

        var foo = {n: 1};
    var bar = foo;
    foo.x = foo = {n: 2};

    מה יעשה הקוד הבא?

        console.log('one');
    setTimeout(function() {
      console.log('two');
    }, 0);
    console.log('three');

    מה ההבדל בין ארבע ה-promises הבאות?

        doSomething().then(function () {
      return doSomethingElse();
    });

    doSomething().then(function () {
    
doSomethingElse();
    
});
    

    doSomething().then(doSomethingElse());
    

    doSomething().then(doSomethingElse);

שאלות כיפיות:

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

תומכים:

פרויקט זה החל ב-2009 כשיתוף פעולה של @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal.

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

Edit this page