International jQuery Tic-Tac-Toe

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 upon 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 setup 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 whomever got it first would push it up. Henno was using git stash to get rid of any WIP he had an clone down 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 in 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 place holders 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 work around 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