We're hiring!

We're actively seeking designers and developers for all three of our locations.

Web Apps

Marionette.js Behaviors, Part 2: Testing Behaviors

This post is a follow-up to Al’s high-level introduction to Marionette Behaviors, published yesterday. As Al said, Marionette.Behaviors are an abstraction for sharing UI code between different views. They are a recent addition to the Marionette toolbelt (added in version 1.7). Prior to the introduction of behaviors, code sharing between views in Marionette had to be handled at the Javascript language level with inheritance or by delegating to external modules.

Read more on Marionette.js Behaviors, Part 2: Testing Behaviors…

Posted in Web Apps | Tagged , , | Leave a comment

Marionette.js Behaviors, Part 1: The Basics

Part 2: Testing Behaviors is available here

Marionette is a Javascript application framework built on top of Backbone. It provides great features missing from core Backbone like collection views, subview management, and abstractions for building event driven applications.

Extracting Duplicate Code with Behaviors

Marionette.Behaviors are an abstraction for sharing UI code between different views. They are a recent addition to the Marionette toolbelt (added in version 1.7). Prior to the introduction of behaviors, code sharing between views in Marionette had to be handled at the Javascript language level with inheritance or by delegating to external modules.

Behaviors are designed to be loosely coupled and injectable. A behavior knows about the view it is injected into, but the view does not know the details of the behavior. This helps to keep behaviors abstract and reusable between views. Lets take a look at a couple simple Backbone views and how they could be refactored using Marionette behaviors. Read more on Marionette.js Behaviors, Part 1: The Basics…

Posted in Web Apps | Tagged , , | Leave a comment

Requiring All Page Objects for Angular Protractor Specs

You’ve got an Angular app and an accompanying test suite. You’ve followed the recommendations about using Page Objects, but it’s cumbersome to require each of them you’d like to use in each spec. Wouldn’t it be nice to automate that?

Page What Now?

If you happen to be writing “E2E” tests for your Angular app with Protractor but you aren’t using Page Objects yet, here’s a quick intro:

Once you’re convinced of their benefit and you’ve seen some nice examples of using them, you go and build a few. And then your app grows… and grows. Now you have a mess of page objects that have to be manually required in each spec that uses them. Read more on Requiring All Page Objects for Angular Protractor Specs…

Posted in Web Apps | Tagged | Leave a comment

Eliminating Multiple-Style Classes with @extend and SCSS

SCSS has numerous beneficial features, include one that I really came to love during my last project. The @extend feature really took the cake, and I think will help me along my path as a maker! It has a couple downfalls in practice, but it is such a great feature that I want to convince you to give it a try on your next project.

What is @extend?

Extend is a lot like inheritance in programming. It lets you import css styles from a previously defined css rule into another rule.

Let’s say you have three elements on the DOM that you want to style. Each element will look the same except each element’s border color will be different. Using the @extend feature, one approach to solving the styling of the elements is to define one class for the structure of the element. We will call the class .element, and define the height, width, background color, border thickness, etc. Read more on Eliminating Multiple-Style Classes with @extend and SCSS…

Posted in Web Apps | Tagged | Leave a comment

3 Reasons Angular Rocks

angular-logo

Angular.js is an awesome framework for medium-complexity, single-page web applications. Its feature set and use cases fit perfectly in the complexity gap between Backbone.js and Ember.js.

Composed of many interesting and useful features such as animation and touch interaction, Angular provides an architecture that makes your single-page web app a joy to work with.

1. Promises, Promises, Promises

Promises are nice, and they help to avoid a common problem in JavaScript: callback hell. Angular provides the $q service, which is inspired by Kris Kowal’s Q. It turns a common Backbone.js site: Read more on 3 Reasons Angular Rocks…

Posted in Web Apps | Tagged , | Leave a comment

Testing Web Apps Developed via Vagrant Using Capybara

20130427 Aigi Tunnel Group 1

As a software consultancy, we often perform additional or maintenance development on a previous project. It’s great to be able to maintain positive customer relationships and provide good value to them, but I admit I often dread returning to an old project. The main reason for my fear and trembling is trying to get the development environment up and running again. In the interim since the last time I (or someone else) touched the project, any number of things can go wrong. Just recently I encountered the following nightmare dependency change:

Read more on Testing Web Apps Developed via Vagrant Using Capybara…

Posted in Web Apps | Tagged , , | Leave a comment

Ember.js array.[] syntax

While digging around in the Ember.js API docs, I encountered a mention of a computed property syntax that I hadn’t seen before. Quoth the docs for the computed.empty alias:

Note: When using Ember.computed.empty to watch an array make sure to use the array.[] syntax so the computed can subscribe to transitions from empty to non-empty states.

This sounded intriguing, but wasn’t actually very instructive. A quick ask around the office revealed that no one else had encountered this syntax before either. The quest for knowledge was on.

Read more on Ember.js array.[] syntax…

Posted in Web Apps | Leave a comment

Why I’m Finally Excited about Web App Development

I’ve never enjoyed writing web apps. For a variety of reasons, the experience of web development (and even the end-user experience) has always felt frustrating and wrong. Thankfully, the world of web development hasn’t been standing still. Web standards continuously improve and gain adoption, while truly great frameworks have come into existence. What I’ve been realizing lately is that I no longer loathe working on a web application – I’m actually rather excited to.

Let’s take a look at why. Read more on Why I’m Finally Excited about Web App Development…

Posted in Web Apps | Leave a comment

Charting Data with jqPlot

jqPlot - Process Temperature

Some of the most interesting and challenging projects involve data visualization. It can be very difficult to express data in a clear way and also make the product aesthetically pleasing. There are many different ways of presenting data to users, and choosing the “correct” visualization is not always a simple decision. Having numerous tools at your disposal, or at least greater awareness of what is out there, can help you make a better decision.

I was recently experimenting with a library called jqPlot, jqPlot is a jQuery plugin that supports drawing line, bar and pie charts with many customizable features. The project I was working on involved a device that monitors the temperature of the contents of a kettle during the process of brewing beer. My goal was to show the temperature as it changes over time and also to indicate a prediction of when the temperature would reach a desired target value. Here is what I ended up with:

jqplot_example

To produce the chart above, very little html code was required. Read more on Charting Data with jqPlot…

Posted in Web Apps | Tagged , | Leave a comment

Graduating from CoffeeScript to LiveScript

CoffeeScript to the Haskell equals LiveScript

CoffeeScript is a nice syntactic alternative to JavaScript and, in the end, that’s all it is: syntax. CoffeeScript doesn’t offer anything not already found in JavaScript, no standard library nor any new operators. Looking for more in a compiles-to-JavaScript language, I stumbled across LiveScript.

Where CoffeeScript is a Ruby- and Python-inspired version of JavaScript, LiveScript is a Haskell-inspired version of CoffeeScript. Like CoffeeScript, LiveScript compiles to readable JavaScript about the same size as the original source file.

Here are a few reasons to explore LiveScript. Read more on Graduating from CoffeeScript to LiveScript…

Posted in Web Apps | Tagged , | Leave a comment