I recently shared my portfolio site with the Free Code Camp Nashville group and got some inquiries into some of the technologies and features I used to build it. So I figured I’d share all aspects of the site and some steps to utilizing the same tools I did.

Should I build my site from scratch?

When I asked this question to the ever helpful NashDev community I received a resounding “No” from Senior devs. This might seem counter intuitive, however, the overall thought process was if you’re just starting out, unless you’re looking to be considered a designer, then using something someone else has already done very well as the base of your portfolio is better than building it yourself. Concentrate on highlighting the things that you are going to be doing in a potential job, not on the overall layout and design of your portfolio site. I decided to go with a template from HTML5 UP for a few reasons. First, they’re FREE as long as you keep the attribution. Second, AJ who creates these amazing templates is based out of Nashville just like me and had in the past connected me with some solid people to have beer/coffee with and discuss my career. Third, it’s a static site. That is, it’s 100% HTML, CSS & JavaScript so I would have many simple options for hosting when I got to that point. Lastly, all of the templates are responsive so if a potential hiring manager clicks through from their phone they’re going to get a great experience.

I’ve got my template, now what?

Fill er up with content! So this I don’t think I can help with too much. What you decide to include on your site is going to be up to you. However, as this is going to be something professional shy away from anything controversial. Keep it scoped around the skills you have and things you have built. A couple resources that I used for my site. The high-res background images I used all came from Unsplash. Unsplash describes itself as:

Beautiful, free photos.
Gifted by the world’s most generous community of photographers. 🎁

There aren’t that many coding images so once you’ve seen them you’ll start noticing them all over the web. Check them out and see if you can find interesting images that represent YOU and use them. Or don’t. Like I said, it’s up to you. Another cool place I found but didn’t get to integrate is Coverr which provides “beautiful, free videos for your homepage”. I still want to replace the top image on my site with one of their videos on a loop. I just haven’t spent the time to figure out how to implement it within the template I am using. All of my technology icons come from DEVICON which has sweet full color SVG’s. Note, if you don’t see it on the linked site check there GitHub repo here as I found not all the icons are on their site. Just look in the icons folder of the repo. I like these icons because since they’re SVG’s they they will look great no matter their scale. For example this Vim icon:

I implemented my contact for by using Formspree which is a sweet way to add a form to a site super simply. I wouldn’t suggest using them for a production app but for something like this they’re perfect. They also include reCAPTCHA by default so you won’t have to worry about spam.

It’s done! How should I host it?

Before moving on to picking a web host, I think you should get yourself a domain name. I’ve been an avid user of Namecheap (Full Disclosure: This is an affiliate link. I recommend them because I use them not because I can get 20% of your domain purchase.) for years and purchase all my domains through them. Try for a first name, last name domain. Stay away from domains that are truly vanity and try to stick to .com, .io, .me if you can. They’re just easier to remember in general. Once again, do what you want. This is just what I would do.

Now because you’ve built a static site there are MANY free options that you can use in conjunction with your domain name for hosting. I currently use Surge however, Now, GitHub Pages and Netlify are also very common, free and easy to use. If you’re looking for a more fully featured web host I currently use GeekGhost (Another affiliate link) and enjoy them. I haven’t had any issues, they allow Let’s Encrypt SSL Certificates (an easy and free way to get your site using HTTPS) and their base plan is only $3.50/mo! I won’t go through deploying your site and setting up your domain name as this will be different for each host you may use. Feel free to ask host specific questions in the comments.

I’m online, what now?

Honestly, not much. Just make sure to link to your site from your resume, on LinkedIn, etc… In addition, remember to keep your site updated as you gain new work experience, publish new projects, and acquire new skills. You never know who might be looking at your portfolio and decide they want to reach out to you!

👇 If you’ve enjoyed this post or found it useful please share it. 👇

freecodecamp nashville

After taking a hiatus from our meetup for a month due to family obligations, Dave and I were back at it again this month for the freeCodeCamp Nashville meetup. This month we pulled together a group of technical recruiters for some Q&A. The premise behind this time together was that recruiters can be a valuable asset to people in the tech scene through their relationships with companies as well as their knowledge of how to best get past some common barriers. However, recruiters seems to get a bad wrap in general due to some bad apples in the industry. Those people who are required by a company or boss to get X number of calls or contacts in per day per position. I know I’ve personally received emails about positions that I know I’m not qualified for and anybody who took a few seconds to scan my LinkedIn profile would know as well.
Continue reading

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.


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.


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 => {
        .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.

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]

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) {
    if (nextIndex === itemsValues.length)
      $('.js-next').attr('data-id', itemsValues[0])
      $('.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
    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>
      <li>Rating: ${item['rating']}</li>
      <li>Notes: ${item['notes']}</li>

// 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> \

// 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>' +

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