SonSpring

Tactical Scrum

Nathan Smith — Sun, 07 Feb 2010 01:24:15 +0000

Note: If the following workflow appeals to you, we’re hiring developers.

I have been working at Fellowship Tech for a little over a year now. One of the most striking things I noticed after coming on board, and something I’m still consistently impressed with, is how well the company as a whole really “gets it” when it comes to software development as a continuous process.

We adhere to a project management methodology named Scrum, after the scrummage that occurs during rugby games, when all players hunker down side by side, in order to push the entire team forward. While sports analogies are well and good, I think of scrum more along the lines of an infantry division.

Here’s why…

A development team that utilizes scrum is said to be “self governed.” Meaning, while executives drive the overall vision and strategy of a company, it is up to those in the trenches to make it happen. Whereas a commander must have a broad idea of how a military campaign should play out, he delegates authority and trusts his troops to decide, in the field, how to accomplish their objectives.

This privilege of self governance demands a certain level of responsibility, and there are several key roles to be filled if one’s scrum team is to be effective.

Sarge

At the heart of the scrum process is the scrum master. Typically someone with project management experience, this person can be thought of as a sergeant at arms, one who keeps the group in-line and on-track. It is his duty to ensure that development groups operate as efficient units. Anything affecting team cohesion is flagged as an impediment to be removed.

A good scrum master keeps a watchful eye over the entire team, ensuring that due diligence such as code reviews are done, and that the process is not being circumvented or slighted. He understands that in order for scrum to work, there must be complete buy-in from the team, and strives to make it happen.

Comm.

On a scrum team, product owners are not unlike a squad’s field communications specialists. They relay information to the team from headquarters (and vice versa), helping to shape and define the parameters of success. They are on the team, but their purpose is to serve as a proxy for those outside and/or above the development group, who have a stake in the outcome.

Those best suited to a PO role have business analyst experience or can empathize with users of the software. They are often voices of reason and temperance when things get tough, because they care about the continuity of the product.

Infantry

This classification comprises the bulk of the team. Not given to any particularly fancy scrum related titles, they are simply referred to as developers. Without these guys, the army simply would not exist. Amongst them are programmers, database admins, system architects. They do the heavy lifting – holding the front line, steadily advancing toward the objective.

Agile, Mobile, Hostile — Hoo-rah!

It is because of them that the scrum process is effective. At our company, development teams work in three week iterations, dubbed scrum “sprints.” I think of it as securing that next strategic hill, bridge, or landmark. After each incremental victory, the team identifies the next logical target to tackle. Acting in concerted effort, they are indeed a formidable force to be reckoned with.

Medic!

Disturbingly common is how many groups operate without the support of good quality assurance specialists. On our team, as part of our definition of done, if QA has not reviewed it and deemed it solid, our product simply cannot be shipped with that feature. Ideally, QA wouldn’t be needed, spending the day like the Maytag man, awaiting a call for help that never comes.

Yet in the real world, despite the best planning and the most earnest of efforts, things get messy. Perhaps nobody is as much appreciated, yet unsung, as those in our QA department. They are truly a top-notch group, two of whom have degrees in computer science. I cannot tell you how helpful it is to have professionals who assess the symptoms of a problem, and suggest an efficient remedy.

Recon

There is some ambiguity and ongoing debate amongst scrum centric developers and project managers, as to where the user experience aspect of web design fits into the team workflow. To me as a UX developer (aka designer), this is purely pedantic. In reality, to exclude design from the software development process is to invite confusion later on down the line.

In this regard, myself and others on our UX team serve as scout snipers, running at least one sprint ahead of the server side developers, in order to plot a course of action. This affords ample time to build design patterns and refine interfaces. In terms of problem solving, we frequently dispatch issues with a surgical “head shot” so to speak, without having to involve the entire dev team.

Not unlike snipers, designers typically pride themselves on keen visual awareness and quick acclimation to new environments. They are also brash and cocky enough to believe that otherwise big problems can be solved with magic bullets. I mean, what can’t be done with Fireworks, CSS, and JavaScript — right?

Though we map out UX sprints well ahead of when templates will be wired-up on the server side, each dev team is allotted a designer. This means that we are each simultaneously a member of two groups. On the dev sprint side, we are seen as zero-hour scrum resources, to be called upon as needed.

We account for this by budgeting enough flex time within our UX design sprints, to allow for tasks to be assigned to us from our respective development sprints. In this way, we can venture “out ahead” of the larger teams, but also circle back to help fortify the effort. To me, this is how scrum ought to be done.

V-Day

Ah, deployment. This is the day (or most likely, late evening) that marks the culmination of a well executed series of sprints, providing new functionality to customers, enhancements to existing features, and a better overall piece of software in general. As a team member, one cannot help but feel a bit elated, as the escalated stress of the release date subsides. You congratulate fellow comrades on their diligence, and are equally encouraged by them.

As a team, you are collectively aware that a shared sense of accomplishment is only as valid as future sprint successes. And so you go, once again into the fray, gauging the level of effort and number of hours it will take to plant that next triumphant flag in the sand. The process begins anew. Marching orders, reconnaissance, digging-in locked n’ loaded — all to build better software.

That’s what scrum is all about.

jQuery Englightenment

Nathan Smith — Fri, 30 Oct 2009 15:34:04 +0000

History

Several years ago, I landed a job as a junior designer / front-end developer, working with and learning from Hugh Griffith and Cody Lindley, respectively. The former taught me how to have an eye for “big-D” design, beyond just the visuals, and the latter pushed me to write more modular, elegant code.

While we have all since moved on to other jobs, these guys instilled in me the desire and drive to constantly be self-teaching. Or, as the saying goes: “The more you know, the more you learn how much there is you don’t know.”

I say all that not necessarily to be all nostalgic, but to prefix the following review of Cody’s book jQuery Enlightenment with a bit of back-story. Also, let me say as a disclaimer that I was a tech editor of this book. So, while I’m obviously biased, be assured that I am also thoroughly familiar with the text. Oh, and in case you’re wondering, I have no financial stake in the book’s success. This book is self-published by Cody himself. No money changed hands between us.

Review

I initially jumped at the opportunity to be a tech reviewer because I thought I’d learn a thing or two. Little did I know that I my eyes would be opened, not only to new depths in jQuery, but the JavaScript language itself. Truly, an enlightening experience indeed. While I consider myself proficient at JavaScript, Cody is a luminary – deriving value from the slightest code nuances.

For instance, while I knew how to use jQuery chaining, Cody’s explanations take it to a whole new level. I find myself looking for new ways to improve code execution, rather than start a new element query. Why, you ask? Well, because jQuery almost always returns this as a reference to the last-used element, you can continue from where you left off, rather than constantly grabbing at elements you already have.

Most of us are probably familiar with traversing down into the scope of an element chain, because that is how CSS works.

#id_name .tier_1 .tier_2 .tier_3 { ... }

But, what’s cool about jQuery is that you can traverse downward, do something with interior elements, and after that, put back the onion layers (so to speak) and work with the parent element(s) again. Here’s how someone might typically write chained jQuery code – indentation indicates nested elements.

// Example 1: This is slow.

$('<div id="id_name"></div>').appendTo('body');

$('#id_name')
    .append('<div class="tier_1">Tier 1</div>')
        .append('<div class="tier_2">Tier 2</div>')
            .append('<div class="tier_3">Tier 3</div>');

Did you spot the inefficiencies? In example 1, there’s no reason to get that #id_name a second time, because we had it the first time around.

In example 2, the parent div is first inserted into the body, then the child elements are populated one after another, incurring an expense each time.

// Example 2: This is slow, too.

$('body').append('<div id="id_name"></div>')
    .append('<div class="tier_1">Tier 1</div>')
        .append('<div class="tier_2">Tier 2</div>')
            .append('<div class="tier_3">Tier 3</div>');

Instead, that code could be written to perform significantly faster, by causing only a single modification to the overall document.

// Example 3: Bundled together = Fast!

$('<div id="id_name"></div>')
    .append('<div class="tier_1">Tier 1</div>')
        .append('<div class="tier_2">Tier 2</div>')
            .append('<div class="tier_3">Tier 3</div>')
.appendTo('body');

This operation can be faster still, by only ever calling .append() once.

// Example 4: Single string = Fastest!

$('body').append('<div id="id_name"><div class="tier_1">Tier 1</div><div class="tier_2">Tier 2</div><div class="tier_3">Tier 3</div></div>');

That way, as you construct your new markup, you do so as a single fragment, and then insert it into the DOM. It’s the little things like that, which can add up to create a more seamless user experience for your sites and web apps.

Verdict

Without belaboring the point with tons more code examples, let me say this book is chock-full with helpful gems of knowledge, all of which Cody has cleverly made testable live via JSBin. Chances are, if you’re a web designer, you got started with jQuery because it looks and works (for the most part) like CSS. Or, maybe you’re a developer wanting to delve in even further.

With the lessons from jQuery Enlightenment in your arsenal, you will be able to write code that not just gets the job done, but does it most efficiently. If you’re ready to take your jQuery projects from good to great, this book will help you elevate your skill-set to that next level. You’ll quickly find yourself wielding jQuery more as a familiar tool, instead of a mysterious contraption.

jQuery Desktop

Nathan Smith — Fri, 25 Sep 2009 07:32:51 +0000

jQuery Desktop: View Example | Repository + Download (136 KB)

Note: Special thanks to Adrian Rodriguez for the wallpaper image.

Life has finally slowed down a bit lately. I recently finished grad school, finally obtaining an MDiv degree. To celebrate, my wife and I took our 8-month old son to visit my parents. When I returned to Dallas, they stayed there for an additional week. With some unusual down-time to myself in the evenings, I decided to build what I’m simply referring to as jQuery Desktop.

It is a proof of concept demo, mixing what I consider to be the best aspects of Mac + Windows interfaces. This inclusion of a top menu bar and a bottom task bar has always been something I liked about Ubuntu. Anyway, apologies in advance for this not being a direct copy of a single operating system.

It is worth noting that a browser-based desktop is not a new concept. There have been plenty of demos, the first of which I remember seeing via ExtJS. Also, be aware that throughout this tutorial, when I say window I am referring to a faux desktop window, not the global window object in JavaScript.

Visuals

As mentioned before, Adrian Rodriguez lent me the use of one of his beautiful wallpaper images, with permission to include it with this demo. The desktop icons are courtesy of the Tango Desktop Project, an icon bundle made specifically for use in open source projects.

The FireHost logo is of course their copyright, used as a hat-tip for being an awesome provider. I did the remaining graphics, which consist mainly of minor background images, using a pre-release of the next-gen Adobe Fireworks.

CSS

The rest of the eye-candy is handled via CSS, which involved extensive use of z-index to get things positioned just so. It probably goes without saying, but this demo obviously will bomb in IE6, but works just fine in IE7 and IE8.

While I don’t want to bore you with all the details, especially when this code is freely available to peruse, I did want to call out a few specifics. First off, I attempted to write modular styles, a technique that has been dubbed object oriented CSS by Yahoo web developer extrodinaire Nicole Sullivan.

When I first saw her presentation on OO concepts in CSS, I turned to my coworker and said: “That’s what we’ve been doing. Now there’s a name for it.” This was the approach I used when building the 960 Grid System. While there are no grids in this demo, here’s an example of what I’m talking about…

.abs {
    position: absolute;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
}

#bar_top,
#bar_bottom {
    left: 0;
    right: 0;
}

#bar_top {
    top: 0;
}

#bar_bottom {
    bottom: 0;
}

Example HTML…

<div class="abs" id="bar_top">...</div>

Because it is often a pain to type out repetitious style declarations, and easy to forget to define something that you are not targeting specifically, using an OO approach helps to avoid extra typing and mitigates forgetfulness.

In the case of this demo, I make sure to always define auto if not setting a specific value for absolutely positioned elements. In my experience, IE doesn’t do too well if those are left to chance. This ensures it renders correctly.

Progressive Enhancement

For those browsers that support it, namely Firefox and Safari, you will notice there a slight visual enhancements, such as rounded corners. Also, when hovering over a window controls – like minimize, resize, close – you will notice a slight glow via box-shadow. Here’s a comparison, zoomed 200%…

Layers

