How I Brought Adam Carolla’s “Dude Maintain” App to Life in About Six Hours

Update: Huge thanks to Adam for sharing this post on Twitter!

Those of you who know me personally know I’ve been a big fan of Adam Carolla (and his broadcast buddy Dr. Drew) since the early Loveline days when I’d tune in on the hour drive back from tech school or work every night. So when my wife texted after her commute last week and said, “Adam has a hilarious idea for an app you should totally make,” I was all ears.

In an episode of The Adam & Dr. Drew Show, Adam and his fill-in host, Adam Ray, discussed preventing drunken mistakes like getting tattoos of your nieces’ names and punching a police horse. While the hosts agreed that a good friend will generally kick your ass before you can do the deed, there should also be an app for that. Adam described an app called “Dude, Maintain” that you could open during times of weakness, simply to hear him yell “DUDE! MAINTAIN!”

I created just that. Check out the demo video below, then I’ll show you how I created it in one night.

For fun I tweeted this over to the Carolla crew and even tried to find a good e-mail, thinking if they wanted to use it to promote the network, they could have it. So far I haven’t heard anything, but I’m holding out some hope!

Super Fast Cross-Platform App Development

atom

 

As a freelance app developer, I’ve deployed multiple apps, updates, and fixes to the iOS and Android stores and I’m here to tell you: the process looks virtually brand new every. single. time. Forums and tutorial sites make a fortune trying to show developers the way as the targets move and the game constantly changes. Let alone the countless screen sizes and devices you need to support. How the hell is anyone supposed to keep up? Here’s how I survive: by using as little of their native technology as possible.

I learned Objective-C and Apple virtually abandoned it, first in favor of storyboarding, then in favor of Swift. Meanwhile Android’s development workflow has barely changed at all, and that’s an even bigger problem. I built this app like a web page using HTML, JavaScript, and CSS, tested it in my browser, then built and deployed to mobile devices using Apache Cordova. It couldn’t have been much simpler.

Note: This app is just for fun (so far) and is not downloadable anywhere. I won’t be discussing actual app submission here.

Design

I love a well-defined product; that made this project a home run. Adam wanted an app you could basically just open and hear a sound effect. No problem. To make things interesting I would add a button the user could press to hear several “DUDE MAINTAIN” lines from the show. This would be a one-page app, so navigation, organization, and several other routine considerations went straight out the window. Perfect. Audio clips just needed to be cut out of the podcast, and I dreamed up sort of a DANGER sign visual design, figuring I could make use of plenty of the show’s own promotional graphics to fill things out. Simple as that.

Development

Audio

Although the audio was already out there, I did need to trim it down and get it organized. I downloaded the mp3 from the site, and exported each individual clip by getting good selections on them in Audacity, then using the Export Selected feature.

audacity

A good example of an unforeseen project issue was that the podcast goes out as one mixed-down audio track (which I expected) but about half of the “DUDE MAINTAIN” lines were stepped on a bit by the other host’s laughter. Both Adams did this. If the podcast network was my real client, I’d ask for the individual audio tracks from the show to get clean sounds.

Graphics

Even though I was designing this app like a webpage, web design best practices can all go out the window. Text can be in an image instead of HTML, buttons can look like whatever you want, and any font you can imagine is fair game.

Still, my needs were pretty simple. I created text images for the sign banner title and the button (and the button’s pressed state when it turns red). To include virtual Adam I used GIMP to cut him out of the Adam and Dr. Drew Show logo, rotated him to a fully vertical position, then actually had to cut out and mirror his right arm so he could have a left one. It was like cartoon surgery, and it was a complete success.

cartoonSurgery

One of the most painful roadblocks before the finish line was providing correctly-sized iOS app icons and launch screens in Xcode, which uses yet another brand new system and I’m sure almost no one is using their recommended method for creating them. I certainly didn’t.

Code

One of the most interesting things about this development technique is that one good, responsive design will fit virtually all screens the app will appear on. I created a pretty basic web page–actually I slapped in the Bootstrap template page–and filled in my very few design elements. Keeping everything center-aligned made for smooth sailing. The page is basically a big div with a large border, the inside is a three-row table: a row for the banner, a row for virtual Adam, and a row for the button. You can’t resize an app, but seeing it effortlessly resize in a web-browser during testing is a pleasure.

While the audio plays with the help of the HTML5 media player, JavaScript makes all the magic. The player loads with the page, but JavaScript determines which sound is up next, then loads and plays it with each button press (plus the initial play when the page loads). If you’re a code junkie, that looks like this:

var audio = document.getElementById('player');
var source = document.getElementById('mp3Source');
var sounds = [
  'assets/DudeMaintain1.mp3',
  'assets/DudeMaintain2.mp3',
  'assets/DudeMaintain3.mp3',
  'assets/DudeMaintain4.mp3',
  'assets/DudeMaintain5.mp3',
  'assets/DudeMaintain6.mp3',
  'assets/DudeMaintain7.mp3',
];
var count = 0;

function playSound(){
  source.src = sounds[count]; //
  audio.load();
  audio.play();
  if(count == 6){
    count = 0;
  }else{
    count = count + 1;
  }
}

Deployment

Once you’re pleased with your page(s), turning a web page into an app is some kind of absolute magic done by Apache Cordova. I’m not going to try to explain the process better than their guide does. I’m just here to tell you that, once you do it, the resulting Xcode, Android, and other platform projects will load up and run without any trouble at all, which is really surprising every time.

If you find yourself wanting to create an iPhone app and test it without being a paid member of their developer program, that is also now possible using this other guide.

Suddenly, the app is finished and running on my phone. My son loves to play with it and it helps him to hear to “MAINTAIN” once in a while from someone other than me. If you’re also a fan or you enjoyed reading this, share it around. Maybe we can get some feedback from Ace himself!

Todd Mitchell on FacebookTodd Mitchell on GoogleTodd Mitchell on TwitterTodd Mitchell on Youtube
Todd Mitchell
Blogger-in-Chief at Code Write Play
Todd Mitchell is an independent game developer and industry commentator. He is the founder of CodeWritePlay and owner of Artistry Master Systems, Inc. Follow him @Mechatodzilla.

Todd Mitchell

Todd Mitchell is an independent game developer and industry commentator. He is the founder of CodeWritePlay and owner of Artistry Master Systems, Inc. Follow him @Mechatodzilla.

2 Comments

    • It’s not up for download at the moment. I’m looking at the possibility of putting the project on GitHub per a request on Reddit. I wouldn’t try to submit it without some kind of official word and I’m not really expecting that. GH would at least let some folks side load it or dig around the code if they like. I guess for updates on that you could either subscribe here via email or follow me @mechatodzilla.

Leave a Reply

Your email address will not be published. Required fields are marked *