Technically Creative

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.