Listy.us is a AJAXified table-based list making application. You create a list, edit it by clicking fields and entering your data, and it’s updated as you tab from item to item. It’s open-ended enough that you can use it for just about any kind of list you want to make. I designed Listy.us as an application that I would personally enjoy using, and I do use it. My user profile shows some of the lists I’ve made on the site so far – the ones I’ve marked as public, at least.

There have been a lot of features cut out in order to get the application on the internet and getting feedback. User groups, templates, and hypertemplates — templates with extra functionality such as pulling down extra data from outside sources — are all still on the list of “things to put back in ASAP.”

There are a lot of different things in this project to write about, so I’m going to try and break it up into a lot of smaller blog posts over the next couple weeks. What do you want to hear about? The marketing? Writing the editor javascript? The decision to remove advertising? Design revisions? Bits and pieces of Zend Framework code used on the backend?

Next post, I think I’ll share how I’m using some Zend Framework components to create a mail templating system for new user emails, comment notifications, and the like.

However, as a web designer/developer, I can say for a fact that it is absolutely necessary, and it is Microsoft’s own damned fault that it has come to this. Practically every other browser is up to date, or at least trying to be, with recent web standards. Those that follow my work may have noticed that Listy.us makes use of a bit of CSS3 and is set up in HTML5 for future expansion. I would love to use all the latest bells and whistles of HTML5/CSS3. Full HTML5 support allows awesome web apps like Google Wave. CSS3, among other things, lets you do cool stuff like drop shadows and curved corners without messy hacks and semantics nightmares. I want to use these things, and I’d imagine most other developers and designers do as well. The web would be a better place.

The catch? 34% of my visitors use Internet Explorer. That’s 34% of users that see the site with hard square edges, slow javascript, funky css behaviors, etc. Of those 34%,  43% are still using IE6. IE6 doesn’t even support PNG transparency without a hack. As a lone developer trying to get a web app up to commercial viability, I find myself focusing on development and letting the site degrade nicely (or as well as possible) to IE users – it still works (as long as you have javascript enabled – risky in IE), it’s just not as pretty.

So, why is Google Chrome Frame a necessity? Because it fixes the problem. Because it lets all the IE users out there experience sites like Google Wave the way they’re meant to be experienced. It exists because of those 34% of users still using IE, those 34%*43% still using old-and-broken IE6. It’s Google’s way of saying “Well, crap, we’re ready to go. If you can’t get your browser up to speed, we’ll do it for you.”

I fully support it, and if MS doesn’t get their act together, I’ll be encouraging the use of Chrome Frame on my own projects.

Now, what can Microsoft do about it? Obviously Microsoft has no interest in prolonging the life of IE6, but supporting it until 2014 doesn’t do anyone a service. They’re even offering charitable donations for each upgrade from IE6 (personally, I would’ve skipped the background music, guys). The problem with continuing to support old-and-broken technology like IE6 is that folks like Google and Mozilla will begin to create products like Google Chrome Frame because the web is being held back by Internet Explorer.

I’ll bottom line it for Microsoft: It is next to impossible to find a web designer/developer that does not loathe Internet Explorer with every fiber of their being. This is a problem. It needs to be dealt with. The rapid growth of technology means you should not support an 8-year-old browser that has no business being used on modern websites. If you don’t deal with it, someone else will.

Wikipedia defines an FSM as “a model of behavior composed of a finite number of states, transitions between those states, and actions.”

In other words, it’s a map of how your application works, with consideration for how you get from point A to B to C. The pattern can be used to design simple to very complicated web applications. Listy.us is currently being built around a fairly simple FSM pattern where every state ultimately  returns to an idle state when finished. Entering the state sets everything up: dynamic elements, events, etc. Exiting tears down the event namespace (see jQuery – Namespaced events) and does any data saving.

You can read about FSMs as applied to game development at this site (it’s more readable than the wiki entry). In fact, if the area of artificial intelligence and/or game development interests you, I’d recommend picking up the book by that site’s author.

Simple example:
start -> state:idle (enter, run)
-> (click field) -> transition:editMode (exit idle, enter editMode, run editMode)
-> (click out/keypress) -> transition:idle (exit editMode, enter idle, run idle)

Maybe I’ll clean up the FSM design and post it sometime.

This is probably my first real attempt at a grid-based layout. Vertically it falls short of perfect baseline alignment, simply because I didn’t feel it was worth the effort to get it perfect. This is a blog. If it were a corporate product page, then yes, it would be worth the trouble to get everything in a perfect rhythm, but it’s not.

Also, I have not tested this in IE 6 or 7. Out of curiosity, I tested it in 8 a few seconds ago and it looks fine. Obviously, ignoring IE isn’t a luxury I can afford in the future, but in the current “I just want to get this WP theme done so I’m using something more appropriate than a public theme” context, it works.

I’ve also added a link to Listy.us, my primary project. There’s nothing there yet, so don’t bother clicking the link. The logo is a result of a number of failed attempts and a number of discussions with my girlfriend. The logo’s meant to be warm, playful, and casual. Most importantly casual. Other list services out there—my would-be competition, at any rate—are too impersonal, too boring. I want Listy.us to be fun. That’s my goal. If I can make some money along the way, peachy.

Somewhat related, here’s the Zend_Db Table cheatsheet I promised in Twitter:

public Thingies extends Zend_Db_Table_Abstract {

	protected $_name	= 'thingies'; // actual table name

	// for a standard primary key:
	protected $_primary	= 'id';	// our primary key

	// OR, for multiple keys, omit above and use:
	protected $_primary	= array('widget_id','thingy_id');
	protected $_sequence	= false;

	// for tables referencing this one:
	protected $_dependantTables = array('Widgets','Thingies');
	// note use of class names instead of table names

	// for tables this references:
	protected $_referenceMap = array(
		'Doodad'	=> array(
			'columns' => 'doodad_id',  // column name that references doodads table
			'refTableClass' => 'Doodads',  // class that encapsulates doodads table
			'refColumns' => 'id'  // column in doodads table that doodad_id references
		)
	);

	// all your CRUD goes here

}