There are essentially four planes at work, to sell the desktop effect. As shown in the diagram below, the lowermost layer is the wallpaper, above which sit the top bar, desktop layer, and the bottom bar. The upper layers consists of application icons and windows, which are held within the desktop.

This layering is achieved mostly by the order in which elements appear in the markup, with z-index offering specific guidance when sibling elements need to overlap each other. Astute readers may view-source and notice the absence of the aforementioned wallpaper layer. This oddity will be explained shortly.

HTML5

It should be noted that this demo would work just as well served in HTML 4.01 or XHTML 1.0, because I didn’t make use of any new elements like <header>, <footer>, <article> etc. In my opinion, these new tags are very specific to newspaper sites, and offer little use for building web applications.

That’s okay though, because good ol’ <div> tags still work just fine, and in all browsers. Setting those nitpicks aside (har har), nowadays I prefer to use HTML5 on all my projects, because it allows for more terseness, and increased productivity, by getting rid of needless code requirements. For instance…

XHTML 1.0
<script type="text/javascript">
/* <![CDATA[ */
// Code here.
/* ]]> */
</script>


HTML 4.01
<script type="text/javascript">
// Code here.
</script>


HTML5
<script>
// Code here.
</script>

Think about it. When is the last time you wrote code inside a <script> tag to be interpreted in the browser, but it wasn’t JavaScript? Same goes for CSS includes as well. No more typing the obvious: type="text/css".

JavaScript

But, I digress. I think we can all agree that HTML5 is better than any of its predecessors, especially because it can be served as either HTML or XHTML. So, let’s get into the crux of this demo: JavaScript. More specifically, the use of the awesome jQuery library and its trustworthy counterpart jQuery UI.

Though jQuery UI offers a variety of rich interface components, I opted to do my own visual look and feel, using only the draggable and resizable functionality. By using jQuery and jQuery UI, the amount of code I actually had to write myself was reduced considerably. Let’s delve into what makes this demo tick.

First off, we define an empty object to be used as a pseudo namespace – This technique is commonly referred to as the Module Pattern in JavaScript.

var JQD = (function($) {
    return {
        // Code here.
    }
})(jQuery);

By passing jQuery into the self-executing closure function, we can safely use the dollar sign ($) without worrying about potential collisions from other code that might make its way into the “desktop” environment. Plus, it keeps our code from conflicting with others’ since everything lives within the JQD object.

While there is certainly room for argument over whether this is the ultimate JavaScript programming pattern, it is one way to keep variable scope tidy. For more, I’d highly recommend this book – Pro JavaScript Design Patterns.

The first function, JQD.init_clock begins by creating a new Date object. From there, we can then derive all we need to know about the current month, day, year, and time. This function calls itself once every 60 seconds, to ensure that the clock stays current. We could be more precise by invoking it once per second, but that would have a greater impact on page performance.

// Update every 60 seconds.
setTimeout(JQD.init_clock, 60000);

The next two functions, JQD.clear_active and JQD.window_flat are simply utilities that have been abstracted out to their own methods, for the sake of reuse. One clears elements’ active state and closes open menus. The other lowers the z-index of all windows, so one can be given prominence.

That brings us to the JQD.window_resize function, which is responsible for maximizing and restoring the dimensions / position of the windows. Look over the code below, then read on for a step by step explanation…

//
// Resize modal window.
//
window_resize: function(el) {
    // Nearest parent window.
    var win = $(el).closest('div.window');

    // Is it maximized already?
    if (win.hasClass('window_full')) {
        // Restore window position.
        win.removeClass('window_full').css({
            'top': win.attr('data-t'),
            'left': win.attr('data-l'),
            'right': win.attr('data-r'),
            'bottom': win.attr('data-b'),
            'width': win.attr('data-w'),
            'height': win.attr('data-h')
        });
    }
    else {
        win.attr({
            // Save window position.
            'data-t': win.css('top'),
            'data-l': win.css('left'),
            'data-r': win.css('right'),
            'data-b': win.css('bottom'),
            'data-w': win.css('width'),
            'data-h': win.css('height')
        }).addClass('window_full').css({
            // Maximize dimensions.
            'top': '0',
            'left': '0',
            'right': '0',
            'bottom': '0',
            'width': '100%',
            'height': '100%'
        });
    }

    // Bring window to front.
    JQD.window_flat();
    win.addClass('window_stack');
},

First, we assign a variable to the nearest parent window. jQuery’s closest() method keeps looking up the DOM tree until a parent window is found. We then check for the existence of the class name window_full and if it exists, we get the window’s former dimensions from its respective HTML5 data-* attributes.

If the window_full class was not present, then we know the window not maximized, so we store the current dimensions in data-* attributes, and set its top, left, right, bottom values to zero – and width, height to 100%. Lastly, we push down all windows, then bring the active window to the top.

The last main function, JQD.init_desktop instantiates the clock, and does the heavy-lifting of wiring up all the JS event listeners. I will break each of these out into snippets, so that we can evaluate them in digestible chunks.

The first involves listening to events on the document itself. The mousedown event is the first half of a click event – triggered when the mouse button is pushed, but has not yet been released – which is when a click is registered. When mousedown occurs anywhere in the document, all active elements are cleared, and menus are hidden – mimicking desktop functionality.

We also cancel right-click by binding a listener to the contextmenu event. This would be the first step in creating a context menu when the desktop is clicked, but I didn’t go this far because Opera does not allow for right-click cancellation. Instead, it always shows the browser default right-click menu.

// Cancel mousedown, right-click.
$(document).mousedown(function(ev) {
    if (!$(ev.target).closest('a').length) {
        JQD.clear_active();
        return false;
    }
}).bind('contextmenu', function() {
    return false;
});

The next event listener is bound to all links, awaiting a user’s click and then determining if the link is external or internal to the page. Because our desktop demo is a web page, and therefore essentially stateless, it is important not to break the metaphor by having links that cause the page to refresh.

That would obviously spoil the illusion. It is for this reason that apps like Gmail and Google Calendar pop external links into a new browser window/tab, and why we’re doing the same via a dynamically added target="_blank".

