Ruby Can't Fail @timsandberg - Tumblr Blog

Polymorphism and Backbone.js Collections

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

Using this method I was able to make my collection "polymorphic". If you initialize it with a board_id, it will always fetch that board's projects. Same with a user_id. And with no arguments, it will fetch all projects from the projects#index as you'd normally expect.

#ruby on rails #backbone.js #backbone collections

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

Phenomenal, grounding insights on object oriented code organization/design. Found it on r/java which makes sense because java classes become complete monsters! My general code style has improved so much since I last really sat down to hack in Java, looking forward to getting the chance some time soon to put my encapsulation skillz to the test. I already know off the top of my head of at least 3 new classes I should create from segments of larger classes in WifiBook.

#java #android #oop #programming

You don't have to accept your limits, but you should know them

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.

Bootstrap is the first and most obvious framework, but it provides tons of things I don't want to use. I'm really excited about discovering the very lightweight skel.js framework, especially for the built in responsive design support (reorganizing your webpage to meet the form factor of the client's display, i.e. tablet, phone, desktop, laptop, etc) and grid spacing systems.

#ux design #css #web design #css framework

Adding 3d Asteroids to disAsteroids

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).

Check the game out here! http://timsandberg.com/disAsteroids/

#asteroids #javascript #HTML5 Game #html5 canvas

I got my Demogoggles on (see at demogogue.herokuapp.com)

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:

#appacademy #finalproject #ruby on rails #backbone

Cause theres no way I'll write this tomorrow...

ITs 2 am, time to try and get 3 or 4 hours of sleep. Spent all night messing with soundmanager2, which has been fine for playing and pausing mp3s streaming from the aws server. Tonight I was determined to add visualization of the wave form to the Demogogue demos. That meant enabling it to use flash. Which totally changed the request params to the server. Which caused all kinds of security errors to throw. I fixed it enough to get the audio playing, but it cant grab any of the wave form data or equalization data from the stream which is the whole reason I started screwing with the flash in teh first place. Basically accomplished none of my list items of things to do before demo day, and lost lots of sleep doing it.

#appacademy sf #code gulag #jk

Demogogue, day... what day is it?

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.

My big focus the next two days is trying my damndest to stay off of CSS minutia. I've got a full day of functionality to add tomorrow- comments, comment form, demo show (which will be mostly a show page for the comments). Following this will be playlists. A simple enough object, just a collection of demo ids. But it will require a modal to choose whether to add to an existing playlist or create a new one. This will tie in nicely to adding the button row to the demo index view.

#appacademy sf

Hacked! (Final Project day whatever)

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.

I got a call from Amazon about my web services key and access ID getting lifted out of my github account and an insane amount of virtual server instances and transactions had been made with that information. Spent 3 hours trying to work around the problem before realizing (with the help of a TA) that the figaro gem is just for this purpose. So thankfully I'm back up and running, with a super snazzy demo upload form, keys safely hidden away.

#appacademy SF #ruby on rails #backbonejs

Demogogue

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?!)

#appacademy #finalproject #soundcloud

Yeeeeeahh! Final Project day 1

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).

It was surreal being back in rails/ruby land again, and while I did have to reference a few files from projects from the rails curriculum of yore, I did feel comfortable with everything. Today I hope to accomplish user signin and making dummy submissions. Which will mean a "demo" object in the database.

#appacademy

w7d5

Trello clone! Started on Friday, continued work on Saturday and Sunday. Really helped me find the weak points in my knowledge of backbone, which were many, but the project has come along nicely. Particularly challenging was figuring out the how and why of using a jbuilder template. First I forgot it was a template, called by "render" in the rails controller. Then I had to refresh on syntax (which is thankfully really easy). Currently I have all CRUD and data structures/views/relationships working, so I'm looking forward to polishing that and moving on to fancy jquery UI stuff.

#appacademy

RSS Feed App

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

#appacademy #rails #backbone

Backbone Thugs 'n' Harmony

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.

Had to build lots of little pieces for this to all come together but the awesome thing is, all the views are dynamically generated and added to the page. And if they are modified, the backbone views and models and collections update the database and repopulate the views with current info. Super quick and powerful. At the very end I implemented a fancy feature which let you edit a post from a view page by double clicking on it- this would change the static text view to an edit text view, populated with the current value, so it feels to the user like they are really editing their document live, when in fact its calling a new little view that has a small form on it.

#appacademy #ruby on rails #backbone.js

w7d2

Today was a halting and weary stop and go through the Pokemon project. Its a really fun app with entertaining functionaility, but I'm afraid the fun ended there for me on this project. It had more twists than an M Night Shyamalan movie, having us build out a major piece of the site in jquery, then build it out using a view, then build out the same crap using a router, each time having to gut what we made before, frankenstein it, add some new things, and hope it works. I totally get the 'why' of this, but it felt jerky and leaves me not feeling any more comfortable with backbone. More of an exercise in learning how to convert jquery to backbone than learning backbone itself. Part of this confusion comes from the seemingly totally disparate approaches from the past two days' exercises and Ned's approach in the videos.

#appacademy #backbonejs

Gotta catch em all and create a bridge between the database and view layer

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.

There are lots of parallels with the rails framework, so its easy to understand the modularity and various pieces of backbone, though it has lots of javascript "flair". Given how unwieldy (sometimes straight up ugly!) big chunks of javascript/jQuery/AJAX can be, its awesome how backbone gives us really fast and logical interaction between the MVC layers. The syntax of how one extends a backbone model or collection is reminiscent of an ajax query, which is exactly what they are wrapped around. Cool!

#appacademy #javascript #backbonejs #ruby on rails

Pat sAJAX

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.

My weekend was spent finishing snake and moving on to the backbone.js materials. Backbone seems like a really neat library for hooking up the mvc to your javascript and html rendering. My guess is we wont be seeing much raw ajax for a while!

#ajax #appacademy #backbonejs

Time to grab my solid 4

..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.

During the day today (wow appacademy ended 8 hours ago), we build jquery plugins. My goal is to make a gallery website that showcases all of these various in-browser projects, hopefully I'll get these projects polished up enough to get that started on Saturday. Before that though, tomorrow night is all about chilling tfo. Giddyup. 18 hour day, nbd.

#appacademy #javascript #assessment

Trending Blogs

Recently Viewed Blogs

Ruby Can't Fail