To make my life a little easier, starting today I’ll be only posting over at www.polymathworkshop.com/shoptalk.  I’ve already begun the process of transferring some of the better, more useful posts I’ve done on Poplicola over there.  This blog will cease to exist in a few weeks.  If you liked the content here, and found it useful, feel free to drop in on Shoptalk and see some of the useful things we have to say there.

Thanks!  Jay

This probably seems like a ridiculous post, but the experience I had at Gas City today was almost comical.  After I swiped my credit card, I went through a Monty Python-esque set of bridge crossing questions before I was able to even select the grade of gas I wanted.  The questions:

Do you have a gold card? (Yes/No) No.

Would you like a gold card? (Yes/No) No.

Would you like a car wash? (Yes/No) No.

Would you like a receipt? (Yes/No) No.

What is your Zip code? XXXXX

This is a perfect example of a company that just doesn’t get it.  You don’t make the customer jump through hoops before they buy your product; it’s annoying, and makes them think twice about using you again.  Here’s a few suggestions that cut down the questions, and places the unnecessary ones after the transaction:

1) Receipt and car wash questions don’t need to be done before I select my gasoline. Maybe there’s some research out there that shows that people buy more car washes if they have to answer the question, but it’s just annoying.  Put these questions after I make my purchase, and if I don’t answer them, then I obviously don’t care.

2) Trying to sell me your credit card at the pump was a put-off, but if you have to ask a customer to get a gold card at the pump, and it can’t be done after the transaction, then why not condense the two questions into one?  Would you like a gold card? (Yes/Already Have One) or (Yes/Already Do) or (Yes/No).

3) Don’t ask for my Zip.  I honestly don’t see how this protects my credit card, as my name’s on it and my information is freely available online.  You’re just wasting my time.

Now you have a transaction that goes like this:

Would you like a gold card? (Yes/No)

I buy my gas

Would you like a car wash? (Yes/No)

Would you like a receipt? (Yes/No)

Transaction takes less time, customer does not become frustrated, leaves happier, and comes back again because of the good experience.

This is a question I’ve been asking myself a lot lately.  I did a podcast interview on Evadot today for Hackerspaces in Space with my friend Greg.  During the interview the host, Michael Doornbos, asked us this question: “what is a hackerspace?”  We gave Michael several half-answers about what we do at a hackerspace, but in the end, came up a little short of a real explanation.

The problem, I think, is that we were trying to explain what hackerspaces do, when we should have been talking about the people who join hackerspaces.  That is, hackerspaces are defined not by what they do, but by the people they are comprised of and the ideals they embody.  I’d like to borrow some language from the free culture movement:

A free culture is one where all members are free to participate in its transmission and evolution, without artificial limits on who can participate or in what way. The free culture movement seeks to develop this culture by promoting four things:

• creativity and innovation;
• communication and free expression;
• public access to knowledge;
• and citizens’ civil liberties.

I think that’s pretty spot on.  Hackerspaces are communities of people who seek ownership of their culture through creation.  The key is, when someone asks you what sort of things a hackerspace builds, the answer is basically: anything.  We build anything.  The idea is to build, and in doing so, to take back a little piece of culture from McDonalds or Walmart every time.  How refreshing, especially in a world of credit cards, the “toss it and buy a new one when it’s broken” attitude, and mass production.

I wrote a :CueCat decrypter for Workshop 88 based on the following scheme:

You should check it out here, where I’ve also included the process.php file for download.

I’ll be working on additional features in the future, including product listing and price comparisons.

That I went to Robinson’s in Oak Park and had their pulled pork. I’d give it a 5/10

Posted via web from Jay’s Posterous

jQuery SerialScroll is an excellent tool by Ariel Flesler that allows you to “animate any series of elements, by sequentially scrolling them.”  In other words, it allows you to do stuff like create slick newsreels and slideshows on your website.  I’ve created a short, comprehensive tutorial on how to create a simple, three tab scrolling list since I couldn’t find anything similar online:

Download jQuery

Download jQuery ScrollTo

Download jQuery SerialScroll

Create a new folder called “js” and load the jQuery files into it

Create a new file in your text editor and call it init.js.  Insert the following text and save it to your js folder:

jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

jQuery(function( $ ){

$('div#screen').serialScroll({
target:'div#sections',
items:'li',
axis:'xy',
navigation:'#navigation li a',
duration:700,
force:true,

onBefore:function( e, elem, $pane, $items, pos ){
e.preventDefault();
if( this.blur )
this.blur();
},
onAfter:function( elem ){
}
});

});

So we’ve marked four elements to look for in your website: <li>, any linked list items inside of <div id=”navigation”>, <div id=”sections”>, and <div id=”screen”>.  Screen will be the wrapper for your entire scrolling element; it will contain two things: the scrolling panes, and the navigation corresponding to them.  Navigation will contain your navigational elements in list form.  Sections will contain the scrolling panes in list form.  Each list tag will mark either: a) a navigation element, or b) a single pane corresponding to a navigation element.

In the header of your HTML, insert the following in red (note: versions of script files may have changed):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery SerialScroll Example</title>

<link href="style.css" rel="stylesheet" type="text/css"
media="screen" />

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.serialScroll-1.2.2-min.js">
</script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js">
</script>
<script type="text/javascript" src="js/init.js"></script>
</head>

<body>

Now we have to implement the jQuery on your website.  We’re going to be using elements we need to style in our CSS, so let’s go to our CSS first and insert the following:

#sections ul, #sections li, #sections h3, #sections h2, #sections h1 {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#sections {
	background-color: red;
	clear: left;
	min-height: 300px;
	overflow: hidden;
	width: 750px;
	padding: 5px;
}

#sections ul {
	width: 3660px;
}

#sections li {
	float: left;
	width: 750px;
	padding: 5px;
}

#navigation {
	width: 760px;
	font-size: 18px;
	color: #fff;
	text-align: center;
}

#navigation ul, #navigation li, #navigation h3, #navigation h2,
#navigation h1, #navigation p {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#navcontainer {
	float: left;
	width: 487.5px;
}

#nav1, #nav2 {
	background: gray;
	height: 43px;
}

#nav1 {
	float: left;
}

#nav2 {
	float: right;
}

#nav1 a, #nav2 a {
	display: block;
	width: 215px;
	height: 29px;
	padding: 10px 0 0;
	text-decoration: none;
	color: #000;
}

You can style each element to your liking, but the key is that we’re setting each successive <li> after the first outside our view, so that when we click on a tab to scroll they look to be appearing for the first time.

Next, go to the place in your website where you want to insert the SerialScroll element and paste this:

<div id="screen">
	<div id="navigation">
		<ul id="navcontainer">
			<li id="nav1"><a href="#">Tab 1</a></li>
			<li id="nav2"><a href="#">Tab 2</a></li>
		</ul>
		<ul>
			<li id="nav2"><a href="#">Tab 3</a></li>
		</ul>
	</div>
	<div id="sections">
		<ul>
			<li>
				<h2>Tab 1</h2>
				Content for Tab 1.
			</li>
			<li>
				<h2>Tab 2</h2>
				Content for Tab 2.
			</li>
			<li>
				<h2>Tab 3</h2>
				Content for Tab 3.
			</li>
		</ul>
	</div>
</div>

That’s it!  I’ve zipped a demo here for you to reference if you need help: serialscrolldemo

Posted via web from Jay’s Posterous

From the Festival of Trees in Davenport, Iowa a few weeks back.

Posted via web from Jay’s Posterous

Looks pretty cool, doesn’t it?