Archive for the ‘Web Development’ Category

Shoes for the cobbler’s children

Wednesday, September 1st, 2010
Shoe Icon

Shoe Icon (created in Art Studio on the iPad, from a pencil sketch photographed using my iPhone)

For a while now I’ve been using a simple PHP script to publish my working notes for the stuff I do at the University of Alabama. Essentially, I have a folder full of text files (using markdown syntax) and it simply lists what’s there, uses markdown.php to render it, and voila. I imagine it’s not dissimilar conceptually from the way Gruber manages daringfireball, but I’m sure his setup is much more sophisticated and does caching, etc. Since I have about five users, there’s no need to get more elaborate.

Anyway, I submitted Manta to the App Store in the wee hours of Monday morning and thought I’d better put some kind of website up for the game at the URLs I provided as part of the submission process. You know, the reviewer might actually check. I threw some stuff on the server and then quickly realized that making something that looked good on all the target platforms I cared about (i.e. Mac, Windows, iPhone, and iPad) might be pretty tricky in a short timeframe. After all, my main website has been kind of sucking on the iPhone for some time.

I figured I’d use a “simple toy” to get a site up real quick, and worry about proper content-management, etc., later. (In other words, probably never.) My first stop was WordPress. Surely there are some awesome themes out there that look good on everything. I love WordPress for managing simple sites and this was going to be pretty darn simple.

Well, if there’s such a theme, I couldn’t find it. The one theme I found that claimed to be iPad-friendly (a) wasn’t, and (b) was decidedly not free.

My next stop was Rapidweaver. I licensed Sandvox a long, long time ago back when I needed to get a different website up-and-running fast. I’ve followed Sandvox for a long time and it continues to suck in almost every way I care about but — at the time — I preferred it over Rapidweaver because it was kind of WYSIWYG and had some power-user features I thought might be useful (but really weren’t). Rapidweaver had themes that were claimed to be iPhone- and iPad-friendly (but weren’t — in fact even the demo sites were badly borked) and managed to produce pages with videos that couldn’t play and other embarrassing glitches (e.g. failing to correctly update the site after changing a page name, and pretty much broken SFTP support). Good grief.

OK, in desperation I tried Sandvox. Oddly enough, even though Sandvox seems very clunky beside Rapidweaver, and even though Karelia seems to go out of its way to ignore third-party theme developers (e.g. there are no links to them on its website), there are some very nice third-party themes for Sandvox (I didn’t buy them, but they looked pretty nice in my browser). Even so, Sandbox infuriates me and also produced broken pages.

I even tried iWeb ’09. Actually, of the three, iWeb seemed to produce the least dysfunctional site, but its pages are heavy, it didn’t do a good job with videos (they did play, at least), and it has a terrible collection of themes and very little third-party support (I think it’s safe to say iWeb is a total failure as a product). It certainly makes no effort to produce iOS-friendly pages, which says a good deal. And producing a simple gallery page is a chore unless you set up the gallery in iPhoto first. No thank you.

Back to Coda.

So, here’s the solution I came up with. I took the basic idea of my markdown-driven “work blog” site and combined it with some ideas I have been using for a very long time here and there, which essentially involve using file-naming and directory structures to connote relationships between content. A little bit of glue code in PHP, two PHP library files I use for all kinds of things, one CSS file, jQuery.js and markdown.php, and a simple .htaccess hack, and voila: instant website. Just shove files in the right format using a simple naming convention in a pretty pattern on a server and it all just works. It’s very much a work in progress, and there are some obvious refinements I can add, but it’s shaping up to be a simpler and more flexible way to quickly build an attractive (and highly customizable) website than Rapidweaver, Sandvox, or iWeb. And with some kind of Web App for online management it might even be simpler than WordPress or Tumblr.

Afterthought

The one “super simple” solution I didn’t try was mobileme. Of course the idea of paying Apple $99/year in perpetuity for a tiny amount of cloud storage on a server that won’t let me run my favorite scripting languages somehow doesn’t appeal to me. I also tried looking at some sites on mobileme.com and if there’s a way to quickly generate attractive, compatible sites using it, no-one seems to be using it.

Pageviews

Tuesday, July 20th, 2010

Interesting post by the reddit people on the apparent miscounting of traffic by third-party traffic counting sites.

The basic issue is the enormous discrepancy between the traffic estimates produced by outfits like Alexa and “more reliable” numbers from Google Analytics. Here’s the thing, each works the problem from the opposite end. Alexa follows the TV ratings model (find volunteers, watch what they do, extrapolate to the population) while Google takes the publisher model (count how many copies you sell and where they go). Both are trying to estimate your market reach, generally expressed in terms of uniques and pageviews.

