On one hand I admire Blizzards’ desire to release a product that is polished and ready for release into the big bad wild, but on the other hand I just wish they’d get on with it.

In life, as in software, there are a lot of good reasons to strive for perfection.  Quality, reliability, longevity, etc.  But most of the time singular focus on perfection is a dangerous illusion.  Obsessively striving to perfect something often comes at the expense of all other factors of success.  These are costly sacrifices to time, money, and in the case of many Diablo fans, sanity.

Here are a few of the more common casualties of chasing perfection:

• Diminishing Returns – The effort required to polish something beyond discernible improvement is rarely worth it.  Will your users even notice, or more importantly appreciate these efforts?
• The 80/20 Rule – The final 20% of any project usually takes 80% of the effort.  Moreover sometimes the last 20% can be so unreasonably difficult that all previous effort needs to be scrapped.  This is how good ideas get scrapped.
• Lost Time – Excess time spent honing tiny details could be spent working on future phases, while users can invest themselves much earlier.
• Lost Feedback – Delaying releases also delays some of the most vitally important insights and feedback from users.  Critical bugs are one thing, but maybe that awesome feature you thought people would love sucks?  How will you know?
• Flawed Design – Software designed with perfection in mind is idealistic in nature and often plagued by inflexible architecture and poor integration.  In these cases, design trumps compatibility and you end up with a system that doesn’t play nice with anything else.
• Cost – It’s just plain more expensive to work on something for 10 years than it is for 5 years.
• Opportunity Cost – What new features and suggestions could have been implemented in the time it took to polish every dark recess of the code base?  How much market share has been lost while your competitors capitalized on your inactivity?  How much money has been forfeited from a lack of new features or major releases?
• Technology Decay – Technology is inexorable and cruel, leaving behind antiquated versions of legacy software in favor of anything faster, cheaper, better or newer.  Suddenly your state of the art system is a stinky pile of legacy garbage that nobody wants to touch.
• Paradoxical Refining – Obsessive second-guessing can lead to valid or otherwise satisfactory features being changed repeatedly, sometimes for the worse. Ever agonize over something (like a blog entry) until you had thoroughly mangled an otherwise acceptable success?

Perfection in software is an illusion.  As an example, many modern quality assurance practices like zero defect testing, though well-intentioned, are often distorted by the pursuit of perfection.  The intent in seeking software perfection is admirable, but the goal is impractical or unattainable.  Slavishly chasing perfection can seriously jeopardize the overall success of a project.  Desire for perfection should be tempered with an understanding of what is possible, acceptable and reasonable for success.

So, at what point does one decide to stop chasing the perfection fairy?  I usually ask myself if I have met or exceeded the customers’ expectations.  Success is defined by the customer.  Is the customer happy?  If so, I move on.

“In This Issue”

• CEO Corner
• Client Spotlight
• 2011 Year in Review
• Tips & Tricks
• Client Testimonials
• We’ve Updated Our Blog
• Resources: Free White Paper
• We’re Hiring!

Welcome to the first edition of the Fairway Informant, our new Quarterly newsletter. Although we’re a bit tardy, all of us at Fairway Technologies send warm New Year’s greetings to our clients, partners, and friends. Thanks to all of you for the opportunity to help you succeed in 2011. We take your trust in us very seriously – and we are always looking for ways to improve the services we provide. We welcome any feedback on your experience and suggestions for how we can make it better.

CEO Corner

Has it really been 10 years? It certainly doesn’t seem like it, but judging by the desolate patch of forehead I used to call a hairline it may as well have been 50 years.

Things may be different today, but nothing’s really changed and I’m proud of that. When I started Fairway 10 years ago I set out to work with only the people I wanted to work with. The best and brightest from my own small but deeply talented nexus of engineering friends and acquaintances. Our goal was simple; to provide the highest quality software development services in town. I believe we’ve achieved that, and had a lot of fun and made (and brewed) a lot of memories along the way.

Fairway’s humble roots sprouted from the spare bedroom of my rented house where dogs and lawn mowers could not deter the first crack team of engineers who called Fairway home. At the calm and unbiased suggestion of my Chief Spousal Officer, we soon moved our nascent operation to a 600 square foot office space located below a public bathroom that leaked into the walls and attracted individuals generally not in need of software development services. It was in this office that we established some of our most cherished rituals, such as foosball penalty ice cream cones, D&D night, and our now legendary brewfests.

Onward and literally upward, we eventually moved to a larger office space above a liquor store and adjacent to a pot shop. In retrospect this was probably not the smartest decision, and I soon feared a cataclysmic destruction of productivity that fortunately never materialized. At least we had an ocean view; our own little sliver of La Jolla horizon huddled behind telephone wires and a conspicuously placed China Chef sign.

Which brings us to our present day Fairway, glittery new offices in a very respectable (at least until we arrived) office building in the idyllic heart of La Jolla village. Interestingly (or perhaps not so), the financial district doesn’t seem to like or appreciate technologists. Even my sign on the front door, “Solicitors will be persecuted,” is met with chuffs of disgruntled indignation. I enjoy the contrast of being the Clampetts of the neighborhood though. All we need is a couch on the front porch and an El Camino on blocks to top it off.

Over the years clients have come and gone, and employees too. I count myself lucky to have worked with friends as both clients and employees, and am luckier to have remained so when some have chosen to move on. We have spent 10 years assembling a team of amazingly talented technology gurus who also happen to be amazing people. This coalescence of talent is the huge benefit of working with people you know well and trust, and one of the important elements of Fairway’s secret sauce.

In reflecting on my time at Fairway and the unfathomably fortunate path we’ve charted over the years, it’s hard to imagine doing any of it without the blood, sweat and tears of some of my closest friends and business associates. People are what make Fairway great, and we’re lucky to work with some of the smartest, coolest (in the nerdy sense), hardest-working people in southern California.

So after 10 years, I guess all I have to say is thanks! Thanks to our passionate crew of technocrats who’ve made Fairway one of San Diego’s best (and coolest) places to work, to our customers who have put their faith in us to deliver bullet proof software time after time, and to everyone else who has supported us in our endeavor to provide the highest quality software development services in town.

Thank you, and here’s to another 10 years!

Client Spotlight

Client: Independa, Inc.
Website: www.independa.com
Industry: Technology
Fairway Service provided: Website redesign

Independa, Inc. provides an integrated Telecare platform to help professional and family caregivers enable their care recipients to continue living at the residence of their choice longer more safely and more comfortably. Independa trusted Fairway to increase the functionality and appeal of their website in preparation for a major product launch, which was scheduled to take place in less than a week. Despite the extremely aggressive deadline, Fairway’s team of technical and creative experts quickly produced a newly designed website that delivered custom enhancements to support key business objectives with measurable success. Read the full case study

2011 Year in Review

Time flies when you’re having fun. Time flies even faster when you work in a fun environment with talented people and uber-cool technology. Here at Fairway, there’s no exception – 2011 flew by, and we’d like to share some of our key highlights during the past year.

Best of the Best
Fairway Technologies was proud to be named one of San Diego’s 2011 Top Ten Best Places to Work by the San Diego Business Journal, in the small business category (15-49 employees). This honor follows the company’s previous recognition as a finalist in the 2010 Best Places to Work contest as well.

The prestigious award recognizes organizations for their exemplary workplace environment, employer benefits and most importantly, employee satisfaction. Stand-out organizations such as Fairway were selected through the analysis of detailed data gathered from an employer questionnaire, and employee satisfaction surveys.

Fairway Technologies promotes a fun and relaxed environment and encourages employees to maintain a healthy work-life balance. Fairway’s generous benefits (insert hyperlink) include five weeks of Personal Time Off. Job training and professional growth are also part of the company values.

“We couldn’t be happier to be recognized as one of San Diego’s Top Ten places to work. Our employees are the heart and soul of our business, and we are especially honored that this recognition is based on their feedback. We endeavor to provide our folks with challenging work and a conspicuously awesome environment, while giving them the freedom to balance their professional and personal lives,” commented Brett Humphrey, CEO of Fairway Technologies. Humphrey continued, “Ultimately, people are what make a workplace great, and we are committed to attracting and retaining San Diego’s top software engineering and business talent.”

Website Enhancement
In October, we gave ourselves a make-over, launching a brand new website (insert hyperlink)! Designed and built with the latest technologies to improve visitor experience, the new website takes full advantage of HTML5 and CSS3 to optimize the web experience across multiple platforms, enhance web forms such as search boxes and text inputs, improve integration with social networking sites, and provide a richer experience. Significant improvements were also made to the navigation, content, flow and overall look and feel of the website.

Expanding Client Base
Despite a tough economic climate, uncertain outlook, and crowded competitive landscape, Fairway successfully added 13 new and uniquely diversified companies to its existing roster, which already boasts impressive partners such as eBay, Johnson & Johnson, and Bridgepoint Education. The company attributes this achievement to a dramatically high referral and retention rate, garnered from the company’s repeated demonstration of technical expertise, quality service, and an unwavering mission to always exceed client expectations.

“2011 was a tough year all around, but the company persevered and remained intently focused on what we do best,” said Brett Humphrey, CEO at Fairway Technologies. “As result, we ended the year with the highest year-over-year revenues in our history, and are prepared to continue this momentum with a diversified client base and refocused efforts within internal business development and marketing. As IT investments continue to increase, we look forward to accelerating client growth and developing strategic partnerships with complementary service and product companies.”

Tips & Tricks

Have you ever wanted to know what the printed version of a file would look like, but didn’t want to actually print it out, and “print preview” was just not cutting it? Find out how…

If you install the FREE version of PrimoPDF, it will add a new “printer” to your print dialog:

If you select that option, then click “OK”, it will create a PDF of the document or web page you’re trying to print, and the PDF will look exactly like the printed version.

It might not seem amazing at first, but there are a lot of web pages that look very different when printed compared to how they look on the screen. This simple trick will let you see what that printed version will look like without wasting any paper.

Client Testimonials

We measure our success through client satisfaction. Find out what makes Fairway the preferred technology partner for today’s leading companies

We've Updated Our Blog!

Stop by our blog every Friday for a weekly dose of technology insight, analysis and humor.

View our latest post

FREE White Paper

“Best Practices for Selecting Onshore, Nearshore, or Offshore Technology Services”

Although outsourcing IT and business functions has become an increasingly common global practice among enterprises looking for competitive advantage, the question still remains, “which is better: onshore, nearshore, or offshore?

Fairway Technologies has developed a FREE White Paper to help companies determine which outsourcing method is best suited to their needs, titled “Location, Location, Location: Best Practices for Selecting Onshore, Nearshore or Offshore Technology Services”

Developed via extensive study, research, surveys and interviews with IT professionals that are involved with sourcing and vendor management decisions, this White Paper features:
– detailed assessment of the benefits and risks related to outsourcing
– common concerns and hidden costs of outsourcing
– the ten best practices companies should be aware of when comparing onshore, nearshore, and offshore models

We're Hiring!

Find out what makes Fairway one of the most popular technology employers in San Diego, and how you can join our uber-talented team of experts!

The teams at Wikipedia and Google decided that they’d had enough of the U.S. Congress’s meddling with the web, and so they decided to do something about it.  Wikipedia intentionally blacked-out their U.S. site for a day, and Google covered their iconic logo with a black “censor bar.”  In concert, hundreds of other websites hosted online petitions telling Congress to back off.  I don’t know about you, but it seemed that every other Facebook/Twitter post I saw was about SOPA/PIPA for a few days – and all of them had links to online petitions protesting the proposed laws.

The effect of all of this online rabble-rousing was immediate.  Those responsible for writing and sponsoring these proposed laws changed course within 48 hours, and as of right now, Congress seems to be moth–balling SOPA and PIPA.  Again, check with Wikipedia or Google for the latest…

So, wow.  Revenge of the Nerds, indeed.  A few well-known web sites and some web-forms now have the power to derail months of policy planning and millions of dollars of D.C. lobbying.  Even though I knew all about the protests, I went to Wikipedia that day to look up something (force of habit) – and I saw the page go black.  It was a great reminder, and I clicked-off to sign one of the petitions that I’d seen during the week.

The whole thing left me thinking, “Why didn’t Congress just ask Google, or Wikipedia, or Reddit (or any of the major online brands who publicly condemned SOPA and PIPA) what their thoughts were before drafting the initial laws?”

I don’t mean to be crass, but there was a Senator (Stevens) who thought the Internet was a “series of tubes” just a few years back  (http://en.wikipedia.org/wiki/Series_of_tubes).  Clearly, some members of Congress have issues grasping the complexities of the environment, and their role within it.  With that, perhaps it would have been wise to bring in the people who know what the heck’s going on before you try to change and govern it.

The more I thought about it, I realized how much this whole SOPA/PIPA mess mirrors the way many businesses work with their IT teams.  Just replace “Government” with “Management” and “Google/Wikipedia” with “Steve in IT”, and we see it all the time.

Scenario:  A Manager or Exec who really doesn’t understand how all the systems work behind the scenes conjures up a plan that will be “great for everyone.”  After announcing their plans, they bring in the IT team to implement it, and “Steve” rolls his eyes and thinks, “This is a horrible plan that will create more problems than it solves.”

For those of us who do IT for a living, we can only wonder how many “Steve’s” out there are willing to intentionally take down the company website for a day to prove their point?  Exactly.

I’m viewing this whole SOPA/PIPA debacle as a reminder that business and IT leaders should engage their IT team members as early as they can in the planning process.  Of course there are times when corporate strategy dictates a big shift in direction, and changes can be unpopular – but I’ve seen (and been guilty of launching – oops!) a few projects that would have been well-served by bringing the right people into the conversation much earlier.

Relying on “Steve in IT” to stop the company from hurting itself unwittingly is pretty risky.

Things may be different today, but nothing’s really changed and I’m proud of that.  When I started Fairway 10 years ago I set out to work with only the people I wanted to work with.  The best and brightest from my own small but deeply talented nexus of engineering friends and acquaintances.  Our goal was simple; to provide the highest quality software development services in town.  I believe we’ve achieved that, and had a lot of fun and made (and brewed) a lot of memories along the way.

Fairway’s humble roots sprouted from my spare bedroom in 2002, where dogs and leaf blowers could not deter the first crack team of engineers who called Fairway home.  At the patient but incontrovertible insistence of my Chief Spousal Officer we soon moved our nascent operation to a 600 square-foot office space located below a public bathroom that leaked into the walls and attracted individuals generally not in need of software development services.  It was in this office that we established some of our most cherished rituals, such as foosball penalty ice cream cones, D&D night, and our now legendary brewfests.

In 2006 we moved onward and literally upward, to a larger office space above a liquor store and adjacent to a pot shop.  In retrospect this was probably not the smartest decision, and I soon feared a cataclysmic erosion of productivity that fortunately never materialized.  At least we had an ocean view; our own little sliver of La Jolla horizon huddled behind telephone wires and a conspicuously placed China Chef sign.

Which brings us to our present day Fairway; glittery new offices in a very respectable (at least until we arrived) office building in the idyllic heart of La Jolla village.  Interestingly (or perhaps not so), the financial district doesn’t seem to like or appreciate technologists.  Even my sign on the front door, “solicitors will be persecuted,” is met with chuffs of disgruntled indignation.  I enjoy the contrast of being the Clampetts of the neighborhood though.  All we need is a couch on the front porch and an El Camino on blocks to really top it off.

Over the years clients, employees, successes and failures have come and gone.  I count myself lucky to have worked with friends as both clients and employees, and am luckier to have remained so when some have chosen to move on.  We’ve spent 10 years assembling a team of amazingly talented technology gurus who also happen to be amazing people.  This coalescence of talent is the huge benefit of working with people you know well and trust, and one of the important elements of Fairway’s secret sauce.

In reflecting on my time at Fairway and the unfathomably fortunate path we’ve charted over the years, it’s hard to imagine doing any of it without the blood, sweat and tears of some of my closest friends and business associates.   People are what make Fairway great, and we’re lucky to work with some of the smartest, coolest (in the nerdy sense), hardest-working people in southern California.

So after 10 years, I guess all I have to say is thanks!  Thanks to our passionate crew of technocrats who’ve made Fairway one of San Diego’s best (and coolest) places to work, to our customers who have put their faith in us to deliver bullet proof software time after time, and to everyone else who has supported us in our endeavor to provide the highest quality software development services in town.

Thank you, and here’s to another 10 years!

Have you ever been to those sites that show you a nice helpful popup to let you know that your session will expire in a few minutes?  You know, the ones that show you a countdown timer, and let you Continue Your Session, or Log Out?  And if you’ve been gone so long that your session really did expire because you were feeding your nerd-face, it automatically logs you out and shows you a nice message letting you know it was only to protect you?  That it was For Your Own Good?

Yeah, me too!   Then I said, “I want one!” and set out to build my own.

Gravy

Here’s what it looks like when it first pops up:

When you click “Continue”, the dialog box closes and re-establishes the session.  If you then stay idle for a while, the dialog box will reopen and the countdown starts again.

When you click “Log Out”, the dialog box closes, logs you out, and sends you to the home page.  It includes a return URL, so if you log in again, then Hey!, you’re right back where you were.

Oh, and check this out:  it dynamically updates the HTML title, which (at least on Windows) will show you the countdown in your task bar.  That’s just gravy!

But that’s just how I do it.  Everything in the code is easily tweakable.  And there’s just not that much code.

Bottle Opener

Bloggers have to make assumptions.  And sometimes the code we write has dependencies.  These are mine:

• I assume you are clever and funky
• I assume you know HTML, JavaScript, and a little jQuery
• I assume you own a bottle opener
• I assume you value quality
• My code depends on jQuery and jQuery UI.  You don’t have to have them to make this approach work, but it simplifies some things.
• My server-side code is written in ASP.NET MVC 3.  It is part of a larger framework that includes ASP.NET Membership, T4MVC, and StructureMap for dependency injection.  Again, you don’t have to have these, but you will need some sort of back-end that supports sessions.  Otherwise, why are you here?  Were you just searching for “gravy” and found this?
• I assume you like pumpkin pie

But really, I wish I didn’t have to assume and depend so much.  But where I do, I’ll try to at least link to info that will be helpful.

Gnarly Diamond

The magic in this code comes from the power of JavaScript, which is a dark and dangerous art in the wrong hands, and some kind of gnarly diamond if you’re Douglas Crockford.  His book is awesome, very dense, and makes a whole lot of assumptions about its audience.

My code follows the Module Pattern (invented by Mr. Crockford), which minimizes global variables, and allows you to decide what in your code is public and private.  As for the countdown timer, that’s just those old stand-bys setTimeout(functionName, milliseconds), which waits a specified number of milliseconds before calling your function, and setInterval(functionName, milliseconds), which calls your function relentlessly every [milliseconds] milliseconds.

Viola!

At this point, you are probably itchy to see some code.  So then, viola!  Let’s build up the JavaScript SessionManager module step by step:

Structure

First, here’s the basic JavaScript structure we’ll be using.  Lots of pseudocode here, but it should give the basic idea.  If you read the comments, you might learn a thing or two.

var SessionManager = function() {
    // Private Variables will go here...

    // Private Functions

    // endSession: Called when the session expires
    var endSession = function() {
        // Close the dialog
        // Redirect to the "expire" URL
    };

    // displayCountdown: Wrapper for updating the countdown display every second
    var displayCountdown = function() {

        // Inner countdown function, which we can call right away, then
        // call every second (setInterval waits before its first function call)
        var countdown = function() {
            // Get countdown minutes and seconds
            // Update the HTML title
            // Update the countdown display
            // If the countdown timer reaches zero,
            //   Update the HTML title to "Session Expired"
            //   Call the endSession() function

            // Decrement the counter
        };

        // Call the countdown() function immediately
        countdown();

        // Call the countdown() function every second thereafter
        window.setInterval(countdown, 1000);
    };

    // promptToExtendSession: Display the jQuery dialog
    // and kick off the countdown timer
    var promptToExtendSession = function() {
        // Build up a jQuery dialog
        // with buttons to "Continue" (extend session)
        // and "Log Out" (end session)

        displayCountdown();
    };

    // startSessionManager: Calls promptToExtendSession() after 5 minutes
    var startSessionManager = function() {
        window.setTimeout(promptToExtendSession, 300000);
    };

    // refreshSession: Refresh the session
    var refreshSession = function() {
        // Refresh the session using the "extend" session url

        // Restart the countdown to the popup
        startSessionManager();
    };

    // Public Functions

    // These will be the only public methods available to outside callers
    return {
        // Start the session (call using SessionManager.start())
        start: function() {
            startSessionManager();
        },

        // Extend the session (call using SessionManager.extend())
        extend: function() {
            refreshSession();
        }
    };
}(); // See those parentheses?  They will execute this function immediately and
     // return the anonymous object with two public functions (start and extend)

// And now, we can call our public method to plant the popup seed!
SessionManager.start();

Fill ‘Er Up

Okay, so that’s the basic layout. Let’s fill in the blanks.  Here we’ll add our private variables, our jQuery Dialog with real live countdown display, and implement the rest of our functions.

I’ll highlight some of the neato stuff in the comments.

var SessionManager = function() {
    // Private Variables
    var sessionTimeoutSeconds = 20 * 60,                                 // Session timeout is 20 minutes
        promptSeconds = 5 * 60,                                          // Prompt shows for 5 minutes
        secondsBeforePrompt = sessionTimeoutSeconds - countdownSeconds,  // 15 minutes until prompt pops up
        $dlg,                                                            // jQuery Dialog
        displayCountdownIntervalId,                                      // setInterval id, for clean up
        promptToExtendSessionTimeoutId,                                  // setTimeout id, for clean up
        originalTitle = document.title,                                  // grab the HTML <title> (for later)
        extendSessionUrl = '/Session/Extend',                            // URL to call when extending session
        expireSessionUrl = '/Session/Expire';                            // URL to call when expiring session

    // Private Functions
    var endSession = function() {
        $dlg.dialog('close');                                            // Close the jQuery Dialog
        location.href = expireSessionUrl;                                // Redirect to the expiration URL
    };

    var displayCountdown = function() {
        var countdown = function() {
            var cd = new Date(count * 1000),                             // Returns milliseconds since 01/01/70
                minutes = cd.getUTCMinutes(),                            // Grab the minutes
                seconds = cd.getUTCSeconds();                            // Grab the seconds

            document.title = 'Expire in ' + minutes + ':' + seconds;     // Update the HTML title
            $('#sm-countdown').html(minutes + ':' + seconds);            // Update the countdown display
            if (count === 0) {                                           // If we reached zero,
                document.title = 'Session Expired';                      // update the HTML title
                endSession();                                            // and end the session
            }
            count--;
        };
        countdown();                                                      // Call the function once
        displayCountdownIntervalId = window.setInterval(countdown, 1000); // Call the function every second
    };

    var promptToExtendSession = function() {
        $dlg = $('#sm-countdown-dialog').dialog({                         // See the HTML below
            title: 'Session Timeout Warning',
            buttons: {
                'Continue': function() {
                    $(this).dialog('close');                              // Close the dialog
                    refreshSession();                                     // Refresh the session
                    document.title = originalTitle;                       // Change the title back
                },
                'Log Out': function() {
                    endSession(false);                                    // End the session
                }
            }
        });
        count = promptSeconds;                                            // Set our counter
        displayCountdown();                                               // Show that dialog!
    };

    var refreshSession = function() {
        window.clearInterval(displayCountdownIntervalId);                 // Stop calling countdown so
                                                                          // we can start a new timer
        var img = new Image(1, 1);                                        // Create a tiny image
        img.src = extendSessionUrl;                                       // and set its source to the
                                                                          // extend session url (like
                                                                          // poor man's Ajax!)
        window.clearTimeout(promptToExtendSessionTimeoutId);              // Clear the timeout so we can...
        startSessionManager();                                            // ... start it all over!
    };

    // Just a private implementation to actually start our countdown before popup
    var startSessionManager = function() {
        promptToExtendSessionTimeoutId = window.setTimeout(promptToExtendSession, secondsBeforePrompt * 1000);
    };

    // Public Functions
    return {
        start: function() {
            startSessionManager();
        },

        extend: function() {
            refreshSession();
        }
    };
}();

Two Monologues Do Not Make a Dialog

Here’s the HTML for the dialog:

<div id="sm-countdown-dialog" style="display:none">
    <p>Your session will expire in:</p>
    <div id="sm-countdown"><!-- Placeholder for dynamic countdown --></div>
    <p>Click "Continue" to keep working, or "Log Out" if you are finished.</p>
</div>

Impatience

I also added support for testing this when you don’t want to wait 15 minutes for your popup to show up, and you don’t want to keep changing your session timeout on the back end and restarting your server…

It uses a couple query string variables to set the total session timeout (smt) and the number of seconds before the countdown dialog appears (smc). You can use it like this on any page where the JavaScript exists:

http://flumko.me/pork/edit?smt=30&smc=20

What that does is show the dialog after 20 seconds, and it will start a 10 second countdown before it expires the session.

Helpy Helperton

Things like getting a query string and padding a string are really utilities, and should be relegated to their own modules.  To support this, I’m adding a new module called HtmlHelpers, so we can grab the query string value easily, then I just use that if provided, otherwise I fall back to the default (that’s the coolness of the || operator):

// HtmlHelpers Module
// Call by using HtmlHelpers.getQueryStringValue("myname");
var HtmlHelpers = function() {
    return {
        // Based on http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript
        getQueryStringValue: function(name) {
            var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
            return match && decodeURIComponent(match[1].replace( /\+/g , ' '));
        }
    };
}();

var SessionManager = function() {
    // Private Variables
    var countdownSeconds = HtmlHelpers.getQueryStringValue('smc') || 300,
        sessionTimeoutSeconds = HtmlHelpers.getQueryStringValue('smt') || 1200;

    // Lots of code deleted here...
}();

I do something similar with another module called StringHelpers, which adds a padLeft function to pretty up our countdown display:

// StringHelpers Module
// Call by using StringHelpers.padLeft("1", "000");
var StringHelpers = function() {
    return {
        // Pad string using padMask.  string '1' with padMask '000' will produce '001'.
        padLeft: function(string, padMask) {
            string = '' + string; // If it ain't a string, make it one (ye olde type coercion!)
            return (padMask.substr(0, (padMask.length - string.length)) + string);
        }
    };
}();

The Final Countdown

So, here’s our final JavaScript code, incorporating everything we’ve seen so far, and a little bit more.  Super shiny!

<!-- Countdown Dialog HTML -->
<div id="sm-countdown-dialog" style="display:none">
    <p>Your session will expire in:</p>
    <div id="sm-countdown"><!-- Placeholder for dynamic countdown --></div>
    <p>Click "Continue" to keep working, or "Log Out" if you are finished.</p>
</div>

<script type="text/javascript">
$(function() { // Wrap it all in jQuery documentReady because we use jQuery UI Dialog
    // HtmlHelpers Module
    // Call by using HtmlHelpers.getQueryStringValue("myname");
    var HtmlHelpers = function() {
        return {
            // Based on http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript
            getQueryStringValue: function(name) {
                var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
                return match && decodeURIComponent(match[1].replace( /\+/g , ' '));
            }
        };
    }();

    // StringHelpers Module
    // Call by using StringHelpers.padLeft("1", "000");
    var StringHelpers = function() {
        return {
            // Pad string using padMask.  string '1' with padMask '000' will produce '001'.
            padLeft: function(string, padMask) {
                string = '' + string;
                return (padMask.substr(0, (padMask.length - string.length)) + string);
            }
        };
    }();

    // SessionManager Module
    var SessionManager = function() {
        // NOTE:  I use @Session.Timeout here, which is Razor syntax, and I am pulling that value
        //        right from the ASP.NET MVC Session variable.  Dangerous!  Reckless!  Awesome-sauce!
        //        You can just hard-code your timeout here if you feel like it.  But I might cry.
        var sessionTimeoutSeconds = HtmlHelpers.getQueryStringValue('smt') || (@Session.Timeout * 60),
            countdownSeconds = HtmlHelpers.getQueryStringValue('smc') || 300,
            secondsBeforePrompt = sessionTimeoutSeconds - countdownSeconds,
            $dlg,
            displayCountdownIntervalId,
            promptToExtendSessionTimeoutId,
            originalTitle = document.title,
            count = countdownSeconds,
            extendSessionUrl = '/Session/Extend',
            expireSessionUrl = '/Session/Expire?returnUrl=' + location.pathname;

        var endSession = function() {
            $dlg.dialog('close');
            location.href = expireSessionUrl;
        };

        var displayCountdown = function() {
            var countdown = function() {
                var cd = new Date(count * 1000),
                    minutes = cd.getUTCMinutes(),
                    seconds = cd.getUTCSeconds(),
                    minutesDisplay = minutes === 1 ? '1 minute ' : minutes === 0 ? '' : minutes + ' minutes ',
                    secondsDisplay = seconds === 1 ? '1 second' : seconds + ' seconds',
                    cdDisplay = minutesDisplay + secondsDisplay;

                document.title = 'Expire in ' +
                    StringHelpers.padLeft(minutes, '00') + ':' +
                        StringHelpers.padLeft(seconds, '00');
                $('#sm-countdown').html(cdDisplay);
                if (count === 0) {
                    document.title = 'Session Expired';
                    endSession();
                }
                count--;
            };
            countdown();
            displayCountdownIntervalId = window.setInterval(countdown, 1000);
        };

        var promptToExtendSession = function() {
            $dlg = $('#sm-countdown-dialog')
                .dialog({
                    title: 'Session Timeout Warning',
                    height: 205,
                    width: 250,
                    bgiframe: true,
                    modal: true,
                    buttons: {
                        'Continue': function() {
                            $(this).dialog('close');
                            refreshSession();
                            document.title = originalTitle;
                        },
                        'Log Out': function() {
                            endSession(false);
                        }
                    }
                });
            count = countdownSeconds;
            displayCountdown();
        };

        var refreshSession = function() {
            window.clearInterval(displayCountdownIntervalId);
            var img = new Image(1, 1);
            img.src = extendSessionUrl;
            window.clearTimeout(promptToExtendSessionTimeoutId);
            startSessionManager();
        };

        var startSessionManager = function() {
            promptToExtendSessionTimeoutId =
                window.setTimeout(promptToExtendSession, secondsBeforePrompt * 1000);
        };

        // Public Functions
        return {
            start: function() {
                startSessionManager();
            },

            extend: function() {
                refreshSession();
            }
        };
    }();

    SessionManager.start();

    // Whenever an input changes, extend the session,
    // since we know the user is interacting with the site.
    $(':input').change(function() {
        SessionManager.extend();
    });
});
</script>

Honey Badger

But Noah, your variable names are comically long and descriptive!

You’re right. I love that. But it may make you angrier than a honey badger, so please allow me to talk you down.

Because all of my verbose variable names are truly private inside the module, your favorite minifier/compressor can safely mangle those variable names to a single letter, reducing client load by eleventy billion percent.  Huzzah for the shopkeep!

My Back End Sings

Fantastic. All this JavaScript, and nothing on the server side to make it work. Let’s fix that.

We are using ASP.NET MVC 3 on my current project, so here’s how I made my back end sing. First, we have our two urls from the JavaScript:

var extendSessionUrl = '/Session/Extend',
    expireSessionUrl = '/Session/Expire';

So we’ll add an ASP.NET MVC 3 SessionController with Extend and Expire actions, using the SeeSharp language all the kids are talking about:

using System.Web.Mvc;

namespace Fairway.Web.Controllers
{
    public partial class SessionController : BaseController
    {
        private readonly IFormsAuthenticationService _formsAuthenticationService;

        public SessionController(IFormsAuthenticationService formsAuthenticationService)
        {
            _formsAuthenticationService = formsAuthenticationService;
        }

        // This is used from JavaScript to re-establish the user's session
        [Authorize]
        [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")] // Never Cache
        public virtual ActionResult Extend()
        {
            // Re-establish the session timeout
            Session.Timeout = 20;
            return new EmptyResult();
        }

        [Authorize]
        public virtual ActionResult Expire(string returnUrl)
        {
            _formsAuthenticationService.SignOut();

            // Redirect to the role-specified "session expired" view
            // This needs to be a separate Action because we need to issue a separate
            // request once the session has been abandoned in order to have the correct
            // context (that the user is logged out).
            return RedirectToAction(MVC.Session.SessionExpired(returnUrl));
        }

        public virtual ActionResult SessionExpired(string returnUrl)
        {
            ViewData["ReturnUrl"] = returnUrl;

            return View(MVC.Account.Views.SessionExpired);
        }
    }
}

Now we can respond to those calls from JavaScript! The key points here are:

• The Extend() method cannot be cached, or your session may not refresh correctly
• The Expire() method signs the user out, but has to redirect to a new action, which will know that the user is logged out

Nerd-Glue

We’ve got some JavaScript.  We’ve got some HTML.  We’ve got some back end.  How do you stick it all together in a useful way?  With nerd-glue, naturally!

1. Add the HTML and JavaScript from “The Final Countdown” (above) to the bottom of every page in your site where you want the session timeout logic
   1. Of course, you should probably put it in an include, or a partial view, and then drop it in your site layout, master page, or equivalent
   2. You should probably also wrap the JavaScript and HTML code in logic that ensures that the request is coming from an authenticated user with an active session
2. Add the server-side code to handle the “extend” and “expire” urls
3. I guess that’s it

Imperial

I’ve told you a few things about my approach for gracefully handling session timeout.  Here are some things I haven’t told you:

• It’s not a jQuery plugin, but could be (shameless plug for FlexBox plugin!)
• My favorite color is mercury
• The code could use more cleanup (but most code could)
• Hess Brewing makes a mean Rye Imperial Stout

Enjoy!

In this post I’m going to describe how to automatically generate diagrams from source code.  I’ve found that diagrams provide the quickest path to understanding how a piece of software works.  Diagrams also provide a great means to discuss software at a high level.  They’ve proven invaluable in the software development and software consulting work I’ve done.

Often diagrams are created by hand.  Unfortunately hand-crafted diagrams are prone to manual mistakes and falling out-of-sync as the source code changes.  Many IDE’s can automatically generate diagrams from source code on the fly, but sometimes your IDE doesn’t provide the diagrams or options you want.  Being able to generate your own diagrams will give you the ability to create exactly what you need when you need it.

A Diagram is Worth a Thousand Lines of Code

Before we talk about automatically generating diagrams, let’s consider an example that demonstrates the value of diagrams.

When I first encounter a piece of software I find it useful to identify all type dependencies.  Suppose we’d like to identify all user-defined type dependencies (ignoring the built-in types) in this snippet of java code:

// File:  Car.java
import java.util.List;

public class Car
{
	private final String make;
	private final String model;
	private final Engine engine;
	private final List<Tire> tires;

	public String getMake() {
		return make;
	}

	public Car(String make, String model, Engine engine, List<Tire> tires) {
		this.make = make;
		this.model = model;
		this.engine = engine;
		this.tires = tires;
	}

	public String getModel() {
		return model;
	}

	public List<Tire> getTires() {
		return tires;
	}

	public Engine getEngine() {
		return engine;
	}
}

// Engine.java
public class Engine
{
	private final double cubicInches;
	private final double horsePower;

	public Engine(double cubicInches, double horsePower) {
		this.cubicInches = cubicInches;
		this.horsePower = horsePower;
	}

	public double getCubicInches() {
		return cubicInches;
	}

	public double getHorsePower() {
		return horsePower;
	}
}

// Tire.java
public class Tire
{
	private final double maxLoadLbs;
	private final double maxInflationPsi;

	public Tire(double maxLoadLbs, double maxInflationPsi) {
		super();
		this.maxLoadLbs = maxLoadLbs;
		this.maxInflationPsi = maxInflationPsi;
	}

	public double getMaxLoadLbs() {
		return maxLoadLbs;
	}

	public double getMaxInflationPsi() {
		return maxInflationPsi;
	}
}

This is a relatively short sample of code, yet it can take awhile to see that type Car depends on type Engine and type Tire.  What if there were 10′s or even 100′s of types?  It’s much easier to identify the type dependencies by looking at a diagram:

A Tool to Generate Diagrams

I created the previous diagram manually (we’ll see how to automate this soon) using a command-line tool named “dot” which is part of the GraphViz open-source graph visualization software package.  The dot tool reads in a graph definition file (a text file) and produces an image file (e.g. jpeg, png, svg) containing the corresponding graph diagram.  In this case I chose png as the target format.

To generate the diagram I first created a text file named “TypeDependencies.dot” with the following contents:

digraph TypeDependencies {
    Car -> Engine
    Car -> Tire
}

The first line states that we’re defining a directed graph (in a directed graph edges come out of a source node and go into a destination node).  The next two lines define edges going from the Car node to the Engine node and from the Car node to the Tire node.

Next, I ran the the following command in the directory containing the TypeDependencies.dot file (for this to work GraphViz must be installed and the dot tool must be on your path):

dot -Tpng TypeDependencies.dot -oTypeDependencies.png

This produced the image file “TypeDependencies.png” (the diagram image shown earlier).

Automating the Process

To fully automate the creation of our diagram we must automatically generate the graph definition file and pass it to the dot tool.  We’ll write a script that inspects the source code for type dependencies, generates the graph definition file, and invokes the dot tool to generate the diagram.  All steps will be automated.

I’ve chosen python as the script language but any language would work.  This script is purposely kept simple to provide a straightforward demonstration of extracting information from source code and generating a diagram.  A robust (and more general purpose) implementation would require using a language parser to properly handle the source language grammar or even better reflection if supported by the source language.

Here is the python script:

#!/usr/bin/python
# Usage:  gen-diagram.py source-directory diagram-name
import os
import re
import subprocess
import sys

# Capture command-line arguments
SOURCE_DIRECTORY = sys.argv[1]
DIAGRAM_NAME = sys.argv[2]

# Extract type dependencies from all java files in all subdirectories
dependencies = {}
for dirpath, dirnames, filenames in os.walk(SOURCE_DIRECTORY):
    for filename in filenames:
        if filename.endswith(".java"):
            file = open(os.path.join(dirpath, filename))
            className = None

            # For each line in file
            while True:
                # EOF
                line = file.readline()
                if not line:
                    break

                # Class definition
                m = re.match("^.*class\s+(\w*).*$", line)
                if m:
                    className = m.group(1)
                    dependencies[className] = []

                # Field definition
                if not className is None:
                    # Regular field
                    m = re.match("^.*private.*\s+(\w+)\s+\w+\s*;\s+$", line)
                    if m:
                        dependencies[className].append(m.group(1))
                    # Generic field
                    m = re.match("^.*private.*<\s*(\w+)\s*>.*$", line)
                    if m:
                        dependencies[className].append(m.group(1))

            file.close()

# Generate graph edges for all user-defined types
edges = []
for className in dependencies:
    for fieldType in dependencies[className]:
        if fieldType in dependencies:
            edges.append("%s -> %s" % (className, fieldType))

# Write the graph definition file
file = open(DIAGRAM_NAME + ".dot", "w")
file.write("digraph %s {\n" % (DIAGRAM_NAME))
for edge in edges:
    file.write("\t%s\n" % (edge))
file.write("}")
file.close()

# Generate the diagram (requires GraphViz dot tool be installed and in path)
subprocess.Popen(["dot", "-Tpng", DIAGRAM_NAME + ".dot",
        "-o" + DIAGRAM_NAME + ".png"])

This script takes the source directory and diagram name as command line arguments and produces a dot file containing the diagram definition and a png file containing the generated diagram.

If your java source code is located at c:\source then running the script with the following options:

gen-diagram.py c:\source TypeDependencies

will produce the files TypeDependencies.dot and TypeDependencies.png.

Conclusion

With the techniques described in this article you can generate diagrams from a wide variety of sources.  I’ve used these techniques to generate multiple diagram types (including UML class diagrams) from XML, C#, and Java code.  There’s no reason to limit yourself to generating diagrams from source code.  Diagrams can be generated from any source that is in a parsable text format (or in reflectable binary format).  Company org charts, database diagrams, and network diagrams would all be straightforward to automatically generate given the proper input.

The diagrams themselves can also be highly customized.  GraphViz provides a wide variety of options allowing you to control the arrowheads, edge labels, node shapes, and node and edge colors shown in the generated diagrams.  I encourage you to browse the GraphViz site (especially the gallery of sample diagrams) to get a feel for the options available.

Automating GraphViz has become a key component in my software development toolkit.  I hope you find it useful as well.

Jobs has said that “[innovation] comes from saying no to 1,000 things to make sure we don’t get on the wrong track or try to do too much.”  Maybe Steve Jobs’ real genius was his willingness to systematically squash 1,000 less-than-awesome ideas?  He was the arch-decider at Apple after all, and the self-described gravitational force that kept the vision intact and focused.  Apple’s restraint and devout focus on simplicity and elegance has made their products supremely cool – evident, if not digestible to all but the most rabid Apple-haters out there.

To achieve simplicity you need a singular vision.  Jobs provided that.

Jobs was proof that the more you are a megalomaniacal micro-managing autocrat the easier it is to enforce a progressive vision and keep it cohesive.  Without Jobs I worry that Apple will struggle to maintain their zeal for simplicity and elegance in design, and irrevocably dilute their key market differentiator.  Tim Cook may be a micro-managing despot like Jobs, but he seems to lack Jobs’ laser-focus, vision and perhaps more importantly his audacity for No.

Apple nay-sayers have to acknowledge Jobs’ greatness, and I have a great deal of respect for a genius born of an innate sense of focus more than anything else.  Voodoo-warlock prognosticator?  Maybe not.  But genius of focus, definitely.

It seems to me that product companies may be best served by megalomaniacs who cultivate their focus with an iron fist, while services companies (such as Fairway) may benefit from narcissists who can charm their customers with their charisma.  Jobs seemed to be both really: secretive, powerful, perfection-obsessed, and sometimes obstinate, but also a showman huckster and cult-inspiring front-man for the Apple indoctrinated.

And what will become of the ubiquitous and cultish group of technorati sitting outside their adopted Starbucks habitat, listening to their iPods, working diligently on fan-fic short stories on the latest model MacBook Pro?  Apple fan-boys need a godlike icon to resolve their cognitive dissonance for Apple’s short-comings and armor themselves against heretical Microsoft/Google counter-culturists griping about Apple’s products and policies.  What will happen without Jobs to shield and shepherd the Apple faithful?

It’s kind of sad to think about, really.  Now I’m sad.  Not just about Jobs’ unfairly-early departure, I’m also sad that something that was cool has less of a chance of continuing to be cool.

Steve, the world will miss your audaciousness, singular vision and uncompromising Nope.

I had an interesting conversation with our HR manager the other day about how our company’s culture was created and cultivated. She claimed that culture begins and ends with upper management — that culture was purely a function of the top brass, whose direction determined how it evolved. This struck me as odd, and for someone I rarely disagree with I was surprised to hear her say this so matter-of-factly. I think I always assumed that at most companies the management team was at best an well-intentioned impedance to a genuinely enjoyable company culture. Sure, the brass can institute corporate-mandated fun or other culture-rific policies, but it is my belief that the actual core culture of a company — it’s soul — grows more organically based on the personalities of the people who work there.

We’ve all been to those painful enforced-fun team events where the office cheerleaders (often HR) enthusiastically attempt to engage the other 99% — the cynical, jaded or otherwise disinterested clockpunchers. It’s a sad affair, but how did their company’s culture get to such a lowly state? When did their company’s soul get ripped out and put on a spike – a shell mockery of management’s genuine but perhaps misguided intentions?

I think it’s because you can’t mandate culture. Management can’t be responsible for creating fun, or inventing culture – at least not directly. Maybe the best management can do to foster a healthy culture is remove obstacles for people who want to pursue their interests and be themselves at work – to provide a venue for people to create their own culture? If the true origin of culture comes from the people that live it then naturally only their own passions will promote a lasting healthy culture, regardless of what management tries to implement.

At Fairway we have a rather informal and casual culture; people have lots of different interests and are free to pursue them. One aspect that I really enjoy is our lunch culture. It’s good to take a break, get out in the sun, and enjoy each other’s company. That’s easier said than done for a lot of companies, particularly those located in some office park hellscape, but even so, having a few nice neighborhood restaurants nearby helps. For managers interested in their company’s culture, lunch is one of the best places to take its pulse. Do you notice people sitting around sullen and silent, wary of their normal urge to take cynical shots at the company or complain about their co-workers (or you)? Or do they laugh and talk about their diverse (or in our case, uniformly nerdy) array of interests and passions? Employee chatter is culture’s secret-sauce, and knowing what’s going on over broken bread is important if you hope to understand or influence your company’s culture.

But, I digress. It may be a little scary for management to think that they have little control over their own corporate culture. But total control over company culture is an illusion, which is my point. Sure, you can tend the soil, sprinkle some water, even rip out some weeds, but you’ll never be able to create the seeds.

So what do you think? Where does your company’s culture come from?

Management or the masses? Trickle-down or grass roots?

After listening to Noah Heldman’s Code Brew this past Monday on scrum and Agile project management methodology, I thought it would be fun to turn his thoughts (and word doc) into a Prezi.

I’m just barely getting in the shallow end of the pool when it comes to swimming in the sea of Prezi. But I’m enchanted with its sense of flow and movement; not only for viewing, but also for creating in it as well.

I like the circle menu choices in the left hand corner that spins around as you pick whether to write, change colors, insert images/video, group items, or create a flow to your presentation.

I thought it very honest of Prezi to warn against creating too much movement. They said that too much zooming in and out and twisting could give people headaches or feelings of motion sickness.

I had to chuckle. Their warning kind of reminded me of pharmaceutical drug ads that proclaim to cure one ailment at the risk of giving you a multitude of other maladies.

It’s not that I don’t like PowerPoint or anything, in fact, my MBA ‘mates dubbed me “PowerPoint Queen” or something equally nerdy. But it’s nice to have a new, fresh alternative to presenting ideas visually.

Looking for a scrum overview?

1. Yes, check out the Scrum Overview Prezi I just created.
2. You may also want to take a look at Noah’s source word doc found here on our website.
3. Or read the book that Noah attributes much of the content to, Agile Project Management with Scrum by Ken Schwaber.

Simply want to see a Prezi example? Need a clever alternative to PowerPoint?

You can check out my handiwork here.

I’d be interested to know what you think.

Keep in mind that this is my first attempt and I didn’t spend much time on it. I’m planning to expand the Scrum Overview Prezi, especially if the feedback is good.

If not, well, it sure was a fun diversion.

I couldn’t help myself. As a closet math-nerd and sociology major, I’m a sucker for statistics. Click.

As soon as I viewed the Job Function Composition chart, I immediately thought it reflected Fairway’s commitment to reduce overhead while investing in developer talent. Clearly, less admin, more R&D than “the other guys”.

Of course, I must acknowledge that LinkedIn does not have official headcounts for us nor for other firms, so these stats represent an approximation rather than exactness. But I believe the graphs paint a reasonably reliable picture.

I smiled when I saw this Years of Work Experience chart because it shows at a glance what takes a while to explain with words. Fairway Technologies has very seasoned and senior talent. But not so seasoned that we’ve lost our passion or zest.

We have solved many tough technical and business challenges throughout our careers. (And continue to do the same for new clients). Yet as a small company, we are nimble. Our engagements aren’t padded with software or hardware “drag”, nor bureaucratic processes. We get things done. We move with purpose, and we do it right.

How have you used LinkedIn lately? Discovered anything new?