monkinetic the blog

Sometimes in software design it’s great to develop a visual of the system in question to help in the thinking process.

Josh Barratt is a software architect at Twilio, and blogs about system design at Serialized.Net. His recent post Effective Technical Diagrams has some great guidelines for improving the technical diagrams that we use to communicate.

Images convey ideas and structure far more effectively than text. Especially for software systems, they can even help with reasoning about things like capacity, connectivity, reliability, security and performance.

Like any craft, methods of designing visuals that communicate effectively and efficiently can be studied and improved. We have probably all seen diagrams which led to an immediate “aha!” – and others, that after minutes of squinting, led to only more confusion.

I too, adore OmniGraffle, and have made my share of good and bad technical diagrams in my pursuit of a better design. Here’s one I made in the last year, the usefulness of which could be argued both ways:

I recently found the following in a bit of #python sample code:

random_data = random.sample(string.hexdigits, 8)

Wait, hexdigits? I’d use string.ascii_letters and string.ascii_lowercase before, but this was the first time I’d seen hexdigits, which is exactly what you’d think:

The string ‘0123456789abcdefABCDEF’.

That’s useful.

Dammit

For a bit of variety, I decided to figure out how to generate a new front page header background and link colors whenever I rebuilt the blog (new posts, etc). This is still a static site, so no wizzy javascript stuff, I just wanted to do it in SASS.

This is what I came up with.

    $colors-list: (
      // background color, link color
      #DAE076 #AD5C55,
      #A9C9C5 #4A676D,
      #AD5C55 #5E7D68,
      #374768 #718A8A,
    );
    $color-index: random(length($colors-list));
    
    // Header description box
    $colors: nth($colors-list, $color-index);
    $header-desc-background-color: nth($colors, 1);
    // Link color
    $link-color: nth($colors, 2);

I may rework this as a map (dictionary) later on so I can add other theme-y things, but it was kinda fun to work out for now.