My first observation is how Colin Powell (a C student in high school) found himself in a huge organization that he could flourish in and would eventually lead.  This happened to be the military at the height of the cold war. More on the cold war later…

Powell sets out career themes which he reinforced, rather ‘drilled’ throughout the book. He kept sayings on his desk to remind him of things he learned the hard way. Some of these are quoted below:

Communication:

In any presentation Powell would take care to manage his words, posture, and body movements. These are techniques he learned at officer training school. In the civilian world we have Toast Masters.

“Tell ‘em what your gonna’ tell ‘em. Then tell ‘em what you just told ‘em.”

At press conferences he would do his best to give the answer he wanted to hear, vs. answering the question put to him.

“Never let them see you sweat.”

Attitude:

“Perpetual optimism is a force multiplier.”

This is real. The startup I was part of in 2002 had this going for it. I have helped it manifest again and again in my career. It is a joyous feeling to begin each day on the job surrounded by the force multiplier.

Sometimes, we get crappy assignments. Here is how to deal with it:

“If you get the dirty end of the stick, sharpen it and turn it into a useful tool.”

Change:

Okay, back to the cold war… When Powell became the Chairman of the Joint Chiefs of Staff, he saw Russia collapsing and the cold war coming to an end. This made much of the US mililtary strategy obsolete as the 1980′s drew to a close. Powell saw the magnitude of this earlier than most.  Instead of holding onto the past, he pushed for a 25% reduction in the size of the military. This was in spite of the fact he personally loved the military and knew how damaging the cuts would be to service men and women entrusted to his care.  The rules had changed.  He was in a position to do something about it. Understanding the reoccurring dynamic of change, as illogical and random as it often can be, is a key to success.

Software becomes obsolete and that can take people with it. Here’s a trick for staying ahead of change that Powell learned from a lawyer during a round of downsizing:

“Avoid having your ego so close to your position that when your position falls, your ego goes with it.”

So what does a career in software look like?

There is no 30 year career map for a programmer like there is for a 4 star general. It is more like a steep ramp from Jr. to Senior in 5-7 years that involves a 3-4x pay boost.  Then what? Architect, principal engineer, CTO, freelancer, teacher, entrepreneur, author, consultant?   The answer is Tabula rasa - a blank slate.

So how does a software professional flourish? Today nobody cares if you did DOS 5.0 programming.  In fact they may feel sorry for you.  However, if you lead a team of diverse individuals to succeed on a project that made money, it is absolutely relevant and always will be.  The software professional of the future is not a coder, but a communicator and leader who understands the business and the code.  Coding is a commodity. Understanding how to apply the commodity to get the outcome is where the action is. It does not hurt to genuinely enjoy the challenge of working with customers.

Final quote from Powell, especially when it comes to your life - “Have a vision. Be demanding.”

More information on Colin Powell:
http://en.wikipedia.org/wiki/Colin_Powell

A complete list of his rules can be found here:

• http://www.lucidcafe.com/library/96apr/powell2.html
• http://managementisajourney.com/2011/04/revisiting-colin-powells-13-rules-of-leadership/
• http://implementimprovement.com/?p=571

Enjoy!

The theme name is Brunelleschi, by Kit MacAllister.  He’s also from Portland.

Here’s what I love about the theme – it uses Responsive Design.

For a demonstration of what Responsive Design is, try re-sizing this browser window, or loading it with your phone or tablet. Notice how the site manages to compensate for whatever width it is being rendered at.   This is completely CSS driven, using the new HTML5 CSS3 standard called media queries.  These allow the CSS to understand the current page width and apply styles accordingly.  From a programming perspective, it is like having an {if/then} statement right there in the CSS.  I have to say, I’m hooked on this technology!  The media query standard took a lot of foresight from its creators and solves a difficult problem quite elegantly.

From an application architecture standpoint costs go down and productivity goes up. A web application can use one set of markup and work on just about any modern web enabled device (phones, tablets, and desktops).  Note I said modern device.  IE6 is out, but its market share is dwindling which means it is getting harder to make the old tired argument – “but we need to support IE6…”.  In quick testing it seems to work okay with IE7 and IE8 (simulated through IE9).

 Some examples of Responsive CSS code that help make this possible:

/* Set it up so images do not over flow their container */
img {
  max-width: 100%;
  height: auto;
}

/* When the width is below 767, adjust the right hand bar to
 *  drop below, instead of float right. */
@media handheld, only screen and (max-width: 767px) {
  .widget-area {
     width: auto;
     float: none;
     margin-left: 0px;
     margin-right: 0px;
     padding-left: 20px;
     padding-right: 20px;
   }
}

Links on Responsive Design:

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries (good introduction to the technology)

http://css-tricks.com/responsive-data-tables/  (for handling <table> rendering on phone size screens)

http://getskeleton.com/ (framework)

http://lessframework.com/ (framework)

Personally I would play with the CSS first before delving into a framework. Media queries are super simple to work with and don’t require much to get going.  Introducing them into an existing site is another story…

See the difference?

This book is targeted at helping readers understand the ‘low level’ implementation details of JavaScript.

The code examples on nuances of the language are the best I have found. As a primer, check out Douglas Crockford’s website, which has a lot of the same information in the book.

The book itself is only about 100 pages. 20% of that is filled with train track diagrams that explain the syntax of JavaScript graphically – not that useful to me personally. There is a good chapter on RegEx (which is more about understanding RegEx than JavaScript). The book is more in depth than his website, but still paper thin relative to a C++ or Java tome. I would have liked to see more examples and the way he might approach setting up a library or a small app.

JavaScript sucks right? It was built for Netscape 2.0.
The only language worse than JavaScript is Action Script 2.0, right??

I think not.

JavaScript is a critical language for the next decade. The forces driving this include:

• Apple and Google are pushing hard on JavaScript. So is Microsoft with their HTML5 based Windows8.
• Mobile Browsers – why build a native app when you can get 80-90% of the functionality out of a mobile web app? Marketing firms are asking this question, and opting for mobile web apps vs native apps because in many cases it is more practical. Sure, native apps still rock and are required for many use cases. However, organizations won’t be building multiple native apps targeting Android and iOS, when they can just build one mobile web app that gets the job done.
• Node.js is to JavaScript what Ruby on Rails was to Ruby back in 2005. We’ll continue to see rapid growth in the Node.js area.

The book points out that to master JavaScript, we must be aware of certain pitfalls:

• Relies on global variables.
• ‘+’ is used to add, or to concatenate strings.
• All variables declared in a function are global to that function – no block scope.
• Falsy and Truthy are hard to follow when comparing different types. Best to use === and !== which compare on type and value, instead of == and != which compare on value through a type cast if necessary.
• Functions are redefined at runtime at the top of their scope (eg, a function can be called above its declaration).
• (list truncated)

The biggest thing I got out of the book, something that every JavaScript programmer needs to know, is the behavior of the ‘new’ keyword:

The behavior the ‘new’ keyword is convoluted and non-obvious. When an object/function is created, adding the new keyword changes the meaning of ‘this’. When ‘new’ is added, ‘this’ refers to the object, which makes sense. However in the next code block, where ‘new’ is omitted, ‘this’ refers to the global Window object! The code example shows how the global object can be polluted. Watch out for ‘this’.

// setup our example function
var Example = function(name) {
	var self = this;
	self.name = name;
	return {
		getName: function () {
			return self.name;
		}
	};
};

// check our Window's name, which should start off blank
console.log("Window's name is: " + window.name);
// -> Window's name is:

// using new keyword
var thisIsSafe = new Example('Safe!');
console.log("thisIsSafe name: " + thisIsSafe.getName());
// -> thisIsSafe name: Safe!

// let's check our Window's name again, should still be blank
console.log("Window's name is: " + window.name);
// -> Window's name is:

// without new keyword
var thisIsBad = Example('Bad!!!');
console.log("thisIsBad name: " + thisIsBad.getName());
// -> thisIsBad name:  Bad!!!
console.log("Window's name is now: " + window.name);
// -> Window's name is now: Bad!!!
// We just polluted the global 'window' variable.
// oh no!!! get away from the fuel tanks!!!

Quick JavaScript Tip:

• CTL+SHIFT+J in Chrome is my friend – brings up the JavaScript console.
• CTL+SHIFT+J in Firefox brings up the JavaScript error console as well, but it is not as handy as Chrome’s.

To set up Fat-Free routes in Apache, first configure your .htaccess file:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* index.php [L,QSA]

 
This tells Apache to send all requests into the app (which lives at ‘/’) through index.php (unless the file or directory that corresponds to the requested location exists on the file system). This way CSS, images, javascript files, or whatever else we want to serve will be handled directly by Apache, bypassing Fat-Free.

The next step is to setup index.php that includes Fat-Free and defines a route:

require_once "fatfree/base.php";   //Fat-free
F3::set('DEBUG', 3); // debug is good for dev, not for live

F3::route('GET /example/@name', function() {
	F3::set("pageTitle", "First try at Fatfree");
	echo F3::render('templates/example.php');
});

F3::run();  // kick off Fat-Free routing

 
This route specifies that GET requests to /example/{some string} will be sent to example.php. Go ahead and make the file templates/example.php, and put some great content into it.

Access the pageTitle variable like so:

echo F3::get("pageTitle");

 
Access the value of @name with:

echo F3::resolve('{{@PARAMS.name}}');

 
It is very smart to go with a layout for your site. Fat-Free lets us chain templates. To add a header and footer:

F3::route('GET /example/@name', function() {
	F3::set("pageTitle", "First try at Fatfree");
	echo F3::render('templates/header.php');
	echo F3::render('templates/example.php');
	echo F3::render('templates/footer.php');
});

// if you don't need pageTitle, you can do this as:
F3::route('GET /example/@page','templates/header.php; templates/example.php; templates/footer.php');

 
The nice thing about Fat-Free is, each file is executed it its own sandbox. To share variables between templates you can use PHP globals (just make sure to use them wisely).
 
To respond to a POST event on the example page, just create another route:

// here is our route from the last example
F3::route('GET /example/@name', function() {
	F3::set("pageTitle", "First try at Fatfree");
	echo F3::render('templates/header.php');
	echo F3::render('templates/example.php');
	echo F3::render('templates/footer.php');
});

// now we'll do a POST that does some processing magic
F3::route('POST /example/@name', function() {
	F3::set("pageTitle", "First try at Fatfree");
	include("actions/example_post_logic.php");
	echo F3::render('templates/header.php');
	echo F3::render('templates/example.php');
	echo F3::render('templates/footer.php');
});

 
This way the routing configuration is controlling when to pull in the logic that handles the POST operation. This very cleanly breaks out the relative concerns into multiple files, without the overhead of a bloated MVC framework.
 
This tutorial should be enough to wet your appetite. Click here for the official documentation with more examples. There are several additional things Fat-Free does as well, including: dependency auto loading, templating, form handling, ORM, etc.

Things to be aware of about Fat-Free’s routing framework:

• Given that the routing is setup as a PHP file, eventually a site will get large enough to warrant breaking it up into smaller subsets.
• There is some repetition when defining the templates, especially the way I have been doing it here with GET and POST.
• Error handling takes some work to setup. I will do another post on how I approach that.
• Fat-Free is dual licensed as GPL and commercial friendly for a donation. Just be aware of that, and buy a license if you need it.

The dot dot dot (…) means 9’s repeating infinitely, past 2012, past the end of time, FOREVER. That is a lot of nines. It can also be written with a bar over the 9, as 0.9.

So what is going on here with 0.999…

• 0.9 != 1
• 0.9999 != 1
• 0.9999999 != 1
• 0.9999999999 != 1
• 0. 9999999999999 != 1
• 0. 9999999999999999 != 1
• 0. 9999999999999999999 != 1
• 0. 9999999999999999999999 != 1
• 0. 9999999999999999999999999 != 1
• 0. 9999999999999999999999999999 != 1
• 0. 9999999999999999999999999999999 != 1
• 0. 9999999999999999999999999999999999 != 1
• 0. 9999999999999999999999999999999999999 != 1
• 0. 9999999999999999999999999999999999999999 != 1
• Wheeeeeeeeeeeeeeeeeeeeeeeeeeeeee! ………………………………..

According to the hill of ASCII art, sliding down farther and farther never gets you there.  The pattern never reaches a value of 1. The sequence will always be just a hair under 1.

