Ruby Can't Fail

There are probably hundreds of ways to do this, and if you're reading this and happen to know a better way, I'd love to hear it.  But I'm pretty happy with what I came up with.

The Problem:

I'm working on a social github-related app where users can create "boards" where they can share their github projects.  I realized for different areas of the application, I would sometimes want an index of a particular user's projects, and other times, I would want all the projects belonging to a board.  For this reason I couldn't make projects nested in my api routes, so what to do.

Solution Part I

Pass additional options as parameters to the projects controller when you send a get request.  This looks like this:

var projects = new ProjectBoard.Collections.Projects(); projects.fetch( { data: { user_id: 1 } } );

Fetch takes a data object as an option, which itself will take an object and inject it into your query like so:

http://localhost:3000/api/projects?user_id=1

The nice thing about this is you don't have to get hacky with the url property of the backbone collection.

Solution Part II

Listen for those additional params in on the controller serving the index.  Then you can cleanly use associative collections of the appropriate models, in this case Users and Boards both have many projects.

def index   if (params[:user_id])     @projects = User.find(params[:user_id]).projects   elsif (params[:board_id])     @projects = Board.find(params[:board_id]).projects   else     @projects = Project.includes(:author, :tags).all   end   render json: @projects end

Solution Part III

Override the Backbone.Collection.fetch() method to check for this._boardId or this._userId, and if so, inject that data into the get request.  Calling super on your backbone classes turned out to be pretty easy, I was happy with how clean this code came out, for doing something so useful.

ProjectBoard.Collections.Projects = Backbone.Collection.extend({    url: 'api/projects',   ...   fetch: function() {     var fetchArg = {};     if (this._boardId) fetchArg['data'] = { board_id: this._boardId };     if (this._userId) fetchArg['data'] = { user_id: this._userId };     ProjectBoard.Collections.Projects.__super__.fetch.call(this, fetchArg);   }   ... });

Summary

Facts, hacks and attacks from my life as a web application developer

A loose cluster of realizations related to design have finally condensed and coalesced into a tangible thought that I hope may be useful to others.  I'm still working on boiling it down to a simple statement so bear with me.

One of the major reasons I was attracted to web development to begin with was the opportunity to make something interactive that looks awesome.  But time and again its proven that my skills/talents are bent towards the code, not necessarily design.  Visual organization is a serious talent and skill.  Some are gifted with this naturally, not naming names (*cough* Wendy), and most of the pros out there are coupling a natural talent for this with years and years of CSS wizardry experience and general UX/UI design insights.  This is getting long so I want to summarize:  I am making the decision to stop myself from building things from the ground up every time!  I'm never totally happy with the results stylistically and could save tons of time using just little bits and pieces from css/js frameworks and customizing off of those as launching points.

Similar to those extra features in Demogogue, I just can't stomach not having 3d shapes in my asteroids game.  Lets face it, 3d wireframe shapes were what made lots of old classics cool (the X-wing arcade game always comes to mind.  Remember this guy? 

Bad. Ass.

Anyway I searched high and low for a library that'd help me draw and hopefully rotate polyhedron asteroids as they float across my screen, rather than this b.s.: 

Yeah, those polka dots are my asteroid game.  The magenta bullets move too fast for me to take a screen shot but take my word for it, they are the sweetest part of my UI so far.

Fast forward a couple of days (I meant to add to this post as I went along: FAIL).  I found an excellent library that was stripped down to the exact stuff I needed: 3d modelling on a 2d canvas plane.  It's called simple-mesh.js and its fantastic in its power and simplicity.  Just realized I'm the only person to star it, go over there and STAR IT RIGHT NOW THNX.

Step 1:  Get a simple-mesh object to appear on my canvas.  Check this post-modern shit out:

This involved calling translate on my htm5 canvas context, which shifts the origin of the 2d plane from the top-left to the center.  In other words, we're now working on a traditional cartesian coordinate plane.

Step 2: Convert all objects to observe new coordinate system.  I think this mostly involved two  functions: Game#randomPos() which randomly positions asteroids at the outset, and MovingObject#resetPos() which makes non-bullet objects 'wrap' to the other side of the field if they go off screen.

Step 3: Inherit simple-mesh.  Since I wanted all of my flying objects to be 3d, it made sense to have my MovingObject abstract class inherit all properties and methods from the simple-mesh class provided by the library.  Pretty soon my game looked like this: 

Ok, thats skipping a few steps, but at least I have a picture from before they were the right shape!

Step 4:  Icosahedrons - SimpleMesh shapes draw their shapes based on vertices drawn on a 3-dimensional plane (x, y, z).  So to make a shape you provide a set of vertex coordinates and then tell it which vertices (referenced by index of the vertex array) to connect with edges.  Creating icosahedrons was a huge challenge, and after many hours of creating weird mishappen shapes (I even had a ruby script calculate all permutations of 3-point connections of the 12 vertices, so I mapped every possible edge.. it looked like crap :P ), I contacted the developer to try and learn the secrets of his polyhedron wizardry.  He just cut to the chase and gave me the coordinates and edges for an icosahedron.  Of course I had to rewrite them. Long story short, my game would eventually look like this:

(sorry bad image trim).

Friday night I realized I wouldn't be able to rest until Demogogue's features were a little more fleshed out.  I think being extra proud and happy with this project is pretty crucial because its that exact confidence I need to take into this job application process.  Enough about boring job searches, here's what my weekend was (aside from a kick ass holiday party Saturday evening).

Friday night I set my sights on Playlists.  I wanted users to be able to create, name, add tracks to, remove tracks from, and delete their very own playlists.  Lets see if I can break it down into bullets:

Db and Rails API

(most boring screenshot ever)

Create playlist model which has nothing more than a title and a user_id

Create a playlist_link model/join table which enables the has_many relationship of playlists to demos.  Test associations and their methods (create, destroy) in rails console.

Add has_many :playlists to user.rb model

Create controllers for playlists and playlist_links, add RESTful paths to the router.

Front-end models (Backbone.js)

Create playlist.js and playlistLink.js backbone models.

Create playlists.js and playlistLink.js backbone collections.

Add playlists collection to user backbone model.

CSS / STYLING

Use a boostrap modal to ask the user whether they want to add a track to an existing playlist or create a new one and add it to that.

Use accordion div's to compactly display playlists in the User's stream page.  Here's where I put the D in my CRUD.

And then it was a simple matter of spending an ungodly amount of time cleaning up the css.

Along the way I ended up adding type ahead demo search functionality:

as well as a live comments feed:

Today was epic.. lets take a gander at the git log (not nearly enough commits today).

Its a bad excuse, but I was super focused on knocking out the media player today. I employed the use of SoundManager2 which is a really nice clean interface for getting exactly what you want from streaming audio.  So far I am just getting position (time elapsed in millis) and duration (also in millis) to calculate a progress bar.  It also has handy callbacks like whilebuffering, onfinish, whileplaying, etc that help me keep my views and models responsive to the state of the player.  I set the player as a globally accessable object since it is meant to be a ubiquitous feature of the app, no matter what page you're browsing.  It gets initialized by the router and added to the page, and after that it is autonomous, just taking to Demo models and the playbuttons on the demo index item views.  Having the player object globally accessible also makes it really easy to reference various methods and variables of the player object from deep within nested object callbacks.  Yeeeee.

Some of the fanciest stuff I did today was knocked out in the first try with javascript/css, like the hide/show animation of the player, and the popup volume control.  Of course the flipside is lots of time sunk into stupid things like getting jquery-ui to work in my rails app for the tiny volume slider, which I had to completely restyle to make work (missing assets, weird.  Would have had to restyle anyway.

This morning was awesome, I had so much clarity and momentum, I was bashing through the Demo upload form at speeds that had me thinking about adding the actual media player to demogogue by the end of the day.

Then "it" hit the fan.

Wow, the biggest take away from the Thanksgiving break final project-wise is how much #@$%ing work I have to do on this project!  But its shaping up and I've made huge strides in teh last couple days.  My streams, follows, demos, and auth are all working perfecting on the back end.  Currently Im in the midst of actually storing and streaming audio from an amazon web services server.  Very tough but I have uploads working and even a live progress bar.  Takes all of my effort not to derail and worry about styling everything, but that time will come (Thursday night?!)

Final project is well underway.   "Demogogue" is now a thing.  Today I managed to implement a navbar, auth signin/signout, and I integrated the signin functionality into the navbar so it neednt reload an entire page just to show a login screen.  Yeeahh.  Taking lots of design pointers from the soundcloud page itself (Soundcloud is afterall what I am "cloning", though I think Demogogue will end up being significantly different).

Today was just awesome, we tore a$$ through this rails and backbone app, learned a bit but for the most part were just flexing our newfound backbone muscles.  We spent much of the afternoon adding some bootstrap-sass stylings as we added the bonus functionality.  We didn't get to user login-logout, but we spent extra time on features we found more interesting or challenging.  Check `er out

Today was pretty awesome.  I was super eager to build a backbone/rails app from the ground up because I felt like it would connect a ton of the dots for me, and my guess proved right.

Day one of backbone went well, we nearly completed the project, a Pokemon rolodex, before the end of the day despite it being pretty tricky.

Friday's project was a bringing together of all of the JavaScript, jQuery, rails, and AJAX we've been working on to make a twitter-clone.  Its crazy how many moving parts there are, and at first its intimidating, but our weeks learning rails showed me that elaborate systems may be conquered and familiarized with a little time and repetition.

..hours of sleep for the night.  I got home around 7:00, ate dinner, hung out with my wife and little girl, made a cup of coffee, and brushed up on all the javascript materials I hadn't given quite enough time to this week.

Throughout the week I'd been feeling good about all the js we were writing to complete the projects, but assessment 05 really seems to be focusing on the subtleties of JavaScript.  Feeling pretty confident after tonight's studying.