Single Table Inheritance

I'm currently building an app that needs to have a base model and sub-models. I wasn't sure how to do that, so I did some research online and found STI or Single Table Inheritance.  The idea behind it is that the sub-models will inherit from the base model, so it will be able to use all of the attributes of the base model.  In the migration of the base model you must have a type field. This is how rails knows that other models will be inheriting from this model.  In the example below the singer and dancer models will inherit from the entertainer model, so now we can create a new entertainer object an be able to use the attributes associated with entertainer on that object.

Lexical Scoping

In the example above I was able to find all of the even numbers in an array using lexical scoping and the .filter method.  Because I defined the getNumbers function inside of the parent function getEvenNumbers the child function getNumbers knows about numbersArray.  So when I call the .filter method it will iterate through each element in the array passed to numberArray then pass  it to the callback function getNumbers which checks to see if each element is divisible by 2.  .filter will return the results in a new array.

Anatomy of a JavaScript function

JavaScript functions are very different from Ruby methods. While reading Intro to Functions I became quite confused because I am so used to the way methods work in Ruby. I did understand some of it. Here is what I observed.

In JavaScript defining properties of pure functions is that they always return the same values when given the same arguments.
A function is built by first using the word function then the name we want to call the function followed by the names of the argument/s in parenthesis.  Last would be the body of the function. Ex:

Return is used to define the value that the function returns. If there is no expression after return the function will return undefined


In this example both the top level variable and the local variable are named variable.  The function printVariable is called inside of the function test. Even though printVariable was called inside of test the local variable is not available to the printVariable function.

Lexical Scoping is when a variable visibility is determined by the functions placement in the program text. Both local variables and top-level variables are visible. In the example because the child function was defined in the parent function the local variable from the parent function is the only variable visible to it.

Differences between JavaScript and Ruby

Next week at the Flatiron School we will be learning JavaScript. We were asked to blog about some the differences. Here is what I have observed.

Values 

In JavaScript datatypes such as string or number are called values while in Ruby they are just called data types.  Other values in JavaScript are booleans, objects, and, undefined values. Operators in JavaScript are used in the same way as they are in Ruby.  One operator in JavaScript that I learned about is typeof. It can give you the type of value something is. Ruby has something similar which is the method class which can give you the class of an object. 

Variables

JavaScript and Ruby both hold data in variables. In JavaScript syntax var is used before the variable name and in Ruby the variable name alone is used. 

JavaScript

Ruby

 Functions in JavaScript are similar to methods in Ruby.  In JavaScript alert is a variable that contains a function that takes one parameter and shows the result of the expression.  This example  in JavaScript will return the largest number in the argument. 

Math.max is the function that returns 4. In Ruby the method that does this is called max. The same example in Ruby would look like this:

Loops

Loops are used in Ruby and JavaScript in the same way, but the syntax is different. I will show an example of how a while loop looks in JavaScript vs. Ruby.

JavaScript

Ruby

MVC

I found this picture online which I felt was the clearest visual representation that I've seen of the MVC principle. Today at the Flatiron School we learned Rails which uses the MVC principle. I like to use CVM because it helps me to remember the order it actually flows in. Here I will go through what the Model, View, and Controller do in Rails.

Controller - has the actions that give orders to the Model
Model - when a migration is created the model talks to the database and retrieves the information that controller is asking for. The model inherits from ActiveRecord.
View - after model retrieves data from the database it sends the information to the controller. The controller then calls the view. The view displays the logic from the model in the form of HTML in the browser.

The Box Model

Currently at The Flatiron School we are learning HTML and CSS, so I decided to blog about the box model because it's a very important part of HTML.

The box model is based on every element being a rectangular box that can have padding, margin, and border.  Here is an example:

The element with it's content are surrounded by a padding, border, and margin.  All make up the box model.

Margin - the margin is invisible and is used to give the element space from other elements on the page. Margin properties can be margin-top, margin-bottom, margin-left, and margin-right.
Ex:

Border - border creates a frame around an element. Border needs a width, style, and color. Border properties can be border-top, border-bottom, border-left, and border-right. Ex:

Padding - padding provides spacing within an element.  Padding properties can be padding-top, padding-bottom, padding-left, and padding-right. Ex:

To calculate the total width of an element we would add margin-right + border-right + padding right + width + margin-left + border-left + padding left.
To calculate the total height of an element we would add margin-top + border-top + padding top + height + margin-bottom + border-bottom + padding bottom.

Build This Button in CSS Challenge

Today we were given the the challenge to build this button
using just CSS. We first did one of our own then we were split into two teams where we were challenged to build it as a team. When doing my own I first thought it would be difficult because we were not allowed to modify the html. So I decided to do a search on how to use CSS to create buttons. One website showed how I could use display block within my anchor element selector to create a block, so I used that. Then I used properties like font-size, color, height, width etc. to get my block to look similar to the original block. I got stuck on making multiple blocks, so I did a web search again and found that to do this I needed to create two block shadows like so box-shadow: 0 0 0 3px #888888, 0 0 0 6px #000;. That worked, but it didn't really give me the desired effect.  When we started the team challenge my button was not complete, but there were others on my team who had completed theirs. When looking at my team members code I saw some things that I could have done differently. Since we could not touch the html I could have used text-transform to make all of the letter capital. I could have used 4 different box shadows. In the code the team used each line was to show each of the margins.  I also learned that you can use CSS symbols to get those stars to appear.
This is the type of question that is asked in interviews. Now that I have tried this on my own and now know the solution. I would attempt to do this differently. I would first figure out what type of block I would need then I would look at the code to see how many margins I would need. I think that once I am able to figure those out then the rest will be easier for me.