Technically Creative

Wednesday, February 12, 2014

Application Feature Switches

Feature Switches provide Development and Operations with control of the behavior within an application. User interfaces are told what components to show or hide. Server-side business logic can transition to new services or strategies at the flip of a switch. If something is misbehaving, it can simply be turned off until a fix is put in place.

Try as we might, we can't always fully anticipate user behavior in a production environment. Using feature switches to disable services can save headaches and time dealing with production support while the service goes back under development.

I've worked in environments where clients must be notified well in advance of any little user interface change, but in an agile team, it may be difficult to provide enough notice of exactly what screen changes will take place. In these environments, feature switches with auto-enable support come in very handy allowing the release notes to be delivered even as late as the install date. If for example the client-agreement requires 7 days notice, all features going out can be set to turn themselves on after 7 days.

Feature Switches can be expanded to support not only auto-enable, but also incremental roll-out (percentage of users), external system dependency management, API migrations, user interface design overhaul, etc. The possibilities are endless and having this control is a necessity in the foundation of every project.

Sunday, August 18, 2013

Features, Quality, and Cycle Time

It's no secret that I'm a big fan of adaptive leadership principals and techniques. Here's a great talk by Jim Highsmith from last year on continuous delivery, metrics, and measurement.

Jim makes a great case for the importance of quality and the inherent flaws in trying to balance business outcomes against technical outcomes.

Wednesday, August 14, 2013

Hiring into a Flawed Culture

When it's time to hire software engineers, we don't often stop to take a look around. In some cases there are dirty dishes in the repository, laundry piled up in the build system, and neglected broken tests strewn about the front yard. Beyond the obvious technical debt, that's not going to help attract your next best engineer.

For new hires getting acquainted with your codebase and practices, they start by ramping-up a development environment for themselves. They want to know where to find development data. They wonder about coding standards. They look around the codebase. They are assessing where the bar is set within your engineering team, and more importantly, on what level they need to perform to not disturb the development culture of the team.

Will they find broken windows? Even one developer throwing rocks at windows and ignoring the disrepair in your team ensures a steady increase in software entropy. Perpetuating that practice with new hires will likely, over time, destroy much more. Without a healthy development culture within the team environment, there's a high likelihood of new hires poisoning the team's efficiency further. The team management needs to break that cycle and address the issues head-on. There's never a bad time to look around, do the dishes, put away the laundry, and cleanup the broken tests!

Wednesday, June 29, 2011

Making Triangles in CSS

Making triangles in CSS is quite useful, and simple to do using basic border techniques.

You've probably seen CSS triangles used for drop down menus, where the triangle points up or down based on the state of the menu.

First, let's start with a basic grey square that is 20 pixels wide:

<html>
<head>
<style type="text/css">
  .square {
    width: 20px;
    height: 20px;
    background-color: silver;
  }
</style>
</head>
<body>
  <div class="square"></div>
</body>
</html>

Next we'll add a 20 pixel border on all sides, making the square 60 pixels wide with its borders:

<html>
<head>
<style type="text/css">
  .square {
    width: 20px;
    height: 20px;
    background-color: silver; 
    border: 20px solid red;
  }
</style>
</head>
<body>
  <div class="square"></div>
</body>
</html>

Let's take a closer look at the borders individually by assigning each one a different color:

<html>
<head>
<style type="text/css">
  .square {
    width: 20px;
    height: 20px;
    background-color: silver; 
    border: 20px solid;
    border-top-color: orange;
    border-left-color: blue;
    border-right-color: green;
    border-bottom-color: red;
  }
</style>
</head>
<body>
  <div class="square"></div>
</body>
</html>

Now you may notice that if we reduced the grey portion of the square we could bring these borders together and they would each form their own triangle. We do this by reducing the size of the square to 0 pixels:

<html>
<head>
<style type="text/css">
  .square {
    width: 0px;
    height: 0px;
    border: 20px solid;
    border-top-color: orange;
    border-left-color: blue;
    border-right-color: green;
    border-bottom-color: red;
  }
</style>
</head>
<body>
  <div class="square"></div>
</body>
</html>

And now to isolate any one of the triangles, we can just set the opposite border to 0 pixels, and the adjacent borders to transparent:

<html>
<head>
<style type="text/css">
  .square {
    width: 0px;
    height: 0px;
    border: 20px solid;
    border-top-color: orange;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom: 0px;
  }
</style>
</head>
<body>
  <div class="square"></div>
</body>
</html>

We now have a 20 pixel tall, 40 pixel wide triangle. The triangle can be resized and transformed by changing the border widths.