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.

Nanodegree = Promotion!

I am making progress with Project 5. Not quite as much as I had hoped, as it seems I am still having a few issues with Knockout and the MVVM paradigm, but I can review the course material and see if things start to clear themselves up.

The reason for this blog post, however, isn't all about the project, but more about the nanodegree program itself, and what it has done for me personally.

I had received a tip from a former colleague at work, that there was a front end position opening in his department. From the description, I thought the job was more of a full stack opening, as they were looking for someone with HTML, Oracle database, and Perl knowledge. I happen to use all of those languages/technologies in my current work, so I decided to apply.

With the courses and projects I have already completed in the nanodegree program, I feel confident that I can step up and succeed in the front end position. In return, I would be getting a promotion, a raise, and a lot more responsibility.

I had my interview today with the hiring Associate Director. His intention is to create a small team that would consist of just three or four people, covering project management, back end database, and front end design, to create solutions for a portion of the Finance department. The front end person would be responsible for not only creating the web presence, but deciding what frameworks and technologies will be used in those pages.

I started the nanodegree program to brush up on my technical web skills, and learn about modern web design technologies, so that I could benefit my current team. It has turned into much more, now becoming an opportunity to stretch my wings and share those skills with a whole new team, building from the ground up.

It is only because of this nanodegree that I was able to say, "I know this, and I can make a difference." Thank you Udacity for what you do for all your students!

Project 4 - Passed!

I had started on the web optimization project Back in the middle of December, and received feedback that advised my project wasn't meeting all the specs that it should. The nice part about the evaluations that come back from Udacity coaches, is that the description of what is wrong is usually accompanied by suggestions on how to address those issues.

I followed the suggestions from Poornima, and my resubmission finally met the requirements.

Because I didn't use the gulp/Grunt build tools, I didn't expect to get "exceeds" on this evaluation, even though some of the rubric points did exceed - but that's ok. I'm happy with what I learned, and feel like it will be very useful in the future.

Diving into Project 5

Down to the last project!

Several of the students in my cohort that spend time in HipChat and Piazza helping other students, have progressed to the point that they have completed the nanodegree.

Seeing Dawoon Choi's completion certificate (as well as Kevin Mayo's, and Ben Halperin's, and... you get the idea) has inspired me to get into this last project, and finish out my nanodegree.

I have completed the first lesson in the JavaScript Design Patterns course, and I have to agree with the other students that have commented on how well done the presentation is. Ben Jaffe takes the Model View * design, and makes it easy to understand. Even the examples used for demonstration were well laid out, and easy to follow. Like other Udacity courses, I am sure the complexity will ratchet up. Unlike the Object Oriented JavaScript course, where it felt like the material was too complex to pick up as it was being presented, this course has a pace that feels easier to absorb.

There is quite a bit to do in each lesson, so I'm doing one per night this week, which should put me at the point of doing my own project over the weekend. I expect this final project will take a few weeks, just as the arcade clone did, as the students get to "make it our own" with the presentation and details that get added into the project.

I admit, I did not go back and use the build tools for project 4 - I don't know if that is going to prove to be a hindrance in the way this project turns out. I might need to back up and do that before getting too deep into the actual project.

Project 4 resubmitted

After quite a while away from it, I finally buckled down and updated Project 4 for resubmission.

In looking at the project again, and following the suggestions from my evaluation, I was able to find some additional optimizations that I had not looked at previously. It turns out that I had missed one correction to the JavaScript that I had actually done on another part of the code, but didn't realize that it could have been done in several locations. By making that ONE change, I was able to drop the cost of the pizza resize by almost a factor of TEN!

On my system, I am able to get the pizza page to display at better than 60fps for scrolls and programmatic resizing of the pizzas. I did find, however, that scrolling via a mouse was very consistent in frame rate, but scrolling via the arrow keys caused the screen rate to drop to 12fps. I'm not sure what it is in the iMac hardware that is causing it (possibly because it is a Bluetooth keyboard?), but there is a significant difference between mouse scroll and keyboard scroll.

I also updated the README file that I somehow completely missed the first time I submitted the project. I kind of feel like I am giving away the "secrets" to the project completion, but this is what was requested, so I put all the detail in that I could remember.

I just hope it is enough.

Project 6 - Passed!

With the holidays being busy (for both students and coaches, I expect), I wasn't terribly concerned about the fact that Project 6 had been submitted back on December 18th, and as of the two week mark, I had not received an evaluation.  I had taken a slight vacation from my nanodegree work after that submission.

Today, I received my evaluation on Project 6, and it was...

As I had posted here, this project was very similar in concept to unit testing I had learned for Java, but much easier to understand due to the syntax Jasmine uses. I added two additional tests that seemed to make sense for extending the usefulness of the feed reader. One of the tests works on the feed reader as is (assuming the page as presented is default), and one test which does not work, but could if additional functionality is added. The nonfunctional test is marked it as "pending" using Jasmine's pending() function. By marking this extra test as pending, the other tests can run, leaving the pending test as a yellow mark - rather than throwing red errors across the screen.

This leaves the rework for Project 4 and new work on Project 5 to be completed, in order to finish out the nanodegree projects. With this evaluation now under my belt (and holidays well past), I'm ready to get back into the Front End Development mindset.