Untitled

[rpbdweller-blog]

CSS

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

Hi Student,

Based on your code, it appears that what you need help with the box-model!

CSS is one of the least intuitive aspects of web development (in my humble opinion). The box-model, and it’s relationship with parents and children and siblings is sometimes way too confusing. But people have spent years working with it and come up with some pretty clever solutions that frankly, you kinda just have to memorize.

You have two main issues. The section tag with class=“pricing” is simply as tall as its padding. If it had a direct child(ren) with some height, it would expand downwards to contain them. You have a direct child, a div tag with class=“pricing-tiers”, but that div has height=0. Now what about what I just said, that if it had children with non-zero height it would expand to include them? The pricing-tiers div has three children that are all visibly non-zero in height. What gives?

Looking at those children, the class=“tiers” divs, they have one property that essentially nullifies that parent-child relationship: the float property. The way to think of float is that while a div with the float property is “chained” to it’s parent’s location on the page, like an anchor, it no longer causes the parent to expand to the float’s parent’s size. I’m sure there are reasons for this, but I don not understand them well.

There are a couple ways to address this. You either need to clear the floats by giving them an empty sibling div that simply has the property clear: both. Or to write what is called a clearfix into your CSS file and then apply that your HTML. The clearfix will be a class that you’ll give to a parent div to expand and contain floated children.

.clearfix:after {  content: "";  display: table;  clear: both; }

And then you include “clearfix” in the class property for the pricing tiers div. It’s a little hacky, but it’s commonly accepted solution. Now, the class=“pricing-tiers clearfix” div will expand to contain the floated children. This in turn, will cause it’s parent, the class=“pricing” section tag to expand downwards and contain the full height of it’s child.

Good luck!

-Zach

[rpbdweller-blog]

Algorithms

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

Hi Student,

Man, I remember first learning about Big-O. That can really be a head scratcher sometimes.

The general idea of Big-O is to capture how efficient an algorithm will be in solving a problem on an increasingly larger input scale. It’s the relationship between, the size of the input and the how the algorithm efficiency scales with size. Big O can be used to talk about running time, or memory space, but we’ll focus on running time, because that’s more common to be asked about.

Let’s look at some really simple cases. Let’s say I have an algorithm to print out the very first element in an array/list. No matter how big the list is, I’m always just printing out 1 element. What if I want to print out the first two elements? No matter how big the list is, I’m still just doing 2 things. The first 10000 things (i’m assuming there are at least that many elements in the list)? Is that any different? Well, no, because Big-O is not about with how much time it actually takes to run an algorithm. Big-O is about whether it would take more time with more/less input. In all of these cases, 1, 2, 10000, the size of the input doesn’t affect how long it takes. This is called Big-O(1) or constant time.

Now let’s investigate a less silly case. Let’s say I want you to print out half the things in a list. If the list if 10 items long, I would be executing 5 print commands. If it’s 1000 items longs, I would be executing 500 commands. Now see, this algorithm does change with the size of the input. The exact formula to find out how many commands we’d execute would be input size (n) / 2 = runtime. As the input size increases by n, the runtime increases by n/2. That second part, is where we get BigO in this case, but we remove the coefficient of 1/2 and we are left with Big-O(n), or linear time. If I had asked you to print out everything twice, we the formulate would be n * 2 = runtime, but it would still be just Big-O(n) because we’d remove the constant 2.

Now we get to the real meat of Big-O. The relationship between algorithm efficiency and input size becomes less obvious. Say our list is all integers, and I want you to print out the sum of each pair of integers. That means you have to look at the first element, add it to itself, and print. Look at first element, add it to the second element and print. Then look at the first element again, add it to the third element and print... you finish adding and print with the first element, but you’re not done. You have to go back to the second element, and repeat your process completely over again. If there’s only 5 elements, you’re print 5 sums for the first integer, five for the second, and five each for the third, fourth and fifth. You should understand this to be 5*5, or 25. Now that might not sound crazy, but imagine if n isn’t 5, but is 5 million. What we have here is Big-O(n^2), or quadratic time. Much slower than Big-O(n) or Big-O(1) as the input size grows.

