SonSpring

jQuery Englightenment

2009-10-30T14:34:04Z

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

2009-09-25T06:32:51Z

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 BitBucket repository. It is open source, dual licensed under GPL and MIT.

My Leadership Style

2009-08-02T07:45:00Z

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

2009-07-29T07:12:20Z

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

2009-06-17T07:41:53Z

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.