Rendering a view after multiple async functions return (using promises)

In the last post, we saw how to use jQuery’s promises to render a view once data had been returned from an asynchronous function. Let’s take the concept a little further and see how we could render the view only once we have data from multiple async sources.

Continue reading

Posted in AJAX, Backbone.js, Backbone.Marionette, jQuery | 2 Comments

Using jQuery promises to render Backbone views after fetching data

So I’ve been working through Brian Mann’s Marionette screencasts at Backbonerails.com. They’re absolutely top notch material, and I can’t recommend them enough. So if you want to learn how to go about building large Backbone applications (even if the back end won’t be rails), check them out!

In episode 6, Brian goes over several strategies for fetching remote data and updating the views in consequence. He also mentions using jQuery promises,  which isn’t shown in the screencast. So I thought I’d give it a go and attempt implementing it. Unfortunately, since this blog post depends directly on Brian’s screen cast and code, it might be harder to follow along if you don’t have them handy.

Continue reading

Posted in AJAX, Backbone.js, Backbone.Marionette, jQuery | 2 Comments

Tutorial: Nested views using Backbone Marionette’s CompositeView

A reader recently asked me how I would go about using Marionette to create an accordion like Twitter’s Bootstrap collapse component. In this post, I’ll not only give you my take on the answer, but also guide you through my reasoning. My hope is that by following my reasoning, you’ll be able to apply any time you time “how can I do this with Marionette” ? Continue reading

Posted in Backbone.js, Backbone.Marionette | 5 Comments

Tutorial: a full Backbone.Marionette application (part 2)

In the previous post, we started writing our application (see it live!) and now have a functional app, even if it still is somewhat basic.

Continue reading

Posted in Backbone.js, Backbone.Marionette | 5 Comments

Tutorial: a full Backbone.Marionette application (part 1)

In previous posts, I introduced you to Backbone.Marionette which provides many niceties to help you build complex Backbone.js apps. We’ll cover more advanced topics here, such as Backbone.History, modal windows, organizing code into sub applications, and more. The resulting app can bee seen live here. Let’s get started!

Continue reading

Posted in Backbone.js, Backbone.Marionette | 12 Comments

A simple Backbone.Marionette tutorial (part 2)

In the previous post, we started building a simple cat leader board (see it live!) and got all the way to displaying the list of cat names. Let’s finish and get to the result! Continue reading

Posted in Backbone.js, Backbone.Marionette | 6 Comments

A simple Backbone.Marionette tutorial

In this series of posts, we’ll cover writing a simple Backbone.js application as a primer. You can see the live result here. The original application is at https://github.com/ddellacosta/backbone.js-examples/tree/master/collections3 and all design assets (CSS, images, etc.) are from there.

This tutorial will show you how to use Derick Bailey’s Backbone.Marionette to build a simple application. But beyond getting a simple walkthrough, you’ll also be able to compare the app we write to the original, and see how Backbone.Marionette makes your life easier when writing Backbone apps.

So what’s the app going to be? It will simply allow cats to be ranked within a list: click “up” the cat is more popular, click “down”, the cat is less popular. Simple, no? Besides, on the internet, everybody likes cats ;-) If you want to skip ahead and checkout the code, it’s on Github and you can see it in action on this jsFiddle (the image assets have been replaced with placeholders). You can also follow along by checking out out each git commit. Continue reading

Posted in Backbone.js, Backbone.Marionette | 12 Comments

Leveraging the Ruby language for code readability

Recently, I created a rake task to load dummy data into a Rails app. I wanted the data to be somewhat random to make it easier to spot design issues depending on data being filled in or left blank. But at the same time, I want to keep my code as readable as possible. Continue reading

Posted in Ruby | Comments Off on Leveraging the Ruby language for code readability

Rake tasks, arguments, and external scripts

I’ve previously covered how to use an external script from within a Rake task. This time, we want to be able to pass an optional argument to our task, that will be used within our external script, too. Continue reading

Posted in Automation, Rails | Comments Off on Rake tasks, arguments, and external scripts

First steps with Popcorn.js

Mozilla’s Popcorn.js enables developers to manipulate content in relation to a video: display/hide elements, manipulate a timeline, or simply execute arbitrary code. The advantage this technique has over simply timing the triggered events, is that it is fully synchornized with the video: if you go back in the video, content updates correctly. Here, we’ll see how to enrich a run-of-the-mill corporate video, to provide contextual information for interested visitors. Continue reading

Posted in Uncategorized | Comments Off on First steps with Popcorn.js