Ennui Design

The JavaScript Switcharoo

I hate form labels.

There. I said it.

I'm opposed to the idea of forcing a little snippet of text to line up next to each form element so that we know what's going on with it. It's difficult, it takes up extra space, and it tends to make something like a newsletter input eat up too much screen real estate.

However, it would be rude of me to just assume that everyone knows what the hell I'm asking for when I slap a couple inputs in the top right of a site.

To get around this issue, I wrote a quick JavaScript function to make label-less forms a possibility without losing that easy-to-identify quality that labels provide.

View the Demo

Create the Inputs

Our first step is to create a quick HTML form.

<form action="processpage.php" method="post" id="form_test">
  <input type="text" value="Name" />
  <input type="text" value="Email" />
  <input type="submit" value="Join the Newsletter!" />
</form>

To avoid using labels, I've included a description of the input inside each input. However, in doing so, I've created an inconvenience for the user: they now have to delete the text in the input in order to enter information. This is a definite usability issue, and we need to correct it.

That's where our JavaScript comes in:

function formtext(input,initval) {
  if (input.value == initval) {
    input.value = "";
    input.style.color = "#000";
  }
}

This function requires two parameters: the input we're dealing with (input), and the label surrogate of said input (initval). It then checks to see if the value of the input matches the initial value, and if so, changes the value to blank and sets the color (which was previously a light grey) to black.

This allows us to avoid labels and still provide information about the form we're presenting without creating additional steps for our users to complete.

Worst-Case Scenarios

What if a user selects the field, then clicks away? Should the field remain blank?

We can avoid blank inputs by writing a second function to check for a blank form.

function formout(input,initval) {

  if ( input.value == '' || input.value == initval ) {
    input.style.color = "#AAA";
    input.value = initval;
  }
}

If our input is blank, or if somehow the initial value was entered into the field, we'll set the field to its initial value and change the color back to a light grey, thus avoiding a blank input.

Abstraction, Anyone?

In order to keep our code clean and easy to use, we're going to add an abstraction layer of JavaScript, rather than slapping it inline with our HTML. This is accomplished by placing the two functions above into a file called 'form.js' and inserting the following code along with it:

if( document.forms ) {
  inputs = document.forms[0].getElementsByTagName("input");

  nameInput = inputs[0];
  nameInput.onfocus = function() { formtext(this,"Name"); }
  nameInput.onblur = function() { formout(this,"Name"); }

  emailInput = inputs[1];

  emailInput.onfocus = function() { formtext(this,"Email"); }
  emailInput.onblur = function() { formout(this,"Email"); }
}

This code checks to make sure there is a form, then grabs the first form in your HTML and applies our two functions to the inputs to coincide with events. In this case, we'll run formtext() when a user focuses on our input, and formout() when they click or tab away from the input.

And that's really all there is to it! This is a great way to get away from the clutter of form labels without losing usability, and since we've used an abstraction layer, it will degrade gracefully for users that don't have JavaScript enabled.

View the Demo

(To read and post comments for this entry, visit ennuidesign.com)

What I've Learned

First and foremost, the Discovery Channel runs some crazy shit after dark.

--

As an early Christmas gift to myself, I stopped in at Best Buy today and ordered a Cintiq 12WX. It should be here on Friday, and I'm giddy. I've been drooling over this thing since August, and I cannot wait to take it for a test drive.

--

Ford managed to impress me with their new ad campaign for the Ford F150.

I always enjoy video with a heavy emphasis on typography, and it's nice to see a mainstream ad featuring wordplay.

--

The count() feature in CSS is frustrating unless you get a handle on its scope (which is extremely limited). Pretty much, if you don't have everything you're counting in the same container, you're out of luck and you'll need to use an alternative method of numbering.

--

PDF format is a pain in the ass if you don't want browsers to try and open the file inside the browser instead of downloading it. The trick is to set a header to handle PDFs as application/octet-stream instead of the default application/pdf. If you're able to use .htaccess files on your server, the easiest way to do this is to include the following code inside:

<Files *.pdf> ForceType application/octet-stream Header set Content-Disposition attachment Header set Content-Transfer-Encoding binary </Files>

--

My father, left unattended, is susceptible to bouts of mad scientist-ism. Recent evidence includes his experiments with a miniature bio-mass furnace.

I arrived home for Thanksgiving to find him, covered in ash and looking disheveled, holding tin-snips and a charred, soup-can-looking hunk of metal, yelling something about going off the grid.

I was invited to help him solve some engineering issues with his "burn can" design (it turns out my design for a self-stirring burn doesn't work).

(To read and post comments for this entry, visit ennuidesign.com)

New Site Launch: Lou Schuler

Lou Schuler is kind of a big deal.

He's written, among others, The New Rules of Lifting for Women, The New Rules of Lifting, and The Book of Muscle.

Currently, he's the editorial director of Testosterone (www.t-nation.com) and the former fitness editor of Men's Health (www.menshealth.com). In his career he's won multiple awards, including several Maggie Awards and the National Magazine Award.

I'm flattered to be the guy he asked to bring his website up-to-date, and even more excited to get this site in the public eye.

This site marked a new phase in my web design: I've been learning all sorts of new things that make sites run just a little cleaner, code read a little easier, and my life just a tad better.

Check my portfolio for some technical details.

(To read and post comments for this entry, visit ennuidesign.com)

Are You Making Any Sense?

"Rewind what you just said there, and look at it through the eyes of a non-geek."

My friend said this to me in jest when I got way too excited about the wine project over on OkayDave.com, but it got me thinking: does anybody know what the hell I'm talking about when I get going on a topic?

My main interest is my clients, and making sure that they understand what I'm talking about; it doesn't do much good for anyone if I'm just babbling in Geekanese and the client is nodding with a blank stare.

Additionally, and far worse, is the disconnect between developers and end-users (see?! JARGON!) when turning over the reins of an application. What seems natural to a power-geek may feel awkward and foreign to the average user, and we, as developers, are responsible for putting ourselves in the shoes of the user.

To keep myself from completely befuddling my clients, I devised a rule of thumb to guide both my conversations and applications:

Would my mom get this?

Ever versatile, my mother has become one of my most valuable development resources. When I'm getting close to done with an app, I'll call my mom and ask if she's near a computer. If she has the time, I direct her to the beta location of the project and turn her loose without any hints or instructions. If she can't figure out what to do, I know I need to reevaluate how my app presents itself.

Similarly, in conversation, I try to think like I'm talking to my mom. That keeps my tone conversational, rather than instructive, and encourages me to steer away from phrases such as "server-side versus client-side implementation."

Communication is key. How do you make sure you're conveying your ideas clearly?

(To read and post comments for this entry, visit ennuidesign.com)

New Site Launch: Built For Show

After a few all-nighters, I'm happy to announce the launch of www.BuiltForShow.com!

Built For Show is a book set to hit shelves in late November, written by my long time friend and not-so-long-time client, Nate Green. It's aimed at 18 to 35 year old men interested in becoming more attractive to the fairer sex.

The website is a fairly straightforward effort; we opted to avoid bells and whistles in favor of driving traffic to Nate's parent site, www.TheNateGreenExperience.com, which features his blog and acts as his home base on the Internet.

Also launched today is a revamp of The Nate Green Experience blog, as well as a light redesign of the site's sidebar.

A more in-depth summary of BuiltForShow.com will be posted in my portfolio tomorrow, as well as an update to TheNateGreenExperience.com's entry.

Let me know what you think in the comments!

(To read and post comments for this entry, visit ennuidesign.com)

Reading RSS with PHP

The Problem
The Internet seems to be getting easier everyday. With sites like Myspace, Flickr, YouTube, and Twitter, you can essentially create a full-on interactive web experience for free and with no knowledge of web design. This is great, but it limits your creativity, and it also requires your readers to remember multiple separate URLs.

On the flipside, you could reverse engineer all of these tools and create your own versions of them for use on your personal website, creating the same immersive user experience you get from using social tools, but that's a good deal of time and effort. The learning experience of building such tools is great, but we don't always have hundreds of hours to dedicate to rebuilding Flickr's robust photo management. Besides, doesn't it seem a little silly to reinvent the wheel?

So, what we're hoping for is a way to get the best of both worlds: how can we utilize the power of Flickr on our own website without needing to dedicate a great deal of time to solving the problem?

The Solution
One solution is to use RSS feeds to grab the content off of our various social media sites (in this example, we'll use Flickr). This way, we don't have to create any content at all. We simply need to grab the content from our account, figure out how to read it right into our website, and then display it in such a way that it will mesh with the rest of our site's design.

In this tutorial, we'll build a PHP class to load and parse a Flickr RSS feed, isolate the pieces of information we need, and output formatted XHTML to the browser. When we're done, it should look like this demo Flickr module.

Necessary Tools and Skills
I'm assuming for the purposes of this tutorial that you have a Flickr account, a basic understanding of PHP 5, and a good grasp on XHTML and CSS. You'll also need a server that supports PHP 5.

Collect the Pieces
Our first step is to find the RSS feed for our Flickr page. The feed is located at the bottom of the main photostream, and it looks like this:

You'll more than likely want to use the "Latest" option. After you click it, you'll get your browsers default RSS feed display, probably offering options to subscribe using a number of services. This is not what we're worried about, though. We want the URL of this page, which should look something like this:

http://api.flickr.com/services/feeds/photos_public.gne?id=22352410@N07&lang=en-us&format=rss_200

In a moment we'll use this URL to load our Flickr page into our website. But first, we need to tell our site how to handle this information.

Creating the Class
We start by creating a file named flickr.php and declaring the class flickr to contain all of our code:

<?php
  class flickr {

  }
?>

Now that we have our class, we need to declare all of the variables we're going to need. Because this is a pretty simple class, we only need one:

  var $feed;

The variable $feed will hold the URL of the Flickr page we're loading.

Next, we'll create a constructor for the class. This is the function that runs when the class is first instantiated. We'll use that to assign the feed URL to the class instance to allow our code to load the proper feed.

  function flickr($feed) {
    $this->feed = $feed;
  }

Now we have a class that has the address of our Flickr feed. Pretty simple so far, right?

Getting Our Information from the Feed
Here's where it starts getting a little tricky. Now we need to load that URL and parse it to extract the relevant information. To do this, we'll create a new function, parse:

  function parse() {
    $rss = simplexml_load_file($this->feed);
    $photodisp = array();
    foreach ($rss->channel->item as $item) {
      $link   = (string) $item->link; // Link to this photo
      $title = (string) $item->title; // Title of this photo
      $media  = $item->children('http://search.yahoo.com/mrss/');
      $thumb  = $media->thumbnail->attributes();
      $url    = (string) $thumb['url']; // URL of the thumbnail
      $width  = (string) $thumb['width']; // Width of the thumbnail
      $height = (string) $thumb['height']; // Height of the thumbnail

      $photodisp[] = <<<________________EOD

          <div class="flickr_photo">
            <a href="{$link}">
              <img src="{$url}"
                width="{$width}"
                height="{$height}"
                title="{$title}"
                alt="{$title}"
                style="border:0;" />
            </a>
          </div>
________________EOD;
    }

    return $photodisp;
  }

In order to pull down the information from this feed, we'll take advantage of the SimpleXML extension that was introduced in the release of PHP 5. To read more in-depth about this useful tool, there is a great article about SimpleXML on the Zend network.

In line 02, we load the feed from Flickr using the SimpleXML extension and place it in the variable $rss. This allows us to then extract data from the feed.

Line 03 creates the variable $photodisp, which is an array to hold each photo as we pull it out of the database.

In line 04, we start a foreach loop to break the feed into individual photos for processing.

Lines 05-11 load pieces of information from the feed into variable for use as we see fit. For the purposes of this class, we grab the URL for the photo's display page, the name of the photo, the location of the thumbnail image, and the thumbnail's width and height.

(Note: lines 07 and 08 load variables that we don't use for display; this is because the Flickr feed uses XML namespaces. These are a useful, albeit confusing, XML convention that helps prevent ambiguity of separate elements for easier reading. Our code is accessing the namespace contained in http://search.yahoo.com/mrss/ and identifying the thumbnail's URL, width, and height.)

Finally, in lines 14-26, we use the heredoc syntax to produce a formatted string of HTML that not only works well with CSS, but also looks great as source code (one of my pet peeves is hard-to-read source HTML)!

Each photo is stored in the array $photodisp for use in our next step: formatting for output.

Format Your Photos for Output
Now that we have all of the photos stored in an array, we set up a new function to create a web-ready block of HTML for displaying all of your photos.

  function display($numrows=6,$head="Photos on Flickr") {
    $photodisp = $this->parse();
    $i = 0;
    $thumbs = <<<____________EOD

      
        <div class="ennui_widget_head">
          {$head}
        </div>
        <div class="ennui_widget">
____________EOD;
    while ( $i < $numrows ) {
      $thumbs .= $photodisp[$i];
      $i++;
    }
    $trim = str_replace('http://api.flickr.com/services/feeds/photos_public.gne?id=', '',$this->feed);
    $user = str_replace('&lang=en-us&format=rss_200','',$trim);
    $thumbs .= <<<____________EOD

          <div class="ennui_widget_footer">
            <span>
              <a href="http://www.flickr.com/photos/{$user}/"
                title="http://www.flickr.com/photos/{$user}/">
                View All Photos on Flickr
              </a>
            </span>
          </div>
        </div>
      
____________EOD;
    return $thumbs;
  }

Let's break that down. First, we'll be passing the variable $numrows when we call this function. This is how many photos we're going to display on the site. The default value is 6, which works well in 1, 2, and 3 column displays, making it a safe bet.

Then in line 02, we run the parse function we just created. This loads the array into the variable we'll call $photodisp for ease of use. Line 03 sets the variable $i to zero. We'll use this for a while loop to build our content.

Lines 04-10 start our output (using the heredoc syntax again). We're building the header of our display, as well as starting the div that will contain the photos.

The meat of this function happens in lines 11-14. Here, we are essentially telling the function, "while the number of photos we've grabbed is less than the number we're allowed to display, grab the next photo from the array." And, since we already formatted the output in the parse function, we don't have to do anything else with it!

In lines 17 and 18, we take the feed URL and trim out just the user name (in my Flickr feed, this user name is "22352410@N07"). This way, we can use it to send a site visitor to your Flickr photostream's homepage, eliminating any further data input or reliance on a visitor's memory of an additional URL.

Lines 19-27 finish up the HTML for the display, and then line 29 returns our output.

That's it! Now all we have to do is call the class and let 'er rip!

Implementing the Class
Our last step is to place the code on our homepage that will call this class and produce our new Flickr display!

<?php
  include('_class/flickr.php');
  $flickr = new flickr('http://api.flickr.com/services/feeds/photos_public.gne?id=22352410@N07&lang=en-us&format=rss_200');
  echo $flickr->display(8,"Ennui on Flickr");
?>

Wrap-Up
We have now successfully created a PHP class that loads, parses, and displays a Flickr user's photostream feed! With a little CSS styling and proper placement, you can now seamlessly integrate your Flickr stream into your own website.

Below, you can download the complete files used to create the fully functional Flickr RSS parsing demo.

Download the files for this tutorial (ZIP Archive, 2KB)

Enjoy! Please leave any questions and suggestions in the comments, as well as links to your site with the Flickr RSS parser in place!

(To read and post comments for this entry, visit ennuidesign.com)

Sleep Better at Night

I am a light sleeper. I wake up to the sound of my cell phone vibrating, to the sound of a car door closing, to the sound of my downstairs neighbor smoking a cigarette and talking on his cell phone beneath my window. While this is annoying, especially because I live in an old building with paper-thin walls, it's never really been a problem for me because I can generally fall asleep quickly.

Lately, however, I've been having a really hard time falling asleep, and I wasn't sure why until last night, when I was staring at my ceiling, listening to the wind blowing my bedroom door against the door frame softly, I realized something: I cannot sleep when I'm stressed.

Now, let's all take a moment to appreciate the Duh! factor of that statement. You done? Okay, now pay attention.

I know that stress is a major contributor to insomnia, and that there are probably hundreds of articles and blogs written about it, but that's not what I'm worried about. What worries me is that I went sleepless for almost two weeks before I even realized that I was even stressed in the first place.

I have a theory, and among my friends it's been holding pretty true: you can reduce your stress enormously by simply naming the factors in your life that are stressing you out.

I'm relatively convinced that stress comes not from having too many deadlines or from the hectic nature of our lives, but rather from the feeling of dread that springs from feeling that things in our lives are out of control and that we have no idea what's going on. It's that feeling of losing control that is freaking us out, not the workload, personal problems, or lack of time.

For example, right now I'm stressed out because I'm working a pretty steady forty to forty-five hours a week at a day job, working on four freelance projects, interviewing with a few companies for a higher-paying, more fulfilling day job, and trying to start a band, all while attempting to keep my personal life (i.e. getting to the gym, cooking meals, cleaning my apartment, grocery shopping, etc.) in some kind of flow. That's a lot of balls to keep in the air, and I've never been great at multi-tasking. So I've felt really stressed; I worry that I don't have enough free time to keep up with my freelance projects, but I'm scared that I can't afford to lose my day job until I have more freelance work; I'm terrified that I'm going to to end up half-assing my new musical endeavors because I'm "too busy" to put effort into it; I haven't been grocery shopping in two and a half weeks, and I missed a couple workouts, so I've been feeling like I'm gaining weight and falling back to my old, bad nutritional habits.

My last couple weeks have been permeated with that gut-wrenching feeling of being late for work, and I barely noticed it because I was making myself so frantic. I lost sleep, which left me feeling groggy and actually detracted from my productivity, resulting in more panic and, therefore, less sleep.

So how do we break the cycle?

For starters, I had to sit down and list everything that I had going on. If you look above, it looks like a lot, but when I list it, it gets pretty simple:

1. Full-Time Day Job (40-45hrs weekly)
2. Freelance Work (10-20hrs weekly)
3. Band Practice (2-4hrs weekly)
4. Job-Hunting (<1hr weekly)
5. Cooking, Cleaning, Working Out, etc. (7-8hrs weekly)

So, I'm looking at needing about 78 hours a week, at most, to accomplish everything I feel I need to accomplish. If I'm sleeping 8 hours a night, that means that in the average week I have 112 hours of productive time (168 hours a week - 56 hours of sleep a week = 112 waking hours). That means that I have 34 hours a week to burn before I even start wasting the time I need to keep up with my life. Add in a couple dinners with friends and a movie, and I've still got an entire day to waste, all while getting a full night's sleep.

Knowing that you've got the time won't make you any better at time management, and it certainly won't take care of your responsibilities for you, but the fact of the matter is, there's plenty of time in the week. And just realizing that you're not spread as thin as you may have thought could be just the comforting thought to help you drift off to sleep easily.

Have you had similar experiences? How do you keep yourself sane with a heavy load of responsibility? Let me know in the comments!

(To read and post comments for this entry, visit ennuidesign.com)

You Should Sweat the Small Stuff

I work two jobs: I work as a freelance web designer and software programmer in the evenings and on weekends, and to make sure I'm making ends meet, I keep a second full-time job, which I don't hate, but I don't particularly enjoy, either.

As you can imagine, the hours have a tendency to run long, and I find weeks slipping away without so much as a single memory outside of work, the gym, and my apartment. And when I had a live-in girlfriend, my time was even more thinly spread, which left me going to sleep every night an hour or two later than I'd wanted to and waking up feeling like I'd spent my whole REM cycle in a dead sprint.

Something had to change, but I didn't really know how to fix it. I thought my options were to quit the freelance work, which I really enjoy and which pays well (when I have a contract), or to quit the day job, which I don't really want, but which would mean I might not be able to make rent and still afford other things I need, such as, you know . . . food.

I felt stuck.

But then I found the secret, and started taking my time back. You know what I did to save my sanity? I started doing the dishes.

Sounds crazy, right?

My epiphany was this: I'm not really that short on time. Rather, I'm prone to let a couple dozen three-minute projects ball up into that boulder that chases Indiana Jones. I'll come home from my day job and think about how I need to clean my apartment, do the dishes, write an email, do laundry, check the mail, and any number of other menial tasks that I need to accomplish.

Then, instead of ignoring them and working, I just sit down and spiral out of control on YouTube until it's time to go to bed, and by then I've not only stressed myself out because I didn't get any freelance work done, but also because I didn't get any of those menial tasks that were originally stressing me out done, either.

The worst part about it is that I timed myself cleaning my apartment, checking the mail, cooking dinner, and doing my dishes. It took me an hour. Total. As in, to do all of it.

Things that take longer, things like grocery shopping, preparing meals for the week, or doing laundry, I found, can be grouped into one four-hour block on a Sunday.

Once I realized that, I had a good, hard look in the mirror and said to myself, "Where the fuck does all my time go?!"

And then I made the decision to fix it. So now, I come home from my day job or the gym, put on some music, and then I do the dishes, straighten my apartment, and take care of any bills, mail, email, or other obligations that could otherwise stress me out if not dealt with. This process, when done regularly, will only consume about twenty minutes immediately after I get home, allowing me to then concentrate on things that are really important, even if all that means is being able to really, truly relax for once.

I had this epiphany about a month or two ago, and since then I've actually found the time to be bored. I've slept in, I've spent time doing nothing with friends - I even found the time to watch the entire first season of Heroes.

I've also successfully doubled my freelance income, and I'm receiving leads on new clients at nearly three times the rate I was six months ago. Most of that comes from my increased productivity, now that I can sit down and work instead of just clicking around my computer and wishing my projects would somehow code themselves.

So, yeah; sweat the small stuff. Get it the hell out of your way so you can do the shit that's really important, like beating up on children.

How do you keep your free time free?

Let me know in the comments!

This blog originally ran on March 21st, 2008, when I guest posted on Nate Green's blog.

(To read and post comments for this entry, visit ennuidesign.com)