...as if millions of voices suddenly cried out in terror and were suddenly silenced.

First up in this month’s Make Smarter is Chris Coyier’s Quick Overview of CSS Position Values. It is the most straight-forward explanation of CSS positioning I’ve seen, and if I had to pick the one place where most people struggle with CSS, it’s positioning.

Next up this month is a quick tutorial by Brendan Kenny on The Google Maps API and the Chrome DevTools. The Chrome Dev tools have really matured over time. I very rarely find myself jumping into Firefox/Firebug these days.

Bret Victor has a really interesting talk on Inventing on Principle. His core principle is that creative people need an immediate connection with what they’re doing. The talk was so good there have already been some projects started to implement his vision.

And finally, check out this 2010 article on CBS Money Watch (oh the places I’ll surf) called The 8 Stupidest Management Fads of All Time. The page is so old (in Internet years) it has some formatting problems, but I laughed the whole way through it. We still do some of that stuff. I guess I shouldn’t be surprised: How to Make Government Innovative Again‘s #4 reason why government isn’t agile is the public sector is afflicted by management fads.

One of my must-have plugins is SublimeLinter, which highlights lines of code the linter deems to contain (potential) errors, highlights things like TODO lines, and other goodies. It relies on node.js for a number of the base linters (JavaScript and CSS in particular). This seems to just work under Linux, but it just doesn’t under Windows. To get it up and running:

• Install node.js. Which, by the way, is pretty darn awesome in its own right.
• Open up Sublime Text, and close all open files.
• Head to Preferences->Package Settings->SublimeLinter->Settings – User (it will be empty if you haven’t messed with it before), and insert the following:

{

  "sublimelinter_executable_map":
    {
        "javascript":"C:/Program Files (x86)/nodejs/node.exe",
        "css":"C:/Program Files (x86)/nodejs/node.exe"
    }

}

• This is also where you’d put paths to, say, php for linting. Make sure you get the path to node correct – this is the default location on a Windows 7 install. Save the file, close the file, and restart Sublime Text.
• Marvel at how bad your code is.

You can tweak down the linting options in your settings file. The default CSS linting rules in particular are set to kill. The default JS linting rules aren’t so bad.

Nothing destroys a good idea faster than a mandatory consensus. The lowest common denominator is never a high standard.

Have you ever been in one of those committees where everybody in the room had veto power over everything? I know you government types have. Governments operate more like a collection of (occasionally warring) city-states than a traditional top-down organization. This mode of operation has advantages and disadvantages. Hello, disadvantage.

If you ever wondered how did our web site for the City of Bupkiss get this awful?, this is it.

This comes about for the same reason you get multi-layered committees who are only referred to by their acronyms – risk aversion. In risk-averse organizations, the actual or perceived penalties of risk are greater than the rewards. Mandatory consensus mitigates risk by spreading responsibility to as wide an area as possible, because saying that everybody is responsible is another way of saying that nobody is responsible.

This came up because I recently managed to rescue a project from the pitfalls of consensus. How does one with the social skills of a turnip (hi!) manage the kind of subtle manipulations required to navigate that kind of environment? Beats me. It mostly involved waiting patiently with my trap shut. I finally got somebody to voice what was on my mind and pounced, declared it manifest brilliance, and ran with it like the dickens before anybody knew what hit them.

Mandatory consensus isn’t a rule problem or a strategy problem where you would form another committee (probably referred to by an acronym) to create more paper to attach as appedix F on your strategic plan which, by the way, nobody but you has read. This is a culture problem, and culture eats strategy. If it is something you plan on fixing, that is where you have to start.

Main Styles

Map {
  background-color: #fff;
}

#buildings {
  [zoom > 14] {
  line-color:#594;
  line-width:0.5;
  polygon-fill: #ccc;
    polygon-opacity: 1;
    }
  [zoom >=16] {
    building-height:  "[HEIGHT] * .75";
    building-fill: #ccc;
    building-fill-opacity: 0.6;
  }
}

#trees {
  [zoom = 16] {
  marker-width:2;
  marker-fill: #6FBF4D;
  marker-opacity: 0.8;
  marker-line-color: #40821F;
  marker-allow-overlap: true;
  }
  [zoom > 16] {
    point-file: url(images/tree.svg);
    point-transform:"scale(0.15)";
  }
  [zoom = 18] {
      point-transform: "scale(0.3)";
  }
}

#relief {
  raster-opacity:1;
}

#hillshade {
  [zoom < 16] {
    raster-opacity: 0.5
    }
}

#slopeshade {
  [zoom < 16] {
  raster-opacity: 0.10;
    }
}

Road Style

@motorway: #F8D6E0; /* #90BFE0 */
@trunk: #FFFABB;
@primary: @trunk;

@road: #bbb;
@secondary: @road;
@track: @road;

@font_reg: "Ubuntu Regular","Arial Regular","DejaVu Sans Book";

/* ---- ROAD COLORS ---- */

/*.highway.line { line-color: #f00; } /* debug */

.highway[stylegroup='HIGHWAY'] {
  .line[zoom>=7]  {
    line-color:spin(darken(@motorway,36),-10);
    line-cap:round;
    line-join:round;
  }
  .fill[zoom>=10] {
    line-color:@motorway;
    line-cap:round;
    line-join:round;
  }
}

.highway[stylegroup='RAMP'] {
  .line[zoom>=7]  {
    line-color:spin(darken(@motorway,36),-10);
    line-cap:round;
    line-join:round;
  }
  .fill[zoom>=12] {
    line-color:@motorway;
    line-cap:round;
    line-join:round;
  }
}

.highway[stylegroup='PRIMARY']{
  .line[zoom>=7] {
    line-color:spin(darken(@primary,36),-10);
    line-cap:round;
    line-join:round;
  }
  .fill[zoom>=12] {
    line-color:@primary;
    line-cap:round;
    line-join:round;
  }
}

  .highway[stylegroup='SECONDARY'] {
  .line[zoom>=10] {
    line-color:@road;
    line-cap:round;
    line-join:round;
  }
  .fill[zoom>=15] {
    line-color:#fff;
    line-cap:round;
    line-join:round;
  }
}

/* ---- ROAD WIDTHS ---- */

.highway[zoom=13] {
  .line[stylegroup='HIGHWAY']      { line-width: 2.0 + 2; }
  .fill[stylegroup='HIGHWAY']      { line-width: 2.0; }
  .line[stylegroup='PRIMARY']       { line-width: 1.2 + 2; }
  .fill[stylegroup='PRIMARY']       { line-width: 1.2; }
  .line[stylegroup='RAMP'] { line-width: 1.0 + 2; }
  .fill[stylegroup='RAMP'] { line-width: 1.0; }
  .line[stylegroup='SECONDARY'] { line-width: 1.0; }
}

.highway[zoom=14] {
  .line[stylegroup='HIGHWAY']      { line-width: 4 + 2; }
  .fill[stylegroup='HIGHWAY']      { line-width: 4; }
  .line[stylegroup='PRIMARY']       { line-width: 2 + 2; }
  .fill[stylegroup='PRIMARY']       { line-width: 2; }
  .line[stylegroup='RAMP'] { line-width: 1.4 + 2; }
  .fill[stylegroup='RAMP'] { line-width: 1.4; }
  .line[stylegroup='SECONDARY'] { line-width: 1.0; }
}

.highway[zoom=15] {
  .line[stylegroup='HIGHWAY']      { line-width: 6 + 2; }
  .fill[stylegroup='HIGHWAY']      { line-width: 6; }
  .line[stylegroup='PRIMARY']       { line-width: 4 + 2; }
  .fill[stylegroup='PRIMARY']       { line-width: 4; }
  .line[stylegroup='RAMP'] { line-width: 2 + 2; }
  .fill[stylegroup='RAMP'] { line-width: 2; }
  .line[stylegroup='SECONDARY']  { line-width: 4 + 2; }
  .fill[stylegroup='SECONDARY']  { line-width: 4; }
}

.highway[zoom=16] {
  .line[stylegroup='HIGHWAY']      { line-width: 9 + 3; }
  .fill[stylegroup='HIGHWAY']      { line-width: 9; }
  .line[stylegroup='PRIMARY']       { line-width: 7 + 2; }
  .fill[stylegroup='PRIMARY']       { line-width: 7; }
  .line[stylegroup='RAMP'] { line-width: 3 + 2.5; }
  .fill[stylegroup='RAMP'] { line-width: 3; }
  .line[stylegroup='SECONDARY'] { line-width: 6 + 2; }
  .fill[stylegroup='SECONDARY']  { line-width: 6; }
}

.highway[zoom>=17] {
  .line[stylegroup='HIGHWAY']      { line-width: 13 + 3; }
  .fill[stylegroup='HIGHWAY']      { line-width: 13; }
  .line[stylegroup='PRIMARY']       { line-width: 9 + 2; }
  .fill[stylegroup='PRIMARY']       { line-width: 9; }
  .line[stylegroup='RAMP'] { line-width: 4 + 2.5; }
  .fill[stylegroup='RAMP'] { line-width: 4; }
  .line[stylegroup='SECONDARY'] { line-width: 8 + 2; }
  .fill[stylegroup='SECONDARY'] { line-width: 8; }
}

/* ---- ONE WAY ARROWS ---- */

.highway.fill::oneway_arrow[zoom>15][oneway > 0] {
  marker-type:arrow;
  marker-width:1;
  marker-line-width:1;
  marker-line-opacity:0.5;
  marker-line-color:#fff;
  marker-spacing: 200;
  marker-fill:spin(darken(@motorway,50),-10);
  marker-opacity:0.8;
}

/* ---- HIGHWAY ---- */

.highway-labels {
  text-face-name:@font_reg;
  text-halo-radius:1;
  text-placement:line;
  text-name:"''";
  text-min-distance: 500;
  [stylegroup='HIGHWAY'][zoom>=12] {
    text-name:"[wholestnam]";
    text-halo-fill:lighten(@motorway,8);
    [zoom>=13] { text-size:11; }
    [zoom>=15] { text-size:12; }
  }
  [stylegroup="PRIMARY"][zoom>=13] {
    text-name:"[wholestnam]";
    text-fill:spin(darken(@primary,70),-15);
    text-halo-fill:lighten(@primary,8);
    [zoom>=15] { text-size:11; }
  }
  [stylegroup='SECONDARY'][zoom>=16] {
    text-name:"[wholestnam]";
    text-fill:#444;
    text-halo-fill:#fff;
  }
}

Resources

• Working With Terrain Data
• A workflow for creating beautiful relief shaded dems using GDAL

So we have a small crowd angry that their photos are old. But we also have an enormous crowd that would skin us alive if the photos went away. So…here’s my plan.

• Mark the photos we have with the date when we display them, something we should have been doing anyway. The photos will still be out there, keeping our hides intact.
• Let people upload their own photo. That should placate the I repainted my house and it doesn’t show in my photo crowd.
• Release an API for the photos. After all, if people are providing data updates, people should get the data (I’m looking at you Google).

First things first – a file upload/processing piece. This afternoon-killing bit of code was so unexpectedly unpleasant I wanted to share it. You’ll need the gd and sqlite/pdo extensions enabled for PHP.

OUCH OUCH OUHC OUCH OUCH

<?php

  // validate email address
  function isValidEmail($email){
    return preg_match("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$^", $email);
  }
  // validate attribution
  function isThere($attribution) {
    return strlen(trim($attribution)) > 0;
  }
  // validate image type
  function isImageType(){
    if ((($_FILES["file"]["type"] == "image/jpeg")
      || ($_FILES["file"]["type"] == "image/jpg")
      || ($_FILES["file"]["type"] == "image/gif")
      || ($_FILES["file"]["type"] == "image/png"))) {
        return true;
    }
    else return false;
  }
  // check image size
  function isImageSize(){
    return $_FILES["file"]["size"] < 2000000 ;
  }
  // replace file name extension
  function replace_extension($filename, $new_extension) {
    return preg_replace('/\..+$/', '.' . $new_extension, $filename);
  }

 /**
 * Remove spaces and special characters from file names. Swiped this from Drupal.
 */
  function sanitize_filename($name) {
    $special_chars = array ("#","$","%","^","&","*","!","~","‘","\"","’","'","=","?","/","[","]","(",")","|","<",">",";","\\",",",".");
    $name = preg_replace("/^[.]*/","",$name); // remove leading dots
    $name = preg_replace("/[.]*$/","",$name); // remove trailing dots

    $lastdotpos=strrpos($name, "."); // save last dot position

    $name = str_replace($special_chars, "", $name);  // remove special characters

    $name = str_replace(' ','_',$name); // replace spaces with _

    $afterdot = "";
    if ($lastdotpos !== false) { // Split into name and extension, if any.
      if ($lastdotpos < (strlen($name) - 1))
          $afterdot = substr($name, $lastdotpos);

      $extensionlen = strlen($afterdot);

      if ($lastdotpos < (50 - $extensionlen) )
          $beforedot = substr($name, 0, $lastdotpos);
      else
          $beforedot = substr($name, 0, (50 - $extensionlen));
    }
    else   // no extension
     $beforedot = substr($name,0,50);

    if ($afterdot)
      $name = $beforedot . "." . $afterdot;
    else
      $name = $beforedot;

    return $name;
  }

  // Holder of ye oh crap information
  $message = "";

  // form was submitted
  if ($_POST['xsubmit'] == 'y') {

    // run data checks
    if (!isValidEmail($_POST["email"])) $message .= "Invalid email address.<br />";
    if (!isThere($_POST["attribution"])) $message .= "Attribution required.<br />";
    if (!isset($_POST["license"])) $message .= "You must agree to the terms and conditions.<br />";
    if (!isImageType()) $message .= "Image must be GIF, PNG, or JPG/JPEG.<br />";
    if (!isImageSize()) $message .= "Image must be less than 2MB in size.<br />";

    // run file upload if everything checked out OK
    // the uploaded photo is shrunk/expanded to 600px wide
    // and written out as date + filename.jpg
    if (strlen($message) == 0 ) {
      try {
        // width of the uploaded image
        $newwidth = 600;

        // Set save directory and file name
        $directory = "photos/";
        $target = time().'-'.sanitize_filename($_FILES['file']['name']);

        // Write image to server

        $ext = end(explode(".",strtolower(trim($_FILES["file"]["name"]))));

        // Check is valid extension.
        if($ext == "jpg" || $ext == "jpeg"){
          $image = imagecreatefromjpeg($_FILES["file"]["tmp_name"]);
        }
        else if($ext == "gif"){
          $image = imagecreatefromgif($_FILES["file"]["tmp_name"]);
        }
        else if($ext == "png"){
          $image = imagecreatefrompng($_FILES["file"]["tmp_name"]);
        }

        list($width,$height)=getimagesize($_FILES['file']['tmp_name']);
        $newheight=($height/$width)*$newwidth;
        $tmp=imagecreatetruecolor($newwidth,$newheight);

        imagecopyresampled($tmp,$image,0,0,0,0,$newwidth,$newheight,$width,$height);

        if(!imagejpeg($tmp,$directory . replace_extension($target, "jpg"), 80)){
          $message =  "Gah! Something broke. Please try again later.";
        }
      }
      catch(Exception $e) {
        $message = "Gah! Something broke. Please try again later.";
      }

      /**
      * Upload data to sqlite
      */
      try
        {
          //open the database
          $db = new PDO('sqlite:house_photos.db');

          //insert some data...
          $stm = $db->prepare("INSERT INTO house_photos (pid, name, email, filename, upload_date) " .
            " VALUES (:pid, :name, :email, :filename, strftime('%s','now') );");
          $stm->bindParam(':pid', $_POST["pid"], PDO::PARAM_STR, 8);
          $stm->bindParam(':name', $_POST["attribution"], PDO::PARAM_STR, 100);
          $stm->bindParam(':email', $_POST["email"], PDO::PARAM_STR, 60);
          $stm->bindParam(':filename', replace_extension($target, "jpg"), PDO::PARAM_STR, 60);

          $count = $stm->execute();

          // close the database connection
          $db = NULL;
        }
        catch(PDOException $e)
        {
          //print 'Exception : '.$e->getMessage();
          $message = "Gah! Something broke. Please try again later.";
        }

    }
  }
?>

  <div role="main">
    <!-- show form on initial load or if there's a problem with a previous post -->
    <?php if (strlen($message) > 0 || !isset($_POST['xsubmit'])) { ?>
      <form action="index.php" method="post" enctype="multipart/form-data">
        <input type="hidden" name="xsubmit" value="y"/>
        <input type="hidden" name="pid" value="<? echo $_GET["pid"] ?>"/>
        <input type="file" name="file" id="file" required /> <br />
        <div class="details">File must be GIF, PNG, or JPEG/JPG and 2MB in size or less.</div>
        <input type="email" name="email" id="email" placeholder="you@place.org" required /><label for="location"> Email Address</label><br />
        <input type="text" name="attribution" id="attribution" placeholder="Name or Company" required /><label for="location" title="name, company, etc."> Attribution</label><br />
        <p class="details">
          <strong>The Fine Print</strong><br />
          By submitting this photo, you agree that you own the copyright on the photo—you photographed it yourself,
          it is a work for hire, or the copyright was transferred to you via written statement
          or operation of law (e.g., inheritance). You also agreet to allow the photo to be
          freely copied and modified by anyone, including third parties not affiliated with
          Mecklenburg County Government, for any purpose.
        </p>
        <input type="checkbox" name="license" id="license" value="license" required /><label for="license"><strong>I agree</strong> with these terms and conditions.</label>
        <br />
        <input type="submit" name="submit" value="Upload" />
        <?php if (strlen($message) > 0) { ?>
          <p class="warning"><? echo $message ?></p>
        <?php } ?>
      </form>

    <!-- show thank you message if everything loaded successfully -->
    <?php } else { ?>
      <h2>You're Super!</h2>
      <p>You just helped add data all of our citizens can use and enjoy. Thanks!</p>
      <p>Your photo should be available within the next few days. We'll let you know when it's ready.</p>
    <?php } ?>
  </div>

I’m don’t know if I’m off my game today or what, but a little upload process/database write shouldn’t have hurt this bad. I exclaimed balls! so loud at one point my 5 year old showed up at my office door with his soccer ball. Here’s what’s going on, starting from the bottom and working our way back up.

If you’ve seen PHP, nothing in the HTML part will be unfamiliar. Basically you get a form when you get there, the form again with some red text if you botched something, and a thank you message if everything went well. The image disclaimer is more or less from Wikipedia.

Back to the top and the real meat of things. The functions at the top are all about data validation. Are all of the fields there, is the email address a real looking address, is the file <2MB and gif/png/jpg, etc. I'm doing some HTML5 form validation as well, but you should always check data inputs at the client and the server. The only thing interesting here is the sanitize_filename function, which I swiped from Drupal. This is so file names with odd characters and spaces don't get written that way to disk.

If the form has been posted and the data all checks out, we're going to process the image and drop it on the server.

$newwidth = 600;

// Set save directory and file name
$directory = "photos/";
$target = time().’-’.sanitize_filename($_FILES['file']['name']);

// Write image to server
$ext = end(explode(".",strtolower(trim($_FILES["file"]["name"]))));

// Check is valid extension.
if($ext == "jpg" || $ext == "jpeg"){
   $image = imagecreatefromjpeg($_FILES["file"]["tmp_name"]);
}
else if($ext == "gif"){
   $image = imagecreatefromgif($_FILES["file"]["tmp_name"]);
}
else if($ext == "png"){
   $image = imagecreatefrompng($_FILES["file"]["tmp_name"]);
}

list($width,$height)=getimagesize($_FILES['file']['tmp_name']);
$newheight=($height/$width)*$newwidth;
$tmp=imagecreatetruecolor($newwidth,$newheight);

imagecopyresampled($tmp,$image,0,0,0,0,$newwidth,$newheight,$width,$height);

if(!imagejpeg($tmp,$directory . replace_extension($target, "jpg"), 80)){
   $message =  "Gah! Something broke. Please try again later.";
}

I'm making some executive decisions here. I'm going to store the images as JPG's with 80% quality and I'm going to resize incoming images (proportionally) to a width of 600px. I want some consistency for apps, and I also don't want to store some yoyo's 8MP house photos. We just got a quote for 1TB of SAN space for $30k. The whole "storage is cheap" thing hasn't hit Mecklenburg County yet. So what I'm doing is getting the size of the original image, making a new image with gd, and resampling the uploaded image to the new size. Then I write it out with a time stamp so I don't get file collisions.

Next I need a database entry to store some information and a pointer to the file. I decided to use SQlite, as I think this crowd isn't going to be too big. I've been moving toward escalating data to something like Postgres when it needs to rather than starting things there.

//open the database
$db = new PDO('sqlite:house_photos.db');

//insert some data...
$stm = $db->prepare("INSERT INTO house_photos (pid, name, email, filename, upload_date) " .
      " VALUES (:pid, :name, :email, :filename, strftime('%s','now') );");
$stm->bindParam(':pid', $_POST["pid"], PDO::PARAM_STR, 8);
$stm->bindParam(':name', $_POST["attribution"], PDO::PARAM_STR, 100);
$stm->bindParam(':email', $_POST["email"], PDO::PARAM_STR, 60);
$stm->bindParam(':filename', replace_extension($target, "jpg"), PDO::PARAM_STR, 60);

$count = $stm->execute();

// close the database connection
$db = NULL;

The SQLite table looks like this:

CREATE TABLE house_photos (
    "pid" TEXT NOT NULL,
    "name" TEXT NOT NULL,
    "email" TEXT NOT NULL,
    "filename" TEXT NOT NULL,
    "approved" INTEGER NOT NULL DEFAULT (0),
    "upload_date" INTEGER
)

This is pretty straight forward with PDO, with one exception. After much swearing, it turns out you can't write to a SQLite database unless the apache process has write permissions to both the SQLite file and the folder the SQLite file is sitting in. This isn't as bad as it sounds, as you're making a filesystem connection - you can (and should) move your SQLite database out of any HTTP shares entirely. But beyond that, it is straight-forward PDO with bound parameters so the script kiddies don't eat my lunch. With PDO I could move the whole thing to PostgreSQL just by changing the connection string (I think).

Man, that sucked. I allocated an hour for that, and it ate part of my morning and nearly all of my afternoon. But now I have a simple file uploader ready to go. Apps can pull it up in a jQuery UI dialog or whatever, passing it the subject PID when they call it. Next up: a little python script to periodically check for photos not yet approved in the table (I'll have to reroute the inevitable porn images to a different folder delete the inevitable porn images), a way to complain about an image, and a web API so people can get to it. But that can wait until next week. I'm taking my ball and going home.

Those triangles on the side are not images. They are DIV’s with a little CSS. (Edit: not anymore. Already switched them to unicode triangles. The rest of this tutorial is still good though.) Let’s take a look at making 4 basic shapes with CSS – rectangles, triangles, circles, and ovals.

Here’s our HTML:

<div id="rectangle"></div>
<div id="circle"></div>
<div id="oval"></div>
<div id="triangle"></div>​

First I’ll insult your intelligence with a rectangle.

#rectangle {
 width: 100px;
 height: 100px;
 background: #ccc;
}

Sorry. Had to do it.

Next, check out a triangle. Thing of it like a gigantic 3d border corner. You can move the left/right/top/bottom around to change the orientation of the triangle.

#triangle {
    width: 0;
    height: 0;
    border-left: 75px solid transparent;
    border-right: 75px solid transparent;
    border-bottom: 75px solid green;
}

Now for the circle stuff. Note we’re using border-radius to create circular shapes. If you give a toss about people on oldIE, you will need to have a fall-back image unless you are just apple-polishing. Equal width and height creates a circle; uneven width and height creates an oval.

#circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: yellow;
}
#oval {
    width: 150px;
    height: 100px;
    border-radius: 50%;
    background: blue;
}

You can jsFiddle with these shapes to try different settings.

This is a quick and handy technique to make some basic shapes without busting out Inkscape, and in lieu of an image it decreases page load time and bandwidth. In a few years time we will all scrap stuff like this for SVG, but for now it is a handy technique to put in your trick bag.

We’ll get everybody together in a room. I mean everybody! The brains will be so close together they will practically be touching. Ideas will fly and ricochet off those domes like ping pong balls on amphedamines! It’ll be like The Perfect Storm for brains. A…brainstorm!
– Imbecile

No. No. No no no no no. No.

<rant>

The worst thing human beings can collectively engage in is a meeting to wordsmith a document. If you see people doing that, bar the conference room door and set the building on fire. But go just a little ways down the road from that and you’ll run into the second worse thing human beings can collectively engage in – the brainstorming session.

The most pernicious aspect of the brainstorming session is that the person calling a brainstorming session thinks it’s a great idea. It’s a terrible idea. It’s a worse idea than re-releasing Titanic in 3D.

The brainstorming concept is generally attributed to an advertising executive from the 1950′s named Alex Osborn. Through the kind of rigorous scientific experimentation ad execs are famous for, Osborn concluded that people working in groups following a few brainstorming guidelines come up with twice as many ideas as people working alone. Brainstorming soon spread across organizations around the globe. Ad execs must have been held in higher esteem in the 1950′s.

Since then a great many studies on brainstorming have been conducted. Check out brainstorming on Wikipedia or Richard Wiseman’s 59 Seconds for a host of citations, but to summarize study after study after study:

• People in brainstorming sessions come up with fewer ideas than people do on their own.
• People in brainstorming sessions come up with lower quality ideas than people do on their own.

There are a number of different reasons why this happens. People think less clearly in groups. There’s social loafing, there’s  diffused responsibility. Group think tends to lead to less creative ideas (and worse decisions). But the point is this: brainstorming sucks really, really hard.

Want someone to come up with more and better ideas? Buy her or him a plant and stick it on their desk. Seriously. That’s been scientifically shown to work better, and a good smelling plant can clear out a lot of nerdfunk.

</rant>

Wind Map

You will need a non-crap web browser. If you don’t know what I’m referring to there, odds are you will need to download something.