Interview Prep

It's that time again.

Couple of companies, won't say which until the end. One is an unknown in terms of difficulty, the other can be assumed to have the hardest difficulty of any technical interview. Over the next few weeks, I will document my preparation and practice problems here. I'm not 100% sure which topics should be reviewed/covered, but here's what I'm starting with:

-Sass
-CSS (selectors, specificity, basic transitions/animations, psuedoclasses/elements)
-Basic responsive web refresher
-DNS
-Browsers - Chrome (caching, perf, rendering, etc).
-DOM API
-Javascript
-HTTP
-REST APIs
-Node/Mongo/SQL/Express
-Angular (mostly 1.x, some 2)

-Algorithms (noooooooooooo)

-Review basic dev tools like git/gerrit/npm

Time to go next level!

Solving a JS Coding Exercise : Building a Color Picker

This is an coding problem I was asked at an interview a year ago. I understood the concept during the interview, I knew what I had to do, but I didn't code it right in the 30 minutes and I failed the interview.

I did it in five minutes this time. See, practice does work!!


Part 1: Here's the deal. Build a color picker. There should be an input where a user can type in a hex color, like #aabbcc. Whatever color is written in the box should be displayed in a div on the screen. So if I type #aabbcc in the input field, I should see a div whose color is #aabbcc.

For this stage, go ahead and have the background color update whenever any change happens to the input box.




Part 2: Change this code to only update the color when the user clicks on a button.






Solution:

Pretty simple, we want an input that listens for either the 'input' event or a button that listens for the 'click' event. Our event handler should read the hex value from the input, and set the div's background color to that value.

HTML:

<input type="text" id="inputBox">
<button id="inputButton">
Pick Color
</button>
<div id="colorBox">
</div>


CSS:
#colorBox{
  margin-top:20px;
  height:100px;
  width:100px;
  border: 2px solid black;
  background-color:#fff;
}



JAVASCRIPT For Part 2 (for part 1, listen to 'input' event instead of 'click':

var oInput = document.getElementById("inputBox");
var oButton = document.getElementById("inputButton");
var oBox = document.getElementById("colorBox");
oButton.addEventListener('click', updateColor,false);

function updateColor(){
  var color = oInput.value;
  oBox.style.backgroundColor = color;
}

Solving a JS Coding Exercise: Week 1

Hi Everyone,

I'm going to start a weekly series where I walk through an online Javascript coding exercise. These posts are to give you a feel for the kinds of questions that will be asked of you in Javascript interviews. I will be drawing these questions from sources I find online, from my own experience being interviewed, and from the questions I ask people when I interview them.

Try to solve the problem yourself before reading my solutions. Otherwise, you won't grow.

This problem comes courtesy of Chris Chen.

Time Limit(optional): You should be able to do this in under 30 minutes. I'd aim for 15mins or so.

Here's a link to the live coding exercise:
http://codepen.io/chris-chen-nbcuni/pen/mnfBG

If that doesn't work, here's the problem description:
HTML:
<!--
  Instructions:
  When the value changes in the text field, multiply the 2 values and display in span with ID total.
  If the total is greater than 0, make the text green. Everything else make it red.
-->

<input id="value1" type="text" value="" /> x <span id="value2">1234</span> = <span id="total" class="other">?</span>

CSS:
.positive { color: green; }
.other { color: red; }

Javascript:








SOLUTION:
We need to perform a mathematical operation whenever someone changes the contents of the input box. Your first thought immediately should have been to assign an event listener to that input box. How?
// #1: get a reference to the input box and other elements
var oInput = document.getElementById('value1');
var CONST = 1234;

var oOutput = document.getElementById('total');
// #2: and assign it an event listener for the 'input' event
oInput.addEventListener('input',onInputEvent,false);

The input event fires whenever the contents of an <input> or <textarea> element change.
https://developer.mozilla.org/en-US/docs/Web/Events/input
You could probably solve this by listening to other events, but input makes the most sense here.
Now, we need to multiply the value in the <input> element by 1234 whenever the input changes, and check to see if it's greater than zero. We also want to display the product of this multiplication as well.

// #3:  write out the function for the event listener
function onInputEvent(){
  var nResult = CONST * parseInt(oInput.value);
  oOutput.innerHTML = nResult;
  if(nResult){
    oOutput.classList.remove('other');
    oOutput.classList.add('positive');
  }else{
    oOutput.classList.remove('positive');
    oOutput.classList.add('other');
  }
}

That does the trick. I prefer to get the references to the DOM elements outside of the listener function, so that they aren't rerun every time the event handler fires.

Javascript's Type Coercion

Hi Everyone,

Today we are going to tackle an interesting, and somewhat controversial, topic in Javascript - Type Coercion.

Quick recap - Javascript DOES have types. You'd be surprised how often people get that simple fact wrong.

Javascript types are:
-Primitives-
number
string
boolean
undefined
null

-Complex-
Object
Symbol (ES6)

Type coercion is different from type conversion in that it is handled implicitly by the JS engine at runtime, as opposed to being handled explicitly by the author at writing time.

An example of type conversion would be:
1 + Number("12");

Here, we are explicitly converting the string "12" to a number by calling the function Number.

An implicit coercion would be:
1 + "12";
which returns the string "112". Somehow, our number 1 was coerced into a string!

So, coercion is basically what happens when you give the Javascript engine operands of different types, without explicitly converting one into the other.

Today, we are going to learn which rules Javascript applies when coercing values.

*A quick point before we begin. Every Javascript coercion will result in a scalar primitive value; either a number, string, or boolean. That's it! Never anything complex like an object or a function.

In section 9, the ES5 spec defines what are called abstract value operations. These are internal-only operations that are used in coercion. We will look at four of them here; ToString, ToNumber, ToBoolean, and ToPrimitive.

ToString:
Anytime a non-string value is coerced into a string, ToString is invoked internally.
For primitives, the result is pretty straightforward:
null -> "null"
undefined -> "undefined"
true -> "true"
42 -> "42"
Things are more interesting if you are trying to convert something like an object or a function.
Unless you choose to override an object's ToString method, it will use the default one of Object.prototype.toString(), which will return the internal [[Class]] property of that object. This is why you usually see something like "[object Object]" when you run something like console.log({});

See if you can predict the output of the following code:
true + " " + 42


Answer:
It's the string   "true 42"

So far so good? Let's move on to the next abstract operation.

ToNumber:
This comes into play whenever a non-number value is forced to behave like a number - for example, in a mathematical operation. For example, in 3 - '2';  The string '2' needs to behave like a number.
Some basics, when toNumber is called on each of the following:
true -> 1
false -> 0
undefined -> NaN
null -> 0
strings will be NaN if it can't be coerced into a meaningful number.
"7" -> 7
"seven" -> NaN

Objects and arrays will first be converted to their primitive value ( one of the types we just discussed) via toPrimitive. From there, the resulting value is coerced to a number via toNumber.

You might be wondering just how toPrimitive takes something like an object and turns it into a primitive. In the next update, we will discuss just how this works.

ToPrimitive: