I couldn’t be bothered to track down and fix the bug or even another audio plugin. In a brief “A-Ha!” moment, I thought, “Why not just use HTML5?” So I threw in the brand new HTML5 <audio> tag and…

Instant success! Sure, it’s not the prettiest thing in the world but if the browser is working the magic it’ll never break again and I’m satisfied. I was pretty elated and began thinking about how this would positively impact and speed up a music blog I help run. I was drunk on simplicity.

Firefox #Fail

I remembered that some of my friends still use Firefox as their primary browser so I thought I’d just check the site in Firefox and take a peek at the design of their HTML5 audio player. Unfortunately, all I saw was a big ol’ “X”.

Some quick googling led me to the answer. Firefox’s <audio> tag implementation only supports Ogg Vorbis and WAV. I was shocked and astonished at the fact that a browser as great as Firefox doesn’t support MP3.

The <video> Wars

It appears the problem connected to the same issue the <video> tag is facing: codec licensing issues. This lack of standards issue is raised a lot in the HTML5 vs. Flash debate. I personally don’t care what standard is decided – I only use H.264 because that’s what ships on my Mac – I just want a standard. Although it would be nice if H.264 was the standard and the majority of the web didn’t have to re-encode their videos, I understand that licensing it from Apple could potentially bankrupt Firefox. As inconsequential as this codec thing may seem, this quibble is making HTML5 impotent.

How does the <video> tag make my life better if I have to create 3 different versions of the same video for cross browser support? Answer: none better. It renders it useless.

Unfortunately for Firefox, in reality there’s never going to be a massive shift in the web towards Ogg. Especially if at YouTube, every minute there’s 20 hours of video being uploaded that’s immediately encoded in H.264.

No one uses Ogg Vorbis. The web uses MP3.

The Open Source Utopian Dream is great: a world without restrictive licensing. But when the rubber meets the road, no one is going to spend the time to specially convert audio files to Ogg just so they works in Firefox. In the case of Austin Town Hall, it has (to-date) 1,196 songs on it – all MP3. It would take seconds to create a plugin that would change the current shortcode tag to output HTML5 instead of Flash. However, it would take hours or even days to hunt down, convert, and re-upload to each post in an Ogg format.

I could understand if Firefox chose not to support AAC or M4A, but MP3 however is non-negotiable when it comes to audio. It’s ubiquitous. It’s the established slang term for “digital audio file”. It’s an inseparable part of the web’s history.

The Bottom Line

If Firefox cannot support MP3 in their <audio> tag, it’s as useless as a CD player. If Firefox will not support MP3, one of 2 things will happen. One: HTML5 will remain dead in the water or Two: Firefox will lose browser share bit by bit and eventually go belly up in this episode of the Browser Wars. In the meanwhile, if Firefox cannot license MP3 they should at least be cognizant of the fact the web uses MP3 as its standard and degrade their <audio> tag if the source file is unsupported.

So what can you do? Not much really. It’s a total stalemate. Web developers have to sit around and wait for the working groups to get over themselves and come to consensus. Someone needs to make a website called Write Your WHATWGressman. Then we can let them know that this needs issue to be solved… and FAST!

It’s web-safe!

From a developer point-of-view, using Comic Sans means that I’m not going to have to load my project with ultimately unscalable @font-face declarations, and kilobyte heavy fonts. I don’t need to use flash to get it to render. It doesn’t require a javascript call to some Rent-A-Font company that I have to pay a monthly fee to. I know its going to render on just about the same on just about every computer in the whole world.

Comic Sans has 100% market saturation.

Despite its glaring typographical flaws and misappropriations, Comic Sans is the definition of ubiquity. Even better than our beloved Helvetica. And best of all it’s free, something that no doubt played largely into it’s huge install base.

It’s comical

Comic Sans is not pretty, it’s playful. It’s appalling that anyone would consider it for use in something like a business presentation, but in the right circumstance (a child’s birthday invitation or a soccer mom’s flyer) it’s an ideal choice. Looking at the history of Comic Sans, you can get a greater appreciation for its intention.

It was designed as font for the failed Microsoft Bob visual desktop environment. It was based on handwriting samples found in the Watchmen and Dark Knight comics. The text was meant to appear handwritten and still legible. The result was a felt marker looking font that just kept getting installed on computers because of its versatility and over the years has become very over-used*.

Comic Sans Appreciation Month

I think rather than perpetuating font-hate, we need to perpetuate font-grace.

To quote Mark Boulton

“Bad designers have used it, and it’s been used by non-designers who are making a design decision without having the right tools available to them…People berate it for no good reason. It’s a font that’s been overused, rather than a font that’s inherently bad.”

Instead of being a holier-than-thou designer and putting your client in the “idiot” category when they request Comic Sans for a logo, be a helpful resource who says, “I know what you’re trying to achieve, but let’s find a more appropriate font because Comic Sans wasn’t designed for print.”

Perhaps that’s been my message all along: Instead of being a condescending (jerk) designer spend a little time redesigning your attitude and be a resource, not an adversary, to your client. Let’s spend our time and aggression on more just causes like eradicating IE6.

*It was “viral” even before viral was viral. **ALL CAPS COMIC SANS IS RAD.

Still not convinced? Further Reading:

• http://sixrevisions.com/graphics-design/comic-sans-the-font-everyone-loves-to-hate/
• http://en.wikipedia.org/wiki/Comic_Sans

Coming off my high horse, there’s actually some pretty good alternative fonts in these links worth checking out. Haters Gonn’ Hate.

• http://creativebits.org/opinion/fuck_comic_sans
• http://www.sitepoint.com/blogs/2009/05/11/friends-dont-let-friends-use-comic-sans/#
  
• http://www.fontscape.com/explore?9BU
  
• http://bancomicsans.com/

1920×1600

1920×1600

I’m pretty excited about it. It started as a late night idea then turned into a code binge. Less than 24 hours later it was designed by myself and live. It’s coded in heaps of HTML5 and CSS3. Powerhouse. Once this project gets off the ground I’m certain I’ll be back with my regularly scheduled posts as well as those manifestos I hinted about.

I’ve got a plethora of show ideas, and am now beginning the process of wrangling guests. Pretty difficult for a passive guy like myself.

If you’re interested in being on the show, please contact me! Thanks.

In this, the Dawn of the E-reader, few news agencies are taking action to balance this shift and will be stomped by the upcoming change or at the very least will be painfully out of date. NPR and the New York Times are two “old world” news agencies that are embracing the “new world” distribution method and doing well at it.

The Future of Distribution: NPR

National Public Radio, created in 1970, brings news to the airwaves. Though it may seem futile to look at a radio station as a beacon to guide us into the future, NPR is superseding larger privately funded news organizations in the digital space race. NPR latched on to 2005’s “Year of the Podcast”[1] buzz, and it appears has revolutionized the way they distribute content.

The secret to NPR’s new strategy is tucked into the footer of it’s brand new (and dead sexy) website. Near the bottom, there’s a list of their on demand “broadcasts”:

They have fully understood themselves as a “broadcast” agency. Rather than sticking to their former pre-Internet glory days where they were the “Kings of Talk Radio”, NPR has changed directions. They’ve positioned themselves to say, “We will be in your email, your iPod, your phone, your RSS News Reader, your iGoogle and Blogs, your Facebook applications, and even on your Radio waves.”

They have a distribution model that fits the future. To be on every device that you may possible own. They’re on your iPod, your computer, and in your car. And with strong APIs, they will continue to be on the next big device. You cannot escape them. And they are dependable.

The Future of Distribution: Times Reader from NYTimes



The New York Times has an elegant Adobe Air application available right now for download at http://timesreader.nytimes.com. Once installed, you’re introduced to a drop dead gorgeous facsimile of the NYTimes paper version. The layout is beautiful, resolution-adaptive and interactive.

Times Reader has taken all the new digital inventions of the web and put them in to what will no doubt be the future of newspapers. A Latest News section, brings you breaking up-to-date news. Zoomable photos and micro-galleries can be embedded into every article. A whole section for News in Pictures. News in Video which is a medium impossible for print. As well as access to the previous six editions of the paper, which means no more trips to the garage!

The application is only in its infancy and you may not agree with the Times’ more liberal point of view, but if you are in the web or print design business, this is definitely a Must Download. It’s one of the forerunners that is beginning to bridge (repair?) the gap between web and print.

The Future of Income: Subscriptions

On the Times Reader you can see by the screenshot that some sections are “locked”, as denoted by an icon. You can catch a glimpse the sections, but are unable to click through to read more articles. A subscription of $3.45/week (less than 50¢/day) grants you access. If you were to ask me to spend $179.40/year on a website or newspaper, I would laugh and scoff in your face. Repackage that and turn it into $3.45/week for dependable news that I can read on my iPhone or iTablet (or whatever Apple calls it), then we have a conversational starting point.

This is not a new model of revenue. But it’s a turn from the “Freemium” ad-based business model that has exploded over the web. “Everything is free!” is ultimately a flawed business philosophy. Out of necessity, you either begin to overburden your users with advertising or you charge for things that otherwise used to be free, and that will eventually lose users[2].

These subscription based services for unlocking content (am I talking about XBOX?) will eventually be the norm. And it just might work. Loyalists who want the brand to continue, will support it, because they’ve extended themselves to be on the devices you love, and to do it well. Whether it’s Amazon’s Kindle or the upcoming iTablet, the NYTimes, like NPR, wants to be in your hands and being first to the gate with a method of digital distribution that appears sustainable is a huge gain.

The Future of Income: User-Supported

NPR takes a different approach to subscriptions. As listeners well know, NPR holds pledge drives every few months and strikes fear into its listeners that “Without your support, we can’t operate.” This fear, loyalty, ransom, or whatever you want to call it works. People will pay for what they love.

Though NPR is government funded, that only accounts for about 2% of its budget[3]. NPR is listener supported. It’s actual budget is determined by radio listeners, foundations, and handful corporate sponsors.

What NPR has done by its distribution method is that its now on every device, and you subconsciously need it there. They’ve beat your local TV news station to your phone.

And Finally…

It seems harsh and obvious and I’m repeating myself over and over. But this is happening. The internet has revolutionized the way we do everything and it’s just a adolescent teen. As Gary Vaynerchuck (currently #2 on the New York Times Bestseller list) would say, “The internet as we know it. The one where AOL would mail discs to your house, is only 14 years old.”

Ultimately, some will defend newspapers like they do cassette tapes. They’ll look on them with nostalgia and shout “I love it when they melt in my car!” But news doesn’t enter our houses via the doorstep anymore, it comes through the cable modem.

[1] http://www.slate.com/id/2133626/
[2] http://37signals.com/svn/posts/1964-37signals-in-the-news-discussing-free-vs-pay
[3] http://en.wikipedia.org/wiki/National_Public_Radio

And to keep myself upbeat about the whole situation I like to pretend there was a board room meeting where Larry Masters raised his arms and said “Go forth @gwoo and @nateabele! and continue with us -not as enemies, but as friends- to bring the good news of PHP to the world! We are all lions! There can be many prides!”… and then Mark Story did some kind of run-up-the-wall backflip because he is amazing…

Nate’s Question

Backstory complete, Nate posed the question on Twitter about what people would like to see from Lithium. I knew my answer wouldn’t fit into 140 characters so I thought I’d post it here.

File Uploader Class

My first dream utility would be some kind of built in File Upload mechanism (component, behavior, I don’t really care). I have had a long sordid story with uploading:

• First it was a custom jobby that got exploited pretty quick.
• Even when I did patch it, I was always stressed out about it.
• Then I used one of the upload components from CakeForge.
• Then about a year ago I switched to MeioUpload which rules, but after a year of use I’m starting to see the imperfections in it.

The general attitude in the CakePHP community seemed to be sort of “we don’t have that” and “figure it out for yourself”. But let’s be honest, we live in the #lazyweb and most real world applications involve some kind of uploading. Usually it’s creating a method for some computer illiterate person to upload a CSV or a PDF. But in the era of audio/video and media rich apps, the need for any framework to possess a standardized uploading class+handler is inherent. A canonized Uploading Class makes perfect sense. I have high hopes for something like this to come to Lithium because it appears that the creator of CakePHP’s Media Plugin, David Persson, has also defected. But so far his Twitter stream has given few clues to anything like this, just cryptic messages about pyramids, sunsets, and bicycles.

Image Editing Class

Another idea would be some kind of Image Manipulation/Editing class. This idea I got from this tweet. Just like uploading the chances that your modern day app is going to run into images and/or image editing is HUGE. I suppose this runs into a “Which javascript framework do we use!?!?” dilemma, but we all know that jQuery is the right answer here.

Other Ideas

Any other ideas would be toward making useful applications, because I’m a more User Experience oriented person. If I were to put myself on an MVC spectrum, I’d be here:

[DATA] Model ------------------------- Controllers ---------|------------- Views [UX]


Just a tip for the Lithium Team, the secret to becoming an awesome framework is to make yourself completely accessible to n00bs. Have little bits that give your framework some “killer feature” eye candy. Extract mundane tasks like comment systems, rating/digg counters, geolocation, event calendars, et cetera into pre-packaged add-ons. I realize the developers of Lithium probably want to keep things lightweight and generic -and they should because it makes the framework more nimble- but some kind of cabinet of “Almost-Core” add-ons would be killer. Sort of like CakeForge Snippets and the Bakery intended to be before they got all super confusing.

Meeting Biggs Darklighter* at Subway

As for my decision whether or not to “Join the Rebellion” who knows. I really like CakePHP and having used it everyday for over the last 3 years I feel like I’m just hitting my stride. I feel like I can do anything with it. And probably more importantly, as long as I have production servers that are PHP4.3.9 (gasp!) and PHP5.2.6 with over 40 live sites I won’t be leaving CakePHP anytime soon.

On the other hand, some of my most memorable help on the IRC has been from Lithium’s Gwoo and Nate (as well as Mark Story who is already an established bad ass). So based on loose *never actually met* e-relationships Lithium seems like a more natural choice.

It will ultimately come down to the new programming cliche “Choose the framework that’s most suitable for the project” (CTFTMSFTP, for short). It’s like Subway**. There’s no rule that you can only order one sandwich for the rest of your life. It’s simple: choose the one you want to devour at the moment, pay the lady, and move on. Sometimes it’s CakePHP, sometimes it’s Lithium, and sometimes (gasp!) it’s Ruby on Rails.

Hopefully that metaphor changed your life like it did mine. Otherwise, I’m excited for Monday when my Ponies Class for Lithium is unveiled to the whole world. And although my hands are tied to lower PHP versions for awhile, I’m excited to see what comes of the whole Lithium project.

* This is a reference to a scene cut from Star Wars IV: A New Hope http://www.starwarsholidayspecial.com/swcs/episode4/Biggs.html

** Full disclosure: I want Subway to sponsor my life. If you can make this happen, email me.

I’ve been cooking up some posts whenever I have a down minute at Paravel, but there hasn’t been much as we’ve got a few major projects on the horizon that are going to make your website (and mine) look like dog doo doo.

Like I said, I’ve been cooking up posts and so far its 3 for 3 on manifestos. Which begs the question, how many manifestos is too many? Wrap your mind grapes around that.

A total rip-off in innovation

Introducing Tweepee, a Wordpress theme that is a total Tweetie rip-off. Like most human beings on this planet, I have been so impressed by the Tweetie interface that using anything else feels futile and outright prehistoric.

What began as a “Hey I wonder if I can do that?” turned in to late night lay-awake obsessions which turned into “Lemme jus’ see if I can…” which tuned into “I’ve got to make it exact.” So here’s the final product. I spent entirely too many evenings ignoring my wife on this, so I’m glad it’s finally done.

features

• It’s chock full of jQuery AJAX-imations
• Beautified by CSS3
• jQueryUI comment box
• Plays nicely with the Infinite Scroll plugin
• Familiar UI (for Tweetie users)
• Tested on Mozilla and Webkit
• BlueprintCSS Grid Built-In – Use columns for on-the-fly in-post stylings.

1. “5 options when website budgets get slashed” -great article, sent me to the following sites:
   1. “Good Designers Redesign, Great Designers Realign” – This A List Apart by the famous Cameron Moll says “The desire to redesign is aesthetic-driven, while the desire to realign is purpose-driven”. Sure it’s great to have a fresh new image, but sometimes shifting does better than redesigning. Design-wise, I personally tend to want to flatten and start with a clean slate, but that’s expensive and sometimes it’s just a couple of functional tweaks that make the difference, like in the next article…
   2. $300 Million Button – Amazing article on how changing up 1 thing and understanding user perspective can make you millions… literally.
   3. Laws of Simplicity – I didn’t know this site existed, but it’s the personal blog of RISD President John Maeda who I’ve watched on TED before. This guy just oozes niceness.
      1. “The Laws of Simplicity” – This is a subsection and the thesis of John Maeda’s site. It’s a condensed version of his 100 page book. Almost all the articles in the site link-to or highlight themes chapters covered in his book, which I added to my Amazon Wishlist.
      2. Rhode Island School of Design (RISD) – I followed the our.risd blog and watched some videos of teaching staff speaking and I fantasized about going there until I realized that It would involve a) moving across country and b) lots and lots of money. But, what a beautiful opportunity it would be to become an expert in design – design not in the “pixel pushing” sense, but in the functional innovative sense.

I’ve read so much and was so inspired I’m feeling pretty enlightened. Like I read the whole Bible in a single word. Maybe that’s to esoteric or imaginative, but I really do feel like I’ve gotten a fresh revelation on what I do, and what we as Paravel do best. We’re not just a Design Team. Websites are just the tip of the iceberg of what we want to do to make businesses better.

After countless hours of using these mind-altering codes, I -authoritatively- present to the Top 4 Behaviors that everyone should be using in their apps… or else…

#4 Containable

This is hot off the shelf and new to CakePHP 1.2 and it makes a world of difference. When querying items in the database, Cake likes to SELECT records wtih all it’s belongsTo, hasMany, and HABTMs (“habtems”) auto-magically associated. With the Containable Behavior you can stop all that nonsense and speed up your app by having it contain the JOIN to a “short list” of approved “models”…

The Containable Behavior is like the bouncer at a fancy Hollywood club where if you’re not on the list, you get kicked to the curb and have to watch all the other “approved” models go by. Hot, hot models.

More concretely, let’s say you had a Posts table and you wanted to get only the comments in the view, while simultaneously ignoring all the Author, Tags, Categories, etc.

/app/models/post.php

class Post extends AppModel {
  var $name = "Post";
  var $actsAs = array('Containable'); 

// forgive the over-simplification of these.
  var $hasMany = array('Comments');
  var $belongsTo = array('Author');
  var $hasAndBelongsToMany = array('Tags','Category');

}

/app/controllers/posts_controller.php

function view_a_post_with_only_comments($id = null) {
  if(!$id) {
    $this->Session->setFlash('You forgot the ID number.');
    $this->redirect('/');
  }
  $this->Post->contain('Comment');
  $this->set('posts', $this->Post->read(null, $id));
}

It’s that easy! now you’ll only be pulling the Post and the Comments! ka-chow!  This

#3 Tree

I love trees. My wife has a particular affinity towards them. If you like trees then you will be a fan of this behavior. If you do not like trees, I suggest you eat a bowl of hair because you are a du-mmy. Over the course of the last year I’ve made a few category systems in my apps and all of them left me feeling like i did something wrong and/or patched the code together in a terrible way.

Enter Tree Behavior! It’s been around forever and a half, and I don’t know why I didn’t use it, but it makes organizing things like categories, forum posts, comment threads, etc a whiz! All you need is to add another couple of fields to the database and then add one line to your model.

categories.sql

create table categories (
  id integer 11 auto_increment,
  name varchar 50 null,
  parent_id integer 11 null,
  rght integer 11 null,
  lft integer 11 null
); engine=MySAM encode=UTF-8

app/models/category.php

class Category extends Model {
  var $name = 'Category';
  var $actsAs = array('Tree');

// ideally categories should describe something,
// so this is just an example association.

  var $hasMany = array('Post');
  ...
} ?>

Now you’re cooking with grease! It will automatically keep track of your tree structure – who comes before this, who comes after (“left and right”), who is the parent, etcetera. Couldn’t be easier.

Move on to the next page for the Top 2 CakePHP behaviors: