best practices

The Power of Organizing Without Organizations

Submitted by Josh Koenig on April 23, 2008 - 6:08pm.
Josh Koenig's picture

I simply cannot recommend highly enough Clay Shirky’s new book, Here Comes Everybody: The Power of Organizing Without Organizations. He’s been the “smartest guy in the room” when it comes to the internets for a while now, resisting the lure of hype while still appreciated the revolutionary changes we’re all living through.

This particular passage struck me as an excellent summation of what Chapter Three is all about:

We are plainly witnessing a restructuring of the media businesses, but their suffering is not unique, it’s prophetic. All businesses are media businesses, because whatever else they do, all businesses rely on the managing of information for two audiences — employees and the world. The increase in the power of both individuals and groups, outside traditional organizational structures, is unprecedented. Many institutions we rely on today will not survive this change without significant alteration, and the more an institution or industry relies on information as its core product, the greater and more complete the change will be.

One of Shirky’s overarching points is that any specific technology is only a small part of the equation. What’s critical is that the technology is ubiquitous to the point of invisibility (as the web is rapidly becoming), and that new and helpful social practices emerge which make advantageous use of the new capabilities the technology offers.

Being a part of the Drupal community is fascinating in this respect because we are at once participating in an astounding phenomena (the peer-based production of an amazingly useful piece of software) and helping others use that tool, and the methods used to make the tool itself to pursue their objectives.

It’s a jungle out here, but I wouldn’t have it any other way.


Drupal 6.0: More Designer-Friendly Than Ever!

Submitted by Josh Koenig on February 19, 2008 - 4:31pm.
Josh Koenig's picture

With the release of Drupal 6.0, there have been major steps forward in the theme layer. Two of the most important are the standardization of template files and their associated pre-process functions, and the addition of theme.info files which allow the overriding of whole core stylesheets.

This Sunday I gave a 45 minute overview lesson on these topics for The Drupal Dojo. There will be more later, but in brief I think with this core advance, all that remains for Drupal to be a truly designer-friendly platform is better documentation of best practices.

Check out the screencast for details.


Drupal Administration: Keeping it Simple

Submitted by Matt Cheney on January 11, 2008 - 7:52pm.
Matt Cheney's picture

Much like the parent who gives their child the keys to the family car, there comes a time in our client engagements where we set up administrative accounts for our clients to begin managing their own content. At Chapter Three we call this Capacity Building and try to make the process as smooth and intuitive as possible. The problem is the default Drupal administration interface makes this difficult.

In general, the Drupal administration navigation menu (see right) is simply too complex to be really intuitive. There are all sorts of options (read noise) available that have little relevance to the particular administration needs of our clients. Some of this menu can be distilled down through permissioning, but with general permission categories in Drupal like “access administration pages” its not possible to remove all the options. Plus, many of the most relevant options are buried several layers deep in the navigation. Its unlikely our clients will regularly find them on their own.

In the past we have build a static “administration page” where we listed the major administration pages and provided links to each, but with our latest project (that had a number of different editors and content managers who all needed to update the site) we wanted to improve our business practices and give our clients a better way to manage their website. The solution we came up with was to provide a constantly present top menu that would only appear for site administrators and would allow them easy access to their specific administration options in a nice drop down menu. We populated the menu through the Drupal menu system with the 20 or so administration pages that were needed to manage the site. This menu display was accomplished by using the SimpleMenu module and can be seen below.

To manage the individual pieces of content on the site we built one, general purpose “Content Management View” using the wonderful Views module. The idea here is to provide a consistent UI to manage each type of content and to allow site administrators to filter, search, and sort that content for their editorial and review purposes. Setting this interface up as a View allows us a lot of flexibility later to add additional administrative options and support different content types.

The end goal is to make it as easy as possible for our clients to easily work with the Drupal CMS and to manage their specific content. This kind of system is something we intend to refine and deploy in future sites.


Drupal Represents at Defcon

Submitted by Matt Cheney on August 7, 2007 - 10:54am.
Matt Cheney's picture

Las Vegas casino magnet Steve Wynn was rumored to say that Defcon was “a dangerous and chaotic mess” that will “never set foot in one of my hotels again”. I guess his comments are understandable. During one conference the attendees reprogrammed Wynn’s hotel elevators to stop on every floor and rerouted the pay per view channel to the casino’s internal CCTV. Oh well, he probably said the same thing about Britney Spears after kicking her out of his hotel.

While Josh was out wowing the liberal bloggers this year, I was in Las Vegas with a good mix of 6000 reverse engineers, computer security professionals, federal agents, academics, and freelance hackers. There were solid talks about intellectual property law, the Tor Project, cool WIFI tricks, and other cool topics. Plus, lockpicking and WIFI villages and a couple off the hook parties.

At such a cool, security focused event it was no surprise that Drupal made an apperance. Outside of the peer to peer praise received when I introduced myself as doing Drupal development, the internal conference Defcon TV system (dctv.defcon.org), set up by RantMedia, was running Drupal. If you consider Drupal’s track record for vulnerabilities against other CMS systems you can see why. Especially with the latest security release of Drupal 5.2, the robust Security Team and the policy of full disclosure, Drupal is poised to be the “most secure CMS”.


A Few Suggestions for TinyMCE Best Practices

Submitted by Matt Cheney on May 10, 2007 - 12:15pm.
Matt Cheney's picture

Earlier this week I spent an afternoon setting up and configuring WYSIWYG editing for a client’s website. Although at Chapter Three we are big fans of HTML Literacy, we realize that many users would feel more comfortable in a WYSIWYG environment. We did a little brainstorming and came up with some basic recommendations to make TinyMCE work better.

1.) Keep the Interface Simple - TinyMCE out of the box has all of its bells and whistles displayed which is in some ways cool - TinyMCE can do a lot. However, much like the selection at Old Country Buffet, sometimes too many options can be confusing and hard to narrow down. There is a temptation to leave options there that “may be useful”. Instead, we first started by disabling all of the options and then selectively enabling only the options we really needed. This ended up being just the bold, italics, underline, font size, and ordered list buttons. Keep it simple or you will end up showing your users something monstrous like:

Bad:

Good:

2.) Resizing Good, Path Bad - TinyMCE allows for textareas to be resizable and this is a wonderful feature. It gives users more space to work and is far less annoying than having to compose a page long post by scrolling through a four line tall textarea. The problem is that in order to enable this feature in TinyMCE you also need to turn on the “Path Display” option. This feature allows users to see their current depth and path in the HTML code and can be useful in some cases - including building HTML literacy, but in most cases its both cluttering and confusing. To remove it and keep the resizing option, we simply enabled them both and then used CSS to hide the information:

.mceStatusbarPathText { visibility: hidden; }

3.) HTML Literacy is Still a Good Thing - Even though the user is working in a WYSIWYG environment, allowing the user the ability to be exposed to and maybe even edit the HTML code can be a really good thing. TinyMCE allows for the creation of a “HTML” button that creates (in a separate window) a rendering of the textareas HTML content and allows the user to edit the code. Now, it is best to keep the interface simple, but helping to educate users about HTML can be a really good step to improved HTML literacy.

4.) Only Use TinyMCE When You Have To - The easiest way to simplify the way TinyMCE is used on your site is to only use it in cases where you really need WYSIWYG editing capabilities. This is, unfortunately, a little tricky to do in Drupal since the Drupal implementation of TinyMCE only allows the display of WYSIWYG editing on a per page basis instead of a per field basis. This is typically not a problem since most pages just have one textarea, but if you have a page (say the editing of a particular node) with multiple textareas, but only want TinyMCE on one or two of them, its sort of tricky how to do it.

One possible solution - that we ended up using - is to use a theme override for the TinyMCE theme to enable or disable textareas based on name. This solution works in tandem with the built in display controls and simply adds the finer grain control needed. In this example, we have only enabled TinyMCE to show on node/* pages but have four different textfields that we do not want TinyMCE to show on. To accomplish this we use the following theme override:

<?php
function themename_tinymce_theme($init, $textarea_name, $theme_name, $is_running) {
   
// Determine what Textarea we are working with
   
switch($textarea) {
        case
"field-quotes-0-value":
        case
"field-shortcomments-0-value":
        case
"field-blurbs-0-value":
        case
"field-shoutouts-0-value":
           
// If it is a textarea we do not want TinyMCE to show, remove the $init variable
           
unset($init);
        break;
    }

   
// Return the $init variable
 
return $init;
}
?>


HOWTO: Write Cleaner tpl.php Files

Submitted by zirafa on April 27, 2007 - 10:03am.
zirafa's picture

The PHPTemplate system in Drupal is a powerful theming system. However, because it is written in PHP it is easy to abuse since it is possible to directly inject PHP logic into the templates. This often creates the effect of HTML-IN-PHP which is not good.



HTML-IN-PHP:

<?php
print '<h2 class="title">'. $title .'</h2>';
?>

PHP-IN-HTML:

<h2 class="title">
<?php print $title ?>
</h2>

Which do you think a themer who understands HTML/CSS will understand better? Of course the second, because it is mostly HTML and the themer can modify the HTML tags quite easily.

Conditional Statements

Another example of this is with logic statements.

HTML-IN-PHP:

<?php
global $user;
if (
$user->uid) { ?>


<h2 class="title">You are now logged in!</h2>

<?php } ?>

PHP-IN-HTML

<?php global $user; ?>
<?php if ($user->uid): ?>

<h2 class="title">You are now logged in!</h2>

<?php endif; ?>

See how the second example is easier to read? It’s also broken up into small pieces that a themer can move around quite easily. Having open and closing braces for an if statement is really hard to follow. But if(conditional): and endif; statements are easy to read, and “chunkify” or “modularize” the text in a clear way.

<?php if ($test == TRUE): ?>

<!— Block of HTML to printout if TRUE —>

<?php endif; ?>

PHPTemplate variables

The last thing that can make your life and the themer’s life easier is to pass variables to the template files using phptemplate_variables. A tpl.php really should be mostly simple conditional statements and print statements. If you have PHP code spanning multiple lines or are working with arrays or something, you can probably pull that code out of the tpl.php and put it in template.php.

Example Node.tpl.php with too much PHP

<?php
if ($node->field_related[0]['nid']) {
 
$related_cck_node = node_load($node->field_related[0]['nid']);
  print
'<div class="related-cck-link">';
  print
l($related_cck_node->title, 'node/' . $related_cck_node->nid);
  print
'</div>';
}
?>

Why is all that logic in the tpl.php? You can move that out into template.php.

Using Template.php to add variables to your tpl.php files

<?php
function _phptemplate_variables($hook, $vars = array()) {
  switch(
$hook){
    case
'node':
      if (
$vars['node']->field_related[0]['nid']) {
       
$related_cck_node = node_load($vars['node']->field_related[0]['nid']);
       
$vars['related_cck_link'] = l($related_cck_node->title, 'node/' . $related_cck_node->nid);
      } 
      break;
  }
  return
$vars;
}
?>

Now the node.tpl.php file will get a new variable called $related_cck_link which you can easily print out.

Example Node.tpl.php file with logic removed

<?php if ($related_cck_link): ?>
  <div class="related-cck-link">
    <?php print $related_cck_link ?>
  </div>
<?php endif; ?>


Five Steps to Writing Better Documentation

Submitted by zirafa on April 11, 2007 - 1:55pm.
zirafa's picture

Documentary films, when successful, offer the viewer an intimate glimpse into a situation as it unfolds. There is often a progression or growth that occurs through the film, as every mistake and every twist and turn is captured candidly. It’s captivating because it tells a story “as it happens” instead of recounting or remembering a story after it has happened.

So why should software documentation be any different?!

Imagine a film documentary where the director didn’t really think anybody was going to watch it, so they half-ass the editing process or just decide to skip filming some days. The end product would be a pretty incomplete documentary. Sound familiar?

The analogy may sound silly, and I doubt any software documentation will be as interesting as a well-made documentary film, but why is most software documentation so BAD? We’ve all encountered confusing, vague, incomplete documentation and the reason is most likely because people regard documentation as an afterthought. It is often minimalistic and leaves out many details that the general reader needs - more a footnote for the original author than for anybody else.

This makes for really boring or confusing documentation. Since the author is documenting something they have just finished, the information is not thorough or particularly valuable. They (developers and users) want to know what the author was thinking when they wrote it, why they wrote it, pitfalls, and would like to understand the author’s experience in a compact form. This means not glossing over details, and it also means not providing unrelated or distracting information.

It may seem like a daunting process to document software, and that is probably because:

a) Developers are allergic to writing.
b) Developers enjoy being as cryptic as possible (d0cum3nt4t!0n i5 14m3, d00d!!!)
c) People try to document things after they happen, which feels like a lot of work.

While I’m sure a) and b) have something to do with it, people more likely write bad documentation because they try and do it after they are finished. Nooo! It’s like taking a fascinating video documentary and summarizing the entire thing on a post-it-note. Somehow, not as thorough… ;)

It’s really easy to write good documentation, and the secret is to *document things as they happen* and not after they happen. If you notice something or realize something while you are working, just write it down somewhere, keep a running list, and most importantly: DON’T LEAVE ANYTHING OUT. Even if you think it’s obvious, it may not be obvious to the next person, and sometimes it’s not even obvious when you go back and read it yourself! Remember that you are documenting a process, so editing things out is NOT encouraged. Later on if you need to, you can go back and edit things that are extraneous or confusing.

The amazing thing about this process is that it FEELS like less work, because you aren’t forcing yourself to remember things. In some cases, it can help you plan out what you are working on, too.

Five Steps to Writing Better Documentation

1) Write things down as they happen.

If you are describing how to configure something, actually walk through it yourself, keeping clear notes as you go. Keep a running list somewhere, and don’t leave out details. The extra few seconds after each step to document will pay off later. Additional information like screenshots and simple examples help immensely.

2) Try not to make any assumptions about your audience.

Provide relevant details or links to background information where appropriate. If you do make assumptions, state them at the top, i.e. “This document assumes the reader has a working knowledge of PHP.”

3) Organize the results.

A simple outline (you know with roman numerals and stuff) works well. Try to envision a newbie reading your documentation, then a more experienced person. The idea is that good documentation works in levels - so that a reader can see the “big picture” immediately but also can examine the details if they need to.

4) Revise, revise, revise.

Documentation evolves over time. Your audience may be unclear about how something works or why you did something or may need more details. Keep revising until they stop bugging you! :) This is the stage where you trim the fat, so to speak.

5) Put on your scarlet smoking jacket.

Bask in the everlasting glow of your work with a glass of wine near a crackling fire.


You don’t have to be an expert on a subject to write good documentation. An expert tends to automatically make more assumptions, but newbies have a fresher perspective. Since most readers will be newbies themselves, they’ll be able to relate to the author’s tone and language as well. On the other hand, experts can explain things more thoroughly and concisely from a technical point of view. Both perspectives provide valuable insight on how something works.

Lastly, have fun with it! Throw in some jokes or drop a reference to P. Diddy once in a while. Reading this stuff can be agonizing so your readers will thank you for waking them up. ;)


Announcing the Drupal Dojo

Submitted by Josh Koenig on December 27, 2006 - 9:17pm.
Josh Koenig's picture

As we’ve posted about before, the past year has seen almost 100% growth in the Drupal economy. Several great new companies and several good coders have emerged, and a new ethic of training and local groups has taken hold, and yet there just aren’t enough savvy web developers to meet the demand for Drupal-related services.

Like every professional services shop that plays heavily — our in our case works almost exclusively — in the wonderful world of Drupal, we’re feeling that talent shortage. And it occurs to me that poaching talent from our “co-opetition” and/or headhunting people with existing IT jobs — two popular ways to build out a development team — isn’t a long-term solution to this problem.

The Drupal Dojo
It Has Begun!

To that end, I’m excited to announce the formation of The Drupal Dojo, a community group dedicated to increasing the proficiency of apprentice and journeyman-level developers. The Dojo will work through the groups.drupal.org forums, and an IRC channel.

A middle-tier developer community is good for the project as a whole (#drupal intimidates a lot of people), and for enterprising individuals like myself, the idea of being able to build stronger relationships with up-and-coming developers makes obvious business sense. Seems like a classic win-win. I’ll be posting on group progress as it evolves.

I’ve arbitrarily said we need five learners and at least one other “expert” to start out. If you’d like to participate, subscribe now and help me get the ball rolling.

UPDATE:
Well that’s a surprise! 72 hours after creation we have 175 subscribers. The ratio of “master” to “apprentice” may be a bit off, but I think with the number of participants we’re bound to have some good results.


HOWTO: Creating a URL Shortcut for Drupal API Documentation in Firefox

Submitted by Josh Koenig on November 15, 2006 - 12:39pm.
Josh Koenig's picture

Every Drupal developer/hacker knows (or should know!) about the fantastic API Documentation the project has. This growing collection of documentation is one of the top reasons that Drupal continues to grow and expand as quickly as it does. It makes it very inviting for engineers to start getting savvy.

This started out more than a year ago as an independent project called “drupaldocs.org,” and at that time there was a neat feature that let you type drupaldocs.org/function_name into your browser’s location bar, and it would pull up that function, or search for function names containing whatever you typed if no exact match was found. This is similar to how php.net works (try php.net/preg_replace for instance), and it’s a really nice thing for developers like me who elect to outsource memorizing engineering minutia like argument-order and specific syntax to the collective intelligence.

However, with the launch of api.drupal.org, the old style of finding functions went away. Alas! For months I despaired, until some of the heads in #drupal (developer chat channel) clued me in to a great feature in Firefox that lets you define wildcards in bookmarks.

FF bookmark for drupal api

As it turns out, there still is a url that you can add a function_name to on api.drupal.org to perform a quick search, but it’s http://api.drupal.org/apis/4.7/function_name (or http://api.drupal.org/apis/HEAD/function_name if you want to search the budding 5.0 code). Using Firefox’s bookmark interface (see the image there), I created a bookmark with a wildcard (%s) and a keyword (api). This lets me type “api function_name” into my browser toolbar, getting access to the documentation faster than ever!

While many engineers with a background in big-league IT will probably remain committed to Integrated Development Environments, collecting little tips and tricks like these can give us upstarts and new-schoolers a lot of power and flexibility without very much work at all. Happy drupalling!


HOWTO: Liberating the User Picture Upload Interface

Submitted by Josh Koenig on November 10, 2006 - 7:59pm.
Josh Koenig's picture

One of the things that makes Drupal such a powerful platform for building community websites is its robust and scalable user system. Its got everything you need to start popin’ and lockin’ built right into the core framework: unlimited user roles, granular permissions, easily extensible profiles and more.

Avatar upload screen

Still, as hookable and mashup-friendly as it is, there are a number of things that Drupal core has a stubborn hold on. One of these is the user-picture (aka avatar) upload interface. The picture system is very well implemented — it will resize uploaded images, display them in posts and comments automagically, etc — but the user-interface for you to actually put up your picture is locked onto the catch-all “account settings” part of the user/edit interface, which can get pretty cluttered if you’ve got a lot of modules throwing their settings in there.

In future (5.0+) revisions, I’m sure that the already-awesome profile system will grow and allow site admins to easily reposition all user-account elements, but yesterday I had a need to move that user-picture upload field into it’s own page, and so I did. Less than 50 lines of code, too. Here’s how: