Category Archives: Mobile

Rethinking Recipes

My current work focuses on creating software that improves the home cooking experience. Over the past two years, I’ve worked with food writer Michael Ruhlman, and together we’ve started simple and small and released two products. First was Ratio, a digital companion to his book Ratio: The Simple Codes Behind the Craft of Everyday Cooking. The second, released earlier this year, was Bread Baking Basics, an iPad app that lets you design your own bread recipe — choose a flour, shape, pan, and quantity — and a custom bread recipe is automatically created for you.

What sets the Bread app apart from most other cooking apps is that we’ve used technology to re-think the notion of a recipe.

Most recipes are static lists of ingredients and instructions. They can help you make one really yummy dish, but that’s it. If you want to double a recipe, you have to do the math yourself. If you have to make a substitution then you have to find that information elsewhere and incorporate it yourself. And if you’re trying to make dinner from three separate recipes, good luck trying to organize all those steps into one coherent plan of action.

I would never expect a cookbook on my shelf to do any of those things for me. But an iPad? A laptop? A smartphone? Oh, yes. I want it to double quantities and make substitutions based on my dietary needs. I want it to merge three different recipes into one step-by-step plan. I want it to recommend new dishes based on what I like. I want it to plan out my meals for the week using only things on sale and in season. I want every recipe to have a button that says “Buy ingredients from local farms,” and then have it suggest more recipes based on the leftovers. I want it to show me a three course meal that my friends would love and then give me the option to invite them over.

Okay, so Bread Baking Basics doesn’t exactly do all of those things… yet. Those features could be built, but to that I need data. Data about food prices. Data about inventory from local farms. Data about delivery times. Data about food products and their ingredients. Data about expiration dates.

But once that data can be brought into our software, then there’s no longer a need to hack the existing food system. Instead, we will have just created a new one. A new food system that uses data and technology to allow farmers and individuals to buy directly, and will be rooted in products that put the consumer first and make it insanely easy to cook and eat local, sustainable or organic foods.

Accomplishing this will be hard. Very hard. Farm work hard. But not impossible.

Who’s up for it?

This post originally appeared on FoodAndTechConnect.com

Bread Baking Basics for iPad

It’s been quiet here cause I’ve had my head down in numerous projects, but I am extremely proud today to announce Bread Baking Basics for iPad. Get it for only $1.99 at the iTunes AppStore.

Bread Baking Basics is a tool and kitchen companion that allows you to custom configure your own bread recipes. Choose the type of flour, the shape of bread, and the amount of bread you want to make, and the app creates a custom tailored recipe to suit your needs — including full size color photographs depicting each step of the process. English or metric? Weight or volume? By hand or with a mixer? Who cares, we support all of these options.

If you want to read more about the details of the app, then check out the official Bread Baking Basics page on Michael Ruhlman’s site.

Bread Baking Basics screenshotBread Baking Basics

Stop Talking, Start Making

I’ve proposed a talk for SXSW Interactive next March called “Stop Talking, Start Making,” and I would love it you could visit the SXSW PanelPicker and vote for my presentation (along with all the other sessions that interest you). SXSW is unique from other conferences in that the popular vote heavily influences their selection, so your voice definitely counts!

“Stop Talking, Start Making” is about the importance of rolling up your sleeves very early in the creative process, and spending 24 hours getting your hands dirty building something. You can’t just sketch something out or put together a few slides in a PowerPoint presentation, you’ve got to build and demonstrate a working product.

In the tech world, this approach isn’t new. For years, it’s happened at BarCamps and hackathons, and the ethos is a central part in many hacker labs, co-working spaces, and publications.

But this presentation isn’t for developers — it’s for creative types, marketers and brand owners. You’ll learn ways you can incorporate the hackathon model into your creative development process—to rethink a brand, quickly build ideas from scratch, and to incorporate new and emerging technologies into an existing brand.

You’ll also learn how the hackathon can be an invaluable tool for evaluating and nurturing internal talent, as well as for recruiting new talent.

Most importantly, it will be fun and entertaining. I promise.

MTA MetroCard Calculator – 30 minute project

Last night I attended the In Code We Trust meetup at Eyebeam, which was an excellent gathering of people talking about what they’re currently doing in the Gov 2.0 space.

One of the speakers was Sarah Kaufman from the MTA, highlighting the hard work they’re doing right now to help bring MTA information and data to the developer community. Check out the MTA data sets currently available including the new GIS information about subway entrances and exits.

Sarah’s talk reminded me of something I’ve been wanting to do for a long time — create a simple calculator to figure out how much money to put on a MetroCard. The MTA vending machines make it easy to put an exact dollar amount on a card, but it doesn’t make it easy to figure out how to add 4 rides or 8 rides to a card. It’s not a hard problem, so I took 30 minutes last night and made a simple web page that figures this out for you. It should work on iPhone and Android, so check it out.

http://bit.ly/mtacalc

http://bit.ly/mtacalc

Finally, I should add that I made this in 30 minutes, so it’s probably got bugs, but who cares? It’s usable. It’s a released product. It’s more important to get something out there and get feedback than to linger in development forever trying to make it “perfect”. Let me know what you think.

Displaying mobile only content with MobilePress

I’ve been using MobilePress for a while now on my blog. It’s a quick, easy way to make your WordPress blog friendly for all those crazy smartphones out there like iPhone, Android, Nokia, Palm Pre, etc. etc. You just add the plugin to your WordPress install, activate it, and you’re set.

My only issue with the plugin is that it doesn’t support alternate content for mobile devices. Sure you can post the same text in both places, but it doesn’t always work that way for things like very large images or YouTube embeds. Often you’ll want the desktop version to have the very large image, but the mobile version to have a small thumbnail. Likewise with videos you’ll want your desktop site to have the full video embed, but the mobile site to have a link to the 3GP version of your video. To solve this, I quickly wrote an extension to MobilePress that allows you to accomplish this using WordPress shortcodes. Here’s the result.

[mobile]

You’re on the mobile site!
see non-mobile version

video
[/mobile]

[nonmobile]

You’re on the non-mobile site!
see mobile version


[/nonmobile]

If you’re on the mobile site, you should only have seen a small thumbnail linking to a mobile version of the video. But if you’re on the normal version of the site, you’ll get the full video embed.

So how did that work exactly? In the post itself, place [mobile] at the beginning and [/mobile] at the end of any text you want to appear only on the mobile site. Likewise, for content that you don’t want to appear on the mobile site, you place [nonmobile] at the beginning and [/nonmobile] at the end of any text. For this post, here’s what the text looked like.

[mobile]
<h1>You're on the mobile site!</h1>
<a href="rtsp://rtsp-youtube.l.google.com/CkYLENy73wIaPQk4TalGJzJtDRMYDSANFEIJbXYtZ29vZ2xlSARSBXdhdGNoWg5DbGlja1RodW1ibmFpbGCLjNC-9__5m0oM/0/0/0/30/video.3gp">
<img src="http://i.ytimg.com/vi/DW0yJ0apTTg/default.jpg?w=160&h=120&sigh=uxtjuGf9Vjatje_YL3m1JSn0mMY" alt="video" width="160" height="120" style="border:2;margin:0px;" />
</a>
[/mobile]

[nonmobile]
<h1>You're on the non-mobile site!</h1>
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/DW0yJ0apTTg&hl=en&fs=1&rel=0"&rt;</param&rt;
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/DW0yJ0apTTg&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>
[/nonmobile]

Pretty easy, eh? Here’s the source code for the plugin.


function mobilecontent_func($atts, $content = null) {
	if ($_SESSION['SESS_MOBILE_ACTIVE'] === TRUE) {
		return $content;
	} else {
		return "";
	}
}

function nonmobilecontent_func($atts, $content = null) {
	if ($_SESSION['SESS_MOBILE_ACTIVE'] === TRUE) {
		return "";
	} else {
		return $content;
	}
}

add_shortcode('mobile', 'mobilecontent_func');
add_shortcode('nonmobile', 'nonmobilecontent_func');

That’s all there is to it. Each of these functions just checks for the existence of a session variable telling whether or not you are using the mobile version of MobilePress (the cookie management is handled entirely by MobilePress). Based on the session cookie, it either returns the text itself, or it returns an empty string.

I’ve only spent a few minutes writing the plug in, so I am curious if others would find this useful or if there are any obvious bugs or enhancements people notice.

You can download this MobilePress extension here, and let me know what you think.