We're hiring!

We're actively seeking developers for our new Detroit location. Learn more

Web Apps

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

“Subclassing” Ember Components

Recently, while working on an Ember.js app, I found that I wanted to create a reusable component that manages the editable state of content within it. That is, it would start out by displaying information (initializing its isEditing binding to false), and provide an “Edit” button that would set isEditing to true, so the content wrapped in the component could display its editing interface.

Naturally, I then wanted a way to “subclass” my EditableComponent so that I could create (for example) an AddressComponent that would display a mailing address read-only but allow you to edit it. What I struggled with was finding the best way to pull this off.

I had a few different ideas, two of which didn’t work. Read more on “Subclassing” Ember Components…

Posted in Web Apps | Tagged | Leave a comment

Package Management Options in JavaScript

Parts

Parts

As browsers and HTML have matured, our ability to create wonderful experiences has become easier and better, but our code has become more complex. To aid this complex development, we rely on packages such as JQuery, Bootstrap, etc.

But with the use of packages comes the need for package and dependency management. Ruby has RubyGems and Node.js has NPM, but we also need something for the browser. Here are a few of the more popular choices and how they approach dependency/package management. Read more on Package Management Options in JavaScript…

Posted in Web Apps | Tagged | Leave a comment

Generating Files with JavaScript and Ember.js

My colleague Jason Porrit recently wrote about loading and processing files with Ember.js. Today, I’ll cover two techniques for going in the opposite direction: generating files with JavaScript in the browser. I used these techniques while working with Jason on an Ember.js app, so my examples are geared toward Ember.js, but the techniques themselves can be used with any JavaScript framework (or no framework at all).

In a typical web app, files are generated on a server and then downloaded by the browser (or other client). We decided to turn that idea on its head, shifting the responsibility to the browser. This was a clear win in the case of our Ember.js app because we already had nearly all of our presentation logic in the client-side JavaScript code. Our server is merely responsible for providing data upon request. It’s the responsibility of the client-side code to present that data to the user, whether in a web page or as a downloadable file. Read more on Generating Files with JavaScript and Ember.js…

Posted in Web Apps | Tagged , , , | 1 Comment

Rendering Nested Views in Backbone.js

Rendering a Backbone View is simple.  The view’s container element (affectionately known as its el) swaps out all of its html for new html, probably fetched from a template. This works great for any top-level view.

The problem is in the child view. The parent view has swapped out all of its html, including the child view’s container element. The child’s $el is now pointing at a stale element that no longer exists on the page. This means the child is no longer displaying data to the page or getting data from it. The web application is broken, and the programmer sits there frustrated.

Don’t Panic. There are several ways to handle this situation. Read more on Rendering Nested Views in Backbone.js…

Posted in Web Apps | Tagged , | Leave a comment

Saving Browser-based SVGs as Images

svg-to-png

I’ve spent a lot of time with D3 over the past several months, and while I’ve enjoyed it immensely, one thing had eluded me: saving visualizations as images. When I needed to turn a browser-drawn SVG (scalable vector graphic) into an image, I used FileSaver.js to save the content of the webpage’s SVG node as a file, then opened the file in Inkscape and rasterized to an image format. Unfortunately, this process often created discrepancies between how the visualization looked in the browser and how it looked in the final image.

While making a calendar as a gift over the holidays, I finally figured out how to save SVG content as an image directly from the browser. Not only is the workflow a lot smoother, but the results are much more consistent than processing the SVG through Inkscape. The core code for the process is laid out below, and the complete script is on GitHub. Read more on Saving Browser-based SVGs as Images…

Posted in Web Apps | Tagged , | Leave a comment

Client-side File Processing in Ember.js

With the addition of the HTML 5 FileReader interface, client-side processing of file uploads is now possible using JavaScript alone. This is great news for anyone aiming to keep their web application’s functionality running in the browser instead of the server.

My current project involves an Ember.js web application and a JSON+HAL API, and we recently wanted to let administrative users upload an XML file, sourced from a different system, to make filling out a form easier. We didn’t want to upload the file to the API for processing on the server. Following is an example illustrating how we handled the file upload in our Ember.js app, and how we could make this work with a few other file formats.

1. The Upload

Let’s pretend we want to make it easy to upload a list of user information into the application. I’m going to illustrate a method using a file input element for the upload interface. There are other options, like drag & drop, but this met our users’ needs and was simple to implement.

Read more on Client-side File Processing in Ember.js…

Posted in Web Apps | Tagged , | Leave a comment

Testing & Tooling in EmberJS

Like many other Atoms, I’ve recently been doing some work with EmberJS. Ember is an awesome web development toolkit with some really killer features. One of my favorite parts of Ember is how easy it is to test. The framework comes bundled with a system testing framework, and its object model makes unit testing a breeze. Combine all that with a great test runner that has CI integration, and you have a really awesome testing ecosystem for your new app.

System Testing with Ember Testing and QUnit

EmberJS comes bundles with a great system testing framework called ember-testing. This framework allows you to make high-level assertions regarding your applications’ state, mostly by querying and interacting with the DOM through JQuery in a black box fashion. Since the tests are pure JavaScript however, we also get direct access to our running application if needed for testing.

Read more on Testing & Tooling in EmberJS…

Posted in Web Apps | Tagged , , , , , , , | 4 Comments

Dynamically Generating CSS with Ember.js and Rails

I’m currently working on an Ember.js app that requires the color scheme to be customizable to match the branding of our client’s clients. Since our application’s CSS is being compiled by the Rails Asset Pipeline, and the colors would be fetched over an API call, this posed an interesting challenge.

Originally, there were many unknowns around how we would accomplish this. How would we recompile our SCSS? Would we wrap the Ember app under a Rails route that would insert customized CSS on the page? If we loaded the CSS via Ember, how would we insert it on the DOM?

Happily, the details all fell into place quite nicely. Here’s how we pulled it off:

1. Use the Application Route to Load the Custom Theme

Or use any other resource’s route. When loading the model for the route, we first make an API call to determine which colors to use, and then pull out the theme information and make a request to the Rails app that processes and returns the themed CSS as text. Then we create a model out of the two.

Read more on Dynamically Generating CSS with Ember.js and Rails…

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