Programming with Poise

What NOT To Do

Every once in a while, during my daily activities on and about the web, I see something that stops me in my tracks.  Maybe a horrible color scheme.  Perhaps some very poorly chosen wording.  Whatever it is.  There are simply times when I sincerely wish there were a Universal encyclopedia of how NOT to behave, and I could create entries as I saw fit.

How could someone manage that?!  You’d think that someone literally would have to have been trying their hardest to screw up so royally, in order to achieve such mind-bogglingly astounding levels of failure.  It’s really impressive.

As far as web development goes, one time I saw black text on a yellow background, alternating (rather epileptically - you know what I mean) with white text on a black background.  That is how NOT to style your webpresence, whatever it is for.  Period.

More recently, though, I noted in a flash application, that the developers had chosen to grey out and center the text as it was entered into two input elements.  It was highly unnecessary, very unbalancing, and, more dangerously than the rest for the maintainers of the site, very distracting.  I very honestly debated entering my email address and would-be password.  I’m not sure what made me hesitate, but something about the fact that, in a form that was not centered, on a page in which nothing else was centered.  The text I was typing into these input elements, inexplicably, was centered though.  Someone got carried away.  And someone else OK’d it - that’s almost scarier.

Maybe I’m way off base on this one.  Maybe it was really not a big deal.  But, personally, this went down in my book of what NOT to do.

The centered input-elements aside.  In my own travels - of life, of the internet, on the road - a single quote has had an enormous impact on me.  I do not know whom to give credit for it’s astounding wisdom.  An intelligent man learns from his mistakes.  He is wise who learns also from the mistakes of others. When you see something so flagrantly ill-executed that it makes you instantly piteous and amazed all at once, don’t just wave it off and say “well that was dumb.”  Do yourself a favor - take a minute to breathe in the finer, more subtle details of the mishap, and learn not to do the same.

December 02 2008 | Development and Paradigm | No Comments »

Fuzzy Time

Recently I discovered a need (read: desire that was relatively easily fulfilled, thus necessary) for a web app to have “fuzzy time” display capabilities.  You’ve got the ironclad, all-superior, well-known, never-fail Unix timestamp (e.g. 1126935037).  Backbone of a LOT software (and for good reason), but useless for display.  You’ve got the MySQL datetime, which is really nifty, but even for seasoned developers, can be a bit harsh on the eyes.  PHP is the winner by far.  With it’s function called date(), you can print strings like “Monday, November 17th, 2008 at 10:21am” which is much nicer.  Isn’t abstraction wonderful?

Let’s unpack this.  In each instance you’re moving away from a single, absolute integer, to an easier-on-the-eyes formatted string.  But why stop there?  That’s where “fuzzy time” functions come into play.  They take a given time value (timestamp, datetime, or something to that effect) and, with some very simple logic… lay it out in a much easier-to-swallow way, such as “today at 8:16am,” “yesterday around 1:30pm,” and “about two weeks ago.”  A buddy of mine used to have a fuzzy time widget for his (Fedora) desktop that ran the gambit, abstracting time as specifically as “early morning” to as generally as “early winter.”  Perhaps that’s going too far, perhaps not.  You be the judge - I thought it was pretty funny.

Back to the topic at hand.  I’ve always admired Facebook’s use of fuzzy time for status updates.

At certain times of day and night (and certain levels of non-sobriety) your users can’t even parse some of the nicest date() output.  So, I went ahead and wrote a very simple PHP function to take things just one level higher up the ole’ abstraction ladder. (Note that line 2 only existed in my example script to save me typing.)

function fuzzy_time( $time ) {
  echo "\"$time\" is: ";
  if ( ( $time = strtotime( $time ) ) == false ) {
    return 'an unknown time';
  }
  define( 'NOW',        time() );
  define( 'ONE_MINUTE', 60 );
  define( 'ONE_HOUR',   3600 );
  define( 'ONE_DAY',    86400 );
  define( 'ONE_WEEK',   ONE_DAY*7 );
  define( 'ONE_MONTH',  ONE_WEEK*4 );
  define( 'ONE_YEAR',   ONE_MONTH*12 );
 
  // sod = start of day :)
  $sod = mktime( 0, 0, 0, date( 'm', $time ), date( 'd', $time ), date( 'Y', $time ) );
  $sod_now = mktime( 0, 0, 0, date( 'm', NOW ), date( 'd', NOW ), date( 'Y', NOW ) );
 
  // used to convert numbers to strings
  $convert = array( 1 => 'one', 2 => 'two', 3 => 'three', 4 => 'four', 5 => 'five', 6 => 'six', 7 => 'seven', 8 => 'eight', 9 => 'nine', 10 => 'ten', 11 => 'eleven' );
 
  // today
  if ( $sod_now == $sod ) {
    if ( $time > NOW-(ONE_MINUTE*3) ) {
      return 'just a moment ago';
    } else if ( $time > NOW-(ONE_MINUTE*7) ) {
      return 'a few minutes ago';
    } else if ( $time > NOW-(ONE_HOUR) ) {
      return 'less than an hour ago';
    }
    return 'today at ' . date( 'g:ia', $time );
  }
 
  // yesterday
  if ( ($sod_now-$sod) < = ONE_DAY ) {
    if ( date( 'i', $time ) > (ONE_MINUTE+30) ) {
      $time += ONE_HOUR/2;
    }
    return 'yesterday around ' . date( 'ga', $time );
  }
 
  // within the last 5 days
  if ( ($sod_now-$sod) < = (ONE_DAY*5) ) {
    $str = date( 'l', $time );
    $hour = date( 'G', $time );
    if ( $hour < 12 ) {
      $str .= ' morning';
    } else if ( $hour < 17 ) {
      $str .= ' afternoon';
    } else if ( $hour < 20 ) {
      $str .= ' evening';
    } else {
      $str .= ' night';
    }
    return $str;
  }
 
  // number of weeks (between 1 and 3)...
  if ( ($sod_now-$sod) < (ONE_WEEK*3.5) ) {
    if ( ($sod_now-$sod) < (ONE_WEEK*1.5) ) {
      return 'about a week ago';
    } else if ( ($sod_now-$sod) < (ONE_DAY*2.5) ) {
      return 'about two weeks ago';
    } else {
      return 'about three weeks ago';
    }
  }
 
  // number of months (between 1 and 11)...
  if ( ($sod_now-$sod) < (ONE_MONTH*11.5) ) {
    for ( $i = (ONE_WEEK*3.5), $m=0; $i < ONE_YEAR; $i += ONE_MONTH, $m++ ) {
      if ( ($sod_now-$sod) <= $i ) {
        return 'about ' . $convert[$m] . ' month' . (($m>1)?'s':'') . ' ago';
      }
    }
  }
 
  // number of years...
  for ( $i = (ONE_MONTH*11.5), $y=0; $i < (ONE_YEAR*10); $i += ONE_YEAR, $y++ ) {
    if ( ($sod_now-$sod) <= $i ) {
      return 'about ' . $convert[$y] . ' year' . (($y>1)?'s':'') . ' ago';
    }
  }
 
  // more than ten years...
  return 'more than ten years ago';
}

The original base-function I used was one that I found on PHPClasses by a fellow named Andrew Collington.  The code was in a class method for getting fuzzy file times.  I took that code, broke it out into a function, and massaged the heck out of it.  The function takes as it’s first parameter any value accepted by the PHP function  strtotime().  I chose that because of it’s impressive flexibility.  The function I ended up with only goes back to a ten-year period.  I figure, if I ever write anything that has records older than that, I can update it pretty easily.  Here’s sample output for all of the different intervals the function currently supports:


"now" is: just a moment ago
"-5 minutes" is: a few minutes ago
"-30 minutes" is: less than an hour ago
"-24 hours" is: yesterday around 10am
"-48 hours" is: Saturday morning
"-90 hours" is: Thursday afternoon
"-1 week" is: about a week ago
"-2 weeks" is: about three weeks ago
"-3 weeks" is: about three weeks ago
"-4 weeks" is: about one month ago
"-5 weeks" is: about one month ago
"-3 months" is: about three months ago
"-9 months" is: about nine months ago
"-13 months" is: about one year ago
"-76 months" is: about six years ago
"-9 years" is: about nine years ago
"-26 years" is: more than ten years ago


I was suprised at how much character and youth it gave the site.  Thanks Andrew and Facebook!

November 17 2008 | Communication and Development | No Comments »

Webstraction

My new foray into web development has been bolstered substantially by using jQuery for any client-side scripting needs.  However, I’ve also been using a new server-side tool in my belt.  I call it Webstraction… it’s a web development not-framework I’ve recently built.

I like the idea of web development abstractions.  That’s what CakePHP, symfony, and Rails all are, at a very high level.  They are systems which take care of lower-level grunt work for you, and free up your time to focus on site/application design, rather than the nitty gritty technical details of the actual programming itself.  All basically serve to answer the same cry: I don’t want to write the same code more than once.  For example, header logic that checks to see if the user is logged in, footer markup that displays links at the bottom of the page, left hand navigation, etc.  You place the code for these in certain places, and then you include them where you need them.

Taking it a step further, many of these tools can actually automatically handle including the code for you - provided you put it in the right places, name it the right name, use it in the right fashion, and only need it in certain circumstances.  Many of these frameworks will actually write code for you, if you take the time to learn their system.

Now, don’t get me wrong, there is absolutely nothing wrong with learning one of these systems, and then leveraging it to quickly churn out product.  However, I take issue with them for a single reason.  Say I commit hours, weeks, whatever, to learning Rails.  To really learning Rails, and being beyond proficient with it.  And then I spend the time to use it for several sites.  What happens to the first site where I want to step outside of the Rails paradigm?  Do something that it doesn’t support?  Do something that goes against it’s main function?

It breaks, or you break. Either you have to go then into the Rails core code, and start hacking it up (making upgrading to newer versions highly time-consuming, if not impossible in some cases), or you have to break down, and give up your dream (or find a compromise to make it happen).  All of these solutions are, to me, a bit unsavory.

What would really be nice, is a system that let you do what you do, but didn’t tell you how to go about it.  Offered you a set of tools that made you more productive, but didn’t get in your way when you wanted to go and do something non-standard.  That’s where Webstraction comes into play.  Webstraction provides standard methodologies for building web pages and accessing common code.  It is an abstraction in that, many times, the logical flow of page creation depends merely upon the existence or absence of a given file or directory.  It provides a really smooth interface for having the system automatically grab all necessary php, css, and javascript files for you.  Webstraction also has special handlers for Ajax requests.  And, most currently, I’m in the process of redeveloping it to support plug-ins (which seem, on today’s web, to be an expectation (Just look at the communities around Firefox, jQuery, and Wordpress, for instance).

I’ve submitted the project to SourceForge with a GNU/GPL license, and a recent version is available for download there, however I’ve not yet completed the documentation site, nor have I migrated the Subversion repository.  More updates to follow.

October 29 2008 | Development and Web | No Comments »

jQuery and you. And me.

I’ve had a bit of a writers block lately.  I thought it was due to the fact that I’d been too busy developing to think up things to write.  And then I made a realization - the entire concept of a blog on computer science is to share my experiences; If I’m busy solving problems and writing code, then, necessarily, I have blog fodder.  One of those moments where you rediscover something you already knew, in an entirely new light.

I’ve been getting pretty heavily into web development lately.  Wrote my own web development abstraction system (I cringe to call it a “framework” because frameworks, by definition, are restrictive, and my goal here was to do as much heavy lifting for the web developer as I could, without stepping on their toes at any point), and more recently, wrote a jQuery plugin for myself called Superedit.  I’ve really been loving jQuery.  Really loving it.  I would recommend it very highly if you’re looking to add any javascript to your site; jQuery makes web development a real pleasure.

As all of my project start, I got sidetracked.  While writing a site for the Honors Program here at my school, I decided that I’d like to make all “edit” functionality on the site happen via an edit-in-place system.

Take a user account page for example.  Say you want to change your contact email address.  The form might look like so:

And when you click on the span, I use JavaScript to turn it into an input like so:

You edit the content:

And then, on JavaScript’s blur() or change() events, the content is saved via callback, and the input is turned back into a span:

Now, personally, I think this is one of the greatest toys Ajax has given us so far.  The ability to edit (and validate) form input without having to reload entire pages for a single element to change.  Of course, the first [working] iteration of this system spanned two disjoint JavaScript files, a php header, a php function file, and then more configuration in the markup itself.  Now I’ve got it down into two plain jQuery methods.  To initialize the element for display:

$( 'selector' ).superbox( 'initial value', callback, { options } );

And to initialize the element for editing:

$( 'selector' ).superinput( 'initial value', callback, { options } );

And the plugin handles the rest.  The only tricky part has been getting the callback to behave itself, so I’m working on getting that stable.  jQuery plugin generation is actually a pretty pleasant process.  A good primer can be found directly from jQuery’s documentation, and once you’ve gone through that, an excellent practical demonstration can be found here.

I’ll probably be posting again soon on Superedit when I get it stable and formally add it to the jQuery Plugin list.  If you want to add hover event handlers, use collapsible containers, Ajax, browser-dependent scripting, or, like me, you want to extend the already sprawling library and bend your XHTML to your will, javascript has never been easier.

… I think I should get paid for advertising.

October 28 2008 | Development and Libraries and Web | No Comments »