Brendan Doms

This might be old news for some, but I had never encountered this particular IE bug before. It's such a good example of what is utterly wrong with Microsoft and the quality of their product that I had to write it up. If you ever hear someone say, "Oh, IE's not that bad" then please send them a link to this post. This is the kind of bug that is ridiculous to deal with as a developer. We spend way too much time hunting down these bugs. It's not even behaving like their own documentation says it should.

So here's the situation: you want to use tabindex to skip over a radio button. In IE, only checked radio buttons are focusable anyway, so here's a test case showing a few radio buttons all checked without any tabindex set, except for the middle one that's set to -1, which should make your tabbing skip over it. Just click on the first one and you can use tab and shift-tab to navigate back and forth along them:

• no tabindex set
• tabindex=-1, should be skipped
• no tabindex set

Notice how using -1 doesn't actually skip over that radio (if you're using IE9). That's surprising, because it seems to work for every other element type, so why should radios be any different? Searching around will yield some results that tell you that setting the tabindex to -40000 will fix this problem.

Oh, of course. Obviously. -40000. Why didn't I try that first?

This is the part where I take an ax to the mannequin I have with the IE logo pasted to its face. It is so incredibly frustrating to deal with quirks like this that every once in a while you just have to let out your rage by chopping some heads off.

I couldn't just let that answer fly though. After some investigation, I figured out that the actual number this starts working at is -32769. -32768? No go. But -32769 and anything below that works. Wait. 32768 looks vaguely familiar...oh, it's 2^15. So obviously that's Microsoft's limit for the memory assigned to the tabindexes integer (this is actually mentioned in the documentation linked to above), and we're now able to skip the radio because it's out of that range. But it doesn't explain why -1 doesn't work in the first place. At least the mystery of -40000 has been solved - it's just the next nice round number. To conclude, here are some fun radios showcasing these numbers and this bug:

• tabindex=0, normal page flow
• tabindex=-1, should be skipped
• tabindex=-32768, should also be skipped
• tabindex=-32769, actually skipped
• tabindex=-40000, also skipped
• tabindex=0, normal flow again

Dear Microsoft, this bug is in IE9, the current release of the browser right now in 2012. Not IE6, so you can't claim it was made a decade ago and you didn't know what you were doing. Shame, shame on you.

I've been developing for Google App Engine (GAE) ever since it first came out. Along the way, I've built up a list of open source software to help accomplish tasks I found myself repeating. Each of these are hosted on GitHub, which provides free hosting for any open source project.

GAE Blog

The Blog project provides a fully functional blog, complete with support for multiple authors per blog, multiple blogs on the same site, commenting with moderation and spam blocking, image uploading, RSS, pagination, and more. It can easily be dropped into an existing project or serve as a stand alone. It will also automatically use the HTML project below if it is available.

GAE Scaffold

The Scaffold project provides skeleton code for setting up new sites quickly. It handles writing a lot of boilerplate, creating a jumping off point for feature-rich, high-performance sites. It is thus similar to small-scale web development frameworks, though unlike many it remains front-end agnostic. And it includes the Deploy and HTML projects below automatically. From the start, it supports sessions, templates, minification, caching, testing, and human readable error messaging. With just a little work, it can be configured to do anything you want on the GAE platform: run new cron tasks, serve a dynamically generated sitemap, access the datastore, and more.

GAE Deploy

The Deploy project handles cache-busting for a site's static resources. Specifically, it will create new minified versions of JavaScript and CSS files, and then reference those files in production. It smartly serves the full non-minified version in development, and cache-busts when a change is made to a file. Images are supported by simply appending the timestamp of the most recent deployment. This project could easily be extended to include processors for things like LESS or SASS.

GAE HTML

The HTML project handles minifying and caching rendered HTML. This makes it easy to do things like immediately displaying a cached version of a page without having to go through that page's normal controller processing. Fewer processor cycles combined with smaller outgoing bandwidth means the GAE free quotas last even longer.

I hope that these projects will help others see how easy and fun it is to get web applications up and running on GAE. Feedback, bug reports, feature requests, and patches are all welcome.

There came a day
When they had explained
Everyone else away

"The poor are too poor!" they said
"They'll leave nothing for the rest"
So the poor disappeared
Despite doing their best

"The sick are too sick!" they said
"They'll infect us if we try"
So the sick all died
Without saying goodbye

"The queer are too queer!" they said
"They'll make us weird and strange"
So the queer went into hiding
Hoping for a change

"The smart are too smart!" they said
"They'll challenge with words"
So the smart were all silenced
None left to be heard

There came a day
When they had explained
Everyone else away

A people who worship
A man who said, "Blessed be
All those different than me"

And cheer for a country
Holding onto a sign:
"Send the poor and sick to my side"

With fists clenched, pounding the floor
They finally found they could ask for no more

They simply watched as the world would fall
Screaming: "Only me! Only my kind!
I want it all!"

I'm happy to announce that drawtunes is now available for public use. It's a free website where you can compose your own songs just by drawing them.

The input is incredibly simple: the higher you draw vertically on the canvas, the higher the pitch of the note that comes out. And the longer you make the line horizontally, the more time that note takes up. Volume is represented by the thickness of the line. Any empty space is a rest, which you can create by leaving it blank or by erasing notes you've already drawn. Change colors to change octaves, where warmer colors are higher and cooler colors are lower. It's all very easy to use and understand just by glancing at the page.

The output, in contrast, is infinitely complex. You can have as many tracks in a song as you want, and each track has its own instrument. Instead of having a band in your garage, you now have one online.

The best part is that you don't need any music theory or experience to use drawtunes. The concept is concise and elegant: if you can finger paint, you can make music. There's no need to "read" music or remember what those strange symbols mean. Of course, being a classical student doesn't stop you from using this tool either.

Some History, for the Heck of It

This project was a long time coming, dating back over a year at this point. It all started on a random day in November of 2010 when I was working on a video game and I thought to myself: "How would I make music for this? Surely a computer could do it easily. Maybe a website already exists that solves this problem." Although some searches did yield results, none of the sites I found were very useable. Often they were limited to a single instrument, or an input system that exactly mimicked sheet music, an idea which hasn't been improved upon in over 500 years.

So I spent the rest of a day programming a very simple sine wave generator that I could give instructions like "play C4 for 1 second" and it would do it. I was satisfied with the proof of concept and tabled the idea.

Months later, in March of 2011, I saw a survey online that asked, "What one skill do you regret not learning?" The number one answer was "another language," but right behind that in the number two spot was "a musical instrument." And I realized that there were a lot of people who wanted to make music, but just didn't know how, or thought they lacked the talent. I came back to the simple script I had written and started developing a website around it, complete with an interface that required no prior skill to use to its full capacity. By the beginning of summer I was pretty much done, but there was one problem: I couldn't find a good name.

Seasons changed, I got a new job, and the project just sat there, untouched. I came up with dozens of clever plays on "drawing", "sketching", and "painting" combined with "song", "music", or "band", but none of the good ones had a corresponding domain that was available. I was stuck.

Thankfully, I realized that I needed some more brainpower to overcome this hurdle and enlisted the aid of some friends. That eventually lead to a great domain name and logo. After that it was a simple matter of putting the final product online. And now drawtunes is ready for you to make some music!

Recently I've had a lot of run-ins with MBA students at the University of Michigan Ross School of Business. As a group they are smart, capable, and hard-working. However, I've personally noticed several traps they've fallen into that seem to be common among business students and recent grads from schools around the country. This is my un-asked for, free advice to those students and graduates. My hope is to help them avoid the traps I see so many falling into already.

The Mighty Business Plan

One of the students I had a meeting with was on the eve of earning his degree, just a few short months away. He was explaining to me the idea he would continue working on after graduation as a full-fledged startup. He said he had been working on the business plan for his entire time in grad school - over a year and a half. I nearly choked on my coffee.

You should not be working on a single business plan for more than month. Even that is probably a huge amount of overkill. Make it a week. That's much more reasonable. I think you could even do it in a business week of five days. Here's my proposed schedule, which you could accomplish with even minimal part-time hours:

• Day 1: your idea. Flesh it out a little. Consider the scope. For the first version only include what is absolutely necessary to create a minimum viable product. Mark any other features as a later version, and then forget about them.
• Day 2: your market. Does it exist? Roughly how big is it? You don't need exact numbers or tons of research. Estimating will save you a lot of time.
• Day 3: your competition. Does it exist? As a rule, if you are searching Google for more than an hour and haven't found anything, then your competition effectively does not exist - even if they technically do - because they cannot be easily found in the place most people will look. But if they do show up in the results, roughly how entrenched are they and how popular is their product? Again, estimate.
• Day 4: your required resources. This could be as little as a timeline and basic dollar amounts. How long will it take to develop and market this product? How much capital do you need up front? Do I need to say it? Estimate.
• Day 5: review. And by review, I mean cut. Get rid of all the fluff and tangents that were built up even given this small amount of work you've already put in. Have a competitor on the list who is only rumored to be branching into the same market? Cut it. Have a feature that'd be nice to have, but not a core requirement? Cut it.

Really, only the first day is required to move forward. The other days will just give you more data to help make the only decision that matters: do you want to make this idea a reality? If the answer is still a hearty "yes," then please continue.

Paper Prototyping: No Code Required

You need to get feedback early and often. Iterating on an idea is the single best way to make it better by exposing both weaknesses and strengths. It allows you to fix problems and exploit opportunities. (I know you're good at those.) And you can do it without writing a single line of code or even consulting an engineer. This process is called paper prototyping.

Step into the role of designer for a moment. Take a look at the number you wrote down as the cost for implementing this idea. Now replace it with a zero, because you can create a low-fidelity version of your product for nearly that. With just a few elementary school supplies you can mock up the interface for your product with paper, crayons, glue, and markers. Jakob Nielson explains the virtues of paper prototyping and A List Apart has examples to go along with their recommendations. These resources should be sufficient to give you a pretty good idea what paper prototyping is about.

Once you have a paper prototype you can easily show it to friends or family - or even a friendly stranger at the local coffee shop - and see how they interact with it. Ask them to think out loud and explain what they're doing, what they want. Give them a simple goal in the form of a story, like "you want to buy a new dishwasher from this site" and then show them a "page" that represents the index of the site. When they "click" on a link with their finger, switch the page out with the appropriate one. This method can easily be adapted for software beyond websites, and even hardware products.

You'll be amazed at the feedback you receive. You'll realize that even your paper prototype could be improved. So improve it! Then return with the new version to get more feedback. Most people love being involved in the design process, and will be happy to help. You will immediately see huge gaping flaws in your thinking about this product, and you'll have a clearer idea what the best direction for it is. Given this information, you are now much better prepared to bring this idea to investors or an engineer. And it didn't cost you much time or money.

Kill Your Darlings

Occasionally though, you will encounter a part of your idea that needs to be removed, but you desperately want to keep. Learning to recognize these situations and act on them is a really hard part of the process, but it will make you a stronger leader for being able to do it. This is sometimes referred to as the ability to "Kill Your Darlings" and Adaptive Path has a post about just that.

Learn to Code

If you have an idea that has survived your own scrutiny and that of others, then maybe it's time to create a more high fidelity version. Often a mockup on the computer is effective, and it still doesn't have to be fully functional for you to be able to talk about it with others in a meaningful way. Services like Balsamiq help you do just that.

Beyond continuing to prototype, there is no reason why you can't learn to code in your free time. If your ideas are so good that you think an investor should give you money for them, then why not try bootstrapping instead to keep a larger share of the company for yourself? At the very least, you could create a demo or early working prototype to put yourself in a better position at the bargaining table.

Modern scripting languages like Python are exalted for their simplicity and ease of use. There is even a really good free book for beginners available. If you want to go the Ruby route, then you can even go through an interactive tutorial right in your browser.

Finally, if that seems like too much, then consider just making a few pages that link to each other in HTML. This is very simple, and can be accomplished with a few lines of text in a few files on your computer - no server or backend required. I was doing this by the time I turned ten years old, so I am absolutely certain you are capable of figuring it out.

Engineers Are Not Code Monkeys

If you do decide to enlist the help of an engineer, then understand that they do not exist simply to do your bidding. Believe it or not, engineers often have a slew of their own ideas, and don't need yours. Your time is not more valuable than theirs. In high demand industries and geographies (e.g. web development in the Bay Area) engineers are highly sought after and have a lot of opportunities to do exciting things. Understand that you are competing for their attention, and respect them.

Most engineers are not willing to work for free, even with the promise of future rewards. You will have to give up either money or control. Lets talk about the money first. If all you want is a functional product and you aren't trying to build up a team, then there are sites to help you find someone to do it for a set amount, like Elance. Or if you want design work done, then use a site like 99 Designs.

However, if you want a technical partner, co-founder, CTO, etc. then you must be willing to sacrifice up to 50% of your share to an equal. For potential full-time employees doing hard, thinking work, money is not a good motivator. Having control and influence over a product is. Dan Pink talks at length about this in his amazing TED talk on motivation.

Finally, my self-plug is merely this: if you do have an idea for a product that you want built quickly by a professional, then feel free to contact me.

I hope this post helps you create better products, faster. Remember that you don't need a million dollars to put an idea in front of a member of your market. You just need some paper.

The State of Advertising on the Mobile Webosphere

As a publisher of multiple websites, I like to adhere to the Don't Repeat Yourself principle (known as DRY). One of the trickiest parts of supporting DRY as the mobile web expands is serving the same content to both regular browsers and all mobile devices. Luckily, frameworks like jQuery Mobile are making it easier as time goes on.

But when it comes to ad serving, the current state of the mobile web is a mess. If you're viewing a mobile ad from a regular browser, it might not show. If you're serving a mobile browser ad to an app, you might be violating some obscure terms of service you never bothered to read. The advertising giants on the internet today want every website to have a different ad code for every possible situation: one for regular browsers, one for certain kinds of phones, and one for every app platform out there. When you start totaling the number of ad codes that you're expected to juggle, it looks atrocious. In short, every website is expected to re-invent the wheel and develop their own serving logic to determine when each individual ad code is shown.

Why are the advertisers making it hard on publishers instead of just giving out one code and handling the logic themselves? I honestly don't know. Each one of their unique ad codes is probably a compartmentalized project within their behemoth infrastructures, unaware of what others are doing. It's stupid to think that every website out there that wants to put an ad on the same page that is served to a desktop browser, a mobile browser, an iPhone app, and an Android app must manage four separate ad codes. And if you want to start including tablets like the iPad or other app platforms like Windows Phone, Palm, and BlackBerry, then that number just grows.

That's One Sweet Inefficiency

I decided to do something about it myself. I made a web app that takes in your different ad codes and it gives you only a single code in return (with the caveat that it's launching right now with limited support: only AdSense and AdMob are currently accepted). It's called Driads, which was an available domain that sounds like the combination of "DRY" and "ads" along with some mythical connotations. When you put the one Driads code into a web page and a user visits your site, it will automatically detect the difference between a regular browser and a mobile browser, and show the appropriate code. Like any system, it's not perfect, but I think it's a good start towards simplifying ad codes for mobile publishers.

Your Ad Serving Wish List

Driads also supports some pretty neat features that a lot of regular ad codes don't give you. Again, why the big advertisers haven't invested a little of your hard earned money into making these useful, but altogether simple concepts available is beyond me. By appending a few parameters to the query string, you can achieve these desired results:

• "&test;=1" activates test mode, which bypasses security checks on the server and displays informative messages about the requesting environment instead of inflating impression counts - very useful for development or staging.
• "&app;=1" forces the requesting mobile environment to be treated as an app instead of a regular browser. In iOS, differentiating between the two is trivial, and Driads handles it automatically. But other platforms like Android can make it impossible to tell between the two, and this let's you take control if necessary.

But My Page Is Inserted via a Dynamic, Asynchronous, AJAX, XML-RPC, JSON Protocol!

The single most important feature from my perspective is setting an ad space to "asynchronous mode." This allows ad codes to be inserted into a page after it has finished loading, via AJAX or a similar method. This is absolutely pivotal to getting ads to even show up on sites that use mobile frameworks like jQuery Mobile or any kind of client-side navigation. It also allows for the possibility of the ads being "refreshed" at a later time if the user loads in a new "page" but doesn't perform an action that actually changes the URL.

All That and More for No Cost

So check out Driads and let me know what you think. And if there's a specific ad code or feature you want support for, don't hesitate to ask. It's a totally free service for now. Of course, if it starts costing me a ton of money to maintain, I'll have to recoup costs. But as it stands, I made Driads because I need it, and I hope others will find it useful as well.

Waiting is a situation we find ourselves in almost every day. It's a uniquely human phenomenon. Waiting for a bus, a haircut, a doctor's appointment - these are all places where we might find ourselves without having anticipated the need to bring along something with which to kill the time, such as a book or an e-book reader like the Kindle or Nook. Luckily our phones are always within arms reach nowadays. But if I'm all caught up on news and social networks, then what more is there to do with just a phone? Molibra is one answer to that question. It lets you read books on any mobile device for free.

Molibra has a huge database of works in the public domain, meaning that most books you would consider "classics" are available. There are also full browse and search mechanisms to help you find authors, books, and tags, which are like categories.

Molibra automatically keeps track of your reading progress per-book, and even supports swiping gestures for flipping pages naturally. I'm continuing to update the site, bringing in more books and improving the experience as time goes on.

So check out Molibra today! And be sure to let me know what you think.

My newest project just launched today. It's a site called Staxup, which automatically compares products by seeing how they "stack up" against each other online. As the official description puts it:

Staxup turns praises and complaints from around the web into visual product comparisons.

If you're in the market for a digital camera, your next road bike, a limited-edition watch, or almost any other product you could buy online, then you can create a custom comparison to see how one option compares to another.

Staxup is totally free, and you don't even need an account. To give you an idea of how the site is already being used, you can also see the comparisons other users have already created.

Staxup still has a lot of room for growth - including support for things that you can't buy - but for now I'm confident that it's a useful tool for anyone shopping online. So tell your friends about it, and let me know what you think!

We all have busy lives. I'm sure you can appreciate that the last thing I planned on doing today was to write a blog post about net neutrality. But now some parts of the ongoing public debate are getting ridiculous. It's time I entered the fray.

To get the basics out of the way: yes, I'm definitely for net neutrality, but I also think how it happens is important. To start talking about it, let's define the different aspects of net neutrality. I believe that there are two separate issues at stake:

1. That traffic of all types be considered equal.
2. That traffic from all sources be considered equal.

Equality of Types of Traffic

The first issue is a more pedantic, technological one. Should SSH be prioritized above all other types of traffic? Is it ok for networks to throttle bittorrent? This sort of packet shaping already happens. If you don't believe that, you're in denial.

The internet works pretty well as it is. The danger comes if an ISP like Comcast decides that one kind of traffic is evil and stops it from being sent over their wires. Can ISPs legally do something like that right now? Yes, it is within their power. Should they be allowed to? Well, that's where the "how" comes in. I don't think they should be allowed to ever totally eliminate traffic of any kind, but good prioritizing does have its visible benefits to the end user. Am I worried that this will be abused given the current law? No, not really. And finally, does this issue matter as much as the second one? Absolutely not.

Equality of Traffic Sources

Traffic from all sources should be considered equal. To me, the First Amendment of the Constitution guarantees the right to free speech, and that right would be severely violated by blocking - or making inconvenient - access to any source of traffic on the internet.

Without net neutrality, Comcast or AT&T; or Verizon can decide that for $50 a month you can visit Google, Yahoo, and Bing. But to access the results from those search engines, you have to pay $1 for every link you click on. Doing that would be totally legal right now. And it would destroy our economy: ads on content networks, startups, venture capital, and every small business with a website would suffer. If you hold any stock in an online company that doesn't happen to be one of the top 100 visited sites in the U.S., the price of your shares would plummet.

Supporting net neutrality is therefore the only fiscally responsible position to ensure the continued growth of new online ventures and small businesses.

On the Tea Party

The Tea Party just said that opposing net neutrality guarantees free speech for the ISPs - those handful of corporations we get internet access from. What they don't understand, and belies their utter ignorance of the issue, is that even though those companies would be in a better position to make more money without net neutrality, they would also be able to censor anyone with an independent voice. And isn't that what the Tea Party wants? The people, being heard? This makes it sound like they want to sacrifice the many people for the few corporations. I call that stupid and reckless.

On What Actual Experts Say

People like Lawrence Lessig, who know internet culture, technology, and law better than anyone, support net neutrality. And people like him are in the best position to make a decision about it. Here's part of what he had to say:

Net neutrality means simply that all like Internet content must be treated alike and move at the same speed over the network. The owners of the Internet's wires cannot discriminate. This is the simple but brilliant "end-to-end" design of the Internet that has made it such a powerful force for economic and social good: All of the intelligence and control is held by producers and users, not the networks that connect them.

On Google and Verizon's Joint Press Release

In a recent press release, Google backed down from its old position of supporting net neutrality unequivocally to one where net neutrality is good for broadband internet, but somehow not wireless. I think Google really messed this one up. It directly violates the "Don't Be Evil" mantra they're always throwing around. And even though I know a lot of people within the company, I can't seem to find a single one who knows exactly who made this decision or why.

In general, I agree with the EFF's reaction:

It carves out exemptions from neutrality requirements for so-called "unlawful" content, for wireless services, and for very vaguely-defined "additional online services." The definition of "reasonable network management" is also problematically vague. As many, many, many have already pointed out, these exemptions threaten to completely undermine the stated goal of neutrality.

A Personal Matter

At the end of the day, the reason I'm so passionate about this - and why net neutrality is so important - is that if the future internet charges for access on a per site basis, then anyone who tries to start a business like me is screwed. You'd have to find millions of dollars to put into marketing in order to get known or get on the exclusive lists of pre-approved sites. The next Google, the next Facebook, or the next Twitter would never be able to happen. We'd be stuck with only the slow, lumbering giants we have now.

If you oppose net neutrality, then not only are you contributing to what could be an economic and a social disaster for the entire planet, you're also putting me out of a job.

So to help people like me keep our jobs, and keep the whole internet stay free, listen to U.S. Senator Al Franken and sign the petition in favor of net neutrality.

After wrapping up the final details on the Facebook game I talked about in my previous post, I decided to do something even more ambitious: a totally new, Facebook game from scratch made by myself, in a one-week sprint where I focused on nothing else.

It may sound a little crazy, but I managed to pull it off, and I released it and blogged about it under the Zen Otter name. You can read all about it in excruciating detail with the whole nine post series on the Zen Otter site.

Since its release I've updated the game several times, continuing to try to make it better, but unless it gets a serious user base, it's essentially staying as it is. It was a fun experiment in rapid prototyping, coding skills, game design, and user testing, but I don't expect to retire off it.

The game is called Battlefriends. And it's as epic as it sounds. You can find out by playing it now.