freeCodeCamp nashville

This past Saturday we had our monthly freeCodeCamp Nashville meetup at Nashville Software School. As always it was good times. We were supposed to have a guest speaker but they couldn’t make it at the last minute so our very own superstar and freeCodeCamp Nashville Co-Organizer Dave Harned stepped in and crushed it. He presented a Crash Course on NodeJS. You can find the repo here and excuse the work in progress readme. Like most things, it’s not perfect. Feel free to open a Pull Request and shore up those docs! I’m going to walk through what Dave presented on Saturday so you can see what you missed out on and come to the next one ;-). Honestly, so you can benefit from what I think is a well put together intro that’ll have you up, running, and playing around in no time.
Continue reading

I think this picture is pretty accurate as to how I feel right now. A pawn crowned king. I passed my final assessment the first time through and have officially been a graduate of Flatiron School for a week now. I’m also lucky enough to have a full-time job right out of school. A full-time job looking for a job that is :-p. It’s amazing how in depth the job search can be. However, when you are provided with a solid framework to follow it’s nice to see the pieces just start falling into place. With my choice of the Full Stack Web Developer Program through Flatiron School, I receive a job guarantee if I follow some steps. Obviously there is a little more to it, like following my career coaches advice, but in general I must have 8 git commits per week to GitHub, write one blog post per week, and perform 8 job search activities per week (ie. apply for a job, meet someone at a user group, follow up thank you notes, networking outreach to meet for coffee, etc…).

These are things I think I would do anyway but having a structure that I am being held accountable to is definitely pushing me to get out of my comfort zone some in this process. I also have a better pace to do my outreach. If I had done it myself I probably would have blown through EVERY contact I have in this first week and now be dealing with scheduling conflicts and such going into next week. Now I am pacing it and staggering how I contact people some. If you’re like me you’re already thinking of ways to track this type of job search. Maybe build an app, or utilize Trello, or a Google Sheet. Luckily, the Flatiron School curriculum is open source so you can just find it right here (look for the embedded link).

Staying Active Coding

While this seems like a standard practice I know it’s not. I’ve watched many boot camp graduates GitHub accounts go from consistent commits to zero after graduation. This is something I prepared for as I worked on my portfolio projects. I always knew ways that I wanted to extend them. Although, now that I have the freedom to learn ANYTHING I need to stay on track. As soon as I became a graduate a Node.js track opened up for me in my courses listing. This is attractive as I could round out some full stack JS knowledge. I also purchased Wes Bos’ Learn Node course while I was going through the boot camp so I have that too.

It’s easy to become lax though. It’s nice to take a breath and relax. I’ve worked hard and I deserve a break, right? Well, no I don’t. I still have to work my butt off. I’m at the bottom right now and the climb is hard. However, the job search is pretty much full time in and of itself so now I need to find time to code too? Yes. Here’s the plan:

  1. Refactor my React with Redux project to pull from the Yelp API instead of from the Rails API I built it on. Then implement comments being persisted in the DB.
  2. Finish the TODO items I left open for the rest of my projects. Work on the Ruby CLI Gem first, then my jQuery front end, then my Rails project, then my Sinatra project (maybe).
  3. Node.js is next. First the Flatiron track then Wes Bos’ course.
  4. If I’m still looking for work at this point I’m not sure what I’ll dive into. I might choose to build my React app using other frameworks to acquire familiarity and demonstrate my ability to learn other things.

Ultimately, I don’t want my GitHub to go stale. I’m also working on algorithm challenges to prepare for technical interviews. I’m mostly working on CodeFights currently as they have an Interview Prep set of problems. However, I’ve done problems on Codewars which are fun and I hear a ton of good things about exercism.io which I’ll probably dive into once I’m done with CodeFights stuff.

Networking

While this might seem like a natural thing for me, former restaurant manager, bartender, meetup co-organizer, meetup attender, etc… It’s always awkward to reach out to someone for the first time. Luckily, I have help with this. There are some awesome resources for this in Nashville as well. I’m sure if you look around there are resources in your city as well.

Meetup.com has to be the #1 resource for networking around shared topics. There are so many user groups and these are open to the public. So, everyone at a meetup event is already a warm contact. They expect to be approached and talked to. Adding to that the topic should hopefully be something that you are interested in and can speak somewhat about. I’ve had some great conversations, met some awesome engineers and established friendly contacts that I hope to maintain long-term.

Another great place to check out, and meetups will help you find these, are Slack networks in your city. Nashville has the NashDev Slack network which is a central place for people in IT in Nashville to chat. I’ve asked questions there and learned a ton from the responses from lead engineers and seasoned developers who have helped me with no strings attached. The best part is, some of these people I’ll probably end up interviewing with. Now I’m not a random name but someone that they have conversed with and taught before.

In addition, look for groups specifically for people to extend their learning. Started in Nashville and slowly spreading I found Penny University. I think they describe the idea better than I can paraphrase:

The name “Penny University” is a reference to the early coffeehouses in Oxford England. These coffeehouses held an important association with the European Age of Enlightenment. For the price of a penny, scholars and laypeople alike would be given admittance to the coffeehouse, enjoy an endless supply of coffee, and more importantly enjoy learning through conversations with their peers. Thus these coffeehouses came to be called “Penny Universities”.

Our new group, Penny University, serves as a modern take on this old tradition by connecting those who desire to learn with those who are willing to share what they know. This can certainly be at a coffeehouse, but anywhere else as well, including just a quick Google Hangout.

There are no mentors or mentees, leaders or followers. We are all peers and we are here to both learn and to teach.

Not surprisingly Penny U has their own Slack network.

Look for ways that you can donate time to coding. It’s a great way to work next to Senior developers and learn. In addition, the contacts are great. You’ll demonstrate not just what you know but how you can interact in a team setting. An awesome place to start is [Code for America] and then track down your local [Brigade] that does civic projects. I recently attended a [Code for Nashville] meetup and got hooked in with them. Was told to join their Slack network and learn some Node.js for the project they’re getting ready to start.

A final piece to networking is meeting people for 1 on 1 conversations. While these can be the most intimidating hopefully they aren’t completely cold. I know that I’m only asking people that I’ve met in person at a meetup or have spoken with via Slack to some extent. I’m meeting some great people this way and as soon as I’m done with my project refactors I’m going to start asking for code reviews which will help level me up as a developer too.

Let’s see if I can beat the odds and land a job quicker than the average bear through these efforts.

stairs

It’s been about 3 weeks since I last blogged. I put my head down and sprinted towards the finish line. I can’t say that I’m 100% done, yet, but I will be soon. I have completed my final portfolio project and have my assessment for it tomorrow. I must say, Redux threw me for one while working on this project. I hit many stumbling blocks building this project. I think my sprint was a little ambitious and I ended up not knowing the Redux stuff as in-depth as I wanted to. I definitely created some of my own frustration because of this. However, I hacked away at it and got it. I watched YouTube videos, Wes Bos’s Redux Course, and I even used HackHands a couple times thanks to the Github Education Student Developer Pack $25 credit I received.

HackHands was an interesting experience. Getting help from people who were not native English speakers (I assumed that’s who I’d get considering I was doing this on July 4th) and being able to communicate how I was stuck. The two times I used it I didn’t get a direct answer to my question. However, I did see someone debug my code live and in the end the source of my problem was illuminated by the help.

So one problem I ran into was not getting the data from my API when I called fetchPlaces(). I was stumped. By all accounts, it should be working. My API was returning proper JSON formatted data. I had:

// fetch places
function fetchPlaces () {
  return (dispatch) => {
    dispatch({type: 'FETCH_PLACES'})
    return fetch('http://localhost:3001/api/places')
      .then(response => {
        dispatch({type: 'RECEIVED_PLACES', payload: response})
      })
      .catch((err) => {
        dispatch({type: 'FETCH_PLACES_ERROR', payload: err})
      })
  }
}

I couldn’t for the life of me figure out why I wasn’t getting the data that I needed back. I considered using parseJSON() but I didn’t think I needed to since the data being returned was already JSON. I was going to use it just like that as well. I wasn’t accounting for the fact that I was using fetch() to retrieve the JSON from my API. For more about the small, but important piece, that I was missing take a look at Using Fetch followed by Body.json() on MDN. With that knowledge, I was able to fix my call by implementing .json() on line 7 below followed by another .then which now has the proper data to pass into the payload.

// fetch places
function fetchPlaces () {
  return (dispatch) => {
    dispatch({type: 'FETCH_PLACES'})
    return fetch('http://localhost:3001/api/places')
      .then(response => {
        response.json()
        .then(json => {
          dispatch({type: 'RECEIVED_PLACES', payload: json})
        })
      })
      .catch((err) => {
        dispatch({type: 'FETCH_PLACES_ERROR', payload: err})
      })
  }
}

Another issue I ran into was a CORS violation. CORS stands for “Cross-origin resource sharing” and can be described as:

Cross-origin resource sharing is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. A web page may freely embed cross-origin images, stylesheets, scripts, iframes, and videos. Certain “cross-domain” requests, notably Ajax requests, however, are forbidden by default by the same-origin security policy.
Wikipedia

If that doesn’t make sense, don’t worry. Just know that CORS is implemented for security on the web. However, it also meant that unless I explicitly stated that my React app could talk to my Rails API I wasn’t going to be able to get the data. Luckily, there is a pretty easy way to enable this and it only took a few lines of code. I first added gem 'rack-cors', :require => 'rack/cors' to my Gemfile and ran bundle. Next, I had to add some code:

# /config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'localhost:3000'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

This enabled my React application running on localhost:3000 to talk to my Rails API server running on localhost::3001 with no problems.

Ultimately I learned A LOT doing this project. I’m not 100% happy with where my app is at currently. However, to my understanding, it fulfills all the requirements of the project and that’s what I was shooting for. I can see abstracting it away from the back end and setting it up to pull all data from an external API call instead. Having built the back end though I know that it’ll always work the way I want it to and thus is a more stable project to include in a portfolio.

Check out Foodie View and see what you think for yourself. I’ll get it up on Heroku soon and will link to it from GitHub.

Time spent total: 457:50
Lessons completed total: 689

puzzle pieces

So I’m banging away at my jQuery project. I got hung up on some code tonight but got it working right before I stopped for the night! I was stoked! So what was I stuck on? In my app a user can create as many places as they want. Each place can have as many items as they want. A user can look at a specific item and see the name of it, the rating they gave it, any notes they wrote about it and where the item is available (the places they’ve added it to). I wanted to implement a “Next Item” button/link that when clicked will load the next item for the current user.

First things first I needed an array of the current users item ID #’s. I needed this because my show pages follow RESTful conventions and use the item ID in the URL. This is what the show page is expecting in its params. So I got that done relatively easily:

let itemsValues

$(() => {
  $.getJSON('/items.json', function (data) {
    itemsValues = $.map(data, function (e) {
      return e.id
    })
  })
})

Then, I wanted the functionality that I stated above. However, I didn’t want to get to the last item and just have a button that does nothing because there’s no next item. I also didn’t want the button to just disappear (I did that and I thought it was weird). So I decided when we reached the last item we should loop back around and go to the first item again. So I started coding and got to this point:

$('.js-next').on('click', function() {
  let nextIndex = itemsValues.indexOf(parseInt($('.js-next').attr('data-id'))) + 1
  $.getJSON('/items/' + itemsValues[nextIndex], function(data) {
    $('#name').html(data['name'])
    $('#rating').html(data['rating'])
    $('#notes').html(data['notes'])
    if (nextIndex === itemsValues.length)
      $('.js-next').attr('data-id', itemsValues[0])
    else
      $('.js-next').attr('data-id', data['id'])
  })
})

So my “Next Item” link has a class of ‘js-next’. Then I set a nextIndex variable by getting the current data-id of my link (ie, the current item being displayed ID number), turning that into an integer, finding the index of that ID in the itemsValues array and adding one to it. Then I call my internal API and get the next item’s info as a JSON object. I then fill in the new data to the DOM. Finally, I have an if…else block where I try and set the data-id to the first item ID if the new item is the last item in the array. If not, set it to the now current item ID.

Looking at this now I think the logic is flawed because I increment by one on the API call after the click. So setting it to the first item before the click will eliminate one item from ever showing up. I actually had this happen and couldn’t figure out why. This logic was fuzzy but is probably why I ended up moving the if…else logic to the top of my function and when I did it worked!

$('.js-next').on('click', function() {
  let nextIndex
  let dataIdIndex = itemsValues.indexOf(parseInt($('.js-next').attr('data-id')))
  if (dataIdIndex === itemsValues.length - 1)
    nextIndex = 0
  else
    nextIndex = dataIdIndex + 1
  $.getJSON('/items/' + itemsValues[nextIndex], function(data) {
    $('#name').html(`${data['name']} -
        <a href="/items/${data['id']}/edit">Edit</a> -
        <a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/items/${data['id']}">Delete</a>`)
    $('#rating').html(`Rating: ${data['rating']}`)
    $('#notes').html(`Notes: ${data['notes']}`)
    $('.js-next').attr('data-id', data['id'])
  })
})

I also filled out the HTML for the name section of the page using those lovely template literals I talked about in my last blog post. This project is coming along well. I’m hoping to be done with it tomorrow night at some point in time. If I can finish this off before the weekend I’ll be super happy and think right on track to be done before the end of the month.

Time spent today: 2:16
Time spent total: 394:16
Lessons completed today: 0
Lessons completed total: 646

I’ve been moving along as of late. Today I was able to knock out my Tic-Tac-Toe in jQuery project. Well, it’ll be done VERY soon. I paired with another student Henno who’s in a time zone 7 hours ahead of mine. I had just started and he was looking for a partner so while he read up on the project and had a bit I got the first three controller tests to pass. I did hit an issue though where my active_model_serialiers gem was the most up to date version and that was causing an issue with what the test wanted returned. I was missing the root key of the JSON. With some help, I decided to roll back the gem version and got the test passing. Then we paired for a solid 5 hours before he needed to get some rest. We had 9 tests still failing. Decided that I’d do 4 or 5 of the last 9 and he’d finish it up. So that’s where the project is right now but I know he’ll get it done tomorrow. There isn’t much left.

It was a good exercise on pairing. We set up a GitHub repo and added a collaborator then discussed what our next test was and how to approach it. Sometimes one of us would just go for it and code it. Sometimes we’d both go at it and whoever got it first would push it up. Henno was using git stash to get rid of any WIP he had and clone down the fresh updated code. I used that a couple times as well. I had heard of stashing but never done it. I know the code is still around somewhere.

I started work on my Rails App with a jQuery Front End tonight. I actually got a good ways into it. I’m getting more comfortable with jQuery and that’s helping a lot. I’m also learning some better patterns with respect to the DOM and how to work with and manipulate it. My jQuery project is a refactor of my Rails Portfolio Project. For example, I’m taking a show view that lists the items rated at a specific place and rendering those items via jQuery from a JSON call to the back end. The serializer makes creating the JSON objects so easy. ES6 Template Literals make writing multi-line HTML strings with embedded placeholders a lot easier than using concatenation or newline slashes.

// With ES6 Template Literals
data.items.forEach(function (item) {
  itemList = itemList.add(`<li><strong><a href='/items/${item['id']}'>${item['name']}</a></strong>
    <ul>
      <li>Rating: ${item['rating']}</li>
      <li>Notes: ${item['notes']}</li>
    </ul>`
  )
})

// With newline slashes
data.items.forEach(function (item) {
  itemList = itemList.add('<li><strong><a href="/items/' + item['id'] + '">' + item['name'] + '</a></strong> \
    <ul> \
      <li>Rating: ' + item['rating'] + '</li> \
      <li>Notes: ' + item['notes'] + '</li> \
    </ul>'
  )
})

// Concatenation
data.items.forEach(function (item) {
  itemList = itemList.add('<li><strong><a href="/items/' + item['id'] + '">' + item['name'] + '</a></strong>' +
    '<ul>' +
      '<li>Rating: ' + item['rating'] + '</li>' +
      '<li>Notes: ' + item['notes'] + '</li>' +
    '</ul>'
  )
})

So yeah, I’m happy about Template Literals. I’m also happy that since I’m only writing Front-End, for the most part, I think this project will go relatively quickly. I spent 90 minutes on it tonight and knocked out a couple of the specs. A decent amount of time was spent setting the project up then getting rid of the turbolinks gem when it broke my app. I decided to get rid of it completely rather than just figure out a workaround because my app isn’t robust enough to truly benefit from all that turbolinks does in my humble opinion. I also remembered other students further along saying the first thing they did after a certain point was remove turbolinks when they were working on projects. It’s looking like I’ll be starting to learn React this weekend and be even that much closer to graduation!

Henno and I committed to putting in some serious work and getting done before the end of the month and both of our next tuition payments come out. We’ll see how well we do and if we help keep each other accountable.

Time spent today: 9:15
Time spent total: 391:22
Lessons completed today: 1
Lessons completed total: 642

So I’m pulling back from my daily blog unless I have code to write about. I can concentrate on school and extra 30 mins to an hour per day if I don’t write. Here’s something interesting I’m pondering and haven’t tested yet. I’m not really sure why I haven’t tested it but…

// To ensure JS is loaded after the page loads
$(document).ready(function () {

})

// Better way to do the same
$(function () {

})

// Does this work?
$(() => {

})

Time spent today: 1:54
Time spent total: 374:10
Lessons completed today: 5
Lessons completed total: 629

I’ve reached the 100-day mark. I have to say, I honestly thought I’d be done by now. I’m 82% of the way there. It’s going to be a mad dash to the end. I really, really, really don’t want to pay another full month’s tuition when I finish a few days into that billing cycle. So it’s pretty simple. I have to finish by June 27th. We’ll see what happens. I have a backup plan if I’m literally working on my final project and I’m sure I’m not going to make it. We’ll see if it comes to that or not…

Tonight had me learning about workers in Rails apps and specifically the Sidekiq gem. It’s pretty sweet how easily it can abstract out letting a task run in the background so a user can keep on with their work. The example in the lesson is loading a large CSV of leads into your web app. First, you create a worker file in app/workers, make sure that file has include Sidekiq::Worker, then take the long-running process and input that into #perform.

# app/workers/leads_worker.rb

class LeadsWorker
  require 'csv'
  include Sidekiq::Worker

  def perform(leads_file)
    CSV.foreach(leads_file, headers: true) do |lead|
      Customer.create(email: lead[0], first_name: lead[1], last_name: lead[2])
    end
  end
end

After that replace the long-running process code in your controller by running the worker.

# app/controllers/customers_controller.rb
class CustomersController < ApplicationController

  def index
    @customers = Customer.all
  end

  def upload
    LeadsWorker.perform_async(params[:leads].path)
    redirect_to customers_path
  end
end

Now if you upload a large CSV file via the form at /customers, when you submit it everything will move along. Then as you refresh the index page /customers it will have a growing list until the CSV file is done being imported into the DB.

I also did a few lessons on Consuming APIs. Luckily for me, this is not completely new to me so I have a good base to work off of. Actually, this shouldn’t be completely new to anyone in the program as earlier labs deal with pulling API data and rendering it to the DOM. My main note on APIs is the querystring which trips me up sometimes.

  • ? after the URL
  • param=value&param2=value
  • ie. https://api.example.com/places?name=tonys&city=nashville

Although, I also learned how Postman has a params section with key/value pairs which helps with building out the query string.

Time spent today: 1:53
Time spent total: 369:58
Lessons completed today: 7
Lessons completed total: 621