I’m at the point in my program where all I’ve got left are projects and the corresponding assessments. Awesome and terrible. Awesome because projects are where the learning really happens, and where I tend to get into a flow. Terrible because project time is usually when my ego takes a hit. My track record for amount of time spent on projects has been all over the place. Would it take me a day or two to finish this project (Sinatra)? Or 3 weeks (Rails)? Also, the assessments with Learn instructors have been immensely helpful, but I get a bit nervous. So I tend to schedule my  assessments a ways out and over-prepare with my review of the material.

If you read my Rails assessment post, you might remember that my next steps were to extend the functionality of my Rails project with some jQuery magic. Hrm. Okay, not gonna lie, it took me a while to figure out what they were asking for, as each of the requirements didn’t necessarily ask for an additional feature, it seems like they were mostly describing specific design choices in order to implement the first couple of features.

Here are the Specific Project Requirements and my choices:

1. Must render one show page and one index page via jQuery and an Active Model Serialization JSON Backend. 

I had multiple models to choose from (Attractions, Destinations, Users, Trips), but since vacation planning was the whole point of my app, trips seemed like the obvious choice to work on. I wanted to be able to reveal a little bit more information about a trip on the index page, and on the trip show page I wanted to be able to cycle between all trips with a next button, for inspiration.

• *Trips Index page has a “More info” link that expands a section under the trip to show the trip’s city, start date and end date.
• *Trips Show page has a “next” link which updates the page by showing the next trip.

2. Must use your Rails API to create a resource and render the response without a page refresh 

This confused me for a long time until I went back through the end of the curriculum. Then I realized that it probably meant I was supposed to use AJAX post to create a new object. I chose to create a new attraction.

• *Via the Attractions page, you can create a new attraction (and associated destination and trip, which was a feature of my old app as well), and it will show it to you on the same page by exposing the new data in a hidden div, with no refresh.

3. The Rails API must reveal at least one has-many relationship in the JSON that is then rendered to the page.

• *Index page – a User has many Trips.
• *Show page – a Trip has many Attractions.

4. Must have at least one link that loads, or updates a resource without reloading the page.

• *Index page – has “More info” link that loads … more info
• *Show page – “Next trip” link 

5. Must translate the JSON responses into Javascript Model Objects. The Model Objects must have at least one method on the prototype. Formatters work really well for this.

This part confused me as well.  I guess they were asking for the JSON responses to be turned into JavaScript objects first before the updated data was rendered to the page. So for example I’d hit the page for trip information (in JSON), and then take the info I needed to create a JavaScript Trip object. Then I’d take that object and use it in the rendering of the information. Also, I’d have to add a method to the prototype. Easy enough.

• *Trip has the countdown() method
• *Attraction has the formatUrl() method

Anyways! Here’s a walkthrough of my updated project.  

Issues / Notes about this Project

Often times with these assessment projects what takes me the longest is just choosing a topic. It was easy to make project design decisions this time around, as I didn’t have to choose a topic from scratch. Altogether this update took ~6 days, which isn’t terrible, given my track record.

Switching my brain over to HTML/CSS/JS—- Front-end work isn’t my biggest strength (working on improving that…), so I found myself googling endlessly in order to figure out how to handle certain presentation issue… like figuring out how to dynamically create divs and populate them with data. For these issues, debugger and abusing console.log() were lifesavers. <3 u 4evah, Debugger!

jQuery is kind of like Rails in that there are several ways to get things done. Do I choose to add my information to the page via .text(), .html(), or .append(), and what’s the difference? Some time was spent trying to really understand the difference between the methods made available to me, but in the end I just experimented and went with what worked. I have no doubt I’ll be refactoring these bits soon enough as I learn more.

Really though, most of my impediments were simple JS mistakes. Missing semicolons, accidentally setting a div id with #… for example: <div id=”#attractions”> instead of <div id=”attractions”>, which of course didn’t work when I tried to select the div in jQuery… $(‘#attractions’). I would have needed to do $(‘##attractions’). It’s really the little things….

As I mentioned in my walkthrough, I still have two more issues that I’d like to look into. The more info button has to be clicked twice the first time around to display information, then it works fine. That might have to do with my use of jQuery’s toggle function. Also, I have to refresh the Index & Show pages in order for my jQuery to work, so it looks like something is up with my JS loading. I’ll look into that as well.

ETA: Yep, it had to do where my JS script tag was placed. Back when I initially set up my layout with Bootstrap I copied over their default install script tags to my layout and put them at the top of my page. DURRRRRRRRRRRR >_<   Well at least I was right in my guess about why it was messed up.

Other thoughts

The Learn Verified curriculum for JS/jQuery was less robust than the sections for Ruby and Rails, but I guess that’s to be expected as you’re not teaching the fundamentals, you’re mostly teaching quirks and syntax. I’d taken a JavaScript night class in the past, so I had some experience with the language, but if you’ve ever talked to me about learning to code, you know I have a mixed relationship with JS. I appreciate its power and ubiquity, but I hate how messy it can get. I am annoyed by it’s quirkiness*. But basically my main problem with JS is it’s hard for me to tap into that “JavaScript state of mind” and to feel the flow with the language. I suppose nothing can be done other than “MOAR JAVASCRIPT”, but I’ve been learning the language on and off for about a year now, and I am waiting for that love to come.

I’m mostly finished with the JavaScript section of my program, but I really want to feel confident about JS, so I’m going to go back and review with a few other resources before I move on to my Angular final projects: Udemy’s Understanding JS, the Weird Parts ($ but I am liking the instructor’s emphasis on understanding what’s going on underneath the hood), CodeSchool’s JavaScript and jQuery courses (flawed, frustrating, but fun), and Udacity’s jQuery & Intro to AJAX courses (free, but I don’t really jibe with their learning style).

*Speaking of quirkiness, is there such thing as a “manic pixie dream girl programming language?”