Monthly Archives: June 2012

Circle Numbers with CSS and HTML5

They say programmers have a special personality type: we are able to dive in deep into very small details and stay with them until we find a solution.

I don’t know if that’s true or not, but I know this morning when I asked myself “Wouldn’t it be cool to have numbers inside of circles for signup pages?” I didn’t realize I was heading off on a multiple-hour adventure.

I was thinking of something like this:


So a couple of hours later, here it is:

First, this code is crap. I hate all the markup involved for something so simple and I suspect I could collapse it down quite a bit given time. It’s also pretty loose: I have a feeling there’s stuff in there that could easily be removed, and I’d like to comment it up some more. Also I could have spent a large chunk of my life worry about browser compatibility, but I did not. Works on webkit.

But this is the internet. You pays your money and you takes your chances. The main goal for me was to demonstrate to myself that this is possible. If I ever want to use it in production I’ll come back and honk around with it some more. Or not. If you need something similar, hopefully this can be a good starting point for you.

Some cool things you could do from here if you have the time and patience. Hover effects on these little guys would be awesome, as would making them work automatically in an ordered list — although I believe a bit of JQuery might be involved for that to happen.

Note that the shadows of each circle have a hint of the circle’s color in them. Also note the background of the circles around the circles are gradients, as are the backgrounds of the numbers themselves. You could have a nice red-to-yellow colored font for you numbers on a green-to-black circle if you wanted. Then you could make it dance around. And sing. But I’ll leave all of that as an exercise for the reader. I need to get back to actually working.

If you are interested using this, there’s a bit more complexity behind-the-scenes than you might expect.

Finally, here’s the code working on the page:

UPDATE: *sigh* I went back and added in the hover. Just too cool to pass up. So now they are numbered circles which also work as buttons. The comments show what to take out just to have them be numbered circles again.

1Take groceries to the store

2Mow lawn

3Master FTL Travel



If you've read this far and you're interested in Agile, you should take my No-frills Agile Tune-up Email Course, and follow me on Twitter.

War is Hell

picture of D-Day landing at Normany

Today is the 68th anniversary of the allied D-Day landings in Normandy and I thought it might be good to take a minute to reflect on the terrible things that happen during war.

There’s so many things, of course; too many to blog about. So let’s limit it to armies killing the people they are supposed to be protecting in order to shorten the war. Ever since I learned that the standard Marine response to being overrun was to call in artillery on their own position, I always find these stories of purposeful self-destruction amazing. As you can imagine, they are also very controversial.

But first a bit of a digression. The phrase “War is Hell” comes from the American Civil War, specifically Sherman’s march to the sea and the sacking of the Shenandoah Valley. I live in Virginia, and we still talk about the total destruction of the Shenandoah Valley during the war — more than 150 years later. Late in the war, the Union decided that destroying the civilian population’s possessions — the population that it did not want to destroy and thought of as fellow countrymen — was the best way to bring the conflict to a conclusion. So a large valley that people had lived in for generations was laid bare to the point that nobody could possibly live there any more. It was a far cry from a war that began with people taking picnic baskets out to watch the first battle.

During WWII, rumor has it that Churchill knew that Coventry was going to be burned to the ground by German air power, but because he gained the knowledge from having the German codes cracked, he had to let it happen. It was more important to protect the intelligence source than the civilian population. And there was considerable damage. From Wiki:

The raid reached such a new level of destruction that Joseph Goebbels later used the term Coventriert (“Coventrated”) when describing similar levels of destruction of other enemy towns. During the raid, the Germans dropped about 500 tonnes of high explosives, including 50 parachute air-mines, of which 20 were incendiary petroleum mines, and 36,000 incendiary bombs.

Even if it didn’t play out like this, the flow of the story rings true. I seriously doubt we would have risked loosing a vital intelligence stream due to one city.

In 1938, as Japanese forces were advancing in China, Chinese officials were desperate to do anything possible to stop their advance. So they purposely blew up the dikes at Huayuankou, causing at least a half a million Chinese civilians to die and significantly slowing the Japanese advance.

Finally let’s not forget D-Day itself. Not only did the allied soliders suffer thousands of casualties, the French civilian population suffered as well by allied hands. 3,000 died in Normany during that one day of the invasion, and over 20 thousand died during the entire Normandy campaign. The total destruction of French villages by allied bombings angered the population to the point that many of the “liberators” were greeted with rancor and arms. And no wonder.

War is always a progression from a ferocious civil disagreement to doing anything necessary to make the other side stop fighting. People forget that the first German pilot shot down over Britain was given a military funeral — with honors. That kind of polite thinking goes out the window as the horrors of war increase. Civilian populations are targeted, more efficient means of discouraging people from fighting are developed, and people become numb. When thinking about how sometimes our own civilians are targeted or allowed to die, I am reminded of a quote about the dropping of the atomic bomb on Japan

But perhaps George M. Elsey, a young naval intelligence officer assigned to the Truman White House, provided the best reply to revisionist historians and others who question the decision to drop the atomic bombs. Asked by David McCullough for his biography of the President (Truman, Simon & Schuster, 1992) about the decision, Elsey replied: “Truman made no decision because there was no decision to be made. He could no more have stopped it than a train moving down a track. It’s all well and good to come along later and say the bomb was a horrible thing. The whole goddamn war was a horrible thing.

War is truly hell. On the 68th D-Day anniversary, it’s a good time to remember that.

If you've read this far and you're interested in Agile, you should take my No-frills Agile Tune-up Email Course, and follow me on Twitter.