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:
To produce the chart above, very little html code was required. Read more on Charting Data with jqPlot…
Here are a few reasons to explore LiveScript. Read more on Graduating from CoffeeScript to LiveScript…
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 emberjs
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.
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…
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…
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…
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
Read more on Testing & Tooling in EmberJS…
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…