Each approach is bound to make certain kinds of mistakes. When you only sample a population, you’re prone to sampling errors. Alexa, and sites like it, are have a huge sample bias in favor of … let’s call them idiots, because only “idiots” allow the necessary spyware on their computer (e.g. if you visit one of their websites with IE running on XP SP1 you’ll probably end up with their crap on your computer without even agreeing to it; try the same thing with Chrome or Safari and … nothing).

The original TV ratings system, pioneered by Neilsen, used volunteers and logbooks (my wife and I actually filled in logs for radio listening about six years back, so this method is still in use). It has all kinds of obvious flaws, not least of which is that you’re not going to measure the viewing habits of people who suck at keeping log books up-to-date (even if they volunteer to fill them in). Even more modern automated systems have major sample bias issues. Alexa (et al) piggyback their spyware on apparently useful add-ons, but let’s just say that the typical reddit user is not the kind of person who is going to be well-represented in their statistics.

Google Analytics, on the other hand, is going to overcount a lot of things, especially uniques (e.g. if I have cookies fully or partially disabled and my IP address changes) and pageviews (when is a refresh a new page view?). Readership doesn’t equal the number of copies printed.

Anyway, I think I have a simple answer for the reddit post. The kinds of people who show up in spyware-based ratings systems are exactly the kinds of people who don’t visit reddit.

PHP json_encode replacement

Saturday, May 15th, 2010

I ran into a problem with RiddleMeThis recently — the new online runtime needs to generate JavaScript structures on the server to hand over to the client. To do this I used the json_encode function, which requires PHP 5.2. Until now, RiddleMeThis hasn’t made many assumptions about the PHP runtime, but it turns out assuming PHP 5.2 is not a good idea. There’s a chunk of PHP you can get somewhere or other that will replace json_encode, but it’s annoyingly inconvenient.

Anyway, it turns out I wrote my own jsencode() function in order to deploy an earlier version of the runtime on a Mac OS X 10.5 server (which doesn’t have PHP 5.2, argh). This was a quick and dirty effort which served the purpose but is kind of evil (it wraps quotation marks around numbers, for one thing, and doesn’t quote the symbols — which is fine for JavaScript but not allowed for JSON, especially if you’re using a strict parser as found in jQuery 1.4.

Feel free to use either of these snippets as you please.

function jsencode( $obj ){
	if( is_array( $obj ) ){
		$code = array();
		if( array_keys($obj) !== range(0, count($obj) - 1) ){
			foreach( $obj as $key => $val ){
				$code []= $key . ':' . jsencode( $val );
			}
			$code = '{' . implode( ',', $code ) . '}';
		} else {
			foreach( $obj as $val ){
				$code []= jsencode( $val );
			}
			$code = '[' . implode( ',', $code ) . ']';
		}
		return $code;
	} else {
		return '"' . addslashes( $obj ) . '"';
	}
}

So, here’s a better version. It allows you to encode for JSON or (by default) JavaScript (useful for passing stuff from PHP server-side to JavaScript client-slide):

function jsencode( $obj, $json = false ){
	switch( gettype( $obj ) ){
		case 'array':
		case 'object':
			$code = array();
			// is it anything other than a simple linear array
			if( array_keys($obj) !== range(0, count($obj) - 1) ){
				foreach( $obj as $key => $val ){
					$code []= $json ?
						'"' . $key . '":' . jsencode( $val ) :
						$key . ':' . jsencode( $val );
				}
				$code = '{' . implode( ',', $code ) . '}';
			} else {
				foreach( $obj as $val ){
					$code []= jsencode( $val );
				}
				$code = '[' . implode( ',', $code ) . ']';
			}
			return $code;
			break;
		case 'boolean':
			return $obj ? 'true' : 'false' ;
			break;
		case 'integer':
		case 'double':
			return floatVal( $obj );
			break;
		case 'NULL':
		case 'resource':
		case 'unknown':
			return 'null';
			break;
		default:
			return '"' . addslashes( $obj ) . '"';
	}
}

To send the information from PHP to JavaScript, you’d write something like this:

<script type="text/javascript">
      var foo = <?php echo jsencode( $some_variable ); ?>;
</script>

To generate a JSON feed using this code you’d write something like this:

header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); // some time in the past
header('Content-type: application/json');
echo jsencode( $some_associative_array, true );

Go Adobe. Go Flash.

Thursday, April 15th, 2010

I’ve been visiting the Adobe Store quite a bit lately, and it has inspired me to make this video.

Corrections & Notes:

  • I’m using ClickToFlash (for Safari) and not FlashBlock which is the Firefox equivalent.
  • The store is implemented in Flash, much of the rest of Adobe’s site is not.
  • None of this stuff works any better on the 3.06 GHz Core 2 Duo Dell I’m sitting next to (with the exception of mouse scrolling, which is supported by Adobe’s scroll widget).

CS5

Thursday, April 15th, 2010

I was at a conference earlier this week and so managed to be “afk” for the Apple Macbook Pro refresh (about which I have already opined and — as of writing — for whose fruits I am now anxiously waiting) and the Adobe CS5 launch (which I had planned to “attend”).

If it weren’t for OS updates and CPU changes, I would still be pretty happy with Adobe Photoshop 6. (I was going to say 7, but then remembered that 7 was basically 6 ported to OS X.) Certainly, Photoshop has had new features added since version 6, but most have been the kinds of thing best done with a single-purpose utility (e.g. stitching panoramas), or things that are nice to have but which I don’t use in practice (e.g. 16-bits per channel color), or things that it would probably be better if Photoshop didn’t do them (almost anything to do with 3d, although CS4′s perspective matching tools are very cool).

By and large, the few useful improvements to Photoshop since version 6 (perhaps most notably hierarchical layers) are outweighed by a steadily deteriorating UI (precipitously deteriorating in the case of Windows). In fact, I don’t think I’d use CS4 over 6 on Windows.

CS5 looks to be different. The killer feature for Photoshop CS5 is content-aware fill and delete, which is essentially a more usable wrapper around CS4′s content-aware functions. For Mac users, the new version is also 64-bit, which means CS5 may be the new 6 in that it establishes a solid new foundational feature set. I don’t think I will be able to go back to not having content-aware delete after having it. (Bad news for the Photoshop wannabes too, since content-aware algorithms are rocket science.)

As for the “suite” the news is decidedly less rosy.

In this video we’re informed of the five killer features in Web Premium, which are:

  • Flash now actually integrates with an external editor for writing source code. (Note: not an as in any external editor but an as in one external editor. Good news if you love Flash Builder, bad news otherwise.)
  • Flash now lets you build iPhone apps… oops! I guess they didn’t have time to edit that. Pretty hard to fix a couple of videos with only a few days’ warning if you don’t have good video editing software handy. Might I suggest Final Cut Studio?
  • Photoshop has some new half-assed 3d features to go with its existing half-assed 3d features, so you can do 3d without knowing anything about 3d. (A lot like how Word lets you do typography without knowing anything about typography, and Dreamweaver lets you build websites without knowing anything at all, I guess.)
  • Dreamweaver now lets you preview via the host server… kind of like Coda (and every other Mac web tool these days).
  • Dreamweaver now integrates with BrowserLab (which still does onion skinning the wrong way — didn’t I send them feedback a year or two ago? Bah…). Will they stop me from using BrowserLab without Dreamweaver? I am not going to start using Dreamweaver. Apparently use of CS Live (as it has been branded) is “complimentary” for a “limited time”.

I shit you not. That’s it.

Also note that there’s no mention of Fireworks there at all — a program many UI people consider the only really useful thing Adobe sells aside from Photoshop (and no, I am not one of those people). No love there, I guess. (“Our UI no longer has any 5pt text” would be a killer feature right there.)

Design vs. Production vs. Web “Premium”

The biggest annoyance with the way Adobe (and Macromedia before it) bundles their products is that you end up paying for crap you don’t want, and the only way to get the stuff you actually want is to buy the Master Collection or give up and do without.

E.g. Web and Design Premium both contain Dreamweaver, which I will not suffer to live on a hard disk under my control. (In essence, Web Premium has Flash Builder in it — which might conceivably be useful, Production Premium has After Effects, Premiere, and Soundbooth but no Dreamweaver or Fireworks, and Design Premium has InDesign in it. All have Flash “Professional” (there’s no non-pro version any more), Flash Catalyst (which I’m guessing is in the Dreamweaver category), Photoshop “Extended” (there’s no non-extended version any more), Illustrator, and Web and Design have Acrobat Pro.

Here’s what I want: Photoshop, Illustrator, Flash, and — if you twist my arm — Fireworks and Flash Builder. Sadly, my best option is Web Premium which forces me to take Dreamweaver. I’d almost prefer to ditch Dreamweaver and Fireworks in favor of at least getting a program I won’t use that doesn’t offend me (like After Effects or InDesign).

(BTW, it’s the “premium” bundles I’m talking about, although the only non-premium bundle still around seems to be Design, which comprises InDesign, Acrobat, Photoshop, and Illustrator.)

And here’s the final kicker.

I’ve been using a free trial of CS4 on my notebook for the last month because I knew CS5 was coming out any minute and didn’t want to buy CS4 and immediately need to upgrade/replace it. CS5 ships in May, but if you need it now: buy CS4! (And no free upgrade — well who knows, but I kind find any reference to it on what passes for Adobe’s website.) Luckily there’s a new Mac on the way for me to install free trials on…