One minor problem

I received my evaluation for project 5. I didn't meet expectations on exactly one item from the rubric. When I did my error checks, I was catching when the Flickr API would be unavailable, but I didn't think to check if Google Maps was available. I guess I assumed that if the page was accessed, it would just BE there. It turned out to be an oversight, but it was a requirement that I missed - so, I will work on addressing that this weekend and resubmit the project. Hopefully it won't take the full two weeks to get reviewed, but that is up to the coaches and their workload. With five(!) different Nanodegree programs going on at once, I am positive they are loaded up with work to do.

I'm keeping in touch with other students that have finished the Front End Nanodegree, usually through chat. It's been good to see everyone supporting each other, celebrating successes and generally helping when there are questions about topics that weren't even covered by the courses. By sticking together, we are expanding our collective knowledge and helping each other to continue to learn. 

Waiting is the hardest part...

It has been a week since my final project was submitted. I probably won't get the review until sometime next week, but that doesn't stop me from coming back to the Udacity portal and checking to see if it has been updated.

It's been a little odd, not having a project specifically waiting for me to work on. I'm so used to spending several hours per week on coding, that I actually miss having the work. The extra time has allowed me to step back and look at what I should be doing - after all, the learning should not stop just because the classes do.

In the Udacity portal, there are several checkpoints set up for students to go back and update their previous projects (Interactive Resume and Project Website, in my case) as well as adding completed courses and projects to their LinkedIn profile. There have been recommendations to also follow several influential people in the Front End community, via Facebook, Twitter or blogs, to keep up with how related topics are evolving. For example, Paul Irish (Website/Blog, Twitter, LinkedIn) is a front end advocate that is highly regarded, and takes time to help the community by talking about current trends and technology. By following these thought leaders, a student can stay abreast of changes and trends that affect what they do (or will do) on a daily basis.

I don't do a lot with Twitter, as I have never found the medium to be very engaging. My LinkedIn profile needs work, even after doing some updates to add Udacity courses to it. None of my web profiles even features a picture of myself (we are always our own worst critics). These are things I know I need to update, if for no other reason than to have a consistent presence through GitHub, LinkedIn, Stack Overflow, and other professional sites. Eventually, that will happen.

To fill the coding "void", there are a few sites that have been recommended by fellow students:

• CodeWars - a site where people create code challenges, which other people can then solve
• Code Combat - learn to code by playing games
• typing.io - "typing practice for programmers"

There are others, to be added as I remember/see them again. The basic idea of each is to continue using your mind to challenge yourself with code problems, keeping skills fresh, and maybe learning more in the process.

If nothing else, they can be a fun diversion. And when its fun, you don't mind learning.

Project 5 Submitted!

It's finally done. After finding that what I wanted to do with the Flickr API, it was actually MUCH easier to implement a lightbox carousel in Knockout than I thought it would be. A few DIVs, a virtual Knockout assignment, and presto! Lightbox!

Once that was in place, it was just a matter of adding a few controls (close the photo with an X, and arrows for paging though the photos when there are more than one to view). This is where Knockout shines. Adding this was very simple to do, by having the controls as data binds back to observables in the ViewModel. This allowed me to make changes quickly and effortlessly.

Before submitting everything, I did ask the members of my cohort if someone would be willing to look through my code. A few brave souls did exactly that, catching some things I had missed from my code arrangement (recommendation to put the 'self' declarations at the top of the section, then the declarative functions) and in the rubric review (my mobile media queries were missing from the CS file). Little things that I might not have noticed on my own, but a second/third/seventh set of eyes always helps, especially when coding.

It feels good to finally have that last project completed and submitted. I am hoping that everything is up to par for the rubric, so that I don't have to rework anything. Having to resubmit will probably throw me into paying for an extra month, as well as extending the time before my nanodegree is truly complete.

I can honestly say that I have learned a lot through the courses, and I am so glad that I decided to take this journey, to refresh and modernize my web skills. I am already recommending the nanodegree course to anyone that does a little web development already, or wants to do it in the future. 

Almost there!

The past few days have been spent trying to attack the InfoWindow on my neighborhood map. I say "attack", as it has felt like a battle to get the last few features to work properly.

I have a series of locations for my map in geo-coordinates (latitude and longitude). I have decided to use Google's reverse geolocation API to turn those into addresses to display in the InfoWindow above a marker when it is clicked. However, doing the request causes an asynchronous function to fire (calling out to Google, and getting a response back) - and my code doesn't wait for the response. I can pull data, and verify it is coming back, but each request seems to show up well after the code has moved on.

I tried using setTimeout, but that didn't seem to allow any response at all to show up. I have moved the function in and out of several other functions, and even tried to run it on its own, but I keep getting an undefined display item in the window.

After more research, I decided to put the geocode request into the listener where I build the InfoWindow. This is working, thankfully, but I feel like it clutters the code a bit, and should be able to be refactored out on its own. Each time I try that, however, the process fails. So, for now, it will stay where it is.

This leaves me with one last major hurdle: implementing a third party API. I decided to look into using Flickr, as it seems to be pretty easy to pull photos based on the geolocation. I have found some basic instructions on how to pull pictures; getting them to display is going to be the more difficult part. Hopefully, it is not nearly as complicated as I am making it out to be.

Take advantage of the cohort

I find it interesting that this last project is drawing out the details of the process, where my previous entries did not. I don't know if it is the fact that it IS the last project, or that it feels like a culmination of skills learned so far, and therefore requires more expression of thought. Either way, I hope it is useful to those that read it.

Remember in my last post, where I spoke about overcomplicating things? Yep, I did.

I ripped out the entire search section, and did more research on Knockout, specifically finding some code that using the ko.utils functions. There are a lot of helpful functions that are built into KO, but not necessarily listed on the main documentation page. I tried to adapt a few scenarios, but still could not get the markers or list to respond to my changes that the code was doing in the background.

One of the advantages to the nanodegree program is the cohort system. Basically, when signups are taken in the beginning of the month for a specific nanodegree, all students that start in the same month are grouped together in a cohort. That group stays together through the entire series of projects, allowing students to bounce ideas off of each other (unless you fall behind, in which case you are switched to a later cohort, so that the projects that you are working on are the same as your cohort).

Since I knew I was missing something in my code, I took a moment to present my issue in the group chat to the rest of the Front End students. Two students did take the time to look over my code, and pointed out what my issue was - a complete misunderstanding of what I was supposed to be doing. Normally, when I use JavaScript, I code very linearly, almost as if I am using it as an event engine. However, Knockout uses an object oriented approach. I was treating my code as if it was processing events, not objects. Thankfully, both Tyler and Dallas recognized this pretty quickly, and suggested that I look at my issue differently. With a bit of guidance, I was able to correct my process and rewrite the search in less than two hours, and even added a bit of real-time flair to it.

What I also appreciate about the help that I have received (and try to give back when I can), is that students recognize that handing someone an answer is not going to help them in the long run. Sure, an answer might fix the immediate issue, but it doesn't allow the person who needs the help, to really learn how to recognize the issue if it comes up again in the future. I was given a basic idea of how things might be put together, and allowed to put together the details myself.

Even in the forum post from yesterday, Matt took the time to point out lines that needed to be addressed, but did not cut/paste the entire section and put it on a platter. This is the benefit of the cohort approach - those that have worked through the issues, can help those that are currently struggling with those same issues. Also, there are a lot more students than coaches, so availability is higher. (Not to take away from the coaches, as some do spend a lot of time being available as well.)

So, another hurdle cleared - more to go, but the light at the end of the tunnel looks more like destination than an oncoming train. 

Getting out of my own way

This is definitely the hardest project so far in the nanodegree.

Although using Knockout is actually pretty straight forward, the MVVM design process is what seems to be giving me the most trouble. After working through several versions of my code, I backed up and realized that I was overcomplicating the process.

Before refactoring the code, I had followed the example on the Google Maps site pretty closely, and things were working as expected. When I tried to break the code out into the MVVM pattern, I actually went TOO far, and split out things that didn't need to be, such as the mapOptions, and moving them into the Model section, rather than the ViewModel where they belonged. In the process, I was making references between the two that didn't need to be made.

After cleaning things up, I added my map markers, and presto! My map now shows all of the proper markers, and even sizes itself properly for the viewport.

Next, was adding the list of locations. This too started out with what I thought was a simple format (use the list of markers already in memory, iterate across and list the names). However, I had an issue where the names were going into memory where I could write them out to the console, but they would not display at all in the list container that was on the map.

I spent several hours trying different permutations of code, as well as researching possible reasons. Part of what made it hard to address, was the lack of errors in the console. Normally, when things can't be found, JS is real good about throwing errors. It turns out that Knockout doesn't necessarily throw an error is something is missing.

I put a post up on the Udacity forums, and Matt was kind enough to look through my work, and pointed out a major issue I was skipping over: using the "var self = this" construct in the ViewModel. The Javascript Design Pattern course specifically goes into detail about using "self", so that the code is more specific about defining scope. In setting up my ViewModel, I had failed to do this, and therefore my data binds on the HTML side were not being properly referenced.

I'm not sure exactly how I failed to add that, especially since a lot of time was spent talking about it in the course. Matt did give me a few code lines to check, and by making the proper updates, I was able to get the list to show up.

I started working on a search bar for the page, which would allow a user to filter the markers down to a specific set, based on the names of the locations. I was able to make the filter work to remove and replace items on the list, but the map markers did not change. So, another few hours, and then the map markers would disappear when the list items did. In the process of doing that, though, I ended up breaking the filtering, and though it would eliminate items, I could not get them to come back. Another hour of work did not reveal anything specific, so I am going to step back and take another look tomorrow.

With the way this has been going, I suspect I am overcomplicating something again, and maybe a fresh set of eyes on it tomorrow will show me what I am missing.

Gotta get over the bump in the road

As I continue to work on Project 5, I am finding myself stuck at the start, so to speak.

My approach to start the project is to get the map to display, before doing anything more. I pulled up the Google Maps documentation, and pretty quickly had a working map displayed. However, trying to refactor this into the MVVM layout for Knockout is not going quite as well, though. I was able to split out the data into a model, but I cannot get the map to display, no matter what I put into the viewModel portion of the JS code.

I decided to go back to the course and watch the course explanation of Knockout again, as well as working through the Knockout tutorials. I have ideas of how to expand functionality based on that research, but I don't feel any closer to a solution on getting the basic map working in this framework.

I could probably look at a few Github repositories to get ideas. However, that feels a bit like giving up before really making sure I have exhausted all other possibilities on my own. I want to be able to say I did this all with my own research, and not based on reviewing the work of other students for inspiration.

With the weekend coming up, I can devote some serious time to further research, and probably get a few pointers in HipChat from other students that will put me on the right path.