Day 7

After 3 hours today I finished up the HTML and CSS section. I took one real note today in that 3 hours:
When it comes to Bootstrap as a framework the .col-xs class never stacks vertically no matter how small the width of the screen gets. Figured that was something I might need to know later. I also learned a lot about how powerful and easy it is to make a site responsive using Bootstrap. I had used Bootstrap in the past but never really understood how to use it more fully.

I also spend a chunk of time troubleshooting the custom Learn IDE (built on top of Atom) that Flatiron provides. It has some quirks. Very simple the workflow is this, click a button on the site, the IDE opens, runs a command to fork then clone down a GitHub repo with all the files you need. There were a couple labs that had zero files in them. However, I was building on a previous lab so I had the files I needed. I copied and pasted them into the appropriate place in File Explorer but the IDE wouldn’t show them. I had to “Import” them from within the IDE for it to acknowledge their existence. This was a pain in the ass to say the least.

I’m finally back into Procedural Ruby. Funny thing is I’m coming across labs that directly relate to the ones that I did in the Bootcamp Prep course. They’re carbon copies in fact. The only difference is that I chose to do the JavaScript Bootcamp Prep and now I’m solving problems in Ruby. It’s interesting though to see how different languages solve the same problems.

Of course I have to give an example. Here’s the modified (to make it make more sense for both languages) Deli Counter lab requirements:

  1. Build the method/function that shows everyone their current place in the line. If there is nobody in line, it should say "The line is currently empty.".
  2. Build a method/function that a new customer will use when entering the deli. The method/function should accept two arguments, the array for the current line of people, and a string containing the name of the person wishing to join the line. The method/function should return the person’s name along with their position in line.
  3. Build a method/function which should call out the next person in line and then remove them from the front. If there is nobody in line, it should call out that "There is nobody waiting to be served!".

First is JavaScript:

var katzDeliLine = [];

function currentLine(x) {
    var line = []
    if (x.length === 0) {
      return "The line is currently empty."
    } else {
      for(var i = 0; i < x.length; i++) {
        line += (i + 1) + ". " + x[i] + ", "
      }
      line = line.slice(0, line.length-2)
      return "The line is currently: " + line
    }
}
function takeANumber(katzDeliLine, name) {
  katzDeliLine.push(name)
  return "Welcome, " + name + ". You are number " + katzDeliLine.length + " in line."
}
function nowServing(x) {
  if (x.length === 0) {
    return "There is nobody waiting to be served!"
  } else {
    var name = x[0];
    x.splice(0, 1);
    return "Currently serving " + name + ".";
  }
}

And then in Ruby:

katz_deli = []

def line(x)
  line_array = []
  if x.length == 0
    puts "The line is currently empty."
  else
    x.each.with_index(1) do |name, index|
      line_array.push("#{index}. #{name}")
    end
    puts "The line is currently: #{line_array.join(" ")}"
  end
end
def take_a_number(katz_deli, name)
  katz_deli.push(name)
  puts "Welcome, #{name}. You are number #{katz_deli.length} in line."
end
def now_serving(array)
  if array.empty?
    puts "There is nobody waiting to be served!"
  else
    puts "Currently serving #{array[0]}."
    array.shift
  end
end

A small thing I noticed is that it took me 3 less lines of code to do it in Ruby. I’m sure I’m not as eloquent in JS as I could be though so I’m sure that could be condensed down as well.

Finally, I laughed when I read about the “spaceship” operator <=> only because it’s nicknamed that because it looks like a flying saucer.

On a personal note. This schedule I set is rough. Not really on me as much as on the family. It’s hard to lock yourself in an at home office for 12+ hours a day 3 days a week with a 2 year old and a 2 month old at home. It takes a lot of work watching over them and when both of us are home it’s definitely easier for both of us to contribute. I still think next week I can break the 45 hour mark for the amount of time I get to work on coding. I had planned on 52 hours a week which would have me done with the ~800 hours of curriculum in 13 weeks. Since I pay by the month if that gets pushed a couple weeks I’ll still be done <16 weeks and not pay for that 5th month.

Time spent today: 5:52
Time spent total: 33:26
Lessons completed today: 32

Day 6

It was a LONG day of HTML & CSS and I’m still not done with this section. It’s okay though. While a lot of it has been review a lot of it has not as well. I’ve been learning a ton about responsive web design. Especially Mobile Up (Mobile First) design and how to utilize @media queries in CSS to set break points. As well as some best practices doing design of this type. Desktop Down principles were discussed as well but I think at this point in time there is no reason to utilize that methodology. Too many people are utilizing their phones as their primary was to consume content and the trend is moving in that direction anyway.

I think this section feels really long and boring because so much of it is being explained in videos and less with actually coding. Maybe 5-10 lessons to each coding exercise. In addition, most of the coding is codealong so there is much less thinking involved. At least I can set the videos to 1.5x speed. I’m 87% of the way done with this HTML and CSS section so I’ll finish it off tomorrow for sure.

I did finally learn why people would use em for font-size as opposed to pixels px or points pt.

It is to our advantage to set all typography within our site to ems and then in media queries adjust the body font-size as a percent to adjust all type in proportion to each other. This greatly simplifies our media queries on typography.

When all the type sizes are relative there is only one thing that needs to change (body { font-size }) and all the type on the page will adjust relative to each other. Keeping everything in perfect proportions. Pretty nifty and definitely something that should be done these days as more and more people are utilizing their cell phones for EVERYTHING.

A couple notes I took on Mobile Up:
To set a wrapper using Mobile Up, first set the wrapper to a % then when the screen gets large enough utilize a fixed width. ie:

.wrapper {
  width: 90%;
}

@media only screen and (min-width: 980px) {
  .wrapper {
    width: 960px;
  }
}

Also, to setup multi-column design first utilize a column width: 100% and float: none; then move to columns being a percentage and floating them. ie:

.column {
  width: 100%;
  float: none;
}

@media only screen and (min-width: 600px) {
  .column {
    width: 33.333%;
    float: left;
  }
}

Finally, my last note on design in general is that experts say the optimum readability is 40-80 characters per text line. I guess that’s why the break for soft wrapping in Atom (the editor I’ve been using as of late) is set to 80 by default.

Time spent today: 7:59
Time spent total: 27:34
Lessons completed today: 40

Day 5

Today had a rough start. We decided to start potty training today and my wife and I were not on the same page about what that would look like in terms of the amount of coding I would get done today. Thankfully we got things moving pretty smoothly about noon. I then proceeded to complete my first part of the Intro to Ruby curriculum! I now have a functioning CLI Tic Tac Toe game built in Ruby. It can be found here. Pretty proud of myself for this one. I got stuck on one part and had to do a screen share with what is called a “Learn Expert” but it was actually a quick fix. I was stuck on utilizing a ternary. I had the following problem:

# This is passing tests
if draw?(board)
  puts "Cats Game!"
else
  puts "Congratulations #{winner(board)}!"
end
# This is not passing tests
draw?(board) ? puts "Cats Game!" : puts "Congratulations #{winner(board)}!"

I couldn’t figure out why. Turns out I needed to just put puts in front of the ternary because it was going to do that action to either result of the code. This quick fix had my one line solution passing the rspec tests.

puts draw?(board) ? "Cats Game!" : "Congratulations #{winner(board)}!"

This puts me at 78% of the way through the Intro to Ruby curriculum so I hope to finish that, or be very close to finishing that, today!

Just like that, before 5 pm I just finished the Into to Ruby track by refactoring my Tic Tac Toe code from before. I now have a CLI Tic Tac Toe game that utilizes Object Oriented programming which can be found here. I’ve gotten into a good groove and think utilizing the Pomodoro technique is key on these long days. It allows me time to break away for a bit. I’m 42 minutes on and 18 minutes off right now. A key takeaway from this short intro to OO programming is that “an object in code is a thing with all the data and all the logic required to complete a task.” I think this sums up an object well and I’ve always struggled with figuring this out.

I thought of objects being like biological cells and/or individual computers on a network, only able to communicate with messages. – Alan Kay

Next up are some sections that I think will go quickly:

  1. Git and GitHub
  2. HTML and CSS
  3. Procedural Ruby (only because a bunch of this is done already from this Intro course)
    After that is a large chunk, for good reason, on Object Oriented Ruby. I hope to get through all the lessons and labs for this by the end of the weekend and be working on the “Final Projects” for Ruby starting Monday. I think I can do it! We’ll see what reality dictates, though.

I was right about the Git & GitHub section. Finished that in ~45 mins. Helps that I’ve been using GitHub for a while. At the end of the section was this:
git_comic

HTML and CSS are taking longer than I expected because there are code along videos and there isn’t really a way to run through those too quickly.

It was a productive day.

Time spent today: 7:22
Time spent total: 19:35
Lessons completed today: 53

Day 4

Today was no longer than the first few but definitely felt like it was. I learned the hard lesson that with this schedule I actually have to go to sleep when I schedule it. I stayed up late last night but still stuck to my 6 am wake-up call. Needless to say my last 30 minutes of coding tonight was not good and I couldn’t make progress like I know I can. I’m just foggy in the head and tired. My prime nap time in the middle of the day was taken away by my grumpy 2.5-month-old who 3 minutes after I set a 30-minute alarm for my nap decided she would cry for 90 minutes. I finally got her calm and boom my 2-year-old is awake from her nap. I love them both, I just really would have enjoyed that nap today.

Nothing big happened today in my schooling. The people that wrote the curriculum like to include quotes here and there and I saw one name pop up a few times so I looked him up. Turns out Edsger W. Dijkstra was a pretty big deal in the world of CS and programming. I didn’t read his entire Wikipedia page but I intend to.

One other thing stuck out today. The fact that #detect and #find do the same exact thing. This is actually one reason that I was so stuck tonight. With the way that Flatiron is setup, every successful lab is public on GitHub. If I’m really stuck I’ll look at how others solved the problems for inspiration. There is rarely one answer so I’ll take the code I have and look at say 5 other people’s solutions and get my brain moving again. I kept seeing WIN_COMBINATIONS.find and I was thinking, “Where did these people learn this #find method? So I went to the ruby docs and realized that it was the same exact thing as #detect when I saw this:

(1..10).detect   { |i| i % 5 == 0 and i % 7 == 0 }   #=> nil
(1..100).find    { |i| i % 5 == 0 and i % 7 == 0 }   #=> 35

To make it even worse, I had earlier written down on my pad that these were the same thing so I wouldn’t forget to blog about it tonight.

NOTE: detect and find are two names for the same method. For every example below we’ll use detect, but you can use them interchangeably.

How does this even happen though? Why would the person or people who wrote a coding language choose to make two words do the exact same thing?

That’s all for now. Still need to walk the dog, setup my coffee for the morning, and throw some stuff in the dryer.

Time spent today: 2:32
Time spent total: 12:13
Lessons completed today: 12

Day 3

Don’t think I need to announce what day it is anymore, lol. I think I’ve got my morning routine down now. Alarms go off at 6 am and I’m out of bed by 6:15 am typically. Coffee is done brewing by the time I get downstairs. Feed the dog and make my coffee (ghee is my only additive right now but I’ll get back to Bulletproof Coffee at some point using Brain Octane™ Oil). I then do my Daily Limber from Gymnastic Bodies. Follow that up with some journaling which right now is a version of the The Five Minute Journal that I have copied into Evernote and added to. I created a template note then duplicate that note every morning and change the title to the date. You can find the template here if you want to use it. After that I meditate for about 5 minutes. Depending on the day I may walk the dog now or later (I did today because thunderstorms were approaching). This gets me to about 7 am when I start coding until the kids wake up. I think I’ll keep this format for now.

Only news from my morning coding session is that it got cut short because of this:
tornado_warning
It seems like I’m linking a lot of tools lol. If you’re wondering how I got that notification from my phone on my computer it’s an app called Pushbullet.

Got back to it and moving closer and closer to a Tic Tac Toe game built in Ruby. Something that I definitely made sure to add to my notes for reference later is:
In Ruby only false and nil are falsey. Everything else is truthy (yes, even 0 is truthy).
This is a great one liner to remember that there are only two things that return false in Ruby.

I also learned a lot more about Test Driven Development (which I know is BIG in real life).

WHAT IS TEST DRIVEN DEVELOPMENT?
Test Driven Development, is a method for approaching a problem not through the implementation of the solution, but through the expectations of a working solution. Instead of trying to write the code that solves the problem, you first define what the working code will do when it works, and then you write the implementation to make it work.

Can’t wait to finish off this section and have my working Tic Tac Toe project to share.

This made me chuckle only because I guess most people do this program part time so hitting the top of this “velocity” meter is a goal.
velocity_meter_full_at_53

Time spent today: 3:22
Time spent total: 9:41
Lessons completed today: 28

Day 2

Another day, more code. However, now I have the full bootcamp track! This is what I was waiting for:
full_stack_web_dev._with_react
I also started tracking my time using Toggl solely because I was interested in exactly how long this bootcamp is going to take. Well, that and yesterday my wife asked me how much time I got to spend on school so now I’ll know. Started on some Ruby this morning and also learned that career placement starts when 75% of the curriculum is done (after Rails is complete). This makes sense as the Flatiron path takes me through a bunch in the Ruby ecosystem then on the back end teaches React and Node.js. I had been thinking to myself, once I was done with all the Ruby learning and started working on the JS portion of the curriculum I could start searching for Ruby jobs.

Quote from this morning that stuck with me:

This is one of the best parts of programming: debugging and fixing errors. It’s like you’re a detective solving a crime. The only bad thing is that more often than not, you’re also the criminal that caused the error in the first place.

Now the end of the day and lots more Ruby is in my brain. The thing that is sticking the most (besides the code) is how similar JS & Ruby are. I now understand more why most seasoned developers say it doesn’t matter what language you learn first, just stick with one and learn it. Lots of the concepts are exactly the same across languages the syntax is the only difference. If you can learn a development language then you can learn where to put a semicolon or parenthesis.

Today Flatiron also started migrating their chat feature back to Slack. Apparently they tried to build their own chat into their learning platform but decided that Slack was a better option. Makes sense as Slack does it well. It’ll be a long time before they get anywhere near the user limit that Free Code Camp hit back in the day. Yes, there is a limit to the number of users a Slack channel can have and you can read about it here. I actually don’t know if this is still true and honestly don’t care enough to find out.

Something new I’m going to add every day is a short update at the end of the post (I’m guessing 4 hours of work done yesterday):
Time spent today: 2:18
Time spent total: 6:18
Lessons completed today: 25

Until tomorrow.