This is along the same lines as Zeno’s Dichotomy paradox:
To move onto an elevator, you must first get half way there, and then get a quarter of the way there, and then one eighth, and one sixteenth, and one 32nd, and 1/64th and 1/128th, and so on…. such that you never reach the elevator because there is always an additional half step to travel.  Zeno was good at driving people crazy with ideas like that.

Guess what? It is a riddle. Calculus is the answer.

Using the concept of infinity (positive infinity in this case) and the concept of a limit equation, calculus shows that indeed, 0.999… equals 1.

YES!

Think along conventional lines and get conventional answers.

Information in this article and the calculus equation graphic are attributed to http://en.wikipedia.org/wiki/0.999….

The length property is not defined as it would be in a normal array:

var basicArray = new Array();
basicArray[0] = "Portland";
basicArray[1] = "Beaverton";
basicArray[2] = "Lake Oswego";
console.log(basicArray.length);
// --> Outputs 3, as expected

var associativeArray = new Array();
associativeArray['city'] = "Portland";
associativeArray['state'] = "Oregon";
associativeArray['country'] = "United States";
console.log(associativeArray.length);
// --> Outputs 0 in Chrome, what the heck?

// we can also access values through .property notation ?!
console.log("City is: " + associativeArray['city']);
console.log("City is: " + associativeArray.city); 

// outputs
// --> City is: Portland
// --> City is: Portland

What is going on here? I want my associative array and I want it now!

Well it turns out, that just isn’t going to happen (grumble…).  Associative arrays in JavaScript are actually treated as Objects. Properties and methods can be assigned arbitrarily. In practice, the associativeArray variable declared above doesn’t make sense. It is correctly done this way:

var myObject = {};  // denotes an Object is being created
myObject.city = "Portland";
myObject.state = "Oregon";
myObject.country = "United States";
console.log(myObject.length);  // results in undefined
console.log("City is: " + myObject['city']);
console.log("City is: " + myObject.city); 

// outputs
// --> City is: Portland
// --> City is: Portland

Now that we know we are working with an Object we have to implement our own length function (but does that really even make sense?).

One way to get at the properties is to use a for/in loop:

for(property in myObject) {
   console.log(property + " = " + myObject[property]);
}

// outputs:
// --> city = Portland
// --> state = Oregon
// --> country = United States

Introducing Object.keys():

A manual loop? That seems too low level to be missing from the API! It turns out there is the Object.keys([object]) method, but it is not supported in all browsers. This link covers recent browsers and what JavaScript methods are supported. As you can expect IE8 is at the back of the pack, with FF 3.5 and Safari 4 sightly ahead. It seems that Chrome, FF 4+, and IE9 do quite well on the list.

Object.keys(myObject);
// --> ["city", "state", "country"]
Object.keys(myObject).length
// --> 3

// calling myObject.keys() results in:
// --> Type Error: Object #<Object> has no method 'keys'

Another way to define an array:

While we are on the subject of arrays in JavaScript, it is good know there are two ways to define them. Using var x = []; will also declare an array. In JavaScript with [] you do not have the option of setting the initial size of the array. You can only set the value at index 0. Note how the lengths are different in the example below:

// with this setup, there is no way to set the length ahead of time
var terseDeclaration = [5];
console.log(terseDeclaration[0]);
// --> 5
console.log(terseDeclaration.length);
// --> 1

// with Array() the length can be set up front
var longDeclaration = new Array(5);
console.log(longDeclaration[0]);
// --> undefined
console.log(longDeclaration.length);
// --> 5

More thoughts:
JavaScript is, after all, an Object Oriented language. The commonly operated on ‘window’ and ‘document’ keywords are objects defined by the browser.  Even to this day, most users of the language rarely approach JavaScript with Objects mind.  That likely attributed to JavaScript’s primary use as a DOM manipulator and event handler.  Projects like Node.js are changing that rapidly. JavaScript’s growth will only continue to accelerate given the expanding use of web technology, particularly on mobile devices. Backbone.js is another popular framework that is gaining traction I have been playing with lately.

A plug-in for Node.js called Paperboy acts as a local file server. Paperboy needs to be extracted to the /node_modules/paperboy directory where your node binary lives. You do need to write a quick script to activate paperboy. This is actually a pretty fun way to try Node for the first time. What’s great about this is it works anywhere Node works, so Windows, Mac, Linux users can all benefit from this.

