Hacking at App Academy

I will be joining the cohort of July, 2013 to improve my skills as a developer. We will be learning SQL, Ruby, Rails, HTML/CSS, JavaScript, Backbone.js, and much more.

[app-academy-hacker]

Post App Academy

Before starting App Academy, one of my biggest questions was "What happens after App Academy?"

I had hoped to continue blogging about the post-course curriculum and my ongoing job-search, but a happy surprise has curtailed that plan; I have accepted an offer to become one of the TAs at App Academy for the next group of students.

Here is what I do know about the experience after week 9 and after week 12:

Weeks 10-12

Our class will be the first to receive a full post-course supplemental curriculum which focuses on advanced concepts and job-search strategies. It sounds like students will practice white-boarding problems, refine their skills, and send out applications while supporting each other through the process. There is one TA assigned to the class through this final stage, and there will be continued lectures.

Post Week 12

We have learned that the percent of alumni who find jobs is still at 95%, one of the recent classes has hit the 100% mark, which is very encouraging. That said, job-hunting is stressful and it may take months for the right job to turn up. I really appreciate the positive and supportive attitude our instructors and TAs are taking, now more than ever, as my class "graduates" and enters the job market.

This will likely be my last entry in this blog. I will be restarting my blog at flarnie.com once I get settled into my new role at App Academy. : )

[app-academy-hacker]

W9D5 - GoodGames App Day 10

Various factors made W9D5 rather hectic for me, but I did manage to get my app more or less bug-free and presentable by 4PM.

Highlights of my Final Project:

Sign in with Steam and auto-organizing of imported Steam Games list into your 'played' and 'to-play' lists.

Completely 1-page app with Backbone.js

Using SASS for well organized styles

Nesting views within views within views to organize complex pages

Creating custom widgets with jQuery, backbone.js, and AJAX.

Validation at the database, server, and front-end.

There is actually a list of features and refactorings which I hope to complete for this app in the future; most of my peers ended the two weeks with a similar wish to add more and improve their app.

Overall, building an app from scratch was a great experience.

[app-academy-hacker]

W9D4 - GoodGames App Day 9

Today I spent a luxurious amount of time refactoring and improving the code itself. There is still much to do, so tomorrow I will focus on making the current version of the app presentable and closer to bug-free.

Cool Things from Today:

Writing a custom urlHelper method to avoid hard-coding url-fragments into my EJS templates

Creating views within views within views (within views?)

Using a view-swapping router to avoid "zombie views"

Heap Profiling with Chrome DevTools

I could write a whole entry on each of those. Maybe this weekend - in the mean time, I have a lot of other things on my mind.

[app-academy-hacker]

W9D3 - GoodGames App Day 8

So many possible features, so little time!

Features Added:

Completed the ratings functionality, with rating metadata listed about users.

Filled out the user profile pages

Friending! You can CRUD (create, read, update, and delete) friendships with other users.

I hope to get some advice tomorrow about how to spend the last two days - should I focus on debugging, adding more features, or some of both?

I also had an ill-timed but super exciting chance to make a bite-sized contribution to an open source project last night. I got to try out Stylus CSS, which is pretty much like SASS. I really can't resist working on good code, even when I should probably go to sleep....

[app-academy-hacker]

W9D2.5 - Accessible Hidden Text

The best trick I have seen yet for including 'hidden' information for screen readers was waiting for me when I inspected the ratings widget on GoodReads today.

Each star is actually a link with the text "1 out of 5" through "5 out of 5", cleverly styled to look like a text-less star. One common mistake to creating 'hidden' text for screen-readers is to set 'display: none' with CSS, which defeats the point by hiding the text from many screen readers as well! It also defeats any SEO benefits of the hidden text. The front-end devs at GoodReads instead set the font-size to 0, so the text is truly present in the markup while becoming invisible in the layout. What a great technique!

[app-academy-hacker]

W9D2 - GoodGames App Day 7

Features Added:

Adding games manually

Pre-validation of the new game title on the client side

Initial game rating widget (in progress)

The game rating widget is getting really tangled amongst various DOM elements which switch classes on certain events, and I am hoping to find a way to clean it up. I also plan on making some quick star graphics in Photoshop to show the "5 stars" of the rating system.

[app-academy-hacker]

W9D1.5 - Styling Tables (for tabular data, of course!)

Having spent very little time styling tables in the past, I was surprised to see how differently they react to width and height settings when helping a friend with CSS today. When you set a fixed width on a div, using 'width' or 'max-width' in the CSS, any child content wider than the fixed width will overflow it's parent container. That makes sense.

What doesn't make sense to me is that nothing seems to force the same behavior for a table cell. We found a solution at the time, (using 'max-width' for all the table cells), but I want to know why this works so differently.

Here is an experiment I threw together to document this behavior:

(Tumblr is not displaying the iframe properly, so here is a link:)

How to style table cell width, on jsFiddle.

[app-academy-hacker]

W9D1 - GoodGames App Day 6

Features Added:

Uploading games into my database from user's Steam account

Auto-generating a list from the user's Steam game list

Auto-sorting of the user's Steam games into their 'played' and 'to-play' lists

Added a more complete sidebar and footer.

Moving forward, I want to really polish the site and add the rest of the basic functionality; CRUD of friendships, reviews, ratings, and messages between users. This is nothing new: we'll see how far I get on Tuesday.

[app-academy-hacker]

EJS Templating tips

GoodGames is an entirely "one-page" web application, so much of my time was spent writing (and debugging!) EJS javascript templates.

Writing Good EJS:

Tab everything consistently, whether it is JavaScript or HTML.

Use 'escape' instead of 'get' when accessing Backbone.js objects and including them in the markup.

To access the 'id' property of a Backbone.js model, you can simply write obj.id rather than obj.get('id') or obj.escape('id').

If you have a lot of logic in the template, try to break some of it out into methods on the models or in the view which renders the template.

[app-academy-hacker]

W8D5 - GoodGames App Day 5

Today was so full of interesting topics! I will blog in more detail about one or more of these over the weekend:

Using Chrome DevTools in a smarter way

Organizing CSS with SASS

EJS templating tips

Debouncing in JavaScript

I made some great progress this week, and have a few code snippets to share from today's work.

Features added today:

The button for adding games to lists is completed, and is a twin of it's counterpart on GoodReads. That was a feat of front end madness.

The app finally has some real style.

Code snippets I used in the course of figuring things out today:

Moving forward, I know that I will spend more time working on this app. Despite having tolerable style and basic functionality, it will really shine by the end of next week.

That said, I need to work on something different for at least a day. We'll see what I can cook up this weekend.

[app-academy-hacker]

W8D4 - GoodGames App Day 4

Today's Features:

Integrated the CRUD (Create, Read, Update, and Delete) functionality of lists into the 'show', 'edit', and 'search results' pages of my front-end. I am getting the hang of separating the resourceful routes into Backbone routes and views.

SASS really makes styling a breeze; I can't believe I went without it for all this time! SASS, where have you been all my life??

Progress

There will always be more features to add. There will always be more bugs to fix, and more ways to refactor the code. Today I finished some of the "base" functionality of my project, and by the end of tomorrow I hope to finish all of the "basics" as well as styling the project. I will spend part of week 9 polishing GoodGames, but I really want to build a second app as well. Some technologies that would be fun to work with in a second app (either next week or in the future):

Image Uploading (with Paperclip?)

WebSockets

Another front-end MVC framework (So far I have been happy enough with Backbone.js, but I know there are better options out there)

Improve my approach to testing

Try out the Devise Gem and connect to more APIs

I can't resist a challenge! : )

[app-academy-hacker]

W8D3 - GoodGames App Day 3

Progress Today:

TDD implementation of CRUD lists

Debugging

Initial styles

I explored using a TDD (Test Driven Development) approach for my latest feature, (CRUD lists), using RSpec and FactoryGirl, including learning a neat trick documented here for specifying the association on your factory objects.

So far I haven't gotten "stuck" on any bugs, but they regularly take 10-20 minutes to solve. The time spent debugging adds up, and I hope to continue to improve my abilities to squash bugs. One technique that a friend showed me was to run JSLint. I used the online app version, but would love to find a plugin for textmate or something similar to run it constantly on my javascript.

I have been putting off styling the app, because that is actually one of my favorite parts and I know that I can get carried away when working on it. I added my usual CSS reset and a css grid (the one % fluid grid), but I'm not super pleased with the grid and might switch to a framework like skeleton.

[app-academy-hacker]

W8D2.5 - GoodGames App Day 2

So many exciting things! Today's features:

Allowing users to log in with Steam using OmniAuth

JavaScript Unit Tests with Jasmine.js

Bootstrapping the current user data on load of root page, to persist user's logged in state.

Things I read about but haven't implemented (yet?):

Integration testing of Backbone.js apps with RSpec, Capybara, Selenium, and maybe Phantom.js

Allowing users to log in with the Facebook API

User Authentication with Devise

[app-academy-hacker]

W8D2 - Testing JavaScript Front Ends

In the past, I have followed along with this great tutorial from everyday rails on testing with RSpec. However, when trying to test my pure-Backbone.js one page app, I ran into numerous bugs, the final of which was similar to this post on stackoverflow. I ended up settling for writing unit tests of the Backbone.js methods with Jasmine.js, but I hope to eventually get some integration tests working too.

[app-academy-hacker]

WK8D1.5 - GoodGames App Day 1

Today was the first official day of working on final project #1: GoodGames. (GoodReads, but for games.) Building a full-stack app in one week involves choosing priorities carefully: what details are most important to get right? How much testing to do? Should more time be spent on the front-end or the back-end? For this app, I am focusing on using Backbone.js and really pushing myself with JavaScript. The Ruby on Rails part of the project is reduced to serving as an API for my Backbone.js front-end. For testing the Backbone.js code - something completely new to me - I am going to look into Jasmine and/or Mocha. I am also going to work with the Steam API. Looking forward to getting both of those cooking tomorrow.

[app-academy-hacker]

WK8D1 - Chrome Devtools Shows Updated JS Object

Today I learned a quirk of the Chrome devtools console that I have yet to find documented anywhere: If you console.log a javascript object and examine it, you will always see the most updated version of the object rather than the state of the object at the time it was printed with console.log.

My humble example:

The below log statements are of the same model, both printed before the model has had any attributes saved to it!

(screenshot of Chrome devtools console:)

On my landing page, there is a form to create a new user. To debug this form, I put a 'console.log' statement in at the top of the function called when the form is submitted. The object expanded under the text "this model is " represents the model that will be saved with the new user data. However, this model is actually totally blank when I print it with console.log. The last line is a log statement specifically of the .attributes of the model, and it shows (correctly) that the model's attributes are blank at that point in the code. The previous line, because it is expanded, shows the final state of the model even though it was printed before the attributes were filled out.

GAH!

Knowing is half the battle.

[app-academy-hacker]

Mind Maps of Web Apps

I find mind maps useful when planning the resources and associations in a web app. Bubbl.us is a cool app that helped me plan out my cool app: