I love twitter, and much of the time the group stream of consciousness that is displayed is great, but… there are times when following a conversation can be a little tough.

I have found myself wishing that there were a way to sort it into easier to follow pieces.

So i figured that would be a good place to start. What I ended up with is TwitterThreads.com.

TwitterThreads.com

The idea here is to connect the dots of the @replies in your twitter stream.

(click)

Above is a screenshot of a threaded conversation I was having with Josh Bancroft this morning that illustrates fairly well what that looks like.

If you’ve somehow never heard of Twitter, check it out.

Twitter rocks.

Cheers,

Matt Beck
Partner, CouldBe Studios

Taste Chocolate

Taste Chocolate is a Portland, OR (local for us) company that runs high-end chocolate tastings, similar to wine tastings; and of course sells the chocolates as well. If you are in the Portland area, check it out. It’s a lot of fun and in addition to being a mouth watering experience, it’ll change the way you think of chocolate.

We had a blast with this project, it was a complete identity, from logo design, cards and promotional materials to website to press-kits. Much of the photography used throughout was ours as well, taken at live tastings. This project forced us to really think about how we can use shopify to do things that it doesn’t natively do. We’ve got tag-based product recommendations here for example, which might not seem like a big deal, but gave us a warm-fuzzy.

This question came up recently, so here is a (fairly) simple solution for it that doesn’t rely on images.

We’ll be using a simple text-replacement technique (css), with a little bit of straightforward javascript and a set of radio buttons to achieve the desired effect.

Here is the finished product.

»example source page

first lets take a look at the markup we’ll be using for this. Since the desired effect is that of a radio button set, we’ll start there.

<form name="myform">
   <div class="radios" id="set1">
      <input type="radio" class="hidden" name="test" id="test1" value="SM">
      <label for="test1" onClick="setChecked(this, set1);">SM</label>

      <input type="radio" class="hidden" name="test" id="test2" value="M">
      <label for="test2" onClick="setChecked(this, set1);">M</label>

      <input type="radio" class="hidden" name="test" id="test3" value="L" checked>
      <label for="test3" onClick="setChecked(this, set1);" class="checked">L</label>

      <input type="radio" class="hidden" name="test" id="test4" value="XL">
      <label for="test4" onClick="setChecked(this, set1);">XL</label>

      <input type="radio" class="hidden" name="test" id="test5" value="2X">
      <label for="test5" onClick="setChecked(this, set1);">2X</label>
   </div>
</form>

Here is a fairly simple bit of our form. For this example, all you really need is a radio set with labels. We’re wrapping the radio set in a div with a class of ‘radios’ just to make sure that we don’t trample over any other styles in our CSS later on. We’ll also give this an ID so that we can adjust the className of these elements without screwing up other labels you might have in your form

Note: It’s important that each button has an ID so that the label->for relationship will work correctly.

Most of the activity is going to take place on the labels, since we’re going to hide the actual radio controls. We’ll use the onClick event to trigger our little bit of javascript, which will allow us to change the style of the label to reflect that it has been clicked.

Let’s take a look at that:

function setChecked(label, container)
	{
	/* clear previous checked status */
	var labels=container.getElementsByTagName('label');
	for(i=0; i<labels.length; i++)
		{
		labels[i].className="unchecked";
		}

	/* set current label to checked */
	label.className="checked";
	}

Pretty simple, right? All we’re doing is looping over the labels in the container and resetting them all to a default class before we set the current label to ‘checked’.

Last, but not least there is some CSS that we’ll need to use to pull this all together.

.radios .hidden{
	position:absolute;
	left:-9999px;
	}

This is important, we’re using a simple text-replacement to hide the radio buttons without rendering them inert, since we want to be able to capture the value we’ve chosen.

.radios .checked{
	color:#fc0;
	background:#333;
	}
.radios .unchecked{
	color:#000;
	background:#fff;
	}
.radios label{
	border:1px solid #555;
	width:20px;
	height:20px;
	font-size:10px;
	line-height:20px;
	font-family:sans-serif;
	text-align:center;
	background:#fff;
	display:block;
	position:relative;
	float:left;
	margin-right:1px;
	}

The rest of that is just styling to make them nice looking little boxes.

Well, we finally bit the bullet and took a stab at it.

For our first widget, we’ve connected the new Marketplace on Shopify.com directly to you dashboard. Check it out here
.

We’re pretty happy with the results and we hope others will use it too.

Let us know what you think would ya?

Cheers!

Matt Beck
Partner
CouldBe Studios

Now can we all move on from the Web 2.0 thing? Plz and thank you.

Besides, I hear Web 3.0 is going to have much better colors.

Things have changed a lot since those days. The internet is no longer the domain of thick glasses and pocket protectors (I believe they call them “emo kids” now). Everyone is online, and they want you to know about it.

Friendster and MySpace jumped on the social networking bandwagon early, sure, but then del.icio.us came along and made social bookmarking ubiquitous. Flickr! did the same for photo sharing. Traveling? City Guides are so last year. Check with your friends at TripHub or TravBuddy for the up-to-date community traveling recs, complete with ratings, custom blogs and forums. (These aren’t endorsements, people; they’re examples.) Need a tutorial? Don’t just Google for it; check Pixel Groovy to see what’s gotten the most grooves. You can even share tippling recommendations on Cork’d, a new site which promises to do for wine what Flickr! did for photos.

Social web services are evolving. We no longer just want to share; we want to take credit for our contributions. We’re inviting friends and family to be part of our online community and integrating feeds of our latest recommendations into our blogs (because everyone has a blog) and letting our opinions be known about everything we can. Conversely, we’re seeking out the opinions of others before we commit to a purchase; from megasites like Amazon and Target to tiny internet boutiques, ratings and reviews are playing an increasingly crucial part in closing a sale.

The next generation of business websites needs to take the socialization of the web into account if it wants to be relevant. It’s no longer enough to include a Better Business Bureau link on an e-commerce site to let people know the business is legit; customers want and require a friendly, easy to use ratings system as well as a place to add their own reviews. An old-fashioned links page doesn’t cut it anymore; dynamic link lists say a lot more about a company’s interests and affiliations. And the sought-after linkback isn’t going to come from a modest text request; we want buttons, we want clever, gimmicky mini-apps, we want graphics and a catch-phrase (see Pixel Groovy’s “Groove This” or Ma.gnolia’s “Snap Mark” as examples).

Most of all, we want easy. Instant gratification is the hook that gets people interested; give us a quick, simple way to interact with your site and people will at least give it a try, whether it’s a subscription button or a clever bookmark or a slick product demo. It’s the same principle as kindergarten; be friendly, and people will like you. No one wants to play with the site that doesn’t play back.

Next week: Blogging, and why it’s good for business. Kind of.