Skip to content

Instantly share code, notes, and snippets.

@sethpuckett
Last active July 10, 2018 22:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sethpuckett/51dcb9fa9c45db1abca28a89137b747d to your computer and use it in GitHub Desktop.
Save sethpuckett/51dcb9fa9c45db1abca28a89137b747d to your computer and use it in GitHub Desktop.
Bloc Full Stack Mentor Assessment

Javascript

Hey, Student! Your solution looks good. You've almost got it. One of the frustrating things about writing software is that you can be 99% there... and one bug breaks the whole thing!

Here's a tip that might help you here and with similar issues in the future.

When debugging, it's useful to experiment by isolating variables and testing with simpler scenarios. Try replacing alert(prizes[btnNum]); with alert(prizes[0]);. This isn't the functionality we want in the end, but simplifying the logic will tell us if there's a problem with the btnNum variable or with the alert array itself.

You should see that with prizes[0] the alert box displays A Unicorn! just as expected! This is a big clue. It means the problem must be with btnNum.

If it's not clear yet what the problem is try changing the code to alert(btnNum); This way you can see exactly what value is in btnNum when the function is called. See the problem yet? Remember that your array only contains elements 0, 1, and 2!

Rails

Hey, Student! Good question! To understand :through it helps to understand the different kinds of relationships that can exist between entities:

  • many-to-one: For example, in a blogging app a single author could be associated with many blog_posts
  • many-to-many: For example, in the same app a blog_post could contain multiple tags, and each of those tags could be associated with multiple blog_posts
  • one-to-one: For example, an author might have exactly one associated author_history model.

Modeling many-to-many and one-to-one relationships in a database typically involves using an intermediate entity. This is what :through is for. It allows you to define the intermediate entity for these types of relationships.

In summary:

  • many-to-one: has_many
  • many-to-many: has_many :through
  • one-to-one: has_one :through

React / jQuery

Hey, Student! Good question. The terminology can be a lot to get your head around. The good news is that your understanding of jQuery and Angular are correct. jQuery is a library and Angular is a framework. To answer one of your questions, React is also a framework.

So what's the difference? You can think of a library as a set of useful, related functionality that doesn't put limitions on how it's used or what the structure of your application looks like. A framework, on the other hand, provides structure for an application. Frameworks are often called "opinionated" because when you choose to use a framework you are choosing to structure your files and your logic in a very specific way defined by the framework.

For small applications you can usually get by with just a library or two that contain the functionality you need. However, as your application grows or as you bring on more team members the structure and standards that frameworks provide become very helpful. I hope that clears things up!

Algorithms

Hey, Student. Big O notation is useful for describing algorithms, but it can be confusing at first. Especially since a lot of descriptions of Big O get bogged down with math without really describing why it's useful. The good news is that you don't need an advanced math degree to understand Big O. Let's take a look at a simple example.

Imagine an algorithm that loops through an array of numbers and adds 1 to each value. Obviously if you give it an array with 100 numbers it's going to finish faster than if you give it an array of 1,000,000 numbers. If we want to talk about how "fast" the algorithm runs we can't talk in concrete numbers, then, because the time will change based on the size of the input.

Big O notation gives us a way to talk about how fast an algorithm is regardless of the specific size of the input. In this case, the algorithm is O(n). The n refers to the size of the input. This means that the algorithm's run time will increase at exactly the same rate as the the size of the input (this is called linear growth). If, alternatively, an algorithm is O(n^2), it means that the runtime is proportional to the square of the input size (this is usually bad).

The best way to determine the big O notation of your algorithms is to look at how many times you are looping over the input. If it's just once the algorithm is likely O(n). If the algorithm contains an outer and inner loop that both loop over the full input then its likely O(n^2). Here's a good description of some other common notations that's not too heavy on the Math: https://rob-bell.net/2009/06/a-beginners-guide-to-big-o-notation/.

CSS

Hey, Student! You've made some good progress on the CSS. CSS is notoriously finicky and even seasoned developers get frustrated over issues like this.

Whenever you're trying to debug CSS issues I highly recommend using Chrome developer tools. They're available right in your Chrome browser and they are a lifesaver for problems like this. To open them right click on your page and select "Inspect". With the dev tools open make sure the "elements" tab is selected and then you should be able to see all the html that makes up your page. You can expand and collapse the elements and selecting one will show you all the CSS that is currently affecting it.

If you click around the elements that don't look right you should see a suspicious property or two. Notably, the pricing-tiers div has a height of 0. That's definitely not what we want. Whenever an element has a size of 0 my first hunch is that there's something wrong with the display property. Some types of elements don't have a height unless you give them a display property of block or inline-block, and section might just be one of those. Try assigning the pricing-tiers class a new display property and see what the results are. Hopefully you see that your pricing-tiers div looks much closer to what you want. But there is still a problem with the alignment. See if you can use developer tools to find which element needs to change and how you might center it. Here's a hint: The text-align property isn't just used to align text, it aligns everything! Let me know if you get stuck again!

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