You can’t afford to ignore DevOps

DevOps is a huge movement in IT at the moment. It applies lean practices across an IT organization. While Agile has promoted lean practices in the development of software for years, DevOps is a more recent movement. The movement recognized the interdependence of the delivery of software with the infrastructure that the software relies on.

Enabling Agility with DevOps

Lean practices recognize that software is only providing business value once it is released. Any time that feature is awaiting a deployment is wasted money. If we can release features as soon as they are complete, we can achieve the maximum business value from each feature that we implement.

In an Agile environment our measure of success is the release of working software and DevOps is a cornerstone to that achievement. An Agile team can achieve amazing velocity while developing the software itself, but without infrastructure and deployment, releasing is impossible. By automating QA tasks, deployment tasks, and configuration of infrastructure, we increase the speed the delivery of software.

While there are a number of organizations that have shown amazing success with DevOps (Flickr, Etsy, Amazon, Facebook, DropBox just to name a few), this approach doesn’t only apply to startups. Large organizations must begin to take on these tactics in order to stay competitive. I’ve seen vast improvements in productivity for organizations that take even the smallest steps toward a DevOps approach.

Getting started with DevOps

A great book that provides a good primer to DevOps through lean practices is Lean Startup. I also highly recommend the DevOps Zone at DZone. There are great articles there to keep up to date with the world of DevOps.

If you are just ready to get started and are looking for tools to fully automate your infrastructure, take a look at Puppet and Chef. These are the industry leading tools for infrastructure automation and both provide a great alternative.

If you haven’t started looking at DevOps in your organization, I highly recommend you do. Not only will it keep you competitive, but it may be the key factor to differentiating your organization from the rest of the market.

Cleanup your jQuery by Deferring

The asynchronous nature of AJAX sometimes makes jQuery code a bit hard to follow. Embedding callbacks in AJAX calls starts off reasonable, but enough callbacks can quickly become unwieldy. If your code base is suffering from this issue, have a look at the jQuery Deferred API. jQuery Deferred is an implementation of the CommonJS Promises Spec.

The CommonJS Promises Spec attempts to put an API around the consistent pattern of handling asynchronous callbacks. In the case of jQuery Deferred we are generally talking about AJAX calls. Let’s look at an example that will help to clarify the scenario.

Traditional Approach

Let’s say you have two services you are invoking to show information on a map. One service provides the latitudinal and longitudinal coordinates (geolocation) of an address, while another service provides nearby businesses.

function findGeolocation(address){
    $.ajax({
      url: "http://solutionsfit.com/geolocate",
      data: {json: JSON.stringify({"address" : address})},
      type: "POST",
      success: function(geolocation) { 
        findNearbyBusinesses(address, geolocation);
      }
  });
}

function findNearbyBusinesses(address, geolocation){
    $.ajax({
      url: "http://solutionsfit.com/nearbyBusinesses",
      data: {json: JSON.stringify({"address" : address})},
      type: "POST",
      success: function(businesses) { 
        showLocationMap(geolocation, businesses);
      }
}

It’s difficult to follow the control structure of the above code due to the embedded callbacks. The $.when method from the jQuery Deferred API helps clean this up.

Using jQuery Deferred

Instead of embedding our control flow in the callback functions themselves, we can specify the flow through an API. The $.when method accepts a list of functions that return a Deferred object. The $.ajax API returns a Deferred object allowing us to directly pass the result of AJAX invocations to the $.when method.

Once an AJAX request completes, the Deferred object is considered “done”. The $.when method waits for all Deferred objects to reach the “done” state and then invokes any handler functions that have been specified for the following:

  • done – handlers always called once all Deferred objects complete
  • then – handlers called if all Deferred objects complete successfully
  • fail – handlers called if a failure occurs with one of the Deferred objects

Now let’s rewrite our above code snippet to use the $.when API.

function findGeolocation(address){
    return $.post(
        "http://solutionsfit.com/geolocate",
        {json: JSON.stringify({"address" : address})}
    );
}

function findNearbyBusinesses(address){
    return $.post(
        "http://solutionsfit.com/nearbyBusinesses",
        {json: JSON.stringify({"address" : address})}
    );
}

$.when(findGeolocation(address), findNearbyBusinesses(address))
    .then(function(geolocation, businesses) {
        showLocationMap(geolocation, businesses);
    });

Notice that the readability now clearly defines the control flow. This now reads as:

when we find the geolocation and any nearby businesses, then show the location and businesses on a map

In addition, in the second case we’ve improved performance by allowing our AJAX calls to execute simultaneously. In the first case, the retrieval of nearby businesses was forced to wait on the geolocation call due to the embedded callback.

There is much more to the API and you can review all the details here.

By |jQuery|Comments Off on Cleanup your jQuery by Deferring

Software Consulting, there are Apps for that!

Since starting a consulting firm, I’m always looking for ways to automate the day to day tasks I find less than appealing. A colleague of mine was interested in the mobile applications that are part of my business application suite. So I’ve compiled a list of the iPhone applications, beyond the basics of course, that I use on a day-to-day basis.

Scanner Pro

Scanner Pro has been my favorite addition to my business application suite. You simply take a photo of a document, receipt, or whatever you choose and the application creates a “scan” representation. “Scans” can be saved as a PDF to your favorite online storage source (e.g. Evernote, Dropbox, Google Docs). Multiple “scans” can be combined into a single PDF which is particularly useful for business expense receipts.

Keeping up with receipts for business expenses (e.g. lunches, coffee, a new monitor) was something I never did well. They would remain in my wallet for weeks and if I didn’t lose them, were barely legible by the time they made it to my files. Now I simply take a picture and toss the receipt. This is also a lifesaver for sending documents when you don’t have a scanner immediately handy (e.g. you sign a contract over coffee and the client wants a copy).

Price: $6.99

Benefits:

  • Scan documents from anywhere
  • Stop carrying around expense receipts
  • If you like it enough, throw away your scanner!

Timesheeter

Timesheeter has been the best time tracking application I have found for my phone. Due to the consistency of my schedule, the ability to set defaults for my time entry generally makes tracking my time as simple as selecting “New Entry”, “Save”. While it doesn’t integrate with my invoicing software, it does provide at a glance views that make it easy to determine time worked for invoicing clients.

My favorite feature of Timesheeter is that it generates a customizable PDF report that can be exported to e-mail, Dropbox, or iTunes. This makes it simple to provide timesheets to clients or simply store a backup of your time tracking.

Price: $2.99

Benefits:

  • Very convenient for tracking time
  • Preferences make it quick for adding entries
  • Easily send timesheets to clients
  • Customizable timesheet reports

QuickBooks Mobile

I use QuickBooks online for invoicing. There are quite a few options available, but QuickBooks has served my needs for 6 years now and I find it hard to justify a change. The QuickBooks iPhone application is somewhat lacking in terms of features, but it provides the ability to create and send invoices which is really what I’m looking for from a mobile perspective.

Once you’ve customized your invoices through the general QuickBooks online browser application, creating invoices through the iPhone application is simple. Once created, they can be immediately e-mailed from your device to the client. This makes it simple to send invoices even if you don’t have immediate access to a wifi hotspot (e.g. standing in line at the DMV).

Price: FREE (but, you must subscribe to QuickBooks online)

Benefits:

  • Send invoices from anywhere
  • Convenient for quickly reviewing outstanding invoices

CardMunch

CardMunch was recommended to me by a colleague and I find it extremely useful. As a LinkedIn application, it connects to your LinkedIn account (if you don’t have a LinkedIn account by now, I suggest you get one).

When someone hands you a business card, rather than simply sticking it in your pocket and letting it run through washing machine, never to be seen again, snap a photo of it with CardMunch. The photo is sent off to LinkedIn employees who, within a brief period of time, transcribe the contact into a LinkedIn profile that you can then choose to connect with. CardMunch helps to ensure you don’t lose that valuable connection.

Price: FREE (but, you must have a LinkedIn account)

Benefits:

  • Avoid losing contacts
  • Finds connections for you
  • Save paper by leeting people keep their cards!

If you are a software consultant, and have any applications that you find useful, please feel free to leave them in the comments.

Power up your HTML5 with D3

The power of HTML5 is remarkable. I’ve seen impressive demos in presentations and great looking example pages that people have developed in their spare time, but it always looks highly complex. In addition, the examples are usually just that, examples, with little to no real world application. Here we’ll look at an example that shows how D3 enables HTML5 to provide real business value.

D3 helps to hide some of that complexity, allows you to operate directly on data sets, and provides the capabilities necessary to quickly apply the power of HTML5 in real-world scenarios. This javascript library uses HTML5 standards to generate some of the flashiest (sans Flash) visualizations I’ve seen from a library. While it has a feel similar to jQuery, the use of SVG makes the animations much more advanced.

Let’s look at an example that creates a simple bar graph. You can review the example by itself here. Or, simply click “GO” below the to see the bar graph in action.

This animation uses no images or flash, just HTML5 standards with the help of D3. When you view the source, you’ll notice that an <svg> element is defined, sized to the expected width and height of our bar graph.

<svg id="bargraph" width="800" height="400"></svg>

The bar graph is generated from the following logic:

bargraph().data([10, 18, 12, 24, 15, 13, 22, 17, 8]).plot();

Defining the bargraph object

The first step is to define our object:

function bargraph() {
  var colors = ["#2d578b", "steelblue", "#777"],
    data = [10, 15, 20],
    xCoordinateSpacing = 50,
    yCoordinateSpacing = 70;
	
  function bargraph() {
		
  }
	
  bargraph.data = function(d) {
    data = d;		
    return bargraph;
  }

  // … …
}

The bargraph object defines a set of attributes. The colors attribute defines the various colors the bars will be. The data attribute is an array of numbers that will be plotted on the bar graph. We can change the default list of data points by invoking the data() method. The xCoordinateSpacing and yCoordinateSpacing attributes are simply common attributes for plotting shapes consistently.

Now let’s look at the render() method.

bargraph.plot = function() {
  svg = d3.select("#bargraph").append("g");
		
  renderDataPointsAsStrings(svg);
  renderGoButton(svg);
}

The first step is to define a group within the <svg> element to contain our SVG shapes. Once the group is defined, we pass it to the methods that render our data points and the “GO” button.

Rendering the data points

Now let’s render the data points.

function renderDataPointsAsStrings(svg) {
  var text = svg.selectAll("text").data(data, String);

  text.enter().append("text")
    .text(String)
    .attr("x", function(d, i) {
      return i * xCoordinateSpacing + 20;
    })
    .attr("y", yCoordinateSpacing);
}

This method appends the data points as elements. If you are unfamiliar with the syntax of D3, here is a quick rundown:

  • svg.selectAll(selector) – follows similar selector syntax to jQuery and returns a list of results matching your selector
  • data – defines the data points you want to operate on across the selected elements
  • elements.enter() – for each data point the enter logic will be invoked

This is a common pattern in D3 that you will see consistently. Notice that for every data point we append a text element. The attributes of the text element can be calculated by a function or simply provided directly. Here we show both options.

The actual text we are going to show in each text element is the data element itself. By passing the javascript String function to the text method we are indicating this.

We make use of the xCoordinateSpacing and yCoordinateSpacing attributes to determine the starting points of each data element. The “x” attribute is simply a calculation that evenly spaces the text elements. The functions can receive both a d and i parameter providing both the data point itself and the index of the data point respectively.

Showing the bar graph

The “GO” button itself is rendered by the renderGoButton method, but once rendered, an onclick event is attached that shows the bar graph:

svg.selectAll(".gobutton").on("click", function() {
  showBarGraph(svg);
  // … …
});

Here we select on a CSS class selector and attach a function to fire onclick. The showBarGraph() method performs the magic necessary to render the bar graph:

  function showBarGraph(svg) {
    var rect = svg.selectAll("rect").data(data, String);

    rect.enter().append("rect")
      .attr("class", "bargraph")
      .attr("x", function(d, i) {
        return i * xCoordinateSpacing;
      })
      .attr("y", yCoordinateSpacing + 10)
      .attr("width", xCoordinateSpacing - 10)
      .attr("height", 0)
      .attr("fill", function(d, i) {
        return colors[i % colors.length];
      });
		
    svg.selectAll(".bargraph").transition().duration(1000)
      .attr("height", function(d) {
        return d * 5;
      });
  }	

Here we again follow the pattern we described previously. For each data point we append a rectangle shape below the text we rendered previously. By using the xCoordinateSpacing and yCoordinateSpacing attributes to calculate the “x”, “y”, and “width” attributes, we are provided consistency in the location of are rectangles in comparison to the text.

Notice the use of the “fill” attribute. Here we utilize the index of each data point to vary the color of each rectangle based on our colors array. Finally, we apply a transition to the bars that causes them to expand to a height representative of each data point over the course of 1 second. We are using the most basic transition, but through the use of the ease() method, you can vary the style of transition.

That’s it! There’s more to the example as you review the source code, so if you have any questions please feel free to post them in the comments. Also, for more complex examples and some great tutorials, visit the D3 website.