Archive for the 'Web Dev' Category


Spore’s Brilliant Trick For Uploading/Downloading Creatures 1

Will Wright’s Spore is coming soon. I’m looking forward to it. I still think SimCity4 is one of the most perfect games ever made (and still looks/plays competitively with the latest games out there), and there’s no debating whether or not The Sims franchise was/is a significant game design (and commercial) milestone. I wouldn’t be the first to suggest that Spore will be joining that illustrious crowd, though the missing “people” element (you know, homosapiens, actual human beings) will probably keep it from realizing the scope/breadth/depth of audience that The Sims has seen.

The Sporepedia, which serves as a clearing house for the most popular creatures created by players, employs a very clever (and very user-friendly) means to upload/download creatures: they embed the data in the PNG thumbnail of the creature. Instead of having some custom data format that’s opaque to the user (and basically worthless after it hits their desktop except for importing straight into Spore), the user has a traditional PNG that they can trivially view on any modern browser/OS. Embedded in the alpha channel data of the PNG, though, is a bunch of data (about 1K according to some estimates).

Now, this is an old trick, and you can do it “officially” with PNGs in custom chunks or in JPEGs, etc. It’s possible in almost any well-structured format. But it’s a very clever, modern, web way of handling it. It allows for trivial sharing by the user through whatever means they’re accustomed to because sharing an image is an almost universal feature of any collaborative software. So, user’s can attach the thumbs to their e-mail, or post them to their Flickr account, or put them on Facebook or their MySpace page, or send them in an IM.

Consider this inspiration! I’m now officially on the look out for how I can apply this technique to Mockingbird. Embedding the game’s description in its screenshot? Encoding ActionScript into the action icons? I don’t know, but I’m going to find something. And you should, too! Incorporate this feature into your products today!

Best. Resignation Letter. Ever. 0

Flickr’s co-founders Stewart Butterfield and Caterina Fake (husband/wife team) recently resigned from Yahoo!. Stewart wrote an incredible resignation letter.

Of course, Valleywag calls it “bizarre”, “rambling” and “entertaining nonsense”, and a majority of the comments are no more flattering. I (and some of the comments) get it, though. It’s rather brilliant. Stewart reveals himself to be a well-rounded, liberally-educated guy who can actually write! Of course, I could feel that in all of the presentations I’ve seen from the Flickr founders who always come across as having a real grasp on the human nature intrinsic to a social website. I think we (designers of interactive content, whether it be the web or games) could learn a huge amount from Flickr and the views of its creators.

In fact, I wrote about this not too long ago (from the UI designer at Flickr). Read the essay. Get inspired to create something for people.

Are magic MVC frameworks really helping me? 2

As a preface, please read this about “magic” code.

It wasn’t that long ago that I gushed about Cake. But after doing some development with it (beta sites for Mockingbird), and after recently working on our current site (which runs on top of Pligg, kinda), I’ve started to kinda think, “hey, what are these guys actually doing for me?”

First, I am still baffled that with all of the auto-sniffing-magic that these frameworks (Rails, et al) do I still have to describe by database schema in two places. I mean, come on, Microsoft solved this problem in .NET. Sure, they do it through code-generation (XML database schema creates the actual underlying database as well as generating all of the C# classes used to interact with it in a completely typed, validated way). But with Cake (and with Rails, AFAIK) I have to go off and do DB admin creating tables and indices and such, and then I have to come and create some parallel classes in the framework. Sure, I don’t have to specify the individual fields, it’ll automatically attempt to map unknown properties for me… unless I want to build-in validation, or relationships, or serialization… you know, trivial little things that only serious webapps would need… ahem. Sure.

Second, I’m just terrified by the amount of decision-making that is made each time “through” the framework when one of my pages is served up. Sure, op-code caching alleviates some of this, but really, should I be executing 10x the necessary amount of code to save me from having to write out a dozen lines of completely self-explanatory, easy-peasy lines of code?

Maybe I’m missing something… maybe these guys are doing a lot of stuff for me I’m not realizing. But I get the itch’n feeling that they’re really just providing a different syntax (with some defaults that make building a bare bones blog in 15 minutes a snap) on bits that are already there, at a lower level.

Routing — mod_rewrite/.htaccess is the only routing tool you need. I almost guarantee you’re not doing anything in your webapp that requires some kind of routing logic that can’t be handled elegantly with mod_rewrite/.htaccess.

Controller — this is the PHP file that your mod_rewrite directs queries to. All you need to do is practice some self-control and keep all of the aesthetic bits out of this PHP file. Just do the work, the logic of the user’s request. When you done all your work, just pass the results off to the view.

View — go download Smarty. Just use it. Flickr uses it and they get more traffic than you ever will. It’s a templating engine designed with the viewpoint that the template should *only* be the view and that the designer and programmer are at least independent tasks if not entirely different individuals.

Model — I was very frustrated with Cake when I tried to combine it with Pligg. Pligg had a particular table/field naming scheme, and Cake had a similar (but different enough) scheme. There was no combination of tweaking that would get one to be compatible with the other. Writing the necessary SQL queries to bridge the gap manually was trivial. And I knew them all along – in fact, I used them when debugging the naming scheme in an attempt to work backwards. :) Just grab ezSQL, that’s as simplified and automatic as your database interaction should be, because the database is critical (and powerful) if you don’t discount it as just a big property list.

Helpers, Components, Behaviors &mash; these frameworks all have a bunch of additional “utility” features that basically just make life easier as a webapp developer. These could be worth it, if they’re you’re particular flavor. But I bet for each one there’s a strong, healthier open-source version that does more.

Maybe I should put my money where my mouth is? Maybe so. How cleanly could I build a webapp without a framework (and without implicitly building one myself)? In other words, have we heaped one abstraction too many on the pile?

It’s a beautiful thing. 0

From From Little Things, Big Things Grow, an A List Apart essay by George Oates, UI Designer, Flickr:

Treat your place like your home: welcome people, fix them a drink and make them feel comfortable. Before you know it, your guests will be chatting amongst themselves, the party will be pumping, and people will be making plans together.

The Craft of Gamemaking 6

I presented this evening at the ACC. I think it went well. I’m definitely out of practice. The slides probably won’t be interesting without the talking, but in case anyone is curious: The Craft of Gamemaking.

If you saw the presentation, I’d love to hear from you in the comment section.

Using PHP for Code Generation 2

I’ve been using PHP lately to write the server-side of our product. One of the nice mechanics of PHP is that a PHP file is actually a text file that is output as it is read and the PHP code is simply escaped/executed… in other words, PHP is a templating language. While that’s not news for most folks, it hadn’t really hit home with me that because PHP is a templating language its an excellent tool to use for doing code generation. So, if its good enough for generating HTML pages then its certainly good enough for generating ActionScript source files! ;-)

A month or so ago I went looking for a command-line tool to take a list of assets (PNGs, MP3s) and make an SWF library out of them. My first stop was the excellent Swfmill. Unfortunately for me, Swfmill only supports up to version 8, and I’m using 9, and the last thing I wanted was to have to cross between AS’s two virtual machines just for loading assets.

I posed the question to the excellent Flexcoders group. I promptly got a suggestion from Alex Hurai (member of the Flex team at Adobe) that I could just do a bit of codegen to create an AS class full of embedded assets (using Flex’s embed metadata). So that’s what I did!

I’ll post the code sometime this weekend, once I’ve tested it completely and cleaned it up a bit, but it seems to work. I did a bit of reading on how the module loading code for Flex was written to give me a solid basis for how to handle things. Basically, I generate a class that implements my own IAssetLibrary interface, which is basically an interface that provides methods for querying and retrieving the embedded assets. The PHP codegen simply scans a specified directory, grabs the appropriate filenames, and populates a standard AS3 class. It then populates a few arrays (mapping filenames to embedded asset classes) and its done.

The way PHP-on-the-command-line works this just all spews out to stdout, so I just wrapped it all up in batch file that pipes things to .as file, then calls mxmlc (ActionScript3/Flex compiler) on that .as file. The result (after a very long time … mxmlc is dog slow because it has to fire up the Java VM, etc.) is a SWF with a single class in it, a Sprite (because root classes in an SWF have to inherit from Sprite or MovieClip) that implements the IAssetLibrary interface. I can then use the Flash API’s Loader class to load the SWF, cast it to IAssetLibrary, then retrieve my assets by filename!

The big reason for doing this is that our current build loads each asset individually from a URL (like a web browser rendering a webpage). This was entirely by-design (modeled after a web browser), but in practice (after many months of design revisions) we no longer require that degree of flexibility. And it comes with a cost: the current build makes 228 separates GETs to our server to gather all the assets, most of which are in the 5-10k ballpark. That’s a lot of network overhead. And code overhead, in both my code to manager all those requests and the Flash Player dealing with all those async calls.

And magically, an SWF compresses PNGs/MP3s smaller than just the raw files (elimination of redundant headers or something, I’m not sure)… the total weight of all the assets is 300k smaller (6.5MB compared to 6.8MB).

Piece of Cake… 10

CakePHP that is. Think Ruby on Rails is cool, but maybe too cool? Have a LAMP setup for your websites and don’t want to mess with shell access? This is the right framework for you.

I know a very small bit of PHP. It’s close enough to C (affectionately referred to as a “curly bracket” language) that I can read it, but I’m a bit short in vocabulary (you know, common idioms, standard API’s, etc.). I also know a small bit about how web backends are written, but I’ve never done it professionally so I don’t know on the ins and outs of how best to do redirects, or handle sessions and cookies, or sanitize data for SQL. CakePHP handles most all of that for me.

How cool is it? I wrote the website for playMockingbird.com this weekend. That’s all while learning CakePHP, taking a refresher course in PHP itself, designing the site, doing the CSS, and writing the web services for our tool to interact with. CakePHP helped with all of that and I finished the job in about 20 hours.

If I started from scratch right now I could probably do it in 10. If I had any decent amount of experience with PHP and CSS (you know, like if I was a professional web developer) I could do it in 5, or maybe less… hell, it could even be a screencast demosntrating it in under an hour.

CakePHP makes it that dead simple.

And the professional web “firms” out there should be ashamed of themselves. We paid out an exorbitant amount of money (you don’t want to know) to hire a good firm here in Austin (I won’t drop names) to build our site. Several months later we had a few decent page designs and some functionality. We pulled the plug and took everything they’d built. Digging through it was a nightmare. I’m sure it made sense to the guy writing it as it looked to be built on some kind of standard framework… but not one I’d seen before (or heard of). And it didn’t work very uniformly.

If they had used CakePHP, in the 100+ engineering hours they billed us for they would have been able to build out the whole website, early and agile (which was the real reason we had to part ways … too old school, not very agile, they were accustomed to building websites for lawyers and doctors and local businesses, not quite ready for the web2.0 world).

So now we changed our job request: it used to be looking for a good web developer with strong PHP chops (or RoR), etc. Now all I want is a good designer, someone who can layout a good HTML page, do good CSS, knock together functional designs in Photoshop… I’ll take care of the engineering.

Do yourself a favor. Go have a piece of cake. Knock up a nice little web 2.0 app this weekend… I did.

Rhapsody 1

I’ve found exactly what the title says: Rhapsody. A subscription music service from Real Networks. Yes, Real. I hated them as well. The Real Player was always updating itself, spewing messages, nagging me… it basically felt like high dollar spyware. I would avoid the format on the net like the Plague. I would *skip* seeing something cool on the net to avoid installing RealPlayer. Of course, I wasn’t the only one…

But, happy to report, Rhapsody doesn’t install/require RealPlayer (though it will RealAudio, I believe). That’s the principal reason I’d never even looked at the software, though my brother had raved about it for quite some time.

Well, last weekend I had long programming session in front of me and no desire to dig through my same library of albums in iTunes that I’d been staring at for the last year. My usual first stop is to Last.fm. Definitely my favorite web 2.0 radio station. I’ve even donated/subscribed for the year to get a bit more control and features. I tried Pandora (and pre-paid a year for $35, I think) when it first debuted (before I discovered last.fm, though I know last.fm was first). Its cool, too, and the more academic approach (as opposed to the census-style population sampling of Last.fm) is a fresh alternative — sometimes.

The problem with both is that you lack direct control over what you’re listening to, or rather you lack on-demand control. You can only influence and guide the music selection. I can’t jump straight to a particular album and track and play that whenever I want. With Rhapsody, I can.

Rhapsody gives the user a huge online library (millions of songs) that you can browse through and listen to on-demand. They also have the “channels” that are editorial crafted to fit certain criteria, e.g. 70’s Power Ballads, and they have an great implementation of playlists.

The playlist is a great thing. Its the modern day version of the mix tape. And on Rhapsody, you can leverage the “always on” nature of the application to share your playlists with other users (by e-mail, IM, URL, etc…) as well as throwing them on the pile for the general public. Users can rate playlists and the best in certain genres rise to the top. They also have “editorial” playlists presented by celebrities, musicians, music critics, site editors and music labels.

Rhapsody does a really good job of staying focused on one thing: the music. They effectively introduce all of the social networking elements while never letting the people get in the way. I know that sounds harsh, but its true. We can adopt (and adapt) a lot of important relational power from the mechanisms fine tuned in the world of MySpace, Facebook, et al. These ultra mainstream sites are teaching a lot of powerful organizational functions to the average web user. The ones who are doing it wrong are taking MySpace and sticking feature X in place of the bands: videos, games, shopping, TV shows, music. The ones who are doing it right, like Rhapsody, maintain a focus and keep the users on the sidelines, where they honestly belong (or rather, behind-the-scenes).

In other words, its very satisfying to live in a social space, but I don’t necessarily want to wade through the egos and personalities every time. With Rhapsody, music (at its core, a single track/song) is the participant in the social network. Us fans are just along for the ride! ;-)

So, these are great features, but probably what you’d expect (its basically iTunes with a giant library on the net). Its subscription vs. possession. But the main reason I usually have a problem with subscription web services is that they’re useless without the web. Sure, I may not be without the web much these days when using a computer (my e-mail is web-based as well), but for my music… well, I want to be able to listen to it *anytime* or anywhere I’ve got a wall outlet or a battery. Like my iPod, or the MP3 ripped to my desktop.

Well, Rhapsody allows you to “cache” any or all of your library to disk. I believe they use WMA DRM to “secure” the music. Which you know what? That’s fine. I can’t put it on my iPod. I can’t copy it to a CD and drop it in the mail to a friend. But *I* can listen whenever I want. And I’m fine with that limitation because its only $15 a month.

So, Rhapsody is radio on demand. And its a better iTunes. If I want to own music, I’ll buy the CD off of Amazon. If I just want to listen to music, I’ll look it up on Rhapsody.