Bloc Student Questions

00_basic_notes.md

Generally, I like to build a rapport with people I teach. Sometimes I'll give stronger answers and sometimes I'll just help them get unstuck but leave them engaged in the question so they can really get the subject. I like to think that my main value is that I've been there many times and I can help people find their confidence as they work. In the examples below I showed a few different approaches that may or may not be appropriate for different students.

Knowing my students is even more important when I choose language. If they're native English speakers and have no issues with metaphor, I prefer the style of communication I use below. A neurological study (I've lost the link) shows a tight correlation with the language centers of our brains when we try and read and understand software code and I've found that this kind of mentality helps people (myself included) get into a productive flow.

Thanks,

David

01_student_js_sample.html

<button id="btn-0">Button 1!</button>
<button id="btn-1">Button 2!</button>
<button id="btn-2">Button 3!</button>

<script type="text/javascript">
  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...
      document.getElementById('btn-' + btnNum).onclick = function() {
          // tell her what she's won!
          alert(prizes[btnNum]);
      };
  }
</script>

02_mentor_js_response.md

Hi Student,

It looks like things are coming along.

One way to start to discover what's going on is to change your alert from alert(prizes[btnNum]) to alert(btnNum). That will show you that btnNum isn't what you were thinking it was. If you think about it for a moment, you might see that btnNum did its job counting from 0 through all the prizes and setting up onclick on each button. At that point, it's stuck at it's highest number and isn't very useful when you click on the button. That might be a little confusing. It may help to imagine what the program knows when you set things up and what it knows when you click on a button.

Now that you know that btnNum won't help you find the prize, you'll need to get creative finding the right prize. An important clue is that 'this' inside the function returns the button and this.id returns something like "btn-2" for the third button. That might be enough of a hint for you and you can puzzle on it a little more. If not, I've got a few spoilers below.

---

One thing you could try is turn prizes into an object instead of an array and just lookup the id. Something like:

var prizes = {btn-0: 'A Unicorn!', btn-1: 'A Hug!', btn-2: 'Fresh Laundry!'};

Then, inside your function you could do something like:

alert(prizes[this.id])

On the other hand, you might want to tell the button a little more about how it relates to prizes with data attributes. The button would look like:

<button id="btn-0" data-index="0">Button 1!</button>

This will let you change your alert line to:

alert(prizes[this.dataset.index])

Data attributes are an HTML 5 feature that you may or may not like. I'd be interested if you came up with a different way to approach the problem.

Let me know if you're still stuck and we'll take a deeper look at things.

Thanks,

David

03_student_rails_question.md

Hey mentor,

I am starting to understand associations, but I'm still confused about through. What's the practical difference between a has_many and a has_many :through? What about has_one :through? When do I use them?

-Student

04_mentor_rails_response.md

Hi Student,

This is a great question. The short answer is you use has_many through and has_one through when you want to name and use a join table.

What is a join table? It is a table that joins two other tables. For example, a blog has many posts and a post has many comments. If you setup a database like that and you wanted to do things with the post model, then you'd want to use a has_many through.

What does that look like? In our blog example, it means that we could lookup blog.comments and it just lumps them up into one big group. That's not very interesting. We can also do something like blog.comments.where(:post_id => 1) which let's me use the join table's features to work with only some of the data.

What if I don't want to do anything with the join table? Then you can just create a has_and_belongs_to_many association. You'll name the join table using Rails conventions and then just use the relations like they're a has_many relationship.

What about a has_one through? This is like a has_many through. Honestly, for over 1,000 associations I've setup in dozens of Rails applications over 10 years, I've never used that once. However, there's an interesting example in the Rails Guide if you're curious.

Let me know if any of that is confusing or if you have follow up questions.

Thanks,

David

05_student_sql_question.md

Hey mentor,

Thanks for the lecture yesterday, it really helped me get motivated again. I've been working through this assignment about databases and I'm confused about "SQL injection." What does that mean and how does it work? How do I prevent it in my apps?

Thanks!

-Student

06_mentor_sql_response.md

Hi Student,

My favorite comic on SQL Injection is this:

There is a database here with a table for students. In it, there is a name field. The child's name is Robert'); Drop table students;--. That is, the name actually has a dangerous command in there that tries and deletes a table instead of just naming a student. If the database permissions were open enough, this would be a disaster.

One way to prevent SQL Injection is to not let users insert values directly into your database. You can take their values, check them or clean any dangerous values out of them before inserting or updating into the database. Usually you'll have an application in between your database and your users, so there is a place where you can check for these kinds of problems. Most frameworks like Node and Rails have tools to help make this easier for you.

Hope that helps,

David

07_student_angular_question.md

Hey mentor,

I'm really excited about starting on learning Angular. I'm having a problem understanding what angular is. Up until this point we've used jQuery, which we've called a library. Now we are using Angular, which is a framework. What's the difference? What are the drawbacks/benefits of using a framework like Angular vs a library like jQuery?

-Student

08_mentor_framework_response.md

Hey Student,

Great question. jQuery is like a workshop where you can add important things to your web pages. Angular is like a factory where you can create more complicated applications. With a library like jQuery, you can pick up the tools you need when you need them. With a framework like Angular, you're committing to producing web pages in a way designed by Angular.

For example, you might try to do a few things directly with jQuery like find a piece of the document and hide it or request some information from the server. With Angular, there is a bigger philosophy about how to do this so that large applications are still understandable. Angular will have you break down the problem a little differently and then help you coordinate all the parts of the application.

We'll walk through how to use Angular and what it means for you as a developer. The important thing to keep in mind today is that we're switching from adding some JavaScript to our pages to running the whole operation with Angular and JavaScript. If this has you curious, you can get a preview for Angular here or we'll walk through these ideas together in our next lecture.

Thanks,

David

09_algorithm_question.md

Hey mentor,

I hope you're doing well. I'm really enjoying learning algorithms, but I'm pretty confused by this Big O Notation thing. Can you explain how I'm supposed to figure out which notation my algorithm uses?

-Student

10_algorithm_answer.md

Hi Student,

The short answer is Big O Notation is a quick way to see how much work an algorithm needs to perform. The n in Big O, as in O(n) or O(n^2), is the number of inputs.

Also, remember this is an estimate. It's a way to think about the nature of the algorithm rather than providing a precise account of how the algorithm performs.

To estimate Big O, you need to translate the algorithm to something you understand. Sometimes I'll draw a picture or write down a list of steps the algorithm performs.

Next, you'll want to look at loops, or loops in loops, or more. If you have no loops, you're O(1). If you loop once for every item provided, O(n). If you loop inside a loop, O(n^2).

Don't forget to count operations you do outide your main function. If the algorithm is complex, I usually just think about the worst-case scenario.

Finally, if things are getting confusing, don't forget to write down notes or share what you think with someone else. Just making your thoughts more real can make them more clear. That's a generally good tool that I'll use every day of the week when I'm building systems.

Let me know if you have more questions.

Thanks,

David

11_ccs_question.md

Hey mentor,

I'm having a really hard time with some CSS. I've been given a PSD in an assignment. I know what the document should look like, but I'm getting this instead.

Can you help me with this? Here is my code!

-Student

12_css_answer.md

Hi Student,

The hint on this is the .pricing style is computed as display:block. The way you start to discover how this is working is with your browser Development Tools (or that's the way I broke down the problem and could begin to see an answer).

You'll notice how I am on the "Elements" tab on the left and the "Computed" tab on the right? That's where you want to be.

As I started to think about this problem, I actually had no initial idea why this wasn't working right. That's common and I didn't want you to think you had to be a magician to be a successful coder. Then, in the blue, I noticed it showed a height of 0 for the section. I played inside the Development Tools with various settings to try and rule out why that was. One really good tool for that is to just uncheck different styles to see how they're affecting the final output. I noticed that there was a display:block there, but no explicit setup on that style in your code. So, I switched to the Styles tab on the right and added an entry in the top where it says element. I switched it to display: inline-block; and started to get the results I wanted.

I give you the long play-by-play because sometimes even someone that's been around this many times can miss what's actually going on. Also, to make sure you had a way to start to see other funny things when they come up in the future. This is literally the process I've watched the most talented designers use hundreds of times as they've worked out their stylesheets. Finally, because the fix I'm talking about is only the first steps.

So, if you add display: inline-block; to the .padding section of your styles and refresh your browser, you're going to see a style that's starting to look closer to what you're after.

Next, you'll need to address the padding issue that comes up. There are two issues here: the right padding on the .pricing and the gray around each .tier. I'm going to suggest you play with that up to an hour and then reach out to me or a classmate on those issues if they're still not working as expected. The big win here is finding your productive spot. The rest is just details that come together as you build things.

Thanks,

David