Front-End Interview Questions

I have started applying to junior web developer positions to see if I have the necessary skills to start working. Today I had a call with a recruiter who asked me several questions that I didn’t know the answer to. The position she was trying to place me in was a front-end role so the questions are more geared towards the front-end development of web applications.

The questions:

  1. What are CSS sprites?
    CSS sprites are a way to combine multiple images into one image file to help performance. This way, you only need to load your images with one HTTP request.
    Read more on sprites and how to implement them here.
  2. What is the difference between px and em?
    • px stands for pixels and each pixel represents a dot on your computer screen. Pixels are fixed-size units which means that they are not scale-able to tablets and mobile devices. It’s great to use px for your styling and design, but not for font sizes.
    • em is best to use for scaling font sizes because it adapts to all devices and is very mobile friendly. 1em =¬†default document font size (usually 12pt).

    Kyle Schaeffer explains it best.

     

  3. What is the difference between visibility: hidden and display: none?
    • visibility: hidden hides the element, but the element will still affect the layout and take up the same space.
    • display: none does NOT occupy space on a page. It’s like the element has been removed.

     

  4. What are some JavaScript libraries you’ve used?
    DOM: jQuery, Prototype, MooTools, Dojo
    Web Application Frameworks: Meteor.js, Angular.js, React.js, Ember.js
    GUI: Bootstrap, jQuery UI
    See more here.
  5. What do you do when a browser can’t display HTML5?
    You can make a separate view for browsers that can’t render HTML5. You can also add JavaScript elements to display what you need in case HTML5 isn’t rendered.
    Test if a user’s browser has HTML5 capabilities with Modernizr.js (another JavaScript library!).
    Guide to making Internet Explorer display your HTML5 elements with JavaScript.

 

Want to share your own questions? Leave a comment!

Advertisements

Bonfire: Falsy Bouncer

Challenge:

Remove all falsy values from an array.

Falsy values in JavaScript are false, null, 0, “”, undefined, and NaN.

Use the following:
Array.filter()
Boolean objects


My Solution:

function bouncer(arr) {
  // Don't show a false ID to this bouncer.

  var newArray = [];
  for (var i = 0; i < arr.length; i++) {
    var arrBool = Boolean(arr[i]);
    if (arrBool === true) {
      newArray.push(arr[i]);
      //return newArray;
    }
  }
  return newArray;
}


bouncer([7, "ate", "", false, 9]);

To approach this challenge, I broke it down like this (my thinking process):
1. I need to pass each element of the given array (arr) through a loop to check if each item value is 'false' or 'true'.
2. I can use the Boolean object to check if an item is false or true. I’ll do that within my loop.
3. I don’t know how to use Array.filter(), even after reading the Mozilla page. I’ll ignore that for now.
4. What kind of loop will allow me to iterate through each item in the array? I can use a ‘for loop‘.
5. Do I need to use split()? No, .split() only works for strings.
6. Oh, if you have an array, you can check each individually by using their index number, which starts with 0. So, [0=>7, 1=>”ate”, 2=>””, 3=>false, 4=>9]. Then I’ll start my ‘for loop’ variable ‘i’ at 0 (var i = 0), iterate the length of the array (i< arr.length), and increment by 1 because I want to go through every index in the array (i++).
7. I’ll use an if statement within my loop to check if the values are true or false.
8. After I check if the value is true or false, I want to take all the true values and put them somewhere. Maybe I’ll create a new array called newArray and store all the true values (var newArray = []). I want to be able to return the newArray so I’ll declare this newArray outside of my loop.
8. To add items to an array, you can use .push(), with what you want to push included inside the parentheses.
9. I tried to do newArray = newArray.push(arr[i]); but was getting an error. I removed newArray = and now it works! Will need to look into why that is later.
10. I want to return the new array, so I’ll write return newArray outside of my for loop.
11. I also want to return my newArray in my if statement so that the for loop can access the newArray values.
12. Well, returning the newArray within my if statement causes an error, so I’ll comment that out.
13. Yay! Passed all tests!