The local http server script:

"use strict";

// base requirements
var http = require('http');
var path = require('path');
var paperboy = require('paperboy');

// configuration options
var PORT = 8000;
// the directory is relative to where node.exe is being started from
var DIRECTORY = path.join(path.dirname(__filename), 'local_dev');

// static server
http.createServer(function(req, res) {
  var ip = req.connection.remoteAddress;
  paperboy
    .deliver(DIRECTORY, req, res)
    .addHeader('Expires', 300)
    .after(function(code) {
      log(code, req.url, ip);
    })
    .error(function(code, msg) {
      res.writeHead(code, {'Content-Type': 'text/plain'});
      res.end("Error " + code);
      log(code, req.url, ip, msg);
    })
    .otherwise(function(err) {
      res.writeHead(404, {'Content-Type': 'text/plain'});
      res.end("Error 404: File not found");
      log(404, req.url, ip, err);
    });
}).listen(PORT);

// logging method
function log(code, url, ip, err) {
  var str = code + ' - ' + url + ' - ' + ip;
  if (err)
    str += ' - ' + err;
  console.log(str);
}

Save this script as local_server.js and locate it in the same folder where the node binary lives.  Set the desired PORT and DIRECTORY variables.  Run the binary and pass in which script you want it to load and you are up and running.

$ ./node.exe local_server.js

More on prototypes:

Prototyping is a really smart idea when it comes to building software. This is true even for minor increments that will ultimately be integrated into a larger software system. Prototyping gives you something to show the customer a lot sooner. That way feedback can be incorporated earlier which leads to less re-work.

When it comes to doing JavaScript features, the thing I love about doing a simple proof of concept outside the larger is system is that changes are immediately available in the browser. There is nothing worse than the pain of waiting for a build or app server restart! The local node server technique has made me more effective as a developer. You don’t have to use Node + Paperboy to do JavaScript prototypes, and a CDN is not required either, but together they save time. Plus this gives you an excuse to try out something new. Personally, I like having a few Node.js projects hanging out in my home directory.

Peopleware 2nd Edition
Productive Projects and Teams
By Tom Demarco and Timothy Lister

Peopleware is a timeless book on the human side of making software. We have all encountered many of the anti-patterns described in the book personally or anecdotally through co-workers. My Grandmother who was a COBOL programmer in the 70’s and 80’s can relate to the human aspects of software development. In Grandma’s opinion, job satisfaction is all about who you work with. The ornery guy in her department who played practical jokes is an example of someone who got away with wasting everybody’s time. He enjoyed tweaking the software so it would clear all fields at random intervals! Then he’d get a grin on his face to tell you who was responsible (seems like many diabolical evil doers just want attention). Working with motivated talented people makes the hours fly by. Turns out it is also good for the bottom line too. Peopleware shows this and backs it up with data.

Aside from the team, management’s philosophy on software is very important. As a software professional, it is favorable to work for a software company as opposed to another type of business. A company that views software as a cost puts software professionals in the same category as “IT”, as opposed to R+D where they belong and can flourish.
Peopleware goes on to show how human behavior is baked into the process of building software, whether we like it or not. The idea that history repeats itself is evident in how software works out. We make the same mistakes over and over, forgetting the wisdom of the past. There’s a great quote from Battelestar Galactica – “All this has happened before, and all this will happen again”.

Take the crash of Netflix in the fall of 2011.

Netflix’s stock went from above $300 to $77, representing a 75% loss in value over four months. Netflix might not seem like software at first glance. However, practically speaking, 99.9% of interaction with them is through a Web based UI – and that counts as software. Leading up to the crash, Netflix executives might have been thinking – “With Qwikster, we will differentiate ourselves in the marketplace, create a streamlined user experience! The financial statements will be clearer since mailed DVD’s and streaming internet really are separate businesses! Plus we’ll spell Quickster with a Qw to copy Qwest, since that’s trendy!”. Sounds like a Dilbert cartoon to me.

If the Netflix executives would have read Peopleware they would have seen this quote:

Nextflix forced an untested change down paying customer’s throats! Qwikster may have very well been a better alternative for customers, but they rejected it because of the way the change was communicated.

Does this mean we never make changes? No.

The book points out that to help foster change we need to:

1. Celebrate the way things used to be done.
2. Point out positive reasons for moving ahead such as: business opportunities that are now attainable, previously unavailable technology.
3. Include the ‘old’ people in the change and give them a stake in it.

A senior engineer I work with once framed it like this: “Our software was built with a model-T transmission, which is what we had at the time (2001). If you want to put in an automatic transmission, great!”.

So what about history repeating itself?

If all software professionals read this book, would every project be released on time with no burnout, turnover, or teamicde? Maybe, but the nature of business could get in the way:

• There will always be non-software managers at the helm who feel empowered to make decisions (poorly).
• There will always be competition for resources and risk taking in business. This leads to the following anti-patterns that come from underfunding:
• Excessive overtime.
• Lack of skills allocated to project, perhaps knowingly to save money.
• Documentation, testing, best practices thrown out the window.

I am not expecting we all go out and demand perfect working conditions and twice the budget. One thing we can do as software professionals is recognize the situation and communicate it diplomatically to our superiors.

Other Interesting Notes:

• Organizational busy work tends to expand to fill the working day. – pg 29
• Quality is a means to higher productivity (in software).
• Good people gravitate towards good organizations. “While this 10:1 productivity differential among programmers is understandable, there is also a 10:1 difference in productivity among software organizations.” – Software Productivity, pg 48.
• Cornell experiment that showed listening to music occupies the right brain and blocks creative potential when working on a logic problem. So much for using Pandora!
• There is a Danish law that requires every employee in an office to get a window. Narrow buildings result. I love it!
• “The ultimate management sin is wasting people’s time.” pg 215 – Is it a meeting or a ceremony?
• Managing smart people is really about getting out of their way. My best managers get this. The micromanaging types fail at this.

Coming from an Eclipse background I wanted to share my take on the differences between the two. Debating the merits of an IDE can incite a holy war. Everybody is different, everybody wants it their way, and what is familiar often takes precedent over what is foreign. However, when I get too comfortable with a tool it probably means I am not keeping up.  Embracing change is an important part of being a software professional.

Both Tools are Really Good:

VS

Both tools get the job done and don’t get in my way too much. I am happy using either. IntelliJ is smoother in several areas, especially navigation and integration with SVN. However, IntelliJ is focused on the Java ecosystem, which can be a limitation. They both take 30+ seconds to start and sometimes freeze up during complex operations.

Eclipse’s Broad Language Support and Plug-ins:

Eclipse has a huge plug-in eco system. Some of the plug-ins are gold. Some are downright garbage and don’t work. Some plug-ins only work in a certain version of Eclipse. It can be frustrating to get everything working just right. Such is the nature of open source.

One thing IntelliJ users often over look is the fact that Eclipse does much more Java. I have used Eclipse for Python (pydev), PHP, Ruby, CSS/HTML, Perl, Database Modeling, SQL, UML… the list goes on. According to the wiki, Eclipse even does COBOL, Ada, and C++! In a past job, I was having to switch between languages on a daily basis. Not having to switch IDEs was nice. Eclipse destroys IntelliJ when it comes to a work environment where both java and non-java technologies are called for.

IntelliJ – Overall Impression:

IntelliJ seems to anticipate what I am doing and makes navigating a complex object model fairly straight forward. Integration with app servers, such as WebLogic, is seamless. The debugger works really well. The search feature is fast. One thing I really, really love is how responsive the auto-complete is. I can’t count how many times Eclipse would grind for 15-20 seconds when I would type a ‘.’ after an object. The pause would break my chain of thought.

SubVersion Integration – IntelliJ Wins!

I think my favorite thing about IntelliJ is the integration with SVN and the ability to shelve changes. I had used Subclipse in the past for Eclipse. With Eclipse, each changed folder/file gets a tiny little star next to it. This makes it difficult to see what has changed locally. IntelliJ has a tab dedicated to changes that stays at the bottom of the window. No need to switch perspectives. The built in diff tool, (Ctl +D) is really handy.

IntelliJ IDEA Keyboard Short Cuts:

For developers switching from Eclipse to IntelliJ, I have made the following list of hot keys in IntelliJ: