We did it! We’ve finished the app academy curriculum. It’s been a demanding, intense nine weeks, during which we’ve all probably put in over a thousand hours of learning by doing. I feel like I’ve really gotten what I wanted out of it (short of a job), which is the feeling of confidence and competence. When we sat down to work on our final projects, I wasn’t daunted by the empty screen; instead I just started coding, and kept coding for two weeks until I had a working clone of a real, production web app. And it felt great.

“Going HAM on the DOM” is how I’d describe my recent efforts. Which is to say, it’s going well! I’ve really focused on implementing the annotations, which are the singular, killer feature of Genius, and I feel I’ve done them justice. I spent much of today doing detail work on annotations, including trimming leading/trailing whitespace from annotations, and figuring out how to handle edits to the source text with regards to the offset indices of preexisting annotations. I’m not sure what happens on Genius, when lyrics get edited to the point of removing an entire annotation’s anchor range, but I think I’ve almost figured out a reasonable way to resolve that case in any event.

Today I learned a thing or two about the limitations of plug and play usage of a third party library. I spent about a good few hours trying to configure Twitter’s typeahead jQuery plugin to use a Backbone collection as an async data source, and I just couldn’t work it. I tried to dip into the source code and see if I could make sense of it, but it’s not a project like Backbone or Underscore that makes user understanding and ease of extensibility a primary goal, which is all well and fair, but I’ve got to learn to faster identify the ease of use of a third party library before assuming it will be easily plied to my useage needs. Anyhow, after those somewhat frustrating few hours, I managed to roll the same functionality I had wanted in a fraction of the time using vanilla Backbone; the only thing I wanted which is missing was autohighlighting of matching letters in the search results pop up, which, thanks to my recent adventures in DOM land, I defnitely know how to implement! Though it would be a pretty disproportionate amount of effort for how small a detail it is, so it’s not on my immediate todo list. Even though it was a frustrating day, it’s good to realize that I can do more on my own than I might initially assume when approaching a novel challenge.

Continued my adventures in DOM land today. This time to read the vertical offset of an element on the page so as to match the vertical position of another element (which was neither a sibling nor in the same relative position region so I don’t think there would be any other way to relate their positions). I also started taking advantage of the benefits of SCSS, making use of a mixin to easily refactor what had been a top-level style to differentiate between fixed width and full width regions throughout my layout, as well as using includes to break up what had been a 500 line mess of styles.

I spent a good chunk of the day struggling with a nasty corner case, but finally managed to figure it out. It might not have been quite worth my time, this being a academic exercise after all, but I certainly learned a lot from it, and got the satisfaction of solving a hard problem. The issue was that, when you use the JS Web API to get a selection (i.e. when you highlight a piece of text with your mouse), it gives you an offset into the given DOM text node, not the overall piece of text, which is problematic if you have inline tags in that piece of text, which I do to demarcate previously made annotations. It’s not a huge problem, as we can just get the selected text, and match it aginst the overall body to get the “true” offset, but I quickly realized that the naieve approach wouldn’t work if the selected string was repeated anywhere in the lyrics (as lyrics tend to be). So I either had to scrap my use of window.getSelection, which seems to be the only built in way to work with highlights, or dip into the world of html nodes - so I chose the latter, and now I’ve seen one layer of abstraction beneath regular html elements. There’s some interesting stuff down there!

Nearly a week into our final project, I’m pretty amazed at both how much I"ve been able to build, and how much more I have left to do. Of course, I’m not going to be able to re-create Genius in it’s entirety in two weeks, but that won’t stop me from trying. One of the best things about this project has been noticing that I finally feel a sense of fluency when I code. Not to say that I’m a master of Ruby or JS, but rather, I rarely come to an impasse where I completely have no idea how to proceed, and I can maintain a steady rhythm of progress on my project, which has always eluded me when trying to code undirected in the past. That’s sort of the main reason I wanted to do a “boot-camp” like experience, to get enough regular, consistent practice coding that I no longer feel daunted or inadequate when facing down a blank file or a new project. I’m really pleased to be feeling this level of confidence in my coding abilities.

Made a lot of progress on my final project today, though it’s always a bit hard to perceive one’s progress when your site is essentially contentless, especially since genius is such a content-driven site. Nonethelss, I’m almost at the point of the MVP. The only big technical hurdle remaining is figuring out how to parse the select events to create new annotations, particularly in figuring out the best way to calculate the offset of characters into the content to anchor the annotation, while avoiding nasty edge cases like ending on a new line, or only selecting part of a word.

Today I spent the majority of my effort figuring out how to roll my own user auth system using Backbone. It was a bit of a time sink, but I’m pretty damn pleased that I managed to get it working on my own, without any tutorials or guidance. At the end of the day our teacher told us he’d mailed us just such a tutorial; but while I may not have needed to figure it out on my own, I think it was worth it for the learning exeprience. I can already see a number of ways in which my solution can be refactored and improved, so I think I’ll take another pass at that before reading my teacher’s tutorial and integrating any further improvements it directs me to.

Today we started our final projects! It’s pretty exciting, and also a little daunting. But it’s particularly enjoyable to not feel rushed to finish a projet by the end of the day, and have the time and flexibility to configure and structure my project how I want. I’ve also been taking the opportunity to write unit test coverage as I go foreward, as I’m still eager to get more experience with TDD. Today was mostly a review of the Rails materials we covered some weeks ago, but I starting tomorrow I’ll be wiring up a Backbone app on my front-end to a Rails back end I’ve built from the ground up - the first time our two major areas of study have met in our own hands.

Today we spent one more day on our Trello clone before starting our final projects tomorrow. It’s definitely illuminating to notice how quickly complexity can accrue in even a relatively modest project. I need to improve my workflow and skills with my text editor and command line, as I often noticed I would have too many tabs open in my editor which would distract me from switching between the contexts I needed to. But even though it was a struggle at times, it was pretty awesome to have a fully drag and drop UI that, if I do say so myself, was a very convincing impression of the look and feel of Trello itself. I can’t wait to do the same with Genius for my final poject!