When you start to involve nested loops, sorting, recursion, dynamic programming, you’ll need to understand Big-O(n^2), Big-O(log n) and even crazier ones. You’ll want to focus on the worst case scenario’s, the average case scenarios. It’s a fairly robust topic, but understanding the basics will go a long way to understanding good programming habits.

Good luck!

Zach

[rpbdweller-blog]

Angular/jQuery

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

Hi Student,

That’s great, Angular is one of the most popular and useful frameworks for frontend developers. I know a little bit about the type of framework Angular is, but not too much about Angular specifically.

Frameworks shape the design or architecture of your website or application. Typically, a developer will only use one framework on a project, but they can use any number of libraries. Libraries are simply tools that make writing code simpler, providing work arounds, special methods and more.

Angular falls into the category of an MVC framework. That’s short for “model-view-controller, which essentially means all data (models) is stored in your app as javascript objects, gets passed and organized correctly by a controller, and spit out into your the HTML markup (the view). And in reverse, when someone interacts with your UI, like a form, that activity is communicated through the controller back to your models who then update themselves with the new information, and trigger a re-rendering of the markup with the new data.

Angular is a specific implementation of this framework, called a “two-way binding”. They provide special markup that creates an ultra fast relationship between the view and the model. Unfortunately, this is about where my expertise ends :( Definitely check out the docs, and reach out to the active Angular community on stackoverflow or hackernews.

jQuery, on the other hand, is just a library that makes it easier to write JavaScript that can interact with the DOM ( or the HTML ). It provides prewritten methods and algorithms, mostly revolving around the “$” that give us access to HTML tags by tagname, id, class, etc and allow us to manipulate without long chaining function calls and other inconvenient things.

Good luck!

-Zach

[rpbdweller-blog]

SQL

> 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

Hi Student,

SQL injections are a really cool topic. It’s a legitimate issue in cybersecurity and one of the most common hacks that inexperienced devs can be a victim of.

So let’s say someone wants to attack your website. You have some forms and input tags on your page, which are like a soft underbelly of your website. A hacker can type anything they want into text inputs. and what normally happens when you submit a form? You make a a query to some database which depends upon concatenating or just joining your input with a string that writes a SQL query. SQL queries, as I’m assuming you know, have very specific syntax, which the hacker can copy. They can literally write in the second part of SQL query syntax in the input. 

Then, anything the hacker enters to the input after that, be it javascript or a link or something, will literally run on your website. There are tons of ways to prevent this, because its a pretty well documented issue! They mostly revolve around “escaping” html input, which turns certain characters from input that would be used as a part of SQL syntax into their character codes. This makes the SQL query fail, and thus prevents the attack.

Hope that helps!

-Zach

[rpbdweller-blog]

Rails “through” associations

Hi Student,

You’ve run into one of the most valuable aspects of rails associations. “Through” associations allow for indirect associations, that can reach infinite times through other tables to create relationships from one object to others.

In a direct has_many, or has_one association for say ObjectA to ObjectB, you rely on the target of those associations (ObjectB) to have a column carrying the foreign_key for ObjectA, which is typically ObjectA’s database id. Thus when Rails queries the database for a has_many relationship, it queries the TableB of ObjectB’s for those whose foreign_key value == ObjectA’s id.

So now think about what we’ve created - direct access to information about one of those objects from the other, including other association information, which is where we want to harness “through” to access that info. If ObjectA also has_many ObjectC’s, we can access that information in ObjectB through ObjectA. QUite literally, ObjectB has_many ObjectC through ObjectA.

Let’s take a step back. If there is a has_many association from ObjectA to ObjectB, then we know ObjectB has the foreign_key value of ObjectA’s id. Same thing with ObjectC. That is how direct has_many associations are built. Now, if we know that both of those associations exist, it follows that from ObjectB, we can query the database for elements in TableC that also have that foreign_key value. This type of chaining can go on through as many tables as you like too, or be used with has_one :through relationships in cases where the direct relationship is has_one or belongs_to, rather than has_many.

[rpbdweller-blog]

Bloc Mentor Responses #1 JavaScript

Hi Student!

This is actually a fantastic bug to have, because you’re running into one of the most important nuances of JavaScript: scope and the timing of variable evaluation. The gist of your bug is that the variable btnNum does not get evaluated through each iteration of the loop. It remains a variable until you trigger #onclick for that button. And at that point, your loop has broken because btNum < prizes.length is false, which means btnNum points to 3 now. Make sense? Probably not yet.

Let’s walk through the code together.

We set up the prizes array of strings. This is correct. 

Then we initiate a loop, with a variable btnNum starting at  = 0, iterating up by one each time, while btnNum is less than the length of the prizes array. This is still right!

Inside our loop, we’re correctly grabbing the button we want, using our btnNum variable. It’s important to note that you are executing the getElementById method with btnNum = 0 so you are definitely calling getElementById(’btn-0′), but you are only defining the onclick property. This property says to bind btn-0 the onlick property a function that calls alert(prizes[btnNum]). At this exact moment, when btnNum = 0, this would work. BUT it’s important to note the difference between alert(prizes[btnNum]) and alert(prizes[0]) because we aren’t calling the onclick function at this exact moment, are we? We’re not going to call that until this whole looping process has completed. And in the scope of our loop, btnNum is going to change, right? Let’s see.

So let’s say we finished that iteration of the loop, and btnNum = 1 now. Like, before, we’re going to execute the getElementById(’btn-1′), but we’re only defining the onclick method to a function that calls alert(prizes[btnNum]). Hmm, isn’t that exactly what we set as the onclick for btn-0? At the time, btnNum = 0, but we specifically used btnNum, and not the value 0. Right now, btnNum = 1, but once again, we’re not evaluating btnNum, we’re still just using it as a reference.

Our top two buttons no have an onclick property that will call alert(prizes[btnNum]). Remember, btnNum has only one value...

In the third iteration of the loop, things run the same as the first two times, with btnNum = 2. Execute getElementById(’btn-2′), and define an onclick method with a reference to btnNum. When this iteration finishes, btnNum actually still increments up to 3, but the parenthesized part of our loop checks the condition that btnNum (= 3) <  prizes.length (= 3). This is false, so the loop stops, and does not execute getElementById or define the onclick property. But btnNum still references 3 in the scope of that loop.

Now btn-0, btn-1, btn-2 all have an onclick property, and they all execute alert(prizes[btnNum]), and btnNum = 3;

So now, if we call any of those onclick properties (by clicking it), we now execute the function we defined to call alert(prizes[btnNum]). but what is btnNum? 3 right? So what we really call is alert(prizes[3]). What is prizes[3]? It should be undefined, because the maximum idx of prizes as it was defined is 2.

The overall point is that the btnNum variable is only stored as a reference when we define the onlick property for all three btns. And then it is evaluated as the final value of btnNum when we execute onclick.

How do we fix this? With an Immediately Invoked Function Expression. This is really just a long way to express the idea that we want to write this code in a way so that btnNum is evaluated at each iteration of the loop. The syntax for this is to wrap each iteration of the loop in something that looks like this:

(function () {

    CODECODECODE;

})();

This syntax is special, because parentheses in javascript typically are commands to actually evaluate code (like variables) inside them at the moment that it is read by the machine. This way, all variables, like btnNum and prizes are evaluated for each time the loop runs. So instead of defining onclick functions with to btnNum the variable, they are defined instead with the value of btnNum at the time of that iteration.

As I said, this is an important aspect of JavaScript, which touches upon multiple unique aspects of the language that makes it sometimes very frustrating, but also very versatile.

[rpbdweller-blog]

welcome back

Welcome back, me!

I haven’t posted since app academy stopped requiring us to submit posts each day. But here I am, knee deep in my job search and I’m back.

I’ve applied to about forty companies at this point, I’ve had a couple successful interviews, I have a few more coming. I’m looking to get started applying to companies in Ed Tech that I really want to work for, like Teachers Pay Teachers, Knewton, Schoology and others. Which leads me to..

Chrome extensions! Extensions are really interesting tools that can serve just about any purpose. Today, that’s what I’m trying to teach myself. I started with the tutorial here, and now I’m looking for some other resources, and I’m procrastinating by writing this! Time to get back to it--- 

[rpbdweller-blog]

week 9 day 4

Today started out mega frustrating, a clusterfuck caused by aws and s3. After figuring that out, I built up pgsearch, just multisearch, across users and courses. I plan to implement the other kind of search over courses in the future.

I also added oauth at the end of the day. A super helpful student caught me before I jumped into the deep end of devise.

I’m nervous for presentations tomorrow, but I’m pretty happy with where I’m at!

[rpbdweller-blog]

week 9 day 3

Today was productive, mostly because I finally remembered to being passing down current user from the context. I also built out forms for new reviews, added a multicolumn index to reviews, and tinkered with star ratings and react-modals.

[rpbdweller-blog]

week 9 day 2

This morning was insanely frustrating. From redoing most of my routes, to setting up the custom domain, it all felt very very unnecessarily complex. Things went smoothly through the second half of the day. I didn’t get to search like I would like to, but the general structure of courses/users/reviews is nearing completion.

Tomorrow ill be a race to finish that structure and then begin implementing file upoad, search, and oauth.

[rpbdweller-blog]

week 9 day 1

The last day of our first week working on capstone projects came to a close on Friday and Monday I started to feel the pressure to get it done in just another week. I feel as though I’m a little bit behind in some areas, but mostly on pace.

Friday I finished setting up AWS for myself and this app, getting all the security in place and setting up buckets, plus including paperclip utility within the app.

The rest of the day, I was setting up React Auth, which I finished over the weekend. Session and user creation is fully functional, and integrated into the layout of the app.

Monday I debugged React auth for a while, then I built out course views, user profile editing, made two drop down menus and a few other things.

[rpbdweller-blog]

week 8 day 4

Things are picking up for our capstone projects! Everyone is so focused all day its a great environment to be in.

Today was productive for me, I built out functional react components for courses, and then the views for them as well, both as the courses themselves and as parts of an index.

My landing page looks pretty good, I’m happy with how I’m picking up CSS as well. Found a cool CSSTricks way to build star-style ratings.

[rpbdweller-blog]

week8day3

After the second day of capstone work, I’m feeling much more on track. tuesday i felt a bit disoriented, but yesterday I was on track, handling react, handling rails. I worked next to haik who is also cloning good reads so we shared some ideas.

I’m really interested in the steps im going to take today, building out other react components, and really focusing on building working views/forms/layouts. If I have extra time, I’ll add profile pictures to the users schema and implement the paperclip stuff we heard about yesterday.

[rpbdweller-blog]

wk 8 day 2

First day of Capstone Projects in the books. It was exciting to get started, I’m looking forward to continuing.

Today I built out the Rails backend for a few parts of my project, and some of the UI frontend.

Tomorrow will be working on the API endpoints to match.

[rpbdweller-blog]

week8day1

Today was a bit frustrating. I’m really still struggling using React, which is a pretty crucial to making even slight progress. Every time I get past some small part, it seems like I hardly understood what I did.

The project itself is fine, nothing special. I’m not as happy working by myself as I was during pair programming. The CSS exam is tomorrow and I am absolutely screwed. There wasn’t enough direction on the capstone proposals.

Hopefully tomorrow is better!

[rpbdweller-blog]

week 7 day 5

Independence day! great movie. Also, we started working independently for the first time in a couple weeks today, on a full flux/react project. The assignment was to build a small scale AirBnB clone “BenchBnB”. I was intrigued by the challenge of wrestling with react/flux before I feel too comoftable with it. It was a great learning experience.

I felt a little uneasy working around meshing the old rails routes and our new jbuilder files. Got the hang of it eventually. Fred helped me through some difficulties around there. Some stupid chrome extension was giving me errors for that i wasted half an hour trying to solve.

All in all, I finished everything but they very last step, and felt pretty content to review my issues, and forge forward with it on Monday.

ALSO, we got our project assignments, I’m doing GoodReads, and I think I’m going to sort of combine GoodReads with CourseTalk, and let users review, recommend, be recommended, and track/tag online courses.

[rpbdweller-blog]

week7day4

Last day of pair programming! Its been a much better experience than I first anticipated. It’s easy to see how the back and forth has been beneficial.

The project today, which I worked on with terence, was building a pokedex with the full flux workflow. We started off with some minor bugs, and then proceeded almost flawlessly the rest of the day. The project was great practice in understanding how different parts of flux listen to each other.