• April 1st, 2008
• Filed in
  • Blog
  • Shameless Promotion
  • Work

Recently I blogged about Controlling Your Online Persona which was the inspiration for this method I’m employing for aggregating my tweets across multiple Twitter accounts.

Recently I’ve been using Twitter more and more. What was initially an annoyance of a service (first time I saw a tweet about having to take a deuce I checked out) has become my office water cooler from my virtual home office where I spend my days toiling away working on the pipes of the interwebs.

Initially when I signed up for Twitter back in March of 2007 I chose a different moniker “ky“ because the big thing about Twitter was that you could use it on your cell with SMS. I figured if people were going to txt me via twitter that “ky” would be a hell of a lot easier to type than “somedirection” so I went with it.

I think Twitter as a service is starting to catch on - even Obama has 2 channels: BarackObama and ObamaNews. Seeing that use of twitter was probably the first time I thought - hey Twitter is mainstream. Obama is using technology in his campaign exceptionally well I might add. But I digress..

I realized recently that I don’t want to be boxed into the “ky” username. It’s nice to have and people recognize me (once they see my avatar) but it’s not me, it’s not my brand. So I went about changing this and stumbled upon the realization that Twitter actually handles for multiple Twitter personas quite nicely.

The Primary User Method on Twitter

1. You need a unique email address for each name
2. Choose 1 handle as your master account from which you’ll send all updates. For me I’m going to stick with ky because it’s what I started with and I have a handful of followers.
3. Create your other usernames. For my purposes I wanted to make sure I wouldn’t lose somedirection, nor did I want one of my clones to snatch KyleBradsaw from my grasp.
4. Now here’s how you can funnel people into your primary username. For myself I have just 1 tweet for both users somedirection and KyleBradshaw “DBA @ky”. This will give the surfer a link directly to my primary account while also letting them know that the account they’re looking at isn’t where I update.
5. Now ONLY follow your primary account from your alternate(s). Every time you twitter under your primary account and some one visits one of your alternate handles, when they look under the “With Others” tab they will see all of your primary holders’ tweets!

Each user can have it’s own style. I like having a couple of different looks across all of my users.

Initially I was thinking I’d have to kill off ky goodnesss for somedirection to keep my brand in tact, but this is a suitable workaround and I can have the best of both worlds. While I was at it I also grabbed KyleBradshaw for good measure. If Twitter becomes popular like myspace or gmail I’ll be glad I did.

Popularity: 8% [?]

• March 24th, 2008
• Filed in
  • Web Development
  • Work

There are some site behaviors that are primed for progressive enhancement in this example we’ll look at a ratings system and how easy it is to transform a simple form to make it more visually appealing and also improve usability. For a simple rating system we want a radio button list (1-10) and a ‘vote’ button to submit our rating. The html would look something like this:

<form id="rate_this" action="/process/rating/" method="post">
    <div id="rating_scores">
        <label><input type="radio" value="1" name="rating" />1</label>
        <label><input type="radio" value="2" name="rating" />2</label>
        <label><input type="radio" value="3" name="rating" />3</label>
        <label><input type="radio" value="4" name="rating" />4</label>
        <label><input type="radio" value="5" name="rating" />5</label>
        <label><input type="radio" value="6" name="rating" />6</label>
        <label><input type="radio" value="7" name="rating" />7</label>
        <label><input type="radio" value="8" name="rating" />8</label>
        <label><input type="radio" value="9" name="rating" />9</label>
        <label><input type="radio" value="10" name="rating" />10</label>
        <input type="submit" value="Vote" />
    </div>
</form>

Which gives us this:

A simple radio list and a simple button to submit the form.

How can we make this 100x’s better? Simply clicking on a number to submit the form automagically would be the easiest and most friendly user interaction. So we lean on jQuery to provide progressive enhancement. Using these methods we can create a rating behavior infinitely better and more appealing like this:

jQuery

// hides the vote button
  $("form#ratethis input#votebutton”).hide();


// hides all radio buttons
    $(”form#rate_this input[@type=radio]”).hide();

// format the labels to look clickable
    $(”form#ratethis label”).addClass(”contestselector”);

// change the formatting of the label when it is hovered over
// by assigning a different class
    $(”label.selector, #ratingscores a”).hover(function(){ 
      $(this).addClass(”selectorh”);
      }, function() {
      $(this).removeClass(”selector_h”);

    });

// submit the form when a label is clicked
    $(”form#ratethis label”).click(function() {
      $(this).find(”input”).attr(”checked”,”checked”);
      $(”input#votebutton”).trigger(’click’);
    });
}

CSS

#ratingscores {
margin: 20px 0 10px;
border: 1px solid #cacaca;
background-image: url(”/images/ratingscoresbck.gif”);
background-position: 0% 45%;
background-repeat: no-repeat;
background-color: #efefef;
padding: 5px 0;
padding-left: 130px;
}
.contestselector {
color: #000;
text-transform: uppercase;
cursor: pointer;
font-size: 167%;
font-weight:bold;
padding: 10px 13px 9px;
margin: 1px;
}
.contestselectorh {
background: #c00;
border: 1px solid #a00;
background: #00c705;
border: 1px solid #008004;
color: #fff !important;
text-decoration: none !important;
margin: 0px;
}

Why hide all the radio buttons? Aside from the fact that they’re ugly we don’t need to worry about them because we’re using <label&rt;s effectively.

The labels are surrounding the buttons with so they will still get focus

<label><input type="radio" value="1" name="rating" />1</label>

We let the user know that the numbered hot spots are indeed buttons by applying a mouseover behavior.

We submit the form when a label is clicked - not when the Vote Now button is pressed.

If Javascript was not available or the jQuery rules were not applied then the html would perfectly degrade and would be entirely usable otherwise.

For an example of this method in action venture over to the Costumzee Costume Contest.

Popularity: 12% [?]