// Relative or remote links?
$('a').click(function() {
    var url = $(this).attr('href');
    this.blur();

    if (url.match(/^#/)) {
        return false;
    }
    else if (url.match('://')) {
        $(this).attr('target', '_blank');
        return true;
    }
});

Next up, more link handling. In this scenario, we’re looking for a mousedown event triggered on the top menu bar, ala Mac OS X. This opens the corresponding menu, and if the user moves his/her mouse over another menu trigger, any other open menus are closed, and the new one is opened.

// Make top menus active.
$('a.menu_trigger').mousedown(function() {
    JQD.clear_active();
    $(this).addClass('active').next('ul.menu').show();
}).mouseenter(function() {
    // Transfer focus, if already open.
    if ($('ul.menu').is(':visible')) {
        JQD.clear_active();
        $(this).addClass('active').next('ul.menu').show();
    }
});

What desktop would be complete without icons, the hallmark of a true GUI application? The next scenario binds event listeners for mousedown and double-clicks, on links with class="icon". It also makes the icons moveable via the jQuery UI draggable() function, restricted to the #desktop.

Also take note a DOM scripting technique I like to refer to as “link chaining.” Basically, each icon is just a link pointing to its respective taskbar button, ala Windows OS. In turn, each of those is a link pointing to a corresponding modal window. When an icon is double-clicked, its taskbar button slides into place, and the button’s link target window is shown and brought to the forefront.

// Desktop icons.
$('a.icon').mousedown(function() {
    // Highlight the icon.
    JQD.clear_active();
    $(this).addClass('active');
}).dblclick(function() {
    // Get the link's target.
    var x = $($(this).attr('href'));
    var y = $(x.find('a').attr('href'));

    // Show the taskbar button.
    if (x.is(':hidden')) {
        x.remove().appendTo('#dock').end().show('fast');
    }

    // Bring window to front.
    JQD.window_flat();
    y.addClass('window_stack').show();
}).draggable({
    revert: true,
    containment: 'parent'
});

Also like in Windows/Linux, each taskbar button causes its respective window to be shown or minimized, depending on the state of the window. In this case, we are using the live() method because the taskbar buttons themselves are spliced and reintroduced into the DOM when their desktop icons are clicked, via remove() and appendTo().

This ensures the most recently opened window has its taskbar button placed furthest to the right, but it breaks any bound event listeners. What the live() method actually does is listen for clicks on the parent element, in this case the #dock and then asks: “Wait, was that actually a click on the dock’s child link?” If so, it takes the appropriate action on the link’s target window.

// Taskbar buttons.
$('#dock a').live('click', function() {
    // Get the link's target.
    var x = $($(this).attr('href'));

    // Hide, if visible.
    if (x.is(':visible')) {
        x.hide();
    }
    else {
        // Bring window to front.
        JQD.window_flat();
        x.show().addClass('window_stack');
    }

    // Stop the live() click.
    this.blur();
    return false;
});

The following example reveals a window on mousedown, if it happens to be obscured by other open windows. Each window is draggable via its title bar, and resizable via its bottom-right corner. Also, a minimum width and height are defined, and windows are confined to their parent element – #desktop.

We then traverse a bit further, via the find() method, attaching a double-click event handler to the window’s title bar, which will maximize / resize the window. Then, we go another level deep via find() again, this time to the 16×16 icon in the title bar, wiring up a double-click handler to close the window if triggered.

// Make windows movable.
$('div.window').mousedown(function() {
    // Bring window to front.
    JQD.window_flat();
    $(this).addClass('window_stack');
}).draggable({
    // Confine to desktop.
    // Movable via top bar only.
    containment: 'parent',
    handle: 'div.window_top'
}).resizable({
    containment: 'parent',
    minWidth: 400,
    minHeight: 200

// Double-click top bar to resize, ala Windows OS.
}).find('div.window_top').dblclick(function() {
    JQD.window_resize(this);

// Double click top bar icon to close, ala Windows OS.
}).find('img').dblclick(function() {
    // Traverse to the close button, and hide its taskbar button.
    $($(this).closest('div.window_top').find('a.window_close').attr('href')).hide('fast');

    // Close the window itself.
    $(this).closest('div.window').hide();

    // Stop propagation to window's top bar.
    return false;
});

In order for windows to be minimized, resized, or closed, we assign event handlers to the respective buttons. Also, one for mousedown that affects all three buttons. Regardless of what action is taken, we want to clear all active elements, and then return false to keep the mousedown from propagating to the parent title bar. Else, the window would be draggable by its action buttons, a weird behavior indeed.

// Get action buttons for each window.
$('a.window_min, a.window_resize, a.window_close').mousedown(function() {
    JQD.clear_active();
    // Stop propagation to window's top bar.
    return false;
});

// Minimize the window.
$('a.window_min').click(function() {
    $(this).closest('div.window').hide();
});

// Maximize or restore the window.
$('a.window_resize').click(function() {
    JQD.window_resize(this);
});

// Close the window.
$('a.window_close').click(function() {
    $(this).closest('div.window').hide();
    $($(this).attr('href')).hide('fast');
});

For those familiar with Windows/Linux, “show desktop” is a recognizable button, used to minimize all windows simultaneously, allowing for an unobstructed view of the desktop. The same is true with our demo. If one or more windows are visible, we assume the user wants to see the desktop, and all windows are minimized. Otherwise, if all windows are minimized, then all are restored.

// Show desktop button, ala Windows OS.
$('#show_desktop').click(function() {
    // If any windows are visible, hide all.
    if ($('div.window:visible').length) {
        $('div.window').hide();
    }
    else {
        // Otherwise, reveal hidden windows that are open.
        $('#dock li:visible a').each(function() {
            $($(this).attr('href')).show();
        });
    }
});

When the page loads, the table within each window is given alternating zebra stripes, ala Mac OS X. Also, when a window is open and the user clicks on a row of data about a particular file, we highlight the entire row. This behavior is fairly typical across all operating systems, so it was worth implementing.

$('table.data').each(function() {
    // Add zebra striping, ala Mac OS X.
    $(this).find('tr:even td').addClass('zebra');
}).find('tr').live('click', function() {
    // Highlight row, ala Mac OS X.
    $(this).closest('tr').addClass('active');
});

Lastly, we load the desktop wallpaper. The reason for this is simple: To avoid blocking the loading of other assets, such as images or JavaScript. You see, since the #wallpaper is the bottommost of all our layered planes, it needs to come first in the markup, immediately after the opening <body> tag.

In order to do this, we simply use jQuery’s prepend() method, and pass in the markup for our wallpaper image. This allows us to splice it in as the first child element of the document.body, placing it absolutely lowest in the stack.

// Add wallpaper last, to prevent blocking.
$('body').prepend('<img id="wallpaper" class="abs" src="assets/images/misc/wallpaper.jpg" />');

Dun

Well folks, that brings us to the end of this tutorial. Hopefully it wasn’t too long-winded. If anything, I hope you take away from this demo how powerful jQuery and jQuery UI can be, allowing you to build rich “desktop” interactivity without writing a whole lot of code. Feel free to download the code from my GitHub repository. It is open source, dual licensed under GPL and MIT.

My Leadership Style

Nathan Smith — Wed, 12 Aug 2009 08:45:00 +0000

The following is a brief essay I wrote for a seminary class, based on personal life experience. The assignment was to discuss one’s own leadership style.

I believe that my personal leadership style has a lot to do with my personality type: Extraverted iNtuitive Thinking Judging. As an ENTJ, I initially struggled with my sense of calling. To clarify, I felt compelled to apply for and attend seminary, in fact only pursuing acceptance to Asbury based on the notion that if it was God’s will then I should not need to send paperwork to more than one school. However, the plan for what I was to do next, the greater end-goal towards which I should be heading, was not clear to me. To be honest, I felt like a bit of a freak for being one of the only guys in my dorm that did not have his heart set on being a pastor and/or climbing the ranks of any particular denominational ladder. Not to diminish such aspirations, as they are certainly necessary, holy, and noble. However, I felt that perhaps my path would lead me on a different journey. It was not until taking a personality profile test for a seminary class, that said of ENTJs: “You are drawn to non-parish ministry” that I realized people such as myself – those with formal ministry training yet seemingly no aspiration to use said MDiv in a liturgical setting – not only exist, we actually have a category.

According to the site TypeLogic, “ENTJs have a natural tendency to marshall and direct.” This personality type has been referred to as the executive. The list of notable ENTJ leaders include such people as: Al Gore, Franklin Roosevelt, Norman Schwarzkopf, and Steve Jobs. Those who fit into this personality type are said to categorically enjoy interacting with others – deriving energy and sense of self-worth by how well they get along with people. The mixture of a confidently outgoing personality, coupled with an inherent ability to act on a hunch, makes them ideal organizational pioneers.

While I have noticed some of these tendencies in myself, I cannot say it was always this way. In fact, I was quite a shy kid growing up. Moving so frequently for my father’s rising military career caused me to be somewhat closed off, initially tentative and reserved as I continually readjusted to new environments. In total, I attended two elementary schools, one middle school, five high schools, two colleges, and one seminary. Gradually, each relocation forced me to adapt and (to some extent) re-invent myself. I eventually realized that if I was to make friends and learn to acclimate to my surroundings, it was going to require intentional effort on my part. There is a stark difference between being a military kid living on an Air Force base, and living amongst the general civilian population.

On-base – as it is called, each family knows the hardship of being uprooted by the government and plopped-down at the behest of Uncle Sam. As such, when you first move in to your new house on-base, fellow military families will often bring casseroles and other meals as a way of welcoming you to the neighborhood. Off-base, this is not the norm. It is not that civilian families have anything against military families, per say. They are simply not used to the continual churn that service-men / women endure. They are (understandably) wrapped up living their own lives, with their own friends.

Depending on the availability and quality level of housing within reasonable driving distance of our stationed Air Force base, we would sometimes live on-base, yet in others locations choose to live off-base. It was this flip-flop between the two cultures, particularly during high school in which the pace was one year (or less) per city, that I learned the importance of resilience. We had a wooden wreath, which still hangs proudly in my parents’ kitchen, bearing: “Home is where the Air Force sends us.” My mom was fond of telling her children: “You need to bloom where you are planted.” In that way, we became quite a tenacious group of siblings, friendly enough – but always willing to fight to carve out a niche for ourselves. It is this scrappy attitude with which I have approached things my entire life.

For better or worse, I am an optimist. I want to believe the best in people, which sometimes sets me up for greater disappointment. In that regard, I suppose I am akin to a realist who likes to give others the benefit of the doubt. Occasionally, I will just know (via a gut feeling) that something is awry but I will reason with myself that I ought not to jump to conclusions. I believe this to be the “E” and “T” aspects kicking in – a desire to be social and think things through rationally. Yet time and again my first inclination will prove to be correct.

For instance, I was once considering a job where the interviewer wore sunglasses the entire time (we were outdoors). For some reason, this did not feel right to me, and I had reservations about whether or not I should take the offer, that perhaps this individual was not being entirely transparent. That is not to say this person seemed altogether untrustworthy, but I did find the lack of opportunity to make direct eye contact a bit disconcerting. I took the job despite feeling slightly hesitant, but I later regretted this decision. In the new environment I felt micro-managed by superiors who did not understand their impact on our (lack of) code development process. When I think back on my time there, I am reminded of George Whitefield’s famous quote:

“My brother [John] Wesley acted wisely. The souls that were awakened under his ministry he joined in class, and thus preserved the fruits of his labor. This I neglected, and my people are a rope of sand.”

Without a formalized process, we floundered in our efforts to build a consistent product, and were easily distracted by whatever happened to be the passing fad. That is why I think it is of utmost importance that a company choose an approach and stick to it, whatever the particular methodology may be. Personally, over the past nine months I have found the agile Scrum process to work best, and try to evangelize it whenever project management comes up as a topic of conversation.

To hear me tell it, you might think that I never had any good bosses. Quite the contrary. I have had the privilege of working for several well-qualified mentor / colleagues. Two in particular had a big impact on me: Mark Kraemer and Stephen Anderson. Both had very similar approaches to their work habits and management styles – coworkers themselves, before I met them in their respective roles at different companies. Mark would always tell his team to “embrace constraints” and work within an established set of design patterns and software best practices – not necessarily coloring outside the lines, so to speak – but filling every inch of the available “canvas” with as much beauty and innovation as possible. Stephen took things a step further, by critiquing the limitations of the available palette. While Mark would drive us to do the best we could, Stephen would often challenge the notion of things being “good enough,” questioning if we could remove constraints or redefine the parameters.

I gleaned quite a bit working for these two, learning from their example of co-laboring alongside their subordinates. It is this collective approach to leadership that I attempt to employ with my colleagues, temporarily stepping up if I perceive a leadership vacuum, but for the most part taking a more collaborative stance – respecting each individual’s unique perspective and expertise. In dealing with coworkers or making recommendations to people who attend my talks at various conferences, I try to encourage people to stretch themselves beyond what they currently consider their areas of core competency. To use an analogy: In the industry (if there is such a thing) of web development – designers who can code will always have an advantage over those who only do one or the other. Often we hear about the tension between “Form vs. Function” but I caution against buying into that mentality because one who holds this to be true is usually compensating for lack of skill or interest in the other end of the spectrum. Therefore, when talking with both left / right-brained people, I emphasize the importance of not being complacent. I say: So what if you are amazing at one particular skill? Someone who is a master of two is even more impressive, especially if without pretense.

Yet, not everyone shares my vantage point. There are some who would prefer to be seen as a specialist, and strive for nothing outside of a narrowly defined set of parameters. Perhaps it is my upbringing that influences my perception of job skill-sets, but to use a military analogy: It seems to me that a soldier who is versatile and motivated enough to study beyond only what is taught in boot-camp is not only better poised to get the next big promotion, but also more likely to live through an ambush on the battlefield. This same principle applies to leadership. One can attempt to do everything by the book, but the downfall of a leader usually comes in the form of unexpected circumstances. While there is no way to adequately prepare for the unknown, generalists stand a better chance of survival.

This is why, though only myself and two others bear the title UX (User eXperience) Developer at Fellowship Technologies, I really see the entire development team as having a direct impact on UX. Everything from visual design, to the file-size of images and code, to the speed at which a database query executes, to the up-time of our underlying infrastructure – it all affects the perception that someone has of our product. To compete in the realm of SAAS – software as a service – our web applications must rival the performance of desktop applications. An example of such a success would be Gmail, which has cut into the email market share of Microsoft Outlook, as well as Google Docs which is a viable alternative to MS Word / Excel. To counter this encroachment, Microsoft is currently building an online version of Office that will be free of charge, due out sometime next year. Additionally, Google recently announced that it is developing its own operating system. Despite their core business being search, these tangential products keep would-be contenders on their heels.

It is this type of thinking that produces what is referred to as “disruptive technology” – a product that seemingly comes out of nowhere and challenges the dominance of the status quo. Leaders must not only hone the necessary foresight to anticipate such moves by competitors, but need to themselves be fostering an environment in which out-of-the-box thinking is encouraged. If ever I find myself in a managerial or leadership position, though I dread that inevitable possibility because it would remove me from the creative process, I will attempt to hire people who realize the value of constant learning. I have met some people who have formal degrees in their respective fields, and lord that over others who do not. In my opinion, this creates a blind spot – assuming that the degree one obtained however many years ago is still the single litmus indicator of competency today. I tend to get along better with people who are good at what they do, regardless of how they obtained their skills. That is the style of leader I aspire to be – valuating individuals beyond what is on their résumé.

Symphonic Leadership

Nathan Smith — Wed, 29 Jul 2009 08:12:20 +0000

For an assignment in my last seminary class before I graduate, we had to discuss with other students what key functions are provided by effective leaders. One of my classmates cited a radio interview with Maestro Lorin Maazel, retired conductor of the N.Y. Philharmonic. Now 79 years old, he reflected upon his prestigious career and what it means to be an effective leader of musicians.

I think that a symphony conductor is a great analogy for effective leadership. In keeping with that metaphor, I believe the functions of a leader to be:

[1]. Rebuking / Correcting

A conductor needs to have the gumption to tell others when they’re out of tune. An effective leader can’t be so concerned with being amicable that s/he can’t put people in their place when they step out of line. While it might not make one popular, it does ensure that the group maintains a certain level of quality.

[2]. Exhorting / Encouraging

Likewise, a good conductor doesn’t let good deeds go unnoticed. If someone has shown remarkable improvement in an orchestra, putting in those extra hours of practice or taking the time to fine-tune one’s instrument, that will be self-evident amongst the group. A good conductor will say a few words of encouragement to publicly recognize the hard work of various individuals. So too an effective leader should praise his/her constituents, so all will strive for excellence.

[3]. Instruction / Guidance

A good conductor doesn’t expect the musicians in his/her charge to become amazing overnight. S/he realizes that to hone the necessary talent takes a lifetime of dedication. Therefore, a good conductor / leader is willing to put in the time to teach others how to best use their natural gifts. Some people can master a variety of instruments, others might play only one or two, but do so exceptionally. Both generalists and specialists are needed.

[4]. Scouting / Recruiting

A good conductor realizes that there is inevitable turn-over in any orchestra. Musicians leave to join other ensembles, or occasionally strike off on their own to pursue a solo career. Long-standing members might pass away, and their vacancies need to be filled, lest the symphonic harmony become unbalanced. A good conductor is always on the lookout for new up-and-coming talent, that can be cultivated into the professional musicians of tomorrow. Likewise, a good leader is always thinking about empowering the next generation of spiritual trailblazers. There is no success without a successor.

[X]. First-Chair

Not sure where this fits in my bulleted list, so I’m just calling it out separately. In orchestras, there is the concept of “first-chair.” This is the #1 person in a respective category or instrument. Orchestras sit in a half-circle when performing, which means that only one person per row can be seen directly by the audience. This honor is reserved for the first-chair. This person usually performs solos when called for in a particular song, and acts as a mentor.

Because this position of esteem is highly sought-after, orchestras often have in place a “challenge” system, by which someone in a lower rank can call-out the first-chair to a duel of sorts. After a play-off of a selection of music, and perhaps group consensus, the challenger can potentially claim first-chair. There is usually a time period that someone must wait after challenging unsuccessfully, and a duration of immunity if one has recently become first-chair. This allows for tempers to cool, and for motivation to build to work harder.

While an effective leader runs things according to a process, it is also important to afford opportunities for advancement based on merit, not necessarily seniority. If there is a situation in which there is a long time employee up for a promotion, but that person is less capable than someone who exhibits an obvious knack for performing that particular set of job duties, a leader must choose wisely. Ultimately, the decision has to be in the best interest of the group, not just to do right by a single individual.

As an aside: That’s why non-denominational churches have dynamic leaders who seemingly come out of nowhere, whereas large mainline denominations do business-as-usual, and miss out on their prodigies. I am in no way saying that of myself, but would point to Steven Furtick as an example. He is in his 20’s but leads a large congregation, as the senior pastor of Elevation Church.

Anyway, that summarizes my thoughts. I would love to hear any other analogies and metaphors that you think help to encapsulate what good leadership entails.

Design 4 Drupal

Nathan Smith — Wed, 17 Jun 2009 08:41:53 +0000

My 5-month old, at D4D

Grid Talk

This past weekend, I had the privilege of speaking in Boston at Design 4 Drupal, an un-conference meet-up graciously hosted by MIT. I co-presented Accelerated Grid Theming alongside Todd Nienkerk, on how to use the NineSixty theme, a port of 960.gs for use in Drupal. I dare say it was quite well received.

I mostly covered the generalities of grid design, and what inspired me to make a prototyping / design / CSS framework in the first place. Todd took it from there, and described all the nuances that go into the actual theme, built expertly by Joon Park, who those in the Drupal community know as dvessel. In all likelihood, I will incorporate back into the framework the extensions he made.

I was surprised / humbled / honored that the event organizers moved our presentation from one of the classrooms to the largest lecture hall at the MIT Stata Center. They also bumped all other sessions to different time slots, essentially giving us the monopoly on attendees. As far as I know, the majority of those present attended our talk. One might argue the cause and effect of that scenario, but I think it was due to the level of interest in our material…

More than one attendee said they thought the sessions here were better than at DrupalCon. With keynotes by Jeff Robbins and Jay Batson and huge sessions like the one on the 960 grid by Nathan Smith, the creator of 960, and Todd Nienkerk it’s hard not to feel this way.
— Matt Farina

I really had a great time, and the session from @nathansmith and @toddross for 960.gs was great, and I think that was obvious by the fact it got moved to the larger lecture hall! It seems like 960.gs is truly set to take over the grid system, and become very well adopted by the Drupal community.
— Jake Strawn

For me, the highlight was hearing the creator of the 960 Grid System, Nathan Smith speak with Todd Nienkerk… There was such a large interest in the presentation that the organizers had to move it to a larger room. I feel as though it is a tribute to the Drupal community to have such a person as Nathan getting excited about Drupal and sharing his thoughts on how to integrate his incredible grid system into Drupal. His authentic interest in understanding what it means to be Drupal, as a developer or designer, is inspiring to say the least.
— Jason Savino

Community

Overall, I learned a lot at the conference – how to wrangle Drupal to output just about any markup imaginable, several theme tips and tricks, and I also saw a demo of a cool new module called Skinr. The one thing that surprised me the most was though people are obviously passionate about their respective roles: designer / developer – ego was not really a big factor. The spirit of amicability and mutual knowledge sharing abounded. Steve Merrill said it best…

On the Bolt Bus back from the Drupal Design Camp in Boston.
Drupal’s great software, but the community is the real secret sauce.

Acquia – Jay Batson

I saw this not only from the attendees, but also from several of the big-name presenters. For instance, I was able to have a great conversation with Acquia co-founder Jay Batson who went out of his way to sit down and pick my brain about my thoughts on Drupal from an outsider perspective. That is, someone who is new to the system but has dealt with designing for other CMS platforms. He asked me to let him know of any pain-points, and to feel free to make suggestions on how to improve things for designers in the future.

Geeks & God

I would be remiss if I did not also mention the guys from Geeks & God. After all, if not for G&G co-host Matt Farina inviting / prodding me to speak at MIT, I probably wouldn’t have experienced this awesome gathering of designers. He and Rob Feature were kind enough to do a 30 minute segment with me, where we talked about Drupal, grid design, and the advancements we’re making at Fellowship Tech stemming from our developer site and RESTful API.

Takeaways

A lot of discussion was had around how to make Drupal increasingly designer friendly, especially with the upcoming release of version 7 and its focus on UX. Jay Batson challenged the attendees to split up into groups and envision what could be done to help the greater Drupal community embrace good design. He even went so far as to volunteer time, money, and bandwidth via design.acquia.com – which appears to already be up and running.

Discussions from the weekend have continued to be fleshed out, around a possible design centered aspect to the main Drupal site itself. Regardless of how that pans out, the cool thing is that design is being given due consideration.

F1 + EE Module

Nathan Smith — Thu, 14 May 2009 03:28:08 +0000

In preparation for our annual Dynamic Church Conferece — For the past month or so, my coworkers and I have been diligently (read: frantically) working on our respective applications that each consume the brand new Fellowship One RESTful API. I was half of a two-man team tasked with creating an EE module, to allow churches to display a list of members within their own site.

We dubbed it Listee (play on the “EE” moniker). Here’s a demo video…

Without going into too much detail, since that will eventually be posted on our forthcoming developer site anyway, let me just cover a few tech points. It requires PHP version 5, because we are parsing a JSON response. For me, this was the format I’m most familiar with, though the API also supports XML.

It was a cool exercise to familiarize myself with the inner workings of EE, and how the various {exp} tags hook into PHP classes and methods. It was also interesting to learn more about OAuth, though most of the hard work was done by a coworker, who built a library that we used for both EE and Facebook.

All in all, I’m pretty happy with how it turned out. The cool thing is, with the lessons learned here, we are going to be able to pass over a good chunk of the PHP code to be used in other content management systems. In fact, there is already an effort underway to integrate Fellowship One with Drupal.

Drupal 6 Themes

Nathan Smith — Mon, 04 May 2009 05:54:36 +0000

I recently read Drupal 6 Themes, by Ric Shreves – a partner at design and development firm Water&Stone. I found the book to be a great resource.

Lately I have been digging further into Drupal, an open source content management platform that describes itself lightheartedly as “community plumbing.” These tubes have been used to power many high profile sites, which all have their own distinct look and feel. It appeals to me because it’s more powerful than simple blogging software, but with that comes a bit of complexity. Thankfully, it is actually quite intuitive once one makes sense of how it works.

This allows for a great deal of flexibility in terms of design. Looking at sites that use Drupal reads like a veritable who’s-who of technology / innovation…

While some have criticized Drupal in the past as being difficult for designers to customize, and that was probably a valid concern (at the time), the latest version is quite designer friendly – made so via the PHPTemplate engine that is built into the system. While it is “just” PHP, it is quite a bit simpler in terms of building templates than writing out raw code long-hand. So one could say, it is as designer friendly as other systems that rely on PHP for templating.

Shreves did a great job covering all that is possible within Drupal, from a design standpoint. He begins by explaining how the inner workings of the system fit together, and how this allows for a designer to override and tweak everything. He then shows how to take an existing theme and build a sub-theme.

Of course, this is all just a precursor to chapter 7 and beyond, where Shreves really shines, showing you how to build your own fully customized themes. That’s not to downplay the importance of the foundational material, as the earlier chapters build well upon each other. I am simply saying I found the chapters on doing your own design from scratch especially inspiring.

Overall, I would highly recommend this book to any code savvy web designers who are looking to take their skills to the next level with a full-fledged content management system. With newly acquired skills, you will be able to confidently tackle enterprise scale projects, building upon the versatility of Drupal.

Podcasts

For me, a great way to learn about Drupal is to passively digest the information via listening to a podcast or watching a video. Here are some resources I’ve found. If you have suggestions, feel free to leave a comment on this post.

Lullabot Podcast – Largely considered to be the Voice of Drupal.
Acquia Podcast – The company of Drupal creator Dries Buytaert.
Got Drupal – Screencasts that range from beginner to advanced.
Geeks & God – Christian podcast that frequently shares Drupal tips.
Mustardseed Media – Video tutorials about Drupal. Co-host of G&G.
Drupal Speakeasy – A promising new podcast by LevelTen Design.

Keeping Digg Honest

Nathan Smith — Mon, 06 Apr 2009 01:35:11 +0000

For those of you who know me, you also know that I have a love / hate relationship with Digg. They seem to love linking to my content, and I generally don’t care for the negativity their readership brings both via comments on my site and Digg itself. In the past, I was simply deflecting all Digg traffic.

However, friends convinced me the embargo really just hurt end-users, by not allowing them to get at the content they were seeking. Fair enough. Plus, it wasn’t really Digg’s fault that the majority of their readers act as they do.

Today though, via Mint I noticed something that most definitely does smack of suspicious activity. Namely, a clever form of content misappropriation. It’s basically an iframe that includes your site, with a DiggBar at the top.

At first glance, this does not seem like a big deal, but it creates a twofold problem. First, it allows Digg to cross link various unrelated sites, all the while keeping their bar (potential advertisements) in front of users – making a mini browser. Second and more importantly, it associates their brand with my site, and Digg is a brand I’d rather distance myself from, given the choice.

That’s the crux of my blog post. You, as a site owner and content creator, do have a choice. You can let Digg do whatever they want with your content, or you can add this simple bit of JavaScript to the head of your document.

Note: To see this in action, check out this would-be DiggBar link.

<script type="text/javascript">
/* <![CDATA[ */
if (window.location !== window.top.location) {
    window.top.location = window.location;
}
/* ]]> */
</script>

Last I checked, large respected news sites such as NYTimes.com use this method to keep scrapers from passing off NYT content as their own.

Basically, it asks the browser: Is this page being viewed in the uppermost window? If not, then you know it’s in an iframe in which case it redirects the entire browser to view the original page on your site, sans DiggBar.

The nice thing is – Not only does this work for Digg, but it also will free your writing from the clutches of any other content leeches as well. I must admit, part of me feels bad. Used on a wide scale, this will take “the wind out of the sails” for a company that is desperately trying to find a business model.

Update: Faruk Ates and John Gruber have also posted their respective solutions to dealing with the lame-ness of the DiggBar. Gruber’s is particularly brutal. Popular tech news site Engadget (of Weblogs, Inc) is blocking it as well.

Thoughts on Leadership

Nathan Smith — Tue, 24 Feb 2009 05:57:39 +0000

For a recent seminary assignment, we were asked to share our personal definition of leadership, and address the question: “Why do church leaders fail?” We were supposed to answer in approximately 400 words. After typing my response, I thought it might also make for a good blog post. Here ‘tis…

My definition of a leader is someone who is “in the trenches.” A leader is often thought of as someone who sends others to fight for his cause. The true model of leadership is found in the inverse: someone who is willing to die for those s/he leads. I think we see people fail at leadership because they have misplaced motives. They want the title of “leader” but for self-glorification, not the edification of those they purport to shepherd. They want to pad a résumé, not build a congregation.

One key tenet of a leader is that s/he never asks of subordinates something that that s/he is unwilling to endeavor to accomplish him/herself. I think another way to describe it is a player-coach. The best suited to lead a group of like-minded individuals is someone who has learned from the school of hard knocks what it means to achieve in a particular venue. When Michael Jordan was in the twilight of his athletic career, he briefly came out of retirement and worked on the coaching staff of the Wizards. He would also take the court from time to time, showing by example what it meant to exude excellence.

Much of my thoughts on good leadership come from friend, former co-worker and boss, Stephen P. Anderson. His philosophy on leadership is that a leader is supposed to inspire, not micro-manage. The last thing any organization needs is another MBA touting suit, thinking s/he has all the answers because it came straight from a textbook. Stephen’s leadership style was very much lead by doing. When I thought my work was top-notch, he would look it over and say: “Have you considered… ?” I both dreaded and looked forward to those moments. Dreaded, because I knew it would require more work on my part. I appreciated it though, because I knew that 95% of the time, he’d be right. It was very much an iron sharpening iron experience working alongside him.

Though he and I don’t work together anymore, I still hit him up for advice, when having a creative block. He always brings a fresh perspective to everything he does, and is very well versed in the psychology of how to best communicate. I asked him if he’d be my mentor for this class, and he said: “I’m flattered. I’d love to be your mentor.” I think that’s a key quality in leaders as well: They make others feel like a million-bucks, rather than working out their own insecurities by putting others down. A true leader has a quiet inner self-confidence.

Anyway, I’m over my allotted 400 words. I do want to push this article though, because it succinctly summarizes much of my beliefs on effective leadership:

— Why I Am Not a Manager