Mmm... Geeky

Displaying multiple axes for a single series in Flex charts

I'm building a Flex application for work used to manage and manipulate infrared spectroscopy data.

Typically, this data is plotted like so, using Gnuplot or some similar plotting package.

Where one or more series are plotted where X values are wavelength/wavenumber and Y values are emissivities.

The two X-axes shown are simply different representations of the same scale where wavelength = 1/wavenumber.

I was stumped as to how to render a chart with two axes for the same data, as the more common use case for multiple axes in Flex charting is to render multiple series with entirely different scales on the same chart.

It occurred to me then that while it's not possible to have multiple horizontalAxis declarations in the same chart, there's no reason you can use more than one AxisRenderer per axis.

There were three keys to duplicating the original plot in Flex, noted in the code comments below.

In the MXML:

<mx:horizontalAxisRenderers>
  <!--
        Adding multiple axes for the same lineseries is as
        simple as adding multiple AxisRenderers with different
        placement parameters.
  -->
  <mx:AxisRenderer axis="{primaryXaxis}" labelFunction="{primaryXaxisLabelFunc}" placement="bottom"/>
  <mx:AxisRenderer axis="{primaryXaxis}" labelFunction="{secondaryXaxisLabelFunc}" placement="top">
        <!--
            Because we want different titles for each X-axis we're
            using a titleRenderer. Here all we want to do is change
            the text of the title, so we're using an inline renderer
            but you could subclass the ChartLabel class to create an
            external renderer for more extensive changes.
        --> 
      <mx:titleRenderer>
          <mx:Component>
              <mx:Label text="Wavelength (μm)"/>
          </mx:Component>
      </mx:titleRenderer>
  </mx:AxisRenderer>
</mx:horizontalAxisRenderers>

And then to manipulate the labels for each axis, we create a custom labelFunction

/**
* To set the secondary X-axis to a different scale using the
* same data, we're applying a scaling factor to the label and
* returning it. We're also inverting as we do with the primary
* X-axis.
* 
* To convert from wavenumber in cm-1 to wavelength in μm the
* formula is wavelength = 10000/wavenumber
*/
private function secondaryXaxisLabelFunc(axisrenderer:IAxisRenderer, label:String):String
{
	var labelAsNumber : Number = Number(label);
 
    if (isNaN(labelAsNumber))
        return label;
 
    return (axisFormatter.format(10000/labelAsNumber * -1));
}

And the result (right click to view complete source).

Drupal on Glassfish with clean urls using Url Rewrite Filter

You have a Glassfish server.

You are a Drupal developer.

You want to run Drupal in Glassfish. More importantly, you want to have it use clean urls because without that capability, all of your urls look like this: /index.php?foo/bar/baz. Which sucks, of course.

Let's set aside for the moment the desirability of running PHP in a Java application container for the moment1, and jump right to the meat of this geeky post. Here's how I got some of the clean url functionality you'd normally get from Apache's mod_rewrite, or using either mod_rewrite or Lua in lighttpd.

I'm assuming you've already got Glassfish installed, so from there:

  1. Get a copy of Quercus, Caucho's Java implementation of PHP 5. I downloaded the version 3.2.1 .war file.
  2. Unzip the .war:2
    jar -xvf quercus-3.2.1.war

  3. Get a copy of Url Rewrite Filter. I used version 3.2.0 (beta), but 2.6 should work also.
    > cd quercus-3.2.1
    > wget http://urlrewritefilter.googlecode.com/files/urlrewritefilter-3.2.0-src.zip
    > unzip urlrewritefilter-3.2.0-src.zip
  4. Get Drupal. I used the latest 6.x version.:
    > cd ../
    > wget http://ftp.drupal.org/files/projects/drupal-6.10.tar.gz
    > tar zxvf drupal-6.10.tar.gz
     
    Copy Drupal files to the quercus docroot
    > cp -r drupal-6.10/* quercus-3.2.1/
  5. Configure Url Rewrite Filter. This is where it gets a little sketchy. Drupal comes prepackaged with a .htaccess file, which sets up the mod_rewrite rules for Apache:
    # Rewrite current-style URLs of the form 'index.php?q=x'.
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]

    Unfortunately, Url Rewrite Filter doesn't support the REQUEST_FILENAME directive (yet). So I've put in some hacks to at least get clean urls working. I don't pretend that this is production-ready, but it gets it working for basic testing. If anyone has input, I'd welcome it. Anyway, in the WEB-INF/web.xml file, the following directives need to be added:
    <filter>
      <filter-name>UrlRewriteFilter</filter-name>
      <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
    </filter>
    <filter-mapping>
      <filter-name>UrlRewriteFilter</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

    This should go before the <servlet></servlet> section.

    Next, create WEB-INF/urlrewrite.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE urlrewrite
    PUBLIC "-//tuckey.org//DTD UrlRewrite 2.6//EN"
    "http://tuckey.org/res/dtds/urlrewrite2.6.dtd">
    <urlrewrite>
      <rule>
        <note>
          Prevent rewriting of specific files. Definitely not
          the best way to do this.
        </note>
        <from>^/(.*)(css|js|png|jpg|gif)$</from>
        <to>/$1$2</to>
      </rule>
      <rule>
        <note>
          Prevent rewriting of files in the files directory
        </note>
        <from>^/(.*)/files/(.*)$</from>
        <to>/$1/files/$2</to>
      </rule>
      <rule>
        <note>
          Do the Drupaly stuff
        </note>
        <from>^/(.*)$</from>
        <to>/index.php?q=$1</to>
      </rule>
    </urlrewrite>
  6. Re-zip your directory back into a .war file to deploy onto the app server:
    >jar -cvf quercus-3.2.1.war quercus-3.2.1/*
  7. Deploy to Glassfish through the admin console, or from the auto-deploy directory. Note that you should set your context-root to / to run Drupal at the root of the app server.
  8. Oh yeah, you'll probably want to connect to a database too, right? In the admin panel, go to Resources > JDBC > Connection Pools and create a new Connection Pool. Let's call it mysqlpool.

    Set Datasource Classname to com.mysql.jdbc.jdbc2.optional.MysqlConnectionPoolDataSource.

    Plug in the following Additional Parameters for your Drupal DB:

    password
    user
    databaseName
    portNumber
    serverName

That should be about it.

1: There are a couple of reasons I think this is interesting. First, Caucho claims that Quercus should run PHP apps as least as fast as Apache + APC, and I've seen numbers of 24-56% faster for the same complex app. Second, you can use Java functions natively from within PHP. Working in an environment with a lot of Java code, that's potentially appealing, especially for complex scientific functions I don't really want to re-implement in PHP. Third, the ability to deploy a .war file containing the whole Drupal docroot is also interesting.

2: I expect that most Drupal developers aren't using IDEs like Eclipse or NetBeans, so I'm just using command-line tools here.

Finder-like column view from hierarchical lists with jQuery

Mac OS X's Finder features a nifty NeXT throwback - the column view. This lets you browse through a hierarchy of files in a relatively compact space, and still see your path through directory structure.

Ok already, just show me the downloads!

OS X Column View

There are a couple of jQuery plugins in the archive that claim to do this, but none really fit my core needs:

  1. The script should be unobtrusive, and let you transform a hierarchy of unordered lists of links (like a Drupal menu) into a column view, without requiring altering the underlying markup.
  2. The script shouldn't require a bunch of support files - css, images, etc.
  3. The output should work basically like a Finder list view - allow keyboard navigation with arrow keys, show when items have submenus (i.e. differentiate between "folders" and "files").

I think I've achieved two out of three - keyboard navigation doesn't seem to work in Webkit browsers (Safari and Chrome), and I got lazy and used the excellent Livequery plugin rather than rebinding events - but otherwise, it transforms this:

Into this:

Usage is pretty basic:

$('#columnized').columnview();

There are no options. The aesthetics and behavior of the menu are determined by overriding the CSS that it provides, and providing a double-click handler.

The script provides few CSS classes that can be overridden to change the way the script is displayed.

/*Top level container - set the width, height and border here*/
.containerobj {
  border: 1px solid #ccc;
  height:5em;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
}
/*Div containing an individual level of the menu hierarchy*/
.containerobj div {
  height:100%;
  overflow-y:scroll;
  overflow-x:hidden;
  float:left;
  min-width:150px;
}
/*Link*/
.containerobj a {
  display:block;
  clear:both;
  white-space:nowrap;
}
.containerobj a canvas{
  padding-left:1em;
}
/*A bottom-level element (the furthest down in the hierarchy) is displayed as a 
link, but could be overriden*/
.containerobj .feature {
  min-width:200px;
}
.containerobj .feature a {
  white-space:normal;
}
/*If you want to display links as folders vs. files, you can apply styles to the
.hasChildMenu class*/
.containerobj .hasChildMenu {
}
.containerobj .active {
  background-color:#3671cf;
  color:#fff;
}
/*You can override the color of the triangles here*/
.containerobj .hasChildMenu .widget{
  color:black;
  float:right;
  text-decoration:none;
  font-size:0.7em;
}

I chose to include these styles in the script rather than as an external file to avoid having to reference external files and worry about their placement on the server.

I should note that instead of including images for the little triangle widgets, I'm using Canvas to draw them, where available. Where it's not (in Internet Explorer), I put in a little ASCII triangle. I have to admit I did this as much to play around with Canvas as anything else.

To actually do something with the menu, I chose to use double-clicks, in keeping with the OS X style UI. Here's a sample handler:

$('#columnize a').livequery('dblclick',function(){
  window.location = $(this).attr('href');
}

When I have time, I'll probably post up a demo page with some other examples of how to style the menu. In the meantime, you can download the script here:

For jQuery 1.2.x (requires Live Query plugin):
jquery.columnview-1.0.1.js [source]
jquery.columnview-1.0.1.min.js [minified]

For jQuery 1.3.x:
jquery.columnview-1.1.1.js [source]
jquery.columnview-1.1.1.min.js [minified]

Note: I have only tested this with jQuery 1.2.6, though I'd expect it to work with 1.3.x as well. Of course, 1.3 includes the live() method, which might be used in place of LiveQuery. For now, I'm focusing on 1.2.6, as this is what I'm running with all of my Drupal installations.

Update: I've updated the script to work with 1.3.x (tested against 1.3.2) and removed the dependency on the Live Query plugin. We're using the live() method now. Downloads added above.

I've tested this script in Safari 3.x and 4.x, Chrome, Firefox 3.x, and IE 6 and 7. As previously noted, keyboard navigation doesn't work yet in Safari and Chrome, and due to silly IE css handling, the width of submenus is fixed (via css) at 200px rather than shrinking to fit the content.

Update: The latest version of Columnview now supports jQuery version 1.2.x, 1.3.x and 1.4.x. Additionally, keyboard navigation is now available on all browsers when using jQuery 1.3 or later. The Livequery plugin is no longer required, but keyboard navigation is not supported with jQuery 1.2 (at the moment).

Update 19 April 2010: New features added to Columnview

  • Added control/command- and shift- select options. Shift-select requires jQuery 1.4.x. Multi-selection is disabled by default, but you can enable it in two ways:
    1. When calling the method: $("yourselector").columnview({multi:true});
    2. Prior to calling the columnview method:
      $.fn.columnview.defaults.multi = true;
      $("yourselector").columnview();
  • Now assigning ID of original hierarchical object to columnview object, to allow easier styling, etc. Old object is reassigned to ID-processed and hidden.
  • Fixed assignment of active/inpath classes so that only items that are currently selected have class=active.

About time

Yeah, I finally got around to re-theming my site, and moving it to Lighty at the same time.

How did I manage this? Søren was being pacified by his Granddaddy and Grandma Carol:

DSC_0107

Check out the hair! Yes, it's still blond in person, despite how it looks in pictures.


Semantic Tabs with jQuery

This plugin creates tabbed panels from semantic markup. What does this mean?

Many (most?) javascript tab solutions tend to take the following approach: In the markup, create a list of elements to use as the tabs themselves, then create a list of elements to use as the tab panels, like so:

<ul>
  <li>Tab1</li>
  <li>Tab2</li>
  <li>Tab3</li>
</ul>
<div>
  Panel 1
</div>
<div>
  Panel 2
</div>
<div>
  Panel 3
</div>

This works OK for most users, but with javascript disabled, or using a limited platform (like a cell phone) or to a search engine spider, the headers are disconnected from the content they label.

This script allows you to structure your markup like so:

<div id="mytabset">
  <div class="panel">
    <h3>Tab1</h3>
     Panel stuff 1
  </div>
  <div class="panel">
    <h3>Tab2</h3>
     Panel stuff 2
  </div>
  <div class="panel">
    <h3>Tab3</h3>
     Panel stuff 3
  </div>
</div>

So that to a spider or device with limited rendering capability, the markup is semantically correct.

To turn the above markup into a tab set, just apply the following:

$("#mytabset").semantictabs({
  panel:'panel',                //-- Selector of individual panel body
  head:'h3',                    //-- Selector of element containing panel head
  active:':first'               //-- Selector of panel to activate by default
});

This will 'tabify' the 'mytabset' div, turning the text contained in the H3 elements into the tabs. Styling these is a an exercise for the reader, but generally the following works pretty well:

/*semantic tabs*/
ul.semtabs {
  margin:0 auto;
  clear:both;
  border-bottom: 4px solid #4c77b3;
  height:25px;
  list-style:none !important;
}
ul.semtabs li {
  float:left;
  height:30px;
  display:block;
  margin:0 !important;
  background-image:none;
}
ul.semtabs li a {
/*  height:15px;*/
  line-height:15px;
  display:block;
  padding: 5px 5em;
  text-decoration:none;
  font-weight:bold;
  background-color:#e6eeee;
}
ul.semtabs li.active a {
  background-color: #4c77b3;
  color: #fff;
}
/*end semantic tabs*/

You can also activate a tab programmatically, like so:

$("#appcontainer").semantictabs({activate:2});

Where 2 is the index of the tab you which to activate (starting from zero, of course).

See it in action at http://viewer.mars.asu.edu.

Download from the jQuery Plugins page.

Multi-column lists with jQuery, an alternative method

So I needed a method to take a long, nested list and turning it into a compact, multiple acolumn list, in order to display it as sort of a site map for the home page for a site I'm working on.

Being a huge fan of jQuery, it was naturally my go-to library of choice.

Scanning the plugins site, I found a possible solution from a feller called Ingo Schommer called columnizeList.

Score, right? Well... not exactly, at least for my case.

Ingo used some of the methodoligies outlined in this article on multi-column lists on A List Apart. One of the caveats of his methodology is that each list item has to be the same height. This works Ok for a lot of use cases, but since I'm using a Drupal menu as the source for the list, it could contain arbitrary text I don't control.

So, I started from scratch. Instead of relying on consistent line heights, and applying different margin settings to list elements, I instead decided to decompose the large source list into several smaller lists (one for each column) and then use a css float parameter to make them all appear side-by-side.

Here's a sample list for a demonstration, cribbed from Ingo's example:

  1. harold (3550)
  2. horatio (1320)
  3. hitler (1120)
  4. henry (784)
  5. hector (358)
  6. haploid (315)
  7. hopping (50)
  8. herbert mulroney (44)
  9. hopscotching (29)
  10. hominibus (19)
  11. honkey (19)
  12. hermoine (18)
  13. hieronymus (13)
  14. halliburton (12)
  15. hummer (10)
  16. harlod (10)
  17. heironymious (9)
  18. hemorrhoids (7)
  19. hammersack (6)

(apparently a list of the most common fillers for the middle initial in Jesus H. Christ)

Anyway, here's what my script does to the above list:

  1. harold (3550)
  2. horatio (1320)
  3. hitler (1120)
  4. henry (784)
  5. hector (358)
  6. haploid (315)
  7. hopping (50)
  8. herbert mulroney (44)
  9. hopscotching (29)
  10. hominibus (19)
  11. honkey (19)
  12. hermoine (18)
  13. hieronymus (13)
  14. halliburton (12)
  15. hummer (10)
  16. harlod (10)
  17. heironymious (9)
  18. hemorrhoids (7)
  19. hammersack (6)

And here's the code:


/*
Copyright (c) 2007 Christian yates
christianyates.com
chris [at] christianyates [dot] com
Licensed under the MIT License: 
http://www.opensource.org/licenses/mit-license.php
 
Inspired by work of Ingo Schommer
http://chillu.com/2007/9/30/jquery-columnizelist-plugin
*/
(function($){
  $.fn.columnizeList = function(settings){
    settings = $.extend({
      cols: 3,
      constrainWidth: 0
    }, settings);
    // var type=this.getNodeType();
    var container = this;
    if (container.length == 0) { return; }
    var prevColNum = 10000; // Start high to avoid appending to the wrong column
    var size = $('li',this).size();
    var percol = Math.ceil(size/settings.cols);
    var tag = container[0].tagName.toLowerCase();
    var classN = container[0].className;
    var colwidth = Math.floor($(container).width()/settings.cols);
    var maxheight = 0;
    // Prevent stomping on existing ids with pseudo-random string
    var rand = Math.floor(Math.random().toPrecision(6)*10e6);
    $('<ul id="container'+rand+'" class="'+classN+'"></ul>').css({width:$(container).width()+'px'}).insertBefore(container);
    $('li',this).each(function(i) {
      var currentColNum = Math.floor(i/percol);
      if(prevColNum != currentColNum) {
        if ($("#col" + rand + "-" + prevColNum).height() > maxheight) { maxheight = $("#col" + rand + "-" + prevColNum).height(); }
        $("#container"+rand).append('<li class="list-column-processed"><'+tag+' id="col'+rand+'-'+currentColNum+'"></'+tag+'></li>');
      }
      $(this).attr("value",i+1).appendTo("#col"+rand+'-'+currentColNum);
      prevColNum = currentColNum;
    });
    $("li.list-column-processed").css({
      'float':'left',
      'list-style':'none',
      'margin':0,
      'padding':0
    });
    if (settings.constrainWidth) {
      $(".list-column-processed").css({'width':colwidth + "px"});
    };
    $("#container"+rand).after('<div style="clear: both;"></div>');
    $("#container"+rand+" "+tag).height(maxheight);
    // Add CSS to columns
    this.remove();        
    return this;
  };
})(jQuery);

Download

There are only two parameters - cols, the number of columns to break the list into, and constrainWidth a boolean (defaulting to false) to specify whether you want all columns to be the same width.

I've tested with IE 6&7, FF3, Safari3 and Opera 9.something (for the three Opera users on the planet). The code could use a bit of refactoring perhaps for the purpose of beautification.

Update: I've added this to the jQuery Plugin site.

NASA: Making it as difficult as possible to get the data you need

It's becoming clear to me that many (perhaps not all) NASA web sites and web services are set up in such a way that it's damn near impossible to get the information you need out of them without chanting the correct incantation and sacrificing a chicken. It's a bit frustrating, and a bit like the web c. 1999.

Case in point: I need to retrieve data from a JPL data service and a Goddard application to feed data into a little widget I'm working on for the Explore Mars site (old site still up).

In an ideal world, I'd query those services and they'd return something in spiffy XML or JSON format, which I could parse with a script or Flex, and I'd be done.

In a less ideal world, the web pages would be formatted in such a way that I could pull the data I was looking for out of the HTML source code using some clear delimiters.

Unfortunately, the reality is somewhat less convenient:

The JPL Horizons service has three ways to access data -

  1. A web service that returns data in a big <PRE> tag box, which for you non-geeks is basically a big wad of text. Computers don't like to find bits within big wads of text, at least not without substantial extra effort. Plus, the input parameters to the script that generates the results is entirely obfuscated.
  2. An interactive Telnet service that doesn't seem to have a way to pass all the parameters for the data you're seeking at once, and STILL returns a big wad of text at the end.
  3. A batch email service that does return some of the data we're looking for, but again, wrapped in a crapload of extra text.

The Goddard page is just as inconvenient - no friendly text tools there at all, just a goofy Java applet. Sigh. Guess I can run all the equations to calculate the data myself.

My hope is that I can make my own little corner of the NASA web-o-sphere somewhat more friendly to those that wish to get at the data without spending their days figuring out ways to scrape screens and parsing emails.

Disclaimer: I understand why some of these tools may have been built this way, but c'mon, I know it really is rocket science, but is it that hard to push this data out into an XML file, or at least CSV, if you've gone through all the trouble of making the calculations already? Or, just format your web pages so that the data is wrapped in a reasonably parseable tag structure?


Morgan goes to the beach

Here's Morgan's blow by blow report from his trip to the beach. Yes, he apparently twittered every couple of minutes. Please join me in making fun of him. Read from the bottom up.

morganbonner: This is your beach reporter Morgan signing off. I have survived another battle with the elements, though only by sheer luck.... about 1 hour ago from web

morganbonner: Yep, she's packing up to leave. Wouldn't you know it, an attractive woman just arrived in front of me. Figures. about 1 hour ago from web

morganbonner: It appears Allison is growing tired of inflicting the nerd-equivlient of waterboarding on me. She seems ready to leave.... about 1 hour ago from web

morganbonner: How many Sundays left without football? Eight? Goddamnit. about 1 hour ago from web

morganbonner: A couple of dudes are rubbing sunsreen on each other directly in front of me. Taking glasses off in 5...4...3....2....1.... about 1 hour ago from web

morganbonner: I don't want to take my iPod out for fear of getting sand in it. Christ this sucks. about 1 hour ago from web

morganbonner: Allison says that she will never drag me to the beach again if I buy her a pool. I am seriously considering her proposal. about 2 hours ago from web

morganbonner: Due to the liberal application of sunscreen on my face, my glasses keep falling down my nose. This is very upsetting to me. about 2 hours ago from web

morganbonner: Allison says I need to go in the water. Yes, because being lunch for some shark is going to make me so much more comfortable. about 2 hours ago from web

morganbonner: So, you're just supposed to lay here? about 2 hours ago from web

morganbonner: A large cloud has arrived overhead. Ha ha! Morgan 1, Day ball 0..... about 2 hours ago from web

morganbonner: There is a bird hovering near me. If only the crossbow I just purchased from www.budk.com had arrived yesterday, I could solve this problem. about 2 hours ago from web

morganbonner: Besides Allison, there is one attractive woman on this beach. One. And even she's kind of a Chubby Chubberson. What up with that? about 2 hours ago from web

morganbonner: In the immortal words of one Anakin Skywalker....."I hate sand. It gets everywhere...." about 3 hours ago from web

morganbonner: On our way to the beach. So giant day ball....we meet again at last, but this time the advantage is mine!! about 3 hours ago from web


My first real contribution to open source

So I finally gave something back. Granted, in proportion to how I've benefitted from open source software over the years, it's not much. But it's (marginally) better than nothing, right?

I released a Drupal module I call Commentify, which is one of several modules I wrote (or thought up/architected) to integrate Drupal with the proprietary CMS we use at work.

This happens to be the module with the widest potential appeal, since I can't imagine too many people are interested in modules that interface with proprietary registration systems, or with non-mainstream, non-public video vendors. (Randy's Location Ads module rocked, but there's no way that's ever going to be ported to Drupal 5.x or 6.x)

Basically, it lets you attach Drupal as a commenting solution to any sort of foreign content management system.

It was something of an inauspicious release, because I managed to make not one but TWO big, bonehead mistakes with CVS, which I blame on haste and my preference for and familiarity with Subversion.

Embarrassing, but they were fixed with some help from the CVS guru at Drupal.org.


High productivity

Have I mentioned that I loves me some Drupal?

Oh yes. I probably have. Anyway, in the last 48 hours of last week I managed to take two sites from photoshop mockup to fully functioning. Well, almost, anyway. There are of course some minor issues with Internet Exploder to deal with, and some pages to be tweaked.

We created a common template architecture for niche sites that can rapidly be reskinned with CSS to create unique sites with minimal code changes. The rest, from the Heritage site course guide to the Mom2MomSC.com multimedia sharing page was implemented with a minimum of coding, and in very short order using community-contributed Drupal modules. We plugged in our proprietary Omniture analytics module, Vmix video integration and my own Videowrapper module to round out the sites.

I'm a fan of more abstracted frameworks like Ruby on Rails, Django and the like for highly specialized vertical applications, but for a rapid time-to market general purpose application platform it's hard to beat Drupal, where most of the common hooks like authentication, access control, content organization, are already in place, and hundreds (thousands) of other high-quality modules are just a click away. And if you want to plug in your own alternate solutions (like we have for integration with a proprietary corporate registration system), you can do that too. So basically, you can concentrate on features that achieve your business goals, rather than the ancillary elements.

What would you rather do? Spend your time an energy reinventing the wheel, or building revenue and audience generating products?

IMHO, which is worth what you paid for it, I'd rather run something that got me 95% of the way on a project and let me spend most of my time on the remaining edge cases, optimization and security than spend 95% of my time just getting the framework built to support whatever business goals I have.