Skip to content

Instantly share code, notes, and snippets.

@surrealdetective

surrealdetective/aa-bloc-mentor.md

Last active December 16, 2017 20:51
Show Gist options
  • Save surrealdetective/9e860ac2a4c06500385bfe8dc6f19351 to your computer and use it in GitHub Desktop.
Save surrealdetective/9e860ac2a4c06500385bfe8dc6f19351 to your computer and use it in GitHub Desktop.
Download ZIP
Fundamental Mentor - Candidate Assessment
Raw
aa-bloc-mentor.md

Section 1 Responses

  1. What does a doctype do?

doctype lets the browser know how to read your HTML. You should put it at the beginning of every HTML page. For HTML5, it looks like <!DOCTYPE html> (though in earlier versions of HTML it was more verbose).

If you don't use it on an HTML page, then different browsers will incorrectly read your HTML in different ways (for example, Internet Explorer will differ from Opera, which will also differ from Firefox).

By including the doctype at the top of the page, the browser can correctly parse the HTML, and the look of the page will be more predictable across browsers.

  1. Describe pseudo-elements and discuss what they are used for.

Pseudo-elements are a keyword that you add to the end of a css selector, like ::first-letter or ::first-line. They let you select a part of an element to style with CSS. For example, p::first-letter would let you style just the first letter of a paragraph like so:

p::first-lettter {
  color: #ff0000;
  font-size: xx-large;
}

Other pseudo-elements include ::after, ::before, and ::selection. In particular, ::after and ::before are really useful for adding content that has a stylistic purpose, like quotation marks. This keeps your HTML more semantic, so if later on a project decides to no longer use quotation marks, you can just change the CSS without having to change the HTML in every place quotation marks are used.

  1. Describe Floats and how they work.

Floats are a way to represent numbers where there's a fixed number of decimals at the end. This way of representing numbers is imprecise because not all numbers can be represented with a fixed number of decimals, like 8/9 or π.

The reason we often use Floats in programming languages is because you can use a fixed amount of space to store a number. So in exchange for some imprecision, you ensure you only use a fixed amount of memory.

  1. Demonstrate what this JavaScript code will output and explain why it outputs what it does?
console.log(0.1 + 0.2);

You should see:

> console.log(0.1 + 0.2);
0.30000000000000004
undefined

The function console.log outputs a message to the web console. In this case, console.log outputs the return value of the expression 0.1 + 0.2 as a string. Once console.log outputs this message, it then outputs its own return value, which is undefined.

Notably, the return value of 0.1 + 0.2 is not 0.3. Because Javascript stores numbers as Floats, not all numbers can be fully represented. So when you add 0.1 and 0.2, both of which cannot be represented accurately in Javascript, you only get an approximation of 0.3.

  1. What is the difference between classical inheritance and prototypal inheritance?

In classical inheritance, there's classes and subclasses. They act like blueprints that an object uses when it gets created. For this reason, a subclass has an "is-a" relationship with its superclass. For example, a "ferrari" subclass "is-a" "car" class. The methods inside the car class will be available to the ferrari class.

In prototypal inheritance, you share methods from other objects. Objects that inherit from their prototypes get access to their prototype objects’ properties and methods. Notably, references to a prototype’s methods refer to actual objects and will use the same memory space if there is an "obj2" that shares the same prototype. For this reason, an object has a "has-a" relationship with its prototypes. For example, a "person" object "has-a" “gender” prototype.

  1. What's the difference between a variable that is: null, undefined or undeclared?

Undefined is a Javascript type that represents a lack of existence. It is the initial value of variables before they get assigned a value by your code.

Null also represents a lack of existence. Your code should use this value when assigning variables a value that means non-existence.

Undeclared is when a variable has not been instantiated. If you try to reference a variable that is undeclared, then Javascript will throw an error because it's not in any scope.

  1. Explain the difference between mutable and immutable objects.

Mutable means you can change a value. Immutable means its unchangeable. This distinction is relevant when multiple variables reference the same object. If it's mutable, then code is vulnerable to unpredictability if some distant code updates it. By contrast, an immutable object is more reliable because it can't be changed after it's instantiated.

  1. Explain the difference between synchronous and asynchronous functions.

A synchronous function is one where all of its tasks are done one-at-a-time, such that a new task does not start before a previous task is finished.

An asynchronous function is one where new tasks can be started, even if a previous task hasn't finished.

So if you have a task that takes a long time and also can be done independently of other tasks, you can use an asynchronous function to make the work get done more efficiently. However, this might be trickier to code.

Section 2

General Programming Response

Good question. There's no definite answer for when for loops are better than while loops, or vice versa. You can always you either and you'll be fine.

That said, I would choose one based on what is more readable for a given situation. So if I had a variable like var userScrolling = true that would be set false when users stopped scrolling, then I'd probably use a while loop because it would be more readable.

Alternatively, I'd use for loops when doing iterations over an array of objects or i number of times because the for-loop-syntax shows upfront how many times it will be run.

HTML/CSS Response

Hey Student,

Glad you reached out! This is a frequent issue that comes up when you your CSS uses the float property to position divs.

The issue is that the .tier divs that are floated are jumping outside of their parent container .pricing-tiers.

To fix it, you need to make 3 adjustments:

  1. Add this class to your CSS file .group:after { content: ""; display: table; clear: both; }

This code is known as “clearfix” and makes it so that floated divs won't jump outside of their parent containers.

  1. Add the .group CSS class to your HTML file

  2. Adjust your .pricing class in your CSS file

I noticed that your pricing class has both right and left paddings, in addition to top and bottom paddings. This makes the page look weird after you fix the float problem with clearfix. I'll let you look into how to fix this on your own.

To read more about clearfix, see here:

Javascript Response

Hey Student,

This is a great bug! It is really confusing why prizes[btn] is not printing 'A Unicorn!' But the reason why has to do with how the code gets run in Javascript.

Right now, you're putting an event listener on these buttons to run the code alert(prizes[btnNum]) when they get clicked.

Because this code gets run later on, the value of btnNm is 3 because of how the for loop works.

You can check it yourself by changing the alert line to alert(btnNum). You can also try alert(prizes[3]) and see that you get undefined.

To fix this issue, you need to have Javascript remember the btnNum as it's going through the for loop. There's a convenient way to do this.

var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
for (var btnNum = 0; btnNum < prizes.length; btnNum++) {
  // for each of our buttons, when the user clicks it...
  let forNum = btnNum;
  document.getElementById('btn-' + btnNum).onclick = function() {
    // tell her what she's won!
    alert(prizes[forNum]);
  };
}

In this case, using line 4 — let forNum = btnNum; and line 7 — alert(prizes[forNum]); will tell Javascript to remember the value of btnNum while it's going through the for loop.

How this works exactly has to do with "closures" in Javascript, which is a deeper topic for another time. Read more about let here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

SQL/Security Response

Hey Student,

Glad you've got some momentum.

SQL injection is a way for attackers to get access to data that doesn't belong to them. At a high-level, attackers trick your app into processing SQL code that you didn't write and that will instead do something like return all the user information in your users table. The attackers generally insert this code through one of your app's forms, like a login form.

That's bad, so a lot of effort goes into preventing SQL injection.

Any programming framework, like Rails or Angular, will have a standard way of preventing SQL injection. They work by making it impossible for attackers to add their custom SQL code. To prevent SQL injection, you should follow the conventions of the particular framework you're using.

For example, the Rails documentation has a good explanation of their conventions and also more about how SQL injection works: http://guides.rubyonrails.org/security.html#sql-injection

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment