[catamarander-at-app-academy]

W7D5 - Trello Clone

We are off on our own for W7D5 and W8D1. With very little guidance, we're building Trello clones in preparation for our final projects.

We've submitted our final project proposals and our last assessment is W8D2, so this is an intense period!

[catamarander-at-app-academy]

W7D4 - More Backbone

I'm really finally starting to feel strong with Backbone. Today, we implemented a News Reader which fetches articles from predetermined sites (no ability to add new sites quite yet). We made sure to keep the CollectionView Pattern applicable from yesterday.

I feel like a weight has been lifted off my shoulders since Backbone has truly started feeling like second nature and less like the Chinese Room.

[catamarander-at-app-academy]

W7D3 - Backbone CollectionView Patterns

When rendering individual models in a collection, there are two main options. The first is to create one template that iterates over the collection via embedded JavaScript. The second is to use two separate views. The first being an index view, which iterates over each model. The second being a model view, which renders a separate template for each model. These are passed to the index view, which inserts the aggregate into an element on the page.

This helps to enforce the single responsibility principle since you can edit how each individual model is rendered without affecting the logic of its aggregate.

[catamarander-at-app-academy]

W7D2 - Routers and Views

We wrapped up our Pokédex project with routers and views. For D1, our render methods directly manipulated a lot of the HTML directly on the page, but by using views and templates, we can focus on having the logic separated from the actual display feature. Incorporating this with routers allowed us to make information more accessible.

For instance, originally you could click on a Pokémon, see more details about that Pokémon, click on its toys, and see more info about its toys. But what if I want to send a link to a friend about a specific toy? I don't want to send instructions on how to click around a page to find it. Instead, with the functional router and views, I can send /pokemon/8/toys/11 and it will directly take you to more information about that toy and Pokémon.

The router looks for a url "pokemon/:pokemon_id/toys/:toy_id and triggers the correct view, which handles the logic of getting information on the pokemon and toy.

[catamarander-at-app-academy]

W7D1 - Backbone Models and Collections

Today we dove into Backbone focusing on Models and Collections. The purpose of using client-side architecture like Backbone is to efficiently and quickly process data while giving users a great experience. In Models, you can validate data, perform calculations, and control access flow with minimal hits to your database. It also organizes your asynchronous methods neatly and effectively, which means that improving your functionality becomes much easier.

Models are essentially a client-side Object Relational Manager with routes built in. With the diversity of devices, websites, and programs that may access your site, using Backbone clarifies how everything will interact with your site.

Collections are - well - collections of models. They provide an easy way to organize your models. And the brilliance of Backbone's models is that they implement Underscore's iteration features simply.

[catamarander-at-app-academy]

W6D5 - AJAX

Asynchronous javascript is awesome. Friday was our first project that used Rails, HTML, CSS, jQuery, and AJAX. While my pair partner and I started off slowly, by the end of the day we were moving quickly and feeling more and more comfortable with AJAX.

The project was a Twitter like clone, where you can asynchronously follow/unfollow, track remaining characters in a new tweet, and search for users with an autocomplete feature. Really powerful stuff.

[catamarander-at-app-academy]

W6D4 - jQuery plugins

Today was a really fun day as we got to create neat things with jQuery like carousels, thumbnails, and tabs.

Another assessment tomorrow, so a short post tonight.

[catamarander-at-app-academy]

W6D3 - Tic Tac Toe, Hanoi, and Snake

Today we implemented Tic Tac Toe, Hanoi, and Snake with HTML, CSS, JavaScript, and jQuery. My CSS skills are getting much stronger, and it's really nice to use them in cooperation with Js and jQuery.

Hanoi was the first challenge as it required some conditional logic within the event handler. You need to check if it's the first click (selecting a disc to move), if it's a second click (placing that element), and whether or not you're selecting from a stack without any discs.

Snake was a lot of fun since it feels much more real time. Using keydown to control something live on the screen is great.

One clever thing we did was to unshift new snake segments onto the head and popped them off the tail to give the appearance of motion. Otherwise, we would have needed to have each segment know where its leader was to take its place, which was an extra calculation that we didn't need.

[catamarander-at-app-academy]

W6D2 - CSS

Today, we built a static Cat Friends page very similar to the look of Facebook. Profile picture, cover photo, wall posts, submit buttons, friends photos, the works.

The biggest concept was specificity. Every CSS selector has a specificity, and the most specific selectors are the ones that are implemented by the browser. Several selectors could select for the same element, so it's important to know the way in which the browser will apply which rule.

The basics ordered from most to least:

Inline styles

IDs

Classes, attributes, and pseudo-classes

Elements and pseudo-elements

There is a great article here for more information.

I'm most excited to get all of our levels working together.

[catamarander-at-app-academy]

W6D1 - Asteroids

Today we began asteroids using JavaScript and canvas with HTML5. It was really refreshing to work on both engine logic and rendering. There's something really satisfying about seeing and playing with your creation instead of just bare bones. I'm excited for when we'll be integrating Rails, JS, HTML, and CSS in one project.

Back to work!

[catamarander-at-app-academy]

W5D5 - JavaScript Callbacks

In class, we built a Towers of Hanoi game as a terminal app in JavaScript and node.js. This is the first stepping stone to creating a web based game. The most important thing we learned was how to use callbacks. Instead of using traditional for or while loops, you need to use recursion, conditionals, and callbacks in order to properly run the program. If you use loops, only that loop can be executed and nothing else can run. Imagine if you had to wait for all of the other users on a website to finish typing in order to use a site. It would be impossible. So you pass functions around as parameters, and call them as needed when certain conditions are met.

[catamarander-at-app-academy]

W5D4 - Introduction to Javascript

Javascript is a completely different world than Ruby.  There exists magic in Js that I'm still learning, but man is it a completely different world.

A few quick notes on the beginnings of Js:

'use strict' prevents you from accidentally creating global variables. Coming from Ruby, my pair programmer and I had so many bugs because we missed writing "var" one time in an exercise. Lesson learned.

splice MUTATES an array. slice doesn't.

Functions have to be called with parentheses in order to run. Otherwise it just returns the function itself - code and all.

Js is run by browsers so there is no such thing as privacy. Js on the web is readable by anyone who accesses your website.

[catamarander-at-app-academy]

W5D3 - Wrapping Up Rails Lite

Today we implemented some more of the automagical parts of Rails, including creating a single Route, generating multiple Routes through the Router, Flash and Flash.now, URLHelpers (link_to, button_to, and understanding input such as new_post_url, posts_url, and post_url(@post)), and CSRF tokens.

The hardest part to create was the Flash feature, which we had to design without any real guidance.

A typical flash is rendered after a redirect, which means that you need to create a second cookie (besides your session cookie). Since you don't want it to persist after multiple redirects, you need to reset that cookie once it comes back from the client.

A typical flash.now is rendered when a page is re-rendered and not after a redirect. This means that you don't need to store it in a cookie. You just have the page being rendered directly access the flash data.

The trick for getting both of these functionalities to work together is to keep a "next" hash AND a "current" hash inside of your flash class. This way you make sure that the next hash handles the cookie aspect while the current hash handles the #now rendering.

[catamarander-at-app-academy]

W5D2 - WEBrick, Rails Lite

Today was the start of a 2-day solo project, building a lite version of Rails. This includes using a simple WEBrick server in order to run something on. The biggest focus of today's part of the project is how the automagical parts of Rails work, like params and session; render and redirect; and routing.

One thing that I didn't know until today was the binding method. Here's an example: 

$ x = "I'm sorry, Ander. I'm afraid I can't do that." $ ERB.new("<%= x %>").result >> NameError: undefined local variable or method 'x'

However, binding is a core Ruby method which makes local variables available in another context.

$ x = " I'm sorry, Ander. I'm afraid I can't do that." $ ERB.new("<%= x %>").result(binding)

>> "I'm sorry, Ander. I'm afraid I can't do that."

Pretty awesome.

[catamarander-at-app-academy]

W5D1 - More Polymorphism and Concerns

Our hardest exam yet is tomorrow, so this will be a short post.

Today we created a goals application where users can create public or private goals, and leave words of encouragement on other people's goals and directly to other users.

We used git branching to write one branch where we created separate goal_comments and user_comments tables. We then created another branch where we used polymorphism and concerns to only make one comments table. The term "commentable" lost all meaning by the time we were done! It didn't help that after awhile it also starts sounding like "common table."

More info on both polymorphism and concerns to come.

[catamarander-at-app-academy]

W4D5 - Polymorphism and Concerns

The project was a Reddit clone where users can create subreddits, add posts to those subreddits, and make comments on posts or other comments. If you haven't used Reddit before, a subreddit is an aggregator of related articles and thoughts. www.reddit.com/r/cats is all photos of cats. At the time of this posting, there are at least 500,000 subreddits according to metareddit.com.

Polymorphic associations come into play with comments - users can comment on posts, or they can comment on other comments. Technically users can even comment on other users through private messages. Without polymorphic associations, you would need to make a table post_comments and a separate table like comment_comments in order to accomplish this - the typical has_many and belongs_to associations wouldn't work without these. Polymorphism allows you to specify a foreign key and the type of class that that foreign key points to. This allows you to have one table that includes all comments, and would easily allow a developer to build comments for a new feature. Since you specify the class type that the foreign key points to, your different classes don't need to worry about having identical primary keys.

Concerns play into the Composition over Inheritance ideal. You can create a module that specifies both instance and class methods which then add functionality to specific modules. Concerns allow you to keep your models skinny when they share features. DHH has a great article about it here .

[catamarander-at-app-academy]

W4D4 - ActionMailer, Helpers, Partials, and more validation

Validation will always be the big part of the project - well, at least when you do everything by hand.

Today was a solo day where I built a music tracking app - no music files yet, though. The basic structure was Bands have Albums, Albums have Tracks, Tracks have lyrics, and Users can add Notes to Tracks. This completely solidified everything we've been doing for the past few days - authentication, relations, rendering, redirecting, URI patterns, HTML forms, error messages, get and post methods, partials, and all of the other basics.

Today the new topics were validating form input including escaping user input to avoid HTML injection attacks, issuing 403s to users who try to maliciously do what they're not supposed to, and using ActionMailer to create e-mails (not send them) to keep our users up to date on important information.