Are Deadlines Agile?

I had two weeks. I hadn’t fallen behind; I didn’t procrastinate. That was all the time I was given to work on the final assignment— a rather interesting project at that— for my data structures class.

There were classic answers to the problems given in the assignment: this should be a class, that should be a list of that class, an so on. It wasn’t a poorly designed project. There was a right way to do it, but my grade didn’t depend on doing what was right.

I got an A by breaking the rules.

Finishing that assignment started a habit I spent a long time breaking. Some of the worst code I’ve written or the decisions I regret the most came from the pressure to meet a deadline. Though I’ve gotten better, taking the fast route is still a temptation. I’m not alone there either: when deadlines approach others try to cut corners with me in quality, process, or features with me to make a ship date.

With that potential to cause harm, do deadlines fit in with agile processes? Are deadlines agile?

There’s not a guide to dictate if something is or is not agile. There is a good set of principals, however, laid out in the Agile Manifesto.

Individuals and interactions over processes and tools

By definition deadlines are part of a process: they are the end of it. They are also a tool that is often misused. The Agile Manifesto lists points as a core set of values and the value here is that the process should fit the individuals, not that the individuals should conform the process.

Agile or Not Agile: Not Agile

Working software over comprehensive documentation

As painful as it is to admit, software that ships often does work. My grader in data structures didn’t care that I threw out the class material; I was graded on the fact that my assignment gave the right outputs for the given inputs. Customers often have the same, singular care.

Agile or Not Agile: Agile

Customer collaboration over contract negotiation

Customers can’t use software that hasn’t shipped. A properly stated deadline can also help the development team and the customer have an informed conversation and, for example, decide together if that last feature is really needed now or if it can wait until the next release.

Agile or Not Agile: Agile

Responding to change over following a plan

Having a date that will not change is not responsive. Moving to kanban from scrum taught me that arbitrary time boxes don’t respond to a changing environment either. Since we can’t predict the future our plans can’t account for everything that inevitably happens.

Agile or Not Agile: Not Agile

Final score: 2 to 2

A tie.

Darn.

Pulsar Screensaver

I miss screensavers. They're not really necessary with modern displays, but I still install XScreensaver on new computers. When I was looking for projects to practice HTML5 and CSS3 features on, I decided to try implementing some of my favorites. For now I'm limiting myself to plain old JavaScript, that is no frameworks, to make things more interesting.

I decided to start with the pulsar screensaver. It's five or six gradient planes that rotate around different axes.

Build One Object

Filling a square with a gradient is pretty straightforward: just choose six values between 0 and 256 for the red, green, and blue, start at the top left of the square and go to the bottom right.

function randomGadient() { 
  var demo1 = document.getElementById("gradient1");
   var colors = new Array();
   for (var i=0; i < 6; i++) {
      colors[i] = Math.floor( Math.random() * 256 );
   }
   var style = "background-image: linear-gradient(45deg, rgb(" + colors[0] +"," + colors[1] + "," + colors[2] + ") 0%, rgb(" + colors[3] +"," + colors[4] + "," + colors[5] + ") 100%);";
   demo1.style.cssText = style;
}

The results are:



That's not what I was expecting.

I reloaded the page a few times but the random gradients looked flat and were not nearly as bold as the original. Then I noticed that the original had a color stop in the middle. That was easy enough to add, I just had to choose three more colors and stop halfway in the image.

function randomGradientWithStop() {
   var demo2 = document.getElementById("gradient2");
   var colors = new Array();
   for (var i=0; i < 9; i++) {
      colors[i] = Math.floor( Math.random() * 256 );
   }
   var style = "background-image: linear-gradient(45deg, rgb(" + colors[0] +"," + colors[1] + "," + colors[2] + ") 0%, rgb(" + colors[3] +"," + colors[4] + "," + colors[5] + ") 50%, rgb(" + colors[6] +"," + colors[7] + "," + colors[8] + ") 100%);";
   demo2.style.cssText = style;
}


That wasn't much better. Taking a closer look, I realized that all of the gradients in the original pulsar were the same. That would help clean up the JavaScript. One quick trip to the Ultimate CSS Gradient Generator and I had the CSS I needed.

.gradient {
   background: #ff0c0c; /* Old browsers */
   background: -moz-linear-gradient(-45deg,  #ff0c0c 26%, #30ff3e 50%, #26f23e 51%, #1e2dff 79%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, right bottom, color-stop(26%,#ff0c0c), color-stop(50%,#30ff3e), color-stop(51%,#26f23e), color-stop(79%,#1e2dff)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(-45deg,  #ff0c0c 26%,#30ff3e 50%,#26f23e 51%,#1e2dff 79%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(-45deg,  #ff0c0c 26%,#30ff3e 50%,#26f23e 51%,#1e2dff 79%); /* Opera 11.10+ */
   background: -ms-linear-gradient(-45deg,  #ff0c0c 26%,#30ff3e 50%,#26f23e 51%,#1e2dff 79%); /* IE10+ */
   background: linear-gradient(135deg,  #ff0c0c 26%,#30ff3e 50%,#26f23e 51%,#1e2dff 79%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0c0c', endColorstr='#1e2dff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

That was not the first or last time I would make something more complicated than it needed to be.

Do Something

Rotation is available around any axis using a CSS 3D transform. The functions rotateX, rotateY, and rotateZ are values of the transform and -webkit-transform CSS properties and can rotate an HTML object around the X, Y, or Z axis. The rotation functions each take values in degrees and can go beyond 360--- something which will come in handy later.

The rotation can be animated by applying a CSS transition to the transform. To make things simple, the transition property can be applied to all CSS properties.

The final CSS:

   transition: all 4s;
   -webkit-transition: all 4s;

The final JavaScript:

var rotateDemoX = 0;
function rotateX(id) {
   var rotate = document.getElementById(id);
   rotateDemoX = rotateDemoX + 180;
   rotate.style.cssText += ";transform: rotateX(" + rotateDemoX + "deg);-webkit-transform: rotateX(" + rotateDemoX  + "deg);";
}


Repeat

At first I dynamically created six divs to use as my rotating planes, then I realized that I was making things more complicated than I needed to--- again. I ended up writing the planes in HTML and using assigning a negative margin-top to each so they'd end up on top of each other.

   <div id="p0" class="gradient"></div>
   <div id="p1" class="gradient" style="margin-top: -70%"></div>
   <div id="p2" class="gradient" style="margin-top: -70%"></div>
   <div id="p3" class="gradient" style="margin-top: -70%"></div>
   <div id="p4" class="gradient" style="margin-top: -70%"></div>
   <div id="p5" class="gradient" style="margin-top: -70%"></div>

The rotateX, rotateY, and rotateZ JavaScript functions above don't work well when applied simultaneously; the cssText property gets overwritten. That's easy enough to fix though with the rotateAll function below.

Note: the xCol, yCol and zCol are just constants to increase readability.

function rotateAll(p) {
   var rotate = document.getElementById('p' + p)
   rotate.style.cssText += ";transform: rotateX(" + planes[p][xCol] + "deg) 
                                        rotateY(" + planes[p][yCol] + "deg) 
                                        rotateZ(" + planes[p][zCol] + "deg);
                     -webkit-transform: rotateX(" + planes[p][xCol] + "deg) 
                                        rotateY(" + planes[p][yCol] + "deg) 
                                        rotateZ(" + planes[p][zCol] + "deg);";
}

Defining a random rotation then is fairly straightforward.

function rotatePlane(p) {
   planes[p][xCol] +=  Math.floor( Math.random() * 720 );
   planes[p][yCol] +=  Math.floor( Math.random() * 720 );
   planes[p][zCol] +=  Math.floor( Math.random() * 720 );
   rotateAll(p);
   setTimeout('rotatePlane(' + p + ');', 4000);
}

The last line allows for a continuous rotation. Since the transitions have a fixed duration, that is all the delay that is needed before the function recurses.

A setup function called on page load completes the screensaver.

function setupDemo3() {
   planes = new Array();
   for (i = 0; i < numPlanes; i++) {
      planes[i] = new Array();
      planes[i][xCol] = 0;
      planes[i][yCol] = 0;
      planes[i][zCol] = 0;
      rotatePlane(i);
   }
}

What Did I Learn?

  • Random gradients don't work.
  • Between writing the demo and publishing it, Chrome updated to use a newer version of the CSS 3 standard.Originally the rotation functions could be applied in series, that is I could rotateX(10deg) and then rotateX(10deg) and have the result be a 20 degree rotation. That doesn't work anymore. The fix was to a running total of the rotation along all of the axes. That kept the planes spinning.
  • There was some fighting to get the code in to WordPress. That was resolved with some plugin hunting and should be transferable to the next post.

Blog Launched

Hello.  I’m glad you stopped by.

The blog is live, but there’s still a lot of work to be done.  I’m trying to be agile and I figured it was better to launch a site that worked and iteratively improve it— hopefully quickly.  So you may notice semi-frequent changes to the graphic design while I release my backlog of posts— and that backlog is growing as site updates inspire more to write about.

Given the categories I’m starting with (administrative, soft skills, HTML/CSS/Javascript, and cats) I’m hoping that there’s something here for everyone.

No Surprises

My cat EzriI have a rule that I apply to my cats and to my coworkers. *  It’s one of those rare circumstances when over-generalization actually works.

One of my cats gets medicine every day, and she likes it about as much as you’d expect a cat to— not at all. Every day we go through the same routine: I measure the dose, she runs, I catch her, I take her to the medicine, I give her the dose, she runs again, and we’re done.  After all of that she’ll be waiting for me on the couch, completely unafraid.  She always knows when the bad stuff will happen.

It took me a while to realize how that reasoning could be agile.

“Do you think you surprised them?”  I don’t remember what prompted my manager to ask that question.  I might have been talking about a problem I was having a hard time solving.  I might have relayed some tidbit I heard in a meeting.  I might have mentioned some test case that broke a new feature.

Whatever prompted the question, I did surprise my manager.  Here I had someone on my team who’s primary job it was to reduce risk and I surprised them with bad news.  I didn’t have to do that.

In fact, most teams have someone like this.  They usually have the title of manager.  They are the ones who are expected to know when things will ship, what’s keeping the team from shipping, and what happens if the team doesn’t ship.  They definitely want to know what might be a problem and how likely those problems are.

The question stayed with me.  I had a simple rule about what I should say in status meetings: if I don’t say something now, will I surprise my manager later?  I didn’t want to inundate my manager with trivial, but trivial information wouldn’t be surprising.  Thus the rule has a built in filter.

It was a few years later that a different manager asked me, “I know you don’t want to surprise your project manager.  What about the rest of your team?”

I was a little sad that didn’t occur to me sooner.  It’s not solely the job of people with manager in their title to mitigate risk.  It’s part of everyone’s job on the team, including mine.  Again, I don’t want to go on about problems that aren’t likely, but trivial information isn’t surprising.  It’s a different problem if I can’t figure out what my team thinks is trivial.

So now I try not to surprise anyone, feline or human.

* What can I say: cats get page views.