Get Quippy!

In an apparent attempt to corner the Activities Groups from Princeton market, I found myself lucky enough to have the opportunity to work on a website for a group that no one I was related to was in.

This group already had some merchandise and branding, so that eliminated one of the trickier parts of my job.

My favorite piece of this job was figuring out one of WordPress 3.0’s newest features; custom post types. One of the things I’ve always hated about using Categories to place posts in WordPress is how easy it is to make a mistake and have the item end up in the wrong area of the site.

Now, it’s easy for anyone to see where a particular group of items live, and where to add new ones. In this case, Members is its own sub-section of posts, and adding new members is ridiculously easy.

Visit the site.

The houses available for rent in Colorado are, by and large, breathtaking. From simple cabins to 15-bedroom chalets, there’s no shortage of top-shelf vacation properties for those who are willing to pay for it.

What I can’t understand is why so many of these magnificent properties are rented through stock-and-trade websites like VRBO. I don’t imagine the owners of these places are very happy with the bland taste left in their potential renters’ mouths after they look through a few thumbnail pictures, surrounded by drab text and Google ads for ski rentals.

The Elk House owners wanted to stand out from the pack, and while they will still show up on sites like VRBO (their Google search ranking is simply too high to ignore) they now have a much better place to send potential renters: their custom website.

The Reservation System

Using jQuery and AJAX, I built a WordPress plugin that provides an incredibly simple and intuitive front-end interface that integrates nicely with a back-end administration area.

Essentially, the front-end calendar knows what each day is worth and which days are already reserved. A potential renter can select their start/end dates and get a price right away. Then they give their name/email address, and the property manager is alerted that there’s a new reservation request that must be dealt with.

Since every reservation request is routed through the property manager, there’s a human at the end of the process. This obviates the need for extensive security measures to prevent people from trying to get a free night by changing the price that winds up in the database. Knowing what can be left out of the design/development process is just as important as thinking about what to put into it, especially when you’re a freelancer. Time is money, and you don’t get extra credit for making things more complex than they need to be.

Check it out.

A friend of mine from high school is getting married next year, and she thought it prudent to invest in more eco-friendly ways of getting people to her wedding than the traditional manner. Here was her plan:

First, don’t send out RSVPs or invitations in the mail. Second, have a completely online RSVP solution so neither she (nor her husband-to-be) would have to manually sort through all those RSVP cards that have now been through the mail twice. Third, have a site that doesn’t look like it was made by someone who would very clearly rather be doing almost anything other than web design.

I was thrilled when Liz asked me to build their site because I knew I would have to come up with a working RSVP system, something I had never done before. It started off based on the Showtime plugin I wrote for the WVAU site and evolved into a completely different beast, with automated mailing lists and even a “Forgot your password?” function.

I’m going to go on a little rant about wedding websites for a moment. I hope you’ll indulge me.

Almost every wedding website made by a do-it-yourself service that I’ve seen has been a tasteless affair that in no way reflected the joyous ceremony that it was promoting. But those services get used for a few very good reasons:

1. They’re automated and work right away.

As far as psychological barriers go, this is huge. People who have had bad experiences with any kind of commissioned artist (graphic designers in general and web designers in particular) have endured the horror of not only getting overcharged for poor work, but of missing immovable deadlines because their hired gun just didn’t get it done on time.

Also, there’s the tremendous appeal of simplicity; give us a date, a few pictures and your names and we’ll have you up and running in a few minutes.

Kind of like Vegas.

2. They’re cheap.

By including things like the domain, hosting costs and an easy-to-update template for as low as $100 a year (some are even free), these organizations have put together a package that, at first glance, seems like a hell of a deal.

Also a little bit like Vegas.

3. They can manage your RSVPs.

This is required. It doesn’t matter if the actual tool is confusing or difficult to manage – if it works at all and it’s cheap, people are gonna use it.

I’ll leave out the obvious Vegas joke here.

So what’s the problem?

“Alright,” I hear you saying. “They work and are cheap. Why are you telling me?”

Do-it-yourself websites are nothing new. They appeal to any number of basic feelings, not the least of which is that instinct that says we all have an artist living inside of us that just needs the right tools to get out and express himself.

I don’t think that someone thinks they’re creative because they can pick a theme out of a line-up, but it’s still a way of feeling like you had a hand in the process; something you can feel pride of authorship in.

The fundamental reason to hire a professional designer/developer instead of using one of these services for a wedding website is the exact same reason you would hire one over using a service like Blogger or Squarespace or any of the other countless outlets that promise an end to your web developer woes: you want your stuff to be cool.

A wedding is like any other event; you can choose to make it your own or you can do it the way everyone else does. Have a bridesmaid quote Corinthians, rent the Colorado Ballroom at the Double Tree and make sure the little kid who’s carrying the ring wears a bowtie. Boom. Insta-nuptials.

Creating cool shit takes time, experience and attention. Hire someone to make cool shit for you, and you can devote your 24 hours to things that you actually care about and are deserving of your attention.

Have a taste.

This was an unusually fast job for me, made so because the previous web designers found themselves unable to deliver the product the client needed.

Once someone purchases the movie for download, they’re directed to a page that only logged in users can see. The download link, however, could potentially be shared with anyone that didn’t want to pay the $4.20; so I came up with a script that changes the link and the file location on the server every hour. This way, only properly logged in users have the current download link.

It turned out to be largely unnecessary, since the client decided that the film should be streamable for free so that the largest number of people would see it – an idea I heartily endorse.

The downloadable version is still available for people who want to put it on other viewing devices, thereby giving us the best of both worlds.

• Rotating images for the three latest posts.
• Archive of all posts.
• News feed of stories related to human rights and corporate social responsibility.
• Easily add authors with biographies and photographs.
• User-friendly forums
• An easy way to create endnotes for research articles.
• Articles must be downloadable as PDFs.

My favorite part of this job was creating the WordPress plugin List Contributors, simply because it’s a very versatile little tool that I imagine I’ll be using on some future projects.

I also enjoyed trouble-shooting the downloadable PDFs. I really hate redundant data entry since it probably means that someone isn’t doing their job properly. The solution I came up with has the benefits of working from the same data (saves on server resources) and offloading most of the heavy lifting to someone else (in this case, pdfmyurl.com). The full explanation of the process can be found here.

This is the second site I’ve ever built for which I wasn’t asked to do the actual design and layout. I don’t know what my clients are trying to tell me.

Visit the site.

Getting the production site up and running took a little longer than I predicted due to a late-in-the-game design decision, but I’m much happier with where it wound up than I would have been.

The center-piece of the site, the portfolio slider on the front page, uses the Page Thumbnail functionality of WordPress 2.9 to make it ridiculously easy to add new items. This is unlike the slider on my front page, which is hand-crafted in Coda because I don’t want the XHTML section of my brain to atrophy.

Since there is a secondary slider on the portfolio pages, I set the thumbnail sizes in WordPress to generate the appropriate sizes so that each image only had to be uploaded one time in one place to put the correct images in both places.

The Road Not Taken

The first iterations of the design were very dark, brooding almost. Paul Lucci, my partner in crime over at Crooked Gremlins, was brought on to do the illustration work and to help with the logo. The first ideas we had matched the attitude of the site, which was way too serious.

The Metal Goddess, indicating strength

The game-board, indicating strategy

Ultimately, the client wanted a more light-hearted look, which we pulled off with a lighter color palette and brighter imagery in the slider.

The Services Section

One of the last pieces of the site to come together was the Services section. I’m still kind of amazed how it only takes one or two ideas to make a thing that seemed totally broken and unapproachable a nice thing to look at.

Paul provided the illustrations here, as well.

Visit the site

Download

Installation

Get the List Contributors directory into your wp-content/plugins directory either by uploading it directly or using the WordPress Plugin Installer. Activate it and you’re good to go.

Adding a Contributor

The dropdown menu in the admin panel lists all of your registered users by display name in alphabetical order (by their first name; I didn’t think it was worth the effort to join the user_meta table to get their last names first). Select the desired user’s display name, add their biography and upload a picture.

Both the bio and the photo are optional.

Displaying your list

Use either the template tag

<?php if (function_exists(‘list_contributors_handler’)) echo list_contributors_handler(); ?>

or the shortcode

[list-contributors]

to display your list of contributors. Beneath each name, picture and bio will be links to all the posts that they have written.

Credit

This plugin was originally developed by me for the Right Respect website.

So, my solution for PDFs was to ignore them. This was working for me until a client needed a way to post legal research/analysis documents as PDFs. It was an absolute necessity that there be a downloadable version of the articles they were writing. There’s great value in having a local copy of a document that no one can change or decide to take down or is unavailable because you’re on a plane.

Preventing Redundancy

Even if PDFs and search engines played well with each other (I hear this is getting better, but why wait on technology people might employ?), you would still be required to enter the exact same information into a computer twice; once for the website and once for the PDF. This is redundant, and I have found a solution.

WordPress + Print.css + PHP + pdfmyurl.com

I created a print.css file for the website (with a little help from A List Apart), that removes everything except the main content formatted in a print-friendly fashion. Using the isset PHP function, I created a condition for seeing that style on the screen:

<?php if ((isset($_GET['print']))) { ?><!-- Checks for the 'print' variable -->	<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/print.css" type="text/css" /><!-- Print stylesheet -->
<?php } else { ?><!-- Normal style settings -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /><!-- Page stylesheet -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/print.css" type="text/css" media="print" /><!-- Print stylesheet -->
<?php } ?>

If you add the “print” variable to the end of your URL, the page uses the print.css stylesheet instead of style.css. To create a link to this page in WordPress, change the link inside the loop from this:

<a href="<?php the_permalink(); ?>">

to this:

<a href="<?php the_permalink(); ?>?print">

Your link inside the loop should look like this now (if you’ve set your permalinks like I have):

http://www.yoursite.com/2010/03/14/myarticle/?print

Now we have the article content, lain out in a print stylesheet, and an automatically generating URL. All we have to do now is send that URL to pdfmyurl.com, and we’re done. They use a very simple URL-based API, which looks like this:

http://pdfmyurl.com/?url=http://www.yoursite.com/2010/03/14/myarticle/?print

To get your WordPress links to function this way, change your link from this:

<a href="<?php the_permalink(); ?>?print">

to this:

<a href="http://pdfmyurl.com/?url=<?php the_permalink(); ?>?print">

That’s it.

Showtime takes the current time and displays the name of whatever show/event you’ve placed in the timeslot. If there’s no show/event, it displays a custom off-air message. You also have the option of displaying the name of the upcoming show/event.

Download

Installation

Install and activate the plugin in the super-easy WordPress fashion to which we’ve all become accustomed. You can then either use the Widget to display the current/upcoming show, or the following template tag:

<?php if (function_exists(’showme_showtime’)) echo showme_showtime(); ?>

To display a your full schedule, broken down into days of the week, you can use the shortcode [showtime-schedule]

Also, be sure to set your timezone city. If you don’t do this first, you’ll have to go back and re-enter all of your timeslots which is a tremendously frustrating waste of time.

Setting your schedule

Once you’ve set your timezone city, you’re ready to start adding items to your schedule. Using the dropboxes and text fields, set your start/end times for a given timeslot, then type in the name you wish to assign it. Be sure to use 24-hour time. Hit Add Showname and Showtime. That’s it; that timeslot and name is now on your schedule.

If you made a mistake in the time, you can delete the timeslot by clicking the “Delete This Timeslot” link helpfully provided next to each entry.

If you made a mistake with the name, you can edit it right there in the schedule. Click the Update Names when you’re done. This will save any and all changes made to the names, so be sure of your changes.

Display Options

Here you can set some options about what Showtime shows your viewers and how it’s displayed. Upcoming Timeslot allows you to toggle whether or not the name and time of the next show/event is displayed underneath the current show/event. The Off-air Message is what is displayed whenever there is no show/event occurring at the moment, or if you’ve hit the Shut It Down button.

The CSS identifies some key elements that you can style to your liking to help fit the look of your site.

Shut it down

If you need to temporarily take your schedule off-line, you can toggle the switch here. In place of your current/upcoming show/event, your Off-air Message will be displayed.

Credits

To clean up the back-end interface, I used the jQuery plugin Tabs, developed by Klaus Hartl. I also bothered Ross Nover with early, inferior versions of this product. His suggestions helped a great deal in making this thing work properly.

That said, please direct questions/praise to carter@outtolunchproductions.com.

When I was asked how difficult it would be to create a live counter on the site that showed the number of minutes that the organization has given to the families it has helped, my first thought was something along the lines of “not very difficult at all.”

I mean, really. How hard could it possibly be? I knew of some simple Javascript codelets that could immediately provide a solution for a ticking clock. But, once I wrote out the actual feature list for the thing I was creating, I noticed some pretty big hurdles.

Here’s what the counter needed to produce:

• The number of minutes that have passed since January 1st of 2000, along with a ticking seconds counter.
• This number must be live, updating on the page constantly.
• Each individual number must be wrapped in its own container, with pictures of specific children behind them.
• Clicking on a number/child will bring up that child’s story.
• Supply an embeddable widget that other people can put on their blogs/MySpace/Facebook pages.

Getting the number of minutes

This was the easiest part of this entire equation: display the number of minutes that have elapsed between now and January 1st, 2000. Since the number of minutes needed to be the same regardless of timezone (this was actually a big deal), I couldn’t use Javascript. So, I wrote this extremely simple PHP script:

date_default_timezone_set('America/Los_Angeles');

echo $diff;


The time() command will always return time in Unix Epoch format, which is the number of seconds that have elapsed since January 1, 1970. The number of seconds between January of 2000 and now is simply the difference between the two variables (on line 6).

Everytime this script loads, it prints a number that looks something like this: 321178160. Originally, I had the script divide by 60 (giving me the number of minutes) and kick that out, but I realized that since I needed the seconds to tick on the page, it would have to load this server-side script every second. This would not have been ideal (actually, this is how the embeddable widget works, but it's only running the script once; it doesn't implement ticking seconds or keep the clock live).

Minutes, not seconds

For performance's sake, I had to keep as much stuff as possible on the client side. The minutes are calculated from the PHP clock script, and then Javascript adds time to it. The seconds are done entirely with Javascript, since the timezone for the seconds is irrelevant.

Parsing the Number

First thing I needed was an AJAX call to grab the number from the clock.php script. That much was easy:
$.ajax({
url: '/clock/counter.php',
success: function(data) {

}
});

Then, I needed to turn that number into minutes and wrap each digit in its own container. But, this number also had to be updated every second, which was accomplished by adding 1 to the number from the PHP script every second and then dividing by 60. Like so:

function maketime(){

}

The wrapem() function is actually a little bit misleading in its name. Really, the wraps are applied to each character when they are split into an array and rejoined in their own spans. What wrapem() does is attach appropriate numbers to their corresponding background image and link.

function wrapem(){
$(".number:nth-child(1)").attr("id","one");
$(".number:nth-child(3)").attr("id","three").wrap('<a href="/2010/02/27/meet-alia" class="clink" />');
$(".number:nth-child(4)").attr("id","four").wrap('<a href="/2010/02/27/meet-anthony-2" class="clink" />');
$(".number:nth-child(5)").attr("id","five").wrap('<a href="/2010/02/27/meet-daniela" class="clink" />');
$(".number:nth-child(7)").attr("id","seven").wrap('<a href="/2010/03/04/meet-noah/" class="clink" />');
$(".number:nth-child(8)").attr("id","eight").wrap('<a href="2010/03/04/meet-robbie/" class="clink" />');
$(".number:nth-child(9)").attr("id","nine").wrap('<a href="/2010/03/04/meet-augustin/" class="clink" />');
$(".number:nth-child(11)").attr("id","eleven");
$(".number:nth-child(12)").attr("id","twelve");

$("#one").css({background:"url(/clock/images/alex.jpg) no-repeat center center"}).wrap('<a href="/2010/02/27/meet-alex-2" class="clink" />');
$("#three").css({background:"url(/clock/images/alia.jpg) no-repeat center center"});
$("#four").css({background:"url(/clock/images/anthony.jpg) no-repeat center center"});
$("#five").css({background:"url(/clock/images/daniela.jpg) no-repeat center center"});
$("#seven").css({background:"url(/clock/images/noah.jpg) no-repeat center center"});
$("#eight").css({background:"url(/clock/images/robbie.jpg) no-repeat center center"});
$("#nine").css({background:"url(/clock/images/augustin.jpg) no-repeat center center"});
}


The Live Link Problem

Originally, I was going to use the Thickbox functionality that I had already loaded for a different section of the page to open the story boxes for the kids. Unfortunately, it didn't work, and it took me a while to figure out why. Essentially, the links weren't part of the DOM when the page loaded; they were created after the clock script had time to run and generate the numbers. In fact, as far as the DOM was concerned, these numbers were completely new every time the maketime() function ran; every single second. After banging my head against the desk for about three hours, I realized that it would be easy to write my own simple lightbox script and use jQuery's live() method to activate them.

$(function(){
$(".clink").live('click', function(){
hrefval = $(this).attr('href');
$.ajax({ url: hrefval, context: $(".entry"), success: function(data){
$("#story").fadeOut('fast');
$("#story").html(data).fadeIn('fast');
}});
return false;
});
$(".close-story").live('click', function(){
$("#story").fadeOut('fast');
return false;
});
});

By using the href attribute, I didn't even have to change the links that the AJAX was grabbing the data from.

Styling the Counter

Using the split() and join() Javascript functions let me wrap each character in a span, but the problem is that I had two commas and a colon (great name for a TV show, BTW) that, in fact, couldn't be set in their own curved box. Luckily, this number will be seven digits long for the next 10 years and change, so I was able to use the nth selector to remove the "number" class from the characters.

I set the background images for the digits using the same method. I'm sure there's a more elegant way to solve this problem, but I had to weigh how much time I had left to spend on it vs. how much the end user would benefit from some slightly improved code.

Final Thoughts

I wound up learning a lot about JSON and XSS (cross-server scripting) which wound up being irrelevant to the big counter on the home page, but vital to the embeddable one.

Also, I found out that you can embed stylesheets in Javascripts. Like so:

function loadJSON(url) {
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = url;
headID.appendChild(newScript);

loadJSON('http://andreriveroflife.org/clock/counter.